From 515bd8a376cf1b870bf4a98ae3ba00b904a638d7 Mon Sep 17 00:00:00 2001 From: scruffian Date: Thu, 5 Oct 2023 13:33:37 +0100 Subject: [PATCH 1/2] rebase fixes on hooks (+2 squashed commits) Squashed commits: [7bc5ee8707] template-panel/index rebase [4d47f77146] Make titles tooltips (+8 squashed commits) Squashed commits: [3488f2f164] Layout tweaks [f450cd5a91] remove CSS [b3990a7119] remove unused file [3bd79a7515] update comment [e07cd80b74] Add comments [aaae875b5a] Let users select a pattern [4aa4272d2e] fetch patterns not template parts [3f3da4b3df] Add template parts to template parts (whoops) --- .../sidebar-edit-mode/template-panel/hooks.js | 59 +++++++----- .../sidebar-edit-mode/template-panel/index.js | 86 ++++++++++++++---- .../template-panel/replace-template-button.js | 89 ------------------- .../template-panel/style.scss | 19 ++-- .../template-panel/template-actions.js | 13 +-- 5 files changed, 110 insertions(+), 156 deletions(-) delete mode 100644 packages/edit-site/src/components/sidebar-edit-mode/template-panel/replace-template-button.js diff --git a/packages/edit-site/src/components/sidebar-edit-mode/template-panel/hooks.js b/packages/edit-site/src/components/sidebar-edit-mode/template-panel/hooks.js index 87f99e8991e45e..73304a4d9b6991 100644 --- a/packages/edit-site/src/components/sidebar-edit-mode/template-panel/hooks.js +++ b/packages/edit-site/src/components/sidebar-edit-mode/template-panel/hooks.js @@ -36,7 +36,14 @@ function injectThemeAttributeInBlockTemplateContent( return block; } -function preparePatterns( patterns, template, currentThemeStylesheet ) { +/** + * Filter all patterns and return only the ones that are compatible with the current template. + * + * @param {Array} patterns An array of patterns. + * @param {Object} template The current template. + * @return {Array} Array of patterns that are compatible with the current template. + */ +function filterPatterns( patterns, template ) { // Filter out duplicates. const filterOutDuplicatesByName = ( currentItem, index, items ) => index === items.findIndex( ( item ) => currentItem.name === item.name ); @@ -45,30 +52,33 @@ function preparePatterns( patterns, template, currentThemeStylesheet ) { const filterOutExcludedPatternSources = ( pattern ) => ! EXCLUDED_PATTERN_SOURCES.includes( pattern.source ); - // Filter only the patterns that are compatible with the current template. + // Looks for patterns that have the same template type as the current template, + // or have a block type that matches the current template area. const filterCompatiblePatterns = ( pattern ) => - pattern.templateTypes?.includes( template.slug ); + pattern.templateTypes?.includes( template.slug ) || + pattern.blockTypes?.includes( 'core/template-part/' + template.area ); - return patterns - .filter( - ( pattern, index, items ) => - filterOutExcludedPatternSources( pattern ) && - filterOutDuplicatesByName( pattern, index, items ) && - filterCompatiblePatterns( pattern ) - ) - .map( ( pattern ) => ( { - ...pattern, - keywords: pattern.keywords || [], - type: PATTERN_TYPES.theme, - blocks: parse( pattern.content, { - __unstableSkipMigrationLogs: true, - } ).map( ( block ) => - injectThemeAttributeInBlockTemplateContent( - block, - currentThemeStylesheet - ) - ), - } ) ); + return patterns.filter( + filterOutDuplicatesByName && + filterOutExcludedPatternSources && + filterCompatiblePatterns + ); +} + +function preparePatterns( patterns, template, currentThemeStylesheet ) { + return patterns.map( ( pattern ) => ( { + ...pattern, + keywords: pattern.keywords || [], + type: PATTERN_TYPES.theme, + blocks: parse( pattern.content, { + __unstableSkipMigrationLogs: true, + } ).map( ( block ) => + injectThemeAttributeInBlockTemplateContent( + block, + currentThemeStylesheet + ) + ), + } ) ); } export function useAvailablePatterns( template ) { @@ -92,8 +102,9 @@ export function useAvailablePatterns( template ) { ...( blockPatterns || [] ), ...( restBlockPatterns || [] ), ]; + const filteredPatterns = filterPatterns( mergedPatterns, template ); return preparePatterns( - mergedPatterns, + filteredPatterns, template, currentThemeStylesheet ); diff --git a/packages/edit-site/src/components/sidebar-edit-mode/template-panel/index.js b/packages/edit-site/src/components/sidebar-edit-mode/template-panel/index.js index 21df325ee34c20..7b6a3ad14269a2 100644 --- a/packages/edit-site/src/components/sidebar-edit-mode/template-panel/index.js +++ b/packages/edit-site/src/components/sidebar-edit-mode/template-panel/index.js @@ -1,7 +1,7 @@ /** * WordPress dependencies */ -import { useSelect } from '@wordpress/data'; +import { useSelect, useDispatch } from '@wordpress/data'; import { PanelBody } from '@wordpress/components'; import { PageAttributesPanel, @@ -15,6 +15,10 @@ import { import { store as coreStore } from '@wordpress/core-data'; import { decodeEntities } from '@wordpress/html-entities'; import { navigation, symbol } from '@wordpress/icons'; +import { __ } from '@wordpress/i18n'; +import { useAsyncList } from '@wordpress/compose'; +import { serialize } from '@wordpress/blocks'; +import { __experimentalBlockPatternsList as BlockPatternsList } from '@wordpress/block-editor'; /** * Internal dependencies @@ -23,36 +27,70 @@ import { store as editSiteStore } from '../../../store'; import TemplateActions from './template-actions'; import TemplateAreas from './template-areas'; import SidebarCard from '../sidebar-card'; +import { useAvailablePatterns } from './hooks'; const CARD_ICONS = { wp_block: symbol, wp_navigation: navigation, }; +function TemplatesList( { availableTemplates, onSelect } ) { + const shownTemplates = useAsyncList( availableTemplates ); + if ( ! availableTemplates || availableTemplates?.length < 2 ) { + return null; + } + + return ( + + ); +} + export default function TemplatePanel() { - const { title, description, icon, record } = useSelect( ( select ) => { - const { getEditedPostType, getEditedPostId } = select( editSiteStore ); - const { getEditedEntityRecord } = select( coreStore ); - const { __experimentalGetTemplateInfo: getTemplateInfo } = - select( editorStore ); + const { title, description, icon, record, postType, postId } = useSelect( + ( select ) => { + const { getEditedPostType, getEditedPostId } = + select( editSiteStore ); + const { getEditedEntityRecord } = select( coreStore ); + const { __experimentalGetTemplateInfo: getTemplateInfo } = + select( editorStore ); - const type = getEditedPostType(); - const postId = getEditedPostId(); - const _record = getEditedEntityRecord( 'postType', type, postId ); - const info = getTemplateInfo( _record ); + const type = getEditedPostType(); + const _postId = getEditedPostId(); + const _record = getEditedEntityRecord( 'postType', type, _postId ); + const info = getTemplateInfo( _record ); - return { - title: info.title, - description: info.description, - icon: info.icon, - record: _record, - }; - }, [] ); + return { + title: info.title, + description: info.description, + icon: info.icon, + record: _record, + postType: type, + postId: _postId, + }; + }, + [] + ); + + const availablePatterns = useAvailablePatterns( record ); + const { editEntityRecord } = useDispatch( coreStore ); if ( ! title && ! description ) { return null; } + const onTemplateSelect = async ( selectedTemplate ) => { + await editEntityRecord( 'postType', postType, postId, { + blocks: selectedTemplate.blocks, + content: serialize( selectedTemplate.blocks ), + } ); + }; + return ( <> @@ -65,6 +103,20 @@ export default function TemplatePanel() { > + +

+ { __( + 'Choose a predefined pattern to switch up the look of your template.' // TODO - make this dynamic? + ) } +

+ + diff --git a/packages/edit-site/src/components/sidebar-edit-mode/template-panel/replace-template-button.js b/packages/edit-site/src/components/sidebar-edit-mode/template-panel/replace-template-button.js deleted file mode 100644 index 658aacd331debc..00000000000000 --- a/packages/edit-site/src/components/sidebar-edit-mode/template-panel/replace-template-button.js +++ /dev/null @@ -1,89 +0,0 @@ -/** - * WordPress dependencies - */ -import { useSelect, useDispatch } from '@wordpress/data'; -import { useState } from '@wordpress/element'; -import { __experimentalBlockPatternsList as BlockPatternsList } from '@wordpress/block-editor'; -import { MenuItem, Modal } from '@wordpress/components'; -import { __ } from '@wordpress/i18n'; -import { store as coreStore } from '@wordpress/core-data'; -import { useAsyncList } from '@wordpress/compose'; -import { serialize } from '@wordpress/blocks'; - -/** - * Internal dependencies - */ -import { store as editSiteStore } from '../../../store'; - -export default function ReplaceTemplateButton( { - onClick, - availableTemplates, -} ) { - const { editEntityRecord } = useDispatch( coreStore ); - const [ showModal, setShowModal ] = useState( false ); - const onClose = () => { - setShowModal( false ); - }; - - const { postId, postType } = useSelect( ( select ) => { - return { - postId: select( editSiteStore ).getEditedPostId(), - postType: select( editSiteStore ).getEditedPostType(), - }; - }, [] ); - - const onTemplateSelect = async ( selectedTemplate ) => { - onClose(); // Close the template suggestions modal first. - onClick(); - await editEntityRecord( 'postType', postType, postId, { - blocks: selectedTemplate.blocks, - content: serialize( selectedTemplate.blocks ), - } ); - }; - - if ( ! availableTemplates.length || availableTemplates.length < 1 ) { - return null; - } - - return ( - <> - setShowModal( true ) } - > - { __( 'Replace template' ) } - - - { showModal && ( - -
- -
- - ) } - - ); -} - -function TemplatesList( { availableTemplates, onSelect } ) { - const shownTemplates = useAsyncList( availableTemplates ); - - return ( - - ); -} diff --git a/packages/edit-site/src/components/sidebar-edit-mode/template-panel/style.scss b/packages/edit-site/src/components/sidebar-edit-mode/template-panel/style.scss index f2865195aa5b80..ab1bc3baed5aa0 100644 --- a/packages/edit-site/src/components/sidebar-edit-mode/template-panel/style.scss +++ b/packages/edit-site/src/components/sidebar-edit-mode/template-panel/style.scss @@ -34,20 +34,11 @@ h3.edit-site-template-card__template-areas-title { margin: 0 0 $grid-unit-10; } - -.edit-site-template-panel__replace-template-modal { - z-index: z-index(".edit-site-template-panel__replace-template-modal"); +.edit-site-template-card__templates-list { + margin-top: $grid-unit-20; } -.edit-site-template-panel__replace-template-modal__content { - column-count: 2; - column-gap: $grid-unit-30; - - @include break-medium() { - column-count: 3; - } - - @include break-wide() { - column-count: 4; - } +.edit-site-template-panel .block-editor-block-preview__container { + border-radius: 2px; + box-shadow: none; } diff --git a/packages/edit-site/src/components/sidebar-edit-mode/template-panel/template-actions.js b/packages/edit-site/src/components/sidebar-edit-mode/template-panel/template-actions.js index 81acb244a11863..e4b8d49499949b 100644 --- a/packages/edit-site/src/components/sidebar-edit-mode/template-panel/template-actions.js +++ b/packages/edit-site/src/components/sidebar-edit-mode/template-panel/template-actions.js @@ -11,18 +11,12 @@ import { moreVertical } from '@wordpress/icons'; */ import { store as editSiteStore } from '../../../store'; import isTemplateRevertable from '../../../utils/is-template-revertable'; -import ReplaceTemplateButton from './replace-template-button'; -import { useAvailablePatterns } from './hooks'; export default function Actions( { template } ) { - const availablePatterns = useAvailablePatterns( template ); const { revertTemplate } = useDispatch( editSiteStore ); const isRevertable = isTemplateRevertable( template ); - if ( - ! isRevertable && - ( ! availablePatterns.length || availablePatterns.length < 1 ) - ) { + if ( ! isRevertable ) { return null; } @@ -48,11 +42,6 @@ export default function Actions( { template } ) { { __( 'Clear customizations' ) } ) } - ) } From 06d4c9733ed42de441d2c8578b08be61a4e207f9 Mon Sep 17 00:00:00 2001 From: Jorge Costa Date: Tue, 20 Feb 2024 16:27:55 +0100 Subject: [PATCH 2/2] Make things panel open by default for template parts --- .../sidebar-edit-mode/template-panel/index.js | 23 +++++++++++-------- 1 file changed, 13 insertions(+), 10 deletions(-) diff --git a/packages/edit-site/src/components/sidebar-edit-mode/template-panel/index.js b/packages/edit-site/src/components/sidebar-edit-mode/template-panel/index.js index 7b6a3ad14269a2..9d57995d163305 100644 --- a/packages/edit-site/src/components/sidebar-edit-mode/template-panel/index.js +++ b/packages/edit-site/src/components/sidebar-edit-mode/template-panel/index.js @@ -2,7 +2,7 @@ * WordPress dependencies */ import { useSelect, useDispatch } from '@wordpress/data'; -import { PanelBody } from '@wordpress/components'; +import { PanelBody, PanelRow } from '@wordpress/components'; import { PageAttributesPanel, PostDiscussionPanel, @@ -28,6 +28,7 @@ import TemplateActions from './template-actions'; import TemplateAreas from './template-areas'; import SidebarCard from '../sidebar-card'; import { useAvailablePatterns } from './hooks'; +import { TEMPLATE_PART_POST_TYPE } from '../../../utils/constants'; const CARD_ICONS = { wp_block: symbol, @@ -103,20 +104,22 @@ export default function TemplatePanel() { > - + + +

{ __( 'Choose a predefined pattern to switch up the look of your template.' // TODO - make this dynamic? ) }

- - + +