From 40299b2982388d093aa2215a1923e22a95799108 Mon Sep 17 00:00:00 2001 From: scruffian Date: Tue, 19 Sep 2023 15:56:55 +0100 Subject: [PATCH 01/35] Add a modal to allow template switching --- .../template-panel/replace-template-button.js | 96 +++++++++++++++++++ .../template-panel/template-actions.js | 4 + 2 files changed, 100 insertions(+) create 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/replace-template-button.js b/packages/edit-site/src/components/sidebar-edit-mode/template-panel/replace-template-button.js new file mode 100644 index 00000000000000..3506f07bdbd316 --- /dev/null +++ b/packages/edit-site/src/components/sidebar-edit-mode/template-panel/replace-template-button.js @@ -0,0 +1,96 @@ +/** + * WordPress dependencies + */ +import { useDispatch } from '@wordpress/data'; +import { useMemo, useState, useCallback } from '@wordpress/element'; +import { decodeEntities } from '@wordpress/html-entities'; +import { __experimentalBlockPatternsList as BlockPatternsList } from '@wordpress/block-editor'; +import { MenuItem, Modal } from '@wordpress/components'; +import { __ } from '@wordpress/i18n'; +import { useEntityRecord } from '@wordpress/core-data'; +import { parse } from '@wordpress/blocks'; +import { useAsyncList } from '@wordpress/compose'; + +/** + * Internal dependencies + */ +import { store as editSiteStore } from '../../../store'; +import { + useAvailableTemplates, + useEditedPostContext, +} from '../page-panels/hooks'; + +export default function ReplaceTemplateButton( { onClick } ) { + const [ showModal, setShowModal ] = useState( false ); + const availableTemplates = useAvailableTemplates(); + const onClose = useCallback( () => { + setShowModal( false ); + }, [] ); + + // TODO - this isn't a post, it's a template, so fetch the template entity. + const { postType, postId } = useEditedPostContext(); + const entitiy = useEntityRecord( 'postType', postType, postId ); + const { setPage } = useDispatch( editSiteStore ); + if ( ! availableTemplates?.length ) { + return null; + } + const onTemplateSelect = async ( template ) => { + entitiy.edit( { template: template.name }, { undoIgnore: true } ); + // TODO - work out how to save the template. + await setPage( { + context: { postType, postId }, + } ); + onClose(); // Close the template suggestions modal first. + onClick(); + }; + return ( + <> + setShowModal( true ) } + > + { __( 'Replace template' ) } + + + { showModal && ( + +
+ +
+ + ) } + + ); +} + +function TemplatesList( { onSelect } ) { + const availableTemplates = useAvailableTemplates(); + const templatesAsPatterns = useMemo( + () => + availableTemplates.map( ( template ) => ( { + name: template.slug, + blocks: parse( template.content.raw ), + title: decodeEntities( template.title.rendered ), + id: template.id, + } ) ), + [ availableTemplates ] + ); + const shownTemplates = useAsyncList( templatesAsPatterns ); + + // TODO - make this use a grid layout. + return ( + + ); +} 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 b68cf1ff617579..7e906ab9cc0fa9 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,13 +11,16 @@ import { moreVertical } from '@wordpress/icons'; */ import { store as editSiteStore } from '../../../store'; import isTemplateRevertable from '../../../utils/is-template-revertable'; +import ReplaceTemplateButton from './replace-template-button'; export default function Actions( { template } ) { const { revertTemplate } = useDispatch( editSiteStore ); const isRevertable = isTemplateRevertable( template ); + // TODO - update this condition so that we also show the dropdown when there are other template options. if ( ! isRevertable ) { return null; } + return ( { __( 'Clear customizations' ) } + ) } From d67576ee8978a7a43e34e576e097aae15195fe2f Mon Sep 17 00:00:00 2001 From: scruffian Date: Wed, 20 Sep 2023 12:51:35 +0100 Subject: [PATCH 02/35] fetch template info --- .../template-panel/replace-template-button.js | 41 +++++++++++-------- 1 file changed, 23 insertions(+), 18 deletions(-) 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 index 3506f07bdbd316..ede9ba3ece4875 100644 --- 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 @@ -1,7 +1,7 @@ /** * WordPress dependencies */ -import { useDispatch } from '@wordpress/data'; +import { useSelect } from '@wordpress/data'; import { useMemo, useState, useCallback } from '@wordpress/element'; import { decodeEntities } from '@wordpress/html-entities'; import { __experimentalBlockPatternsList as BlockPatternsList } from '@wordpress/block-editor'; @@ -15,10 +15,7 @@ import { useAsyncList } from '@wordpress/compose'; * Internal dependencies */ import { store as editSiteStore } from '../../../store'; -import { - useAvailableTemplates, - useEditedPostContext, -} from '../page-panels/hooks'; +import { useAvailableTemplates } from '../page-panels/hooks'; export default function ReplaceTemplateButton( { onClick } ) { const [ showModal, setShowModal ] = useState( false ); @@ -27,19 +24,25 @@ export default function ReplaceTemplateButton( { onClick } ) { setShowModal( false ); }, [] ); - // TODO - this isn't a post, it's a template, so fetch the template entity. - const { postType, postId } = useEditedPostContext(); + const { postId, postType } = useSelect( ( select ) => { + return { + postId: select( editSiteStore ).getEditedPostId(), + postType: select( editSiteStore ).getEditedPostType(), + }; + }, [] ); + const entitiy = useEntityRecord( 'postType', postType, postId ); - const { setPage } = useDispatch( editSiteStore ); + + //const { setPage } = useDispatch( editSiteStore ); if ( ! availableTemplates?.length ) { return null; } const onTemplateSelect = async ( template ) => { - entitiy.edit( { template: template.name }, { undoIgnore: true } ); + entitiy.edit( template ); // TODO - work out how to save the template. - await setPage( { - context: { postType, postId }, - } ); + // await setPage( { + // context: { postType, postId }, + // } ); onClose(); // Close the template suggestions modal first. onClick(); }; @@ -74,12 +77,14 @@ function TemplatesList( { onSelect } ) { const availableTemplates = useAvailableTemplates(); const templatesAsPatterns = useMemo( () => - availableTemplates.map( ( template ) => ( { - name: template.slug, - blocks: parse( template.content.raw ), - title: decodeEntities( template.title.rendered ), - id: template.id, - } ) ), + availableTemplates.map( ( template ) => { + return { + name: template.slug, + blocks: parse( template.content.raw ), + title: decodeEntities( template.title.rendered ), + id: template.id, + }; + } ), [ availableTemplates ] ); const shownTemplates = useAsyncList( templatesAsPatterns ); From 49301d536175684674dfa3740af2bef7809d3b30 Mon Sep 17 00:00:00 2001 From: scruffian Date: Thu, 21 Sep 2023 15:48:29 +0100 Subject: [PATCH 03/35] Allow switching to different patterns --- .../sidebar-edit-mode/page-panels/hooks.js | 1 + .../template-panel/replace-template-button.js | 63 ++++++++++++++++--- 2 files changed, 57 insertions(+), 7 deletions(-) diff --git a/packages/edit-site/src/components/sidebar-edit-mode/page-panels/hooks.js b/packages/edit-site/src/components/sidebar-edit-mode/page-panels/hooks.js index 92fad17cd1d3e4..0d98c8b429481c 100644 --- a/packages/edit-site/src/components/sidebar-edit-mode/page-panels/hooks.js +++ b/packages/edit-site/src/components/sidebar-edit-mode/page-panels/hooks.js @@ -48,6 +48,7 @@ export function useAvailableTemplates() { const currentTemplateSlug = useCurrentTemplateSlug(); const isPostsPage = useIsPostsPage(); const templates = useTemplates(); + console.log( 'templates', templates ); return useMemo( () => // The posts page template cannot be changed. 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 index ede9ba3ece4875..138ba8231afb95 100644 --- 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 @@ -10,16 +10,53 @@ import { __ } from '@wordpress/i18n'; import { useEntityRecord } from '@wordpress/core-data'; import { parse } from '@wordpress/blocks'; import { useAsyncList } from '@wordpress/compose'; +import { store as coreStore } from '@wordpress/core-data'; /** * Internal dependencies */ import { store as editSiteStore } from '../../../store'; import { useAvailableTemplates } from '../page-panels/hooks'; +import { unlock } from '../../../lock-unlock'; +import { PATTERN_CORE_SOURCES, PATTERN_TYPES } from '../../../utils/constants'; + +// This is duplicated. +const filterOutDuplicatesByName = ( currentItem, index, items ) => + index === items.findIndex( ( item ) => currentItem.name === item.name ); + +const selectAvailablePatterns = ( select ) => { + const { getSettings } = unlock( select( editSiteStore ) ); + const settings = getSettings(); + const blockPatterns = + settings.__experimentalAdditionalBlockPatterns ?? + settings.__experimentalBlockPatterns; + + const restBlockPatterns = select( coreStore ).getBlockPatterns(); + + const patterns = [ + ...( blockPatterns || [] ), + ...( restBlockPatterns || [] ), + ] + .filter( + ( pattern ) => ! PATTERN_CORE_SOURCES.includes( pattern.source ) + ) + .filter( filterOutDuplicatesByName ) + .filter( ( pattern ) => pattern.templateTypes?.includes( 'home' ) ) + .map( ( pattern ) => ( { + ...pattern, + keywords: pattern.keywords || [], + type: PATTERN_TYPES.theme, + blocks: parse( pattern.content, { + __unstableSkipMigrationLogs: true, + } ), + } ) ); + + return patterns; +}; export default function ReplaceTemplateButton( { onClick } ) { const [ showModal, setShowModal ] = useState( false ); - const availableTemplates = useAvailableTemplates(); + //const availableTemplates = useAvailableTemplates(); const onClose = useCallback( () => { setShowModal( false ); }, [] ); @@ -31,14 +68,25 @@ export default function ReplaceTemplateButton( { onClick } ) { }; }, [] ); + // Should we also get templates? + + //console.log( selectThemePatterns ); const entitiy = useEntityRecord( 'postType', postType, postId ); + console.log( 'entitiy', entitiy ); + const availableTemplates = useSelect( selectAvailablePatterns ); + console.log( availableTemplates ); //const { setPage } = useDispatch( editSiteStore ); if ( ! availableTemplates?.length ) { return null; } const onTemplateSelect = async ( template ) => { - entitiy.edit( template ); + const templateObjectItself = availableTemplates.find( + ( availableTemplate ) => availableTemplate.name === template.id + ); + console.log( templateObjectItself.content ); + + entitiy.edit( { content: templateObjectItself.content } ); // TODO - work out how to save the template. // await setPage( { // context: { postType, postId }, @@ -74,15 +122,16 @@ export default function ReplaceTemplateButton( { onClick } ) { } function TemplatesList( { onSelect } ) { - const availableTemplates = useAvailableTemplates(); + //const availableTemplates = useAvailableTemplates(); + const availableTemplates = useSelect( selectAvailablePatterns ); const templatesAsPatterns = useMemo( () => availableTemplates.map( ( template ) => { return { - name: template.slug, - blocks: parse( template.content.raw ), - title: decodeEntities( template.title.rendered ), - id: template.id, + name: template.name, + blocks: template.blocks, + title: template.title, + id: template.name, }; } ), [ availableTemplates ] From 5d0c4381bacfaf8a47ecf67fedc86ee0a02f310c Mon Sep 17 00:00:00 2001 From: scruffian Date: Thu, 21 Sep 2023 16:12:34 +0100 Subject: [PATCH 04/35] Allow switching to different patterns --- .../template-panel/replace-template-button.js | 24 ++++++------------- 1 file changed, 7 insertions(+), 17 deletions(-) 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 index 138ba8231afb95..e3d429dd84e22d 100644 --- 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 @@ -1,7 +1,7 @@ /** * WordPress dependencies */ -import { useSelect } from '@wordpress/data'; +import { useSelect, useDispatch } from '@wordpress/data'; import { useMemo, useState, useCallback } from '@wordpress/element'; import { decodeEntities } from '@wordpress/html-entities'; import { __experimentalBlockPatternsList as BlockPatternsList } from '@wordpress/block-editor'; @@ -41,6 +41,7 @@ const selectAvailablePatterns = ( select ) => { ( pattern ) => ! PATTERN_CORE_SOURCES.includes( pattern.source ) ) .filter( filterOutDuplicatesByName ) + // TODO use the correct type. .filter( ( pattern ) => pattern.templateTypes?.includes( 'home' ) ) .map( ( pattern ) => ( { ...pattern, @@ -68,29 +69,17 @@ export default function ReplaceTemplateButton( { onClick } ) { }; }, [] ); - // Should we also get templates? - - //console.log( selectThemePatterns ); const entitiy = useEntityRecord( 'postType', postType, postId ); - console.log( 'entitiy', entitiy ); + // Should we also get templates? const availableTemplates = useSelect( selectAvailablePatterns ); - console.log( availableTemplates ); - //const { setPage } = useDispatch( editSiteStore ); if ( ! availableTemplates?.length ) { return null; } - const onTemplateSelect = async ( template ) => { - const templateObjectItself = availableTemplates.find( - ( availableTemplate ) => availableTemplate.name === template.id - ); - console.log( templateObjectItself.content ); - entitiy.edit( { content: templateObjectItself.content } ); - // TODO - work out how to save the template. - // await setPage( { - // context: { postType, postId }, - // } ); + const onTemplateSelect = async ( template ) => { + entitiy.edit( { content: template.content } ); + // TODO - trigger a reload onClose(); // Close the template suggestions modal first. onClick(); }; @@ -132,6 +121,7 @@ function TemplatesList( { onSelect } ) { blocks: template.blocks, title: template.title, id: template.name, + content: template.content, }; } ), [ availableTemplates ] From 0e5bdaaf8eddee8b387d1eea1df48ec023c5514a Mon Sep 17 00:00:00 2001 From: scruffian Date: Thu, 21 Sep 2023 19:36:10 +0100 Subject: [PATCH 05/35] Add columns --- .../sidebar-edit-mode/template-panel/style.scss | 13 +++++++++++++ 1 file changed, 13 insertions(+) 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 4c8ef94855dcb1..ae855105ee516b 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 @@ -37,3 +37,16 @@ h3.edit-site-template-card__template-areas-title { font-weight: 500; margin: 0 0 $grid-unit-10; } + +.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; + } +} From accc5232d01e7ce08182b03a92a1c4f37682eed9 Mon Sep 17 00:00:00 2001 From: scruffian Date: Thu, 21 Sep 2023 21:35:28 +0100 Subject: [PATCH 06/35] move availble templates to the actions --- .../template-panel/replace-template-button.js | 65 ++++------------ .../template-panel/template-actions.js | 78 +++++++++++++++---- 2 files changed, 76 insertions(+), 67 deletions(-) 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 index e3d429dd84e22d..9e50b8e15f6bc6 100644 --- 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 @@ -1,61 +1,23 @@ /** * WordPress dependencies */ -import { useSelect, useDispatch } from '@wordpress/data'; +import { useSelect } from '@wordpress/data'; import { useMemo, useState, useCallback } from '@wordpress/element'; -import { decodeEntities } from '@wordpress/html-entities'; import { __experimentalBlockPatternsList as BlockPatternsList } from '@wordpress/block-editor'; import { MenuItem, Modal } from '@wordpress/components'; import { __ } from '@wordpress/i18n'; import { useEntityRecord } from '@wordpress/core-data'; -import { parse } from '@wordpress/blocks'; import { useAsyncList } from '@wordpress/compose'; -import { store as coreStore } from '@wordpress/core-data'; /** * Internal dependencies */ import { store as editSiteStore } from '../../../store'; -import { useAvailableTemplates } from '../page-panels/hooks'; -import { unlock } from '../../../lock-unlock'; -import { PATTERN_CORE_SOURCES, PATTERN_TYPES } from '../../../utils/constants'; -// This is duplicated. -const filterOutDuplicatesByName = ( currentItem, index, items ) => - index === items.findIndex( ( item ) => currentItem.name === item.name ); - -const selectAvailablePatterns = ( select ) => { - const { getSettings } = unlock( select( editSiteStore ) ); - const settings = getSettings(); - const blockPatterns = - settings.__experimentalAdditionalBlockPatterns ?? - settings.__experimentalBlockPatterns; - - const restBlockPatterns = select( coreStore ).getBlockPatterns(); - - const patterns = [ - ...( blockPatterns || [] ), - ...( restBlockPatterns || [] ), - ] - .filter( - ( pattern ) => ! PATTERN_CORE_SOURCES.includes( pattern.source ) - ) - .filter( filterOutDuplicatesByName ) - // TODO use the correct type. - .filter( ( pattern ) => pattern.templateTypes?.includes( 'home' ) ) - .map( ( pattern ) => ( { - ...pattern, - keywords: pattern.keywords || [], - type: PATTERN_TYPES.theme, - blocks: parse( pattern.content, { - __unstableSkipMigrationLogs: true, - } ), - } ) ); - - return patterns; -}; - -export default function ReplaceTemplateButton( { onClick } ) { +export default function ReplaceTemplateButton( { + onClick, + availableTemplates, +} ) { const [ showModal, setShowModal ] = useState( false ); //const availableTemplates = useAvailableTemplates(); const onClose = useCallback( () => { @@ -71,15 +33,14 @@ export default function ReplaceTemplateButton( { onClick } ) { const entitiy = useEntityRecord( 'postType', postType, postId ); - // Should we also get templates? - const availableTemplates = useSelect( selectAvailablePatterns ); if ( ! availableTemplates?.length ) { return null; } - const onTemplateSelect = async ( template ) => { - entitiy.edit( { content: template.content } ); + const onTemplateSelect = async ( selectedTemplate ) => { // TODO - trigger a reload + entitiy.edit( { content: selectedTemplate.content } ); + onClose(); // Close the template suggestions modal first. onClick(); }; @@ -102,7 +63,10 @@ export default function ReplaceTemplateButton( { onClick } ) { isFullScreen >
- +
) } @@ -110,9 +74,7 @@ export default function ReplaceTemplateButton( { onClick } ) { ); } -function TemplatesList( { onSelect } ) { - //const availableTemplates = useAvailableTemplates(); - const availableTemplates = useSelect( selectAvailablePatterns ); +function TemplatesList( { availableTemplates, onSelect } ) { const templatesAsPatterns = useMemo( () => availableTemplates.map( ( template ) => { @@ -120,7 +82,6 @@ function TemplatesList( { onSelect } ) { name: template.name, blocks: template.blocks, title: template.title, - id: template.name, content: template.content, }; } ), 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 7e906ab9cc0fa9..c5d9d49746de15 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 @@ -1,10 +1,12 @@ /** * WordPress dependencies */ -import { useDispatch } from '@wordpress/data'; +import { useDispatch, useSelect } from '@wordpress/data'; import { __ } from '@wordpress/i18n'; import { DropdownMenu, MenuGroup, MenuItem } from '@wordpress/components'; import { moreVertical } from '@wordpress/icons'; +import { parse } from '@wordpress/blocks'; +import { store as coreStore } from '@wordpress/core-data'; /** * Internal dependencies @@ -12,12 +14,50 @@ 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 { unlock } from '../../../lock-unlock'; +import { PATTERN_CORE_SOURCES, PATTERN_TYPES } from '../../../utils/constants'; export default function Actions( { template } ) { + // This is duplicated. + const filterOutDuplicatesByName = ( currentItem, index, items ) => + index === items.findIndex( ( item ) => currentItem.name === item.name ); + + const selectAvailablePatterns = ( select ) => { + const { getSettings } = unlock( select( editSiteStore ) ); + const settings = getSettings(); + const blockPatterns = + settings.__experimentalAdditionalBlockPatterns ?? + settings.__experimentalBlockPatterns; + + const restBlockPatterns = select( coreStore ).getBlockPatterns(); + + const patterns = [ + ...( blockPatterns || [] ), + ...( restBlockPatterns || [] ), + ] + .filter( + ( pattern ) => ! PATTERN_CORE_SOURCES.includes( pattern.source ) + ) + .filter( filterOutDuplicatesByName ) + // TODO use the correct type. + .filter( ( pattern ) => pattern.templateTypes?.includes( 'home' ) ) + .map( ( pattern ) => ( { + ...pattern, + keywords: pattern.keywords || [], + type: PATTERN_TYPES.theme, + blocks: parse( pattern.content, { + __unstableSkipMigrationLogs: true, + } ), + } ) ); + + return patterns; + }; + // Should we also get templates? + const availableTemplates = useSelect( selectAvailablePatterns ); const { revertTemplate } = useDispatch( editSiteStore ); const isRevertable = isTemplateRevertable( template ); - // TODO - update this condition so that we also show the dropdown when there are other template options. - if ( ! isRevertable ) { + + if ( ! isRevertable && availableTemplates.length === 0 ) { return null; } @@ -30,18 +70,26 @@ export default function Actions( { template } ) { > { ( { onClose } ) => ( - { - revertTemplate( template ); - onClose(); - } } - > - { __( 'Clear customizations' ) } - - + { isRevertable && ( + { + revertTemplate( template ); + onClose(); + } } + > + { __( 'Clear customizations' ) } + + ) } + { availableTemplates.length > 0 && ( + + ) } ) } From 1947768d36a08e8c828064f23e46b17a3e023deb Mon Sep 17 00:00:00 2001 From: scruffian Date: Thu, 21 Sep 2023 21:40:49 +0100 Subject: [PATCH 07/35] filter for the correct templates --- .../sidebar-edit-mode/template-panel/template-actions.js | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) 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 c5d9d49746de15..bf26c528d15b3f 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 @@ -39,8 +39,10 @@ export default function Actions( { template } ) { ( pattern ) => ! PATTERN_CORE_SOURCES.includes( pattern.source ) ) .filter( filterOutDuplicatesByName ) - // TODO use the correct type. - .filter( ( pattern ) => pattern.templateTypes?.includes( 'home' ) ) + // Filter only the patterns that are compatible with the current template. + .filter( ( pattern ) => + pattern.templateTypes?.includes( template.slug ) + ) .map( ( pattern ) => ( { ...pattern, keywords: pattern.keywords || [], From 7e5e8c9e62d79c842dda6ea18ed3812a267344fa Mon Sep 17 00:00:00 2001 From: scruffian Date: Thu, 21 Sep 2023 21:55:00 +0100 Subject: [PATCH 08/35] create the right data structure in the use select --- .../template-panel/replace-template-button.js | 23 +++---------------- .../template-panel/template-actions.js | 16 +++++++++---- 2 files changed, 14 insertions(+), 25 deletions(-) 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 index 9e50b8e15f6bc6..e42725df9804dd 100644 --- 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 @@ -2,7 +2,7 @@ * WordPress dependencies */ import { useSelect } from '@wordpress/data'; -import { useMemo, useState, useCallback } from '@wordpress/element'; +import { useState, useCallback } from '@wordpress/element'; import { __experimentalBlockPatternsList as BlockPatternsList } from '@wordpress/block-editor'; import { MenuItem, Modal } from '@wordpress/components'; import { __ } from '@wordpress/i18n'; @@ -19,7 +19,6 @@ export default function ReplaceTemplateButton( { availableTemplates, } ) { const [ showModal, setShowModal ] = useState( false ); - //const availableTemplates = useAvailableTemplates(); const onClose = useCallback( () => { setShowModal( false ); }, [] ); @@ -33,10 +32,6 @@ export default function ReplaceTemplateButton( { const entitiy = useEntityRecord( 'postType', postType, postId ); - if ( ! availableTemplates?.length ) { - return null; - } - const onTemplateSelect = async ( selectedTemplate ) => { // TODO - trigger a reload entitiy.edit( { content: selectedTemplate.content } ); @@ -75,25 +70,13 @@ export default function ReplaceTemplateButton( { } function TemplatesList( { availableTemplates, onSelect } ) { - const templatesAsPatterns = useMemo( - () => - availableTemplates.map( ( template ) => { - return { - name: template.name, - blocks: template.blocks, - title: template.title, - content: template.content, - }; - } ), - [ availableTemplates ] - ); - const shownTemplates = useAsyncList( templatesAsPatterns ); + const shownTemplates = useAsyncList( availableTemplates ); // TODO - make this use a grid layout. return ( 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 bf26c528d15b3f..7e31348cbc3803 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 @@ -22,7 +22,8 @@ export default function Actions( { template } ) { const filterOutDuplicatesByName = ( currentItem, index, items ) => index === items.findIndex( ( item ) => currentItem.name === item.name ); - const selectAvailablePatterns = ( select ) => { + // Should we also get templates? + const availableTemplates = useSelect( ( select ) => { const { getSettings } = unlock( select( editSiteStore ) ); const settings = getSettings(); const blockPatterns = @@ -52,10 +53,15 @@ export default function Actions( { template } ) { } ), } ) ); - return patterns; - }; - // Should we also get templates? - const availableTemplates = useSelect( selectAvailablePatterns ); + return patterns.map( ( pattern ) => { + return { + name: pattern.name, + blocks: pattern.blocks, + title: pattern.title, + content: pattern.content, + }; + } ); + } ); const { revertTemplate } = useDispatch( editSiteStore ); const isRevertable = isTemplateRevertable( template ); From ac58a31d2823bd8c15a66149efa497a0f030c8ea Mon Sep 17 00:00:00 2001 From: scruffian Date: Thu, 21 Sep 2023 23:12:58 +0100 Subject: [PATCH 09/35] move to a hook --- .../sidebar-edit-mode/page-panels/hooks.js | 53 ++++++++++++++++- .../template-panel/replace-template-button.js | 1 - .../template-panel/template-actions.js | 59 ++++--------------- 3 files changed, 61 insertions(+), 52 deletions(-) diff --git a/packages/edit-site/src/components/sidebar-edit-mode/page-panels/hooks.js b/packages/edit-site/src/components/sidebar-edit-mode/page-panels/hooks.js index 0d98c8b429481c..e97ec5c109d67a 100644 --- a/packages/edit-site/src/components/sidebar-edit-mode/page-panels/hooks.js +++ b/packages/edit-site/src/components/sidebar-edit-mode/page-panels/hooks.js @@ -4,12 +4,18 @@ import { useSelect } from '@wordpress/data'; import { useMemo } from '@wordpress/element'; import { store as coreStore } from '@wordpress/core-data'; +import { parse } from '@wordpress/blocks'; /** * Internal dependencies */ import { store as editSiteStore } from '../../../store'; -import { TEMPLATE_POST_TYPE } from '../../../utils/constants'; +import { + PATTERN_CORE_SOURCES, + PATTERN_TYPES, + TEMPLATE_POST_TYPE, +} from '../../../utils/constants'; +import { unlock } from '../../../lock-unlock'; export function useEditedPostContext() { return useSelect( @@ -48,7 +54,6 @@ export function useAvailableTemplates() { const currentTemplateSlug = useCurrentTemplateSlug(); const isPostsPage = useIsPostsPage(); const templates = useTemplates(); - console.log( 'templates', templates ); return useMemo( () => // The posts page template cannot be changed. @@ -87,3 +92,47 @@ export function useCurrentTemplateSlug() { return templates?.find( ( template ) => template.slug === entityTemplate ) ?.slug; } + +// This is duplicated. +const filterOutDuplicatesByName = ( currentItem, index, items ) => + index === items.findIndex( ( item ) => currentItem.name === item.name ); + +// Should we also get templates? +export function useAvailablePatterns( template ) { + return useSelect( + ( select ) => { + const { getSettings } = unlock( select( editSiteStore ) ); + const settings = getSettings(); + const blockPatterns = + settings.__experimentalAdditionalBlockPatterns ?? + settings.__experimentalBlockPatterns; + + const restBlockPatterns = select( coreStore ).getBlockPatterns(); + + const patterns = [ + ...( blockPatterns || [] ), + ...( restBlockPatterns || [] ), + ] + .filter( + ( pattern ) => + ! PATTERN_CORE_SOURCES.includes( pattern.source ) + ) + .filter( filterOutDuplicatesByName ) + // Filter only the patterns that are compatible with the current template. + .filter( ( pattern ) => + pattern.templateTypes?.includes( template.slug ) + ) + .map( ( pattern ) => ( { + ...pattern, + keywords: pattern.keywords || [], + type: PATTERN_TYPES.theme, + blocks: parse( pattern.content, { + __unstableSkipMigrationLogs: true, + } ), + } ) ); + + return patterns; + }, + [ template ] + ); +} 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 index e42725df9804dd..4d8d6f6c08ee18 100644 --- 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 @@ -72,7 +72,6 @@ export default function ReplaceTemplateButton( { function TemplatesList( { availableTemplates, onSelect } ) { const shownTemplates = useAsyncList( availableTemplates ); - // TODO - make this use a grid layout. return ( - index === items.findIndex( ( item ) => currentItem.name === item.name ); - - // Should we also get templates? - const availableTemplates = useSelect( ( select ) => { - const { getSettings } = unlock( select( editSiteStore ) ); - const settings = getSettings(); - const blockPatterns = - settings.__experimentalAdditionalBlockPatterns ?? - settings.__experimentalBlockPatterns; - - const restBlockPatterns = select( coreStore ).getBlockPatterns(); - - const patterns = [ - ...( blockPatterns || [] ), - ...( restBlockPatterns || [] ), - ] - .filter( - ( pattern ) => ! PATTERN_CORE_SOURCES.includes( pattern.source ) - ) - .filter( filterOutDuplicatesByName ) - // Filter only the patterns that are compatible with the current template. - .filter( ( pattern ) => - pattern.templateTypes?.includes( template.slug ) - ) - .map( ( pattern ) => ( { - ...pattern, - keywords: pattern.keywords || [], - type: PATTERN_TYPES.theme, - blocks: parse( pattern.content, { - __unstableSkipMigrationLogs: true, - } ), - } ) ); - - return patterns.map( ( pattern ) => { - return { - name: pattern.name, - blocks: pattern.blocks, - title: pattern.title, - content: pattern.content, - }; - } ); + const availablePatterns = useAvailablePatterns( template ); + const availableTemplates = availablePatterns.map( ( pattern ) => { + return { + name: pattern.name, + blocks: pattern.blocks, + title: pattern.title, + content: pattern.content, + }; } ); const { revertTemplate } = useDispatch( editSiteStore ); const isRevertable = isTemplateRevertable( template ); From e1dc6beeae76f087215df48ac371500c363d2fe8 Mon Sep 17 00:00:00 2001 From: scruffian Date: Thu, 21 Sep 2023 23:18:31 +0100 Subject: [PATCH 10/35] inject theme attribute into pattern again --- .../sidebar-edit-mode/page-panels/hooks.js | 34 ++++++++++++++++++- 1 file changed, 33 insertions(+), 1 deletion(-) diff --git a/packages/edit-site/src/components/sidebar-edit-mode/page-panels/hooks.js b/packages/edit-site/src/components/sidebar-edit-mode/page-panels/hooks.js index e97ec5c109d67a..2c458d16c259f5 100644 --- a/packages/edit-site/src/components/sidebar-edit-mode/page-panels/hooks.js +++ b/packages/edit-site/src/components/sidebar-edit-mode/page-panels/hooks.js @@ -99,6 +99,36 @@ const filterOutDuplicatesByName = ( currentItem, index, items ) => // Should we also get templates? export function useAvailablePatterns( template ) { + const currentThemeStylesheet = useSelect( + ( select ) => select( coreStore ).getCurrentTheme().stylesheet + ); + + function injectThemeAttributeInBlockTemplateContent( block ) { + if ( + block.innerBlocks.find( + ( innerBlock ) => innerBlock.name === 'core/template-part' + ) + ) { + block.innerBlocks = block.innerBlocks.map( ( innerBlock ) => { + if ( + innerBlock.name === 'core/template-part' && + innerBlock.attributes.theme === undefined + ) { + innerBlock.attributes.theme = currentThemeStylesheet; + } + return innerBlock; + } ); + } + + if ( + block.name === 'core/template-part' && + block.attributes.theme === undefined + ) { + block.attributes.theme = currentThemeStylesheet; + } + return block; + } + return useSelect( ( select ) => { const { getSettings } = unlock( select( editSiteStore ) ); @@ -128,7 +158,9 @@ export function useAvailablePatterns( template ) { type: PATTERN_TYPES.theme, blocks: parse( pattern.content, { __unstableSkipMigrationLogs: true, - } ), + } ).map( ( block ) => + injectThemeAttributeInBlockTemplateContent( block ) + ), } ) ); return patterns; From 540dfbcc77cebde096a874484af9c1a026218d38 Mon Sep 17 00:00:00 2001 From: scruffian Date: Thu, 21 Sep 2023 23:24:08 +0100 Subject: [PATCH 11/35] put the overlay over the top of the dropdown --- packages/base-styles/_z-index.scss | 1 + .../components/sidebar-edit-mode/template-panel/style.scss | 5 +++++ 2 files changed, 6 insertions(+) diff --git a/packages/base-styles/_z-index.scss b/packages/base-styles/_z-index.scss index 12443a30a96656..cbe495d3787cd9 100644 --- a/packages/base-styles/_z-index.scss +++ b/packages/base-styles/_z-index.scss @@ -128,6 +128,7 @@ $z-layers: ( ".block-editor-block-rename-modal": 1000001, ".edit-site-list__rename-modal": 1000001, ".edit-site-swap-template-modal": 1000001, + ".edit-site-template-panel__replace-template-modal": 1000001, // Note: The ConfirmDialog component's z-index is being set to 1000001 in packages/components/src/confirm-dialog/styles.ts // because it uses emotion and not sass. We need it to render on top its parent popover. 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 ae855105ee516b..6eab753e8ad285 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 @@ -38,6 +38,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-panel__replace-template-modal__content { column-count: 2; column-gap: $grid-unit-30; From 7c9d71adbb02563251d787f03792f5ba7833aea3 Mon Sep 17 00:00:00 2001 From: Andrei Draganescu Date: Mon, 25 Sep 2023 17:35:55 +0300 Subject: [PATCH 12/35] fix the pattern to templates hook --- .../sidebar-edit-mode/page-panels/hooks.js | 141 ++++++++++-------- 1 file changed, 79 insertions(+), 62 deletions(-) diff --git a/packages/edit-site/src/components/sidebar-edit-mode/page-panels/hooks.js b/packages/edit-site/src/components/sidebar-edit-mode/page-panels/hooks.js index 2c458d16c259f5..814921f28d6397 100644 --- a/packages/edit-site/src/components/sidebar-edit-mode/page-panels/hooks.js +++ b/packages/edit-site/src/components/sidebar-edit-mode/page-panels/hooks.js @@ -97,74 +97,91 @@ export function useCurrentTemplateSlug() { const filterOutDuplicatesByName = ( currentItem, index, items ) => index === items.findIndex( ( item ) => currentItem.name === item.name ); +function injectThemeAttributeInBlockTemplateContent( + block, + currentThemeStylesheet +) { + if ( + block.innerBlocks.find( + ( innerBlock ) => innerBlock.name === 'core/template-part' + ) + ) { + block.innerBlocks = block.innerBlocks.map( ( innerBlock ) => { + if ( + innerBlock.name === 'core/template-part' && + innerBlock.attributes.theme === undefined + ) { + innerBlock.attributes.theme = currentThemeStylesheet; + } + return innerBlock; + } ); + } + + if ( + block.name === 'core/template-part' && + block.attributes.theme === undefined + ) { + block.attributes.theme = currentThemeStylesheet; + } + return block; +} + +function preparePatterns( patterns, template, currentThemeStylesheet ) { + return ( + patterns + .filter( + ( pattern ) => ! PATTERN_CORE_SOURCES.includes( pattern.source ) + ) + .filter( filterOutDuplicatesByName ) + // Filter only the patterns that are compatible with the current template. + .filter( ( pattern ) => + pattern.templateTypes?.includes( template.slug ) + ) + .map( ( pattern ) => ( { + ...pattern, + keywords: pattern.keywords || [], + type: PATTERN_TYPES.theme, + blocks: parse( pattern.content, { + __unstableSkipMigrationLogs: true, + } ).map( ( block ) => { + const injected = injectThemeAttributeInBlockTemplateContent( + block, + currentThemeStylesheet + ); + return injected; + } ), + } ) ) + ); +} + // Should we also get templates? export function useAvailablePatterns( template ) { const currentThemeStylesheet = useSelect( ( select ) => select( coreStore ).getCurrentTheme().stylesheet ); - function injectThemeAttributeInBlockTemplateContent( block ) { - if ( - block.innerBlocks.find( - ( innerBlock ) => innerBlock.name === 'core/template-part' - ) - ) { - block.innerBlocks = block.innerBlocks.map( ( innerBlock ) => { - if ( - innerBlock.name === 'core/template-part' && - innerBlock.attributes.theme === undefined - ) { - innerBlock.attributes.theme = currentThemeStylesheet; - } - return innerBlock; - } ); - } - - if ( - block.name === 'core/template-part' && - block.attributes.theme === undefined - ) { - block.attributes.theme = currentThemeStylesheet; - } - return block; - } + let availablePatterns = useSelect( ( select ) => { + const { getSettings } = unlock( select( editSiteStore ) ); + const settings = getSettings(); - return useSelect( - ( select ) => { - const { getSettings } = unlock( select( editSiteStore ) ); - const settings = getSettings(); - const blockPatterns = - settings.__experimentalAdditionalBlockPatterns ?? - settings.__experimentalBlockPatterns; - - const restBlockPatterns = select( coreStore ).getBlockPatterns(); - - const patterns = [ - ...( blockPatterns || [] ), - ...( restBlockPatterns || [] ), - ] - .filter( - ( pattern ) => - ! PATTERN_CORE_SOURCES.includes( pattern.source ) - ) - .filter( filterOutDuplicatesByName ) - // Filter only the patterns that are compatible with the current template. - .filter( ( pattern ) => - pattern.templateTypes?.includes( template.slug ) - ) - .map( ( pattern ) => ( { - ...pattern, - keywords: pattern.keywords || [], - type: PATTERN_TYPES.theme, - blocks: parse( pattern.content, { - __unstableSkipMigrationLogs: true, - } ).map( ( block ) => - injectThemeAttributeInBlockTemplateContent( block ) - ), - } ) ); - - return patterns; - }, - [ template ] + const blockPatterns = + settings.__experimentalAdditionalBlockPatterns ?? + settings.__experimentalBlockPatterns; + + const restBlockPatterns = select( coreStore ).getBlockPatterns(); + + const patterns = [ + ...( blockPatterns || [] ), + ...( restBlockPatterns || [] ), + ]; + return patterns; + } ); + + availablePatterns = preparePatterns( + availablePatterns, + template, + currentThemeStylesheet ); + + return availablePatterns; } From a00363f4ab10b27f4e97a2954770f23975e554b5 Mon Sep 17 00:00:00 2001 From: Andrei Draganescu Date: Mon, 25 Sep 2023 19:11:06 +0300 Subject: [PATCH 13/35] set the template on click --- .../sidebar-edit-mode/page-panels/hooks.js | 27 +++++++++---------- .../template-panel/replace-template-button.js | 14 +++++----- 2 files changed, 20 insertions(+), 21 deletions(-) diff --git a/packages/edit-site/src/components/sidebar-edit-mode/page-panels/hooks.js b/packages/edit-site/src/components/sidebar-edit-mode/page-panels/hooks.js index 814921f28d6397..c76f8da1a4c0b0 100644 --- a/packages/edit-site/src/components/sidebar-edit-mode/page-panels/hooks.js +++ b/packages/edit-site/src/components/sidebar-edit-mode/page-panels/hooks.js @@ -101,21 +101,18 @@ function injectThemeAttributeInBlockTemplateContent( block, currentThemeStylesheet ) { - if ( - block.innerBlocks.find( - ( innerBlock ) => innerBlock.name === 'core/template-part' - ) - ) { - block.innerBlocks = block.innerBlocks.map( ( innerBlock ) => { - if ( - innerBlock.name === 'core/template-part' && - innerBlock.attributes.theme === undefined - ) { - innerBlock.attributes.theme = currentThemeStylesheet; - } - return innerBlock; - } ); - } + block.innerBlocks = block.innerBlocks.map( ( innerBlock ) => { + if ( + innerBlock.name === 'core/template-part' && + innerBlock.attributes.theme === undefined + ) { + innerBlock.attributes.theme = currentThemeStylesheet; + } + return injectThemeAttributeInBlockTemplateContent( + innerBlock, + currentThemeStylesheet + ); + } ); if ( block.name === 'core/template-part' && 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 index 4d8d6f6c08ee18..2cdafac4f4306c 100644 --- 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 @@ -1,7 +1,7 @@ /** * WordPress dependencies */ -import { useSelect } from '@wordpress/data'; +import { useSelect, useDispatch } from '@wordpress/data'; import { useState, useCallback } from '@wordpress/element'; import { __experimentalBlockPatternsList as BlockPatternsList } from '@wordpress/block-editor'; import { MenuItem, Modal } from '@wordpress/components'; @@ -16,8 +16,10 @@ import { store as editSiteStore } from '../../../store'; export default function ReplaceTemplateButton( { onClick, + template, availableTemplates, } ) { + const { setTemplate } = useDispatch( editSiteStore ); const [ showModal, setShowModal ] = useState( false ); const onClose = useCallback( () => { setShowModal( false ); @@ -30,12 +32,12 @@ export default function ReplaceTemplateButton( { }; }, [] ); - const entitiy = useEntityRecord( 'postType', postType, postId ); - + const entity = useEntityRecord( 'postType', postType, postId ); const onTemplateSelect = async ( selectedTemplate ) => { - // TODO - trigger a reload - entitiy.edit( { content: selectedTemplate.content } ); - + //FIXME: This is a hack to get around the fact that the template is not being set correctly. + await setTemplate( null, null ); + await entity.edit( { content: selectedTemplate.content } ); + await setTemplate( postId, template.slug ); onClose(); // Close the template suggestions modal first. onClick(); }; From c78d2556e2da509f5412111867f420639a198c49 Mon Sep 17 00:00:00 2001 From: scruffian Date: Tue, 26 Sep 2023 10:55:38 +0100 Subject: [PATCH 14/35] Also set the blocks --- .../components/sidebar-edit-mode/page-panels/hooks.js | 9 ++++----- .../template-panel/replace-template-button.js | 5 ++++- 2 files changed, 8 insertions(+), 6 deletions(-) diff --git a/packages/edit-site/src/components/sidebar-edit-mode/page-panels/hooks.js b/packages/edit-site/src/components/sidebar-edit-mode/page-panels/hooks.js index c76f8da1a4c0b0..d30e0d80cfe081 100644 --- a/packages/edit-site/src/components/sidebar-edit-mode/page-panels/hooks.js +++ b/packages/edit-site/src/components/sidebar-edit-mode/page-panels/hooks.js @@ -140,13 +140,12 @@ function preparePatterns( patterns, template, currentThemeStylesheet ) { type: PATTERN_TYPES.theme, blocks: parse( pattern.content, { __unstableSkipMigrationLogs: true, - } ).map( ( block ) => { - const injected = injectThemeAttributeInBlockTemplateContent( + } ).map( ( block ) => + injectThemeAttributeInBlockTemplateContent( block, currentThemeStylesheet - ); - return injected; - } ), + ) + ), } ) ) ); } 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 index 2cdafac4f4306c..bf9be3ab1a639a 100644 --- 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 @@ -36,7 +36,10 @@ export default function ReplaceTemplateButton( { const onTemplateSelect = async ( selectedTemplate ) => { //FIXME: This is a hack to get around the fact that the template is not being set correctly. await setTemplate( null, null ); - await entity.edit( { content: selectedTemplate.content } ); + await entity.edit( { + blocks: selectedTemplate.blocks, + content: selectedTemplate.content, + } ); await setTemplate( postId, template.slug ); onClose(); // Close the template suggestions modal first. onClick(); From 9b76d30b9a36afad87880735549943911065e6f9 Mon Sep 17 00:00:00 2001 From: Andrei Draganescu Date: Tue, 26 Sep 2023 14:11:05 +0300 Subject: [PATCH 15/35] remove calls to set template with the current template, since setting blocks correctly updates the content in the editor --- .../template-panel/replace-template-button.js | 7 +------ 1 file changed, 1 insertion(+), 6 deletions(-) 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 index bf9be3ab1a639a..d6ad482867d792 100644 --- 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 @@ -1,7 +1,7 @@ /** * WordPress dependencies */ -import { useSelect, useDispatch } from '@wordpress/data'; +import { useSelect } from '@wordpress/data'; import { useState, useCallback } from '@wordpress/element'; import { __experimentalBlockPatternsList as BlockPatternsList } from '@wordpress/block-editor'; import { MenuItem, Modal } from '@wordpress/components'; @@ -16,10 +16,8 @@ import { store as editSiteStore } from '../../../store'; export default function ReplaceTemplateButton( { onClick, - template, availableTemplates, } ) { - const { setTemplate } = useDispatch( editSiteStore ); const [ showModal, setShowModal ] = useState( false ); const onClose = useCallback( () => { setShowModal( false ); @@ -34,13 +32,10 @@ export default function ReplaceTemplateButton( { const entity = useEntityRecord( 'postType', postType, postId ); const onTemplateSelect = async ( selectedTemplate ) => { - //FIXME: This is a hack to get around the fact that the template is not being set correctly. - await setTemplate( null, null ); await entity.edit( { blocks: selectedTemplate.blocks, content: selectedTemplate.content, } ); - await setTemplate( postId, template.slug ); onClose(); // Close the template suggestions modal first. onClick(); }; From c3a13a40b871fbafc740e824dec642d20eec5faa Mon Sep 17 00:00:00 2001 From: scruffian Date: Tue, 26 Sep 2023 12:35:40 +0100 Subject: [PATCH 16/35] serialize blocks so that we have correctly processed template parts --- .../template-panel/replace-template-button.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) 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 index d6ad482867d792..4e4fa4a64721f6 100644 --- 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 @@ -8,6 +8,7 @@ import { MenuItem, Modal } from '@wordpress/components'; import { __ } from '@wordpress/i18n'; import { useEntityRecord } from '@wordpress/core-data'; import { useAsyncList } from '@wordpress/compose'; +import { serialize } from '@wordpress/blocks'; /** * Internal dependencies @@ -34,7 +35,7 @@ export default function ReplaceTemplateButton( { const onTemplateSelect = async ( selectedTemplate ) => { await entity.edit( { blocks: selectedTemplate.blocks, - content: selectedTemplate.content, + content: serialize( selectedTemplate.blocks ), } ); onClose(); // Close the template suggestions modal first. onClick(); From 578763685fb287c7dffd53ba21303769bdabccb5 Mon Sep 17 00:00:00 2001 From: scruffian Date: Tue, 26 Sep 2023 12:41:28 +0100 Subject: [PATCH 17/35] remove duplicated code --- .../src/components/sidebar-edit-mode/page-panels/hooks.js | 6 ------ 1 file changed, 6 deletions(-) diff --git a/packages/edit-site/src/components/sidebar-edit-mode/page-panels/hooks.js b/packages/edit-site/src/components/sidebar-edit-mode/page-panels/hooks.js index d30e0d80cfe081..8ed6ccca45e665 100644 --- a/packages/edit-site/src/components/sidebar-edit-mode/page-panels/hooks.js +++ b/packages/edit-site/src/components/sidebar-edit-mode/page-panels/hooks.js @@ -102,12 +102,6 @@ function injectThemeAttributeInBlockTemplateContent( currentThemeStylesheet ) { block.innerBlocks = block.innerBlocks.map( ( innerBlock ) => { - if ( - innerBlock.name === 'core/template-part' && - innerBlock.attributes.theme === undefined - ) { - innerBlock.attributes.theme = currentThemeStylesheet; - } return injectThemeAttributeInBlockTemplateContent( innerBlock, currentThemeStylesheet From 59cbfaba2236593e445aeef22ae9fcb180a13b11 Mon Sep 17 00:00:00 2001 From: scruffian Date: Tue, 26 Sep 2023 14:07:44 +0100 Subject: [PATCH 18/35] Remove unnecessary mapping --- .../sidebar-edit-mode/page-panels/hooks.js | 1 - .../template-panel/template-actions.js | 14 +++----------- 2 files changed, 3 insertions(+), 12 deletions(-) diff --git a/packages/edit-site/src/components/sidebar-edit-mode/page-panels/hooks.js b/packages/edit-site/src/components/sidebar-edit-mode/page-panels/hooks.js index 8ed6ccca45e665..d78040aa95da9a 100644 --- a/packages/edit-site/src/components/sidebar-edit-mode/page-panels/hooks.js +++ b/packages/edit-site/src/components/sidebar-edit-mode/page-panels/hooks.js @@ -144,7 +144,6 @@ function preparePatterns( patterns, template, currentThemeStylesheet ) { ); } -// Should we also get templates? export function useAvailablePatterns( template ) { const currentThemeStylesheet = useSelect( ( select ) => select( coreStore ).getCurrentTheme().stylesheet 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 ad7c1ac9b26a05..f580acd4647b50 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 @@ -15,18 +15,10 @@ import ReplaceTemplateButton from './replace-template-button'; import { useAvailablePatterns } from '../page-panels/hooks'; export default function Actions( { template } ) { const availablePatterns = useAvailablePatterns( template ); - const availableTemplates = availablePatterns.map( ( pattern ) => { - return { - name: pattern.name, - blocks: pattern.blocks, - title: pattern.title, - content: pattern.content, - }; - } ); const { revertTemplate } = useDispatch( editSiteStore ); const isRevertable = isTemplateRevertable( template ); - if ( ! isRevertable && availableTemplates.length === 0 ) { + if ( ! isRevertable && availablePatterns.length === 0 ) { return null; } @@ -52,9 +44,9 @@ export default function Actions( { template } ) { { __( 'Clear customizations' ) } ) } - { availableTemplates.length > 0 && ( + { availablePatterns.length > 0 && ( From 3c513a356a3e3d0eba238c8c632a6087e01d84ab Mon Sep 17 00:00:00 2001 From: scruffian Date: Tue, 26 Sep 2023 14:24:11 +0100 Subject: [PATCH 19/35] refactor --- .../src/components/sidebar-edit-mode/page-panels/hooks.js | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/packages/edit-site/src/components/sidebar-edit-mode/page-panels/hooks.js b/packages/edit-site/src/components/sidebar-edit-mode/page-panels/hooks.js index d78040aa95da9a..bad08d81e5e35a 100644 --- a/packages/edit-site/src/components/sidebar-edit-mode/page-panels/hooks.js +++ b/packages/edit-site/src/components/sidebar-edit-mode/page-panels/hooks.js @@ -149,7 +149,7 @@ export function useAvailablePatterns( template ) { ( select ) => select( coreStore ).getCurrentTheme().stylesheet ); - let availablePatterns = useSelect( ( select ) => { + const availablePatterns = useSelect( ( select ) => { const { getSettings } = unlock( select( editSiteStore ) ); const settings = getSettings(); @@ -166,11 +166,9 @@ export function useAvailablePatterns( template ) { return patterns; } ); - availablePatterns = preparePatterns( + return preparePatterns( availablePatterns, template, currentThemeStylesheet ); - - return availablePatterns; } From a3763ea8d3ee1580d0d1d58cc7f0d971f7660b61 Mon Sep 17 00:00:00 2001 From: scruffian Date: Tue, 26 Sep 2023 14:38:13 +0100 Subject: [PATCH 20/35] memoize the patterns --- .../src/components/sidebar-edit-mode/page-panels/hooks.js | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/packages/edit-site/src/components/sidebar-edit-mode/page-panels/hooks.js b/packages/edit-site/src/components/sidebar-edit-mode/page-panels/hooks.js index bad08d81e5e35a..36f16d8aaea472 100644 --- a/packages/edit-site/src/components/sidebar-edit-mode/page-panels/hooks.js +++ b/packages/edit-site/src/components/sidebar-edit-mode/page-panels/hooks.js @@ -166,9 +166,7 @@ export function useAvailablePatterns( template ) { return patterns; } ); - return preparePatterns( - availablePatterns, - template, - currentThemeStylesheet + return useMemo( () => + preparePatterns( availablePatterns, template, currentThemeStylesheet ) ); } From af096411fcf020a58069d735cfecb5ddab7f2c30 Mon Sep 17 00:00:00 2001 From: scruffian Date: Tue, 26 Sep 2023 15:07:31 +0100 Subject: [PATCH 21/35] combine the useSelect --- .../sidebar-edit-mode/page-panels/hooks.js | 41 +++++++++---------- .../template-panel/replace-template-button.js | 4 +- 2 files changed, 22 insertions(+), 23 deletions(-) diff --git a/packages/edit-site/src/components/sidebar-edit-mode/page-panels/hooks.js b/packages/edit-site/src/components/sidebar-edit-mode/page-panels/hooks.js index 36f16d8aaea472..c1ccc71e37386d 100644 --- a/packages/edit-site/src/components/sidebar-edit-mode/page-panels/hooks.js +++ b/packages/edit-site/src/components/sidebar-edit-mode/page-panels/hooks.js @@ -145,28 +145,27 @@ function preparePatterns( patterns, template, currentThemeStylesheet ) { } export function useAvailablePatterns( template ) { - const currentThemeStylesheet = useSelect( - ( select ) => select( coreStore ).getCurrentTheme().stylesheet - ); - - const availablePatterns = useSelect( ( select ) => { - const { getSettings } = unlock( select( editSiteStore ) ); - const settings = getSettings(); - - const blockPatterns = - settings.__experimentalAdditionalBlockPatterns ?? - settings.__experimentalBlockPatterns; - - const restBlockPatterns = select( coreStore ).getBlockPatterns(); - - const patterns = [ - ...( blockPatterns || [] ), - ...( restBlockPatterns || [] ), - ]; - return patterns; - } ); + const { blockPatterns, restBlockPatterns, currentThemeStylesheet } = + useSelect( ( select ) => { + const { getSettings } = unlock( select( editSiteStore ) ); + const settings = getSettings(); + + return { + blockPatterns: + settings.__experimentalAdditionalBlockPatterns ?? + settings.__experimentalBlockPatterns, + restBlockPatterns: select( coreStore ).getBlockPatterns(), + currentThemeStylesheet: + select( coreStore ).getCurrentTheme().stylesheet, + }; + } ); + + const mergedPatterns = [ + ...( blockPatterns || [] ), + ...( restBlockPatterns || [] ), + ]; return useMemo( () => - preparePatterns( availablePatterns, template, currentThemeStylesheet ) + preparePatterns( mergedPatterns, template, currentThemeStylesheet ) ); } 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 index 4e4fa4a64721f6..9adae9a56aa466 100644 --- 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 @@ -33,12 +33,12 @@ export default function ReplaceTemplateButton( { const entity = useEntityRecord( 'postType', postType, postId ); const onTemplateSelect = async ( selectedTemplate ) => { + onClose(); // Close the template suggestions modal first. + onClick(); await entity.edit( { blocks: selectedTemplate.blocks, content: serialize( selectedTemplate.blocks ), } ); - onClose(); // Close the template suggestions modal first. - onClick(); }; return ( <> From 083478b69bd9c1d6abf4bd62c71937b46c7b1f2c Mon Sep 17 00:00:00 2001 From: Ben Dwyer Date: Tue, 26 Sep 2023 16:04:57 +0100 Subject: [PATCH 22/35] Update packages/edit-site/src/components/sidebar-edit-mode/page-panels/hooks.js Co-authored-by: Andrei Draganescu --- .../sidebar-edit-mode/page-panels/hooks.js | 14 +++++++++++--- 1 file changed, 11 insertions(+), 3 deletions(-) diff --git a/packages/edit-site/src/components/sidebar-edit-mode/page-panels/hooks.js b/packages/edit-site/src/components/sidebar-edit-mode/page-panels/hooks.js index c1ccc71e37386d..38ab7bade98c41 100644 --- a/packages/edit-site/src/components/sidebar-edit-mode/page-panels/hooks.js +++ b/packages/edit-site/src/components/sidebar-edit-mode/page-panels/hooks.js @@ -165,7 +165,15 @@ export function useAvailablePatterns( template ) { ...( restBlockPatterns || [] ), ]; - return useMemo( () => - preparePatterns( mergedPatterns, template, currentThemeStylesheet ) - ); +return useMemo( () => { + const mergedPatterns = [ + ...( blockPatterns || [] ), + ...( restBlockPatterns || [] ), + ]; + return preparePatterns( + mergedPatterns, + template, + currentThemeStylesheet + ); + }, [ blockPatterns, restBlockPatterns, template, currentThemeStylesheet ] ); } From ca5935aa98af30e21796c26591d921a9fd75b619 Mon Sep 17 00:00:00 2001 From: George Mamadashvili Date: Tue, 26 Sep 2023 19:39:03 +0400 Subject: [PATCH 23/35] Fix ESLint error --- .../components/sidebar-edit-mode/page-panels/hooks.js | 9 ++------- 1 file changed, 2 insertions(+), 7 deletions(-) diff --git a/packages/edit-site/src/components/sidebar-edit-mode/page-panels/hooks.js b/packages/edit-site/src/components/sidebar-edit-mode/page-panels/hooks.js index 38ab7bade98c41..f6614644df0345 100644 --- a/packages/edit-site/src/components/sidebar-edit-mode/page-panels/hooks.js +++ b/packages/edit-site/src/components/sidebar-edit-mode/page-panels/hooks.js @@ -158,14 +158,9 @@ export function useAvailablePatterns( template ) { currentThemeStylesheet: select( coreStore ).getCurrentTheme().stylesheet, }; - } ); + }, [] ); - const mergedPatterns = [ - ...( blockPatterns || [] ), - ...( restBlockPatterns || [] ), - ]; - -return useMemo( () => { + return useMemo( () => { const mergedPatterns = [ ...( blockPatterns || [] ), ...( restBlockPatterns || [] ), From e7226e4138656a4567b2191b503ea49be514f27e Mon Sep 17 00:00:00 2001 From: scruffian Date: Tue, 26 Sep 2023 17:02:08 +0100 Subject: [PATCH 24/35] Only show the button is there is more than 1 pattern --- .../sidebar-edit-mode/template-panel/template-actions.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 f580acd4647b50..58d3d773030d70 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 @@ -44,7 +44,7 @@ export default function Actions( { template } ) { { __( 'Clear customizations' ) } ) } - { availablePatterns.length > 0 && ( + { availablePatterns.length > 1 && ( Date: Tue, 26 Sep 2023 17:03:28 +0100 Subject: [PATCH 25/35] Copy update --- .../sidebar-edit-mode/template-panel/replace-template-button.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 index 9adae9a56aa466..919c950bade9f8 100644 --- 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 @@ -44,7 +44,7 @@ export default function ReplaceTemplateButton( { <> setShowModal( true ) } > From 59c7c246f3c47de6c6218c094dff7fa5ab0a16f0 Mon Sep 17 00:00:00 2001 From: scruffian Date: Wed, 27 Sep 2023 16:17:01 +0100 Subject: [PATCH 26/35] Move the hook to a subdir --- .../sidebar-edit-mode/page-panels/hooks.js | 88 +---------------- .../sidebar-edit-mode/template-panel/hooks.js | 94 +++++++++++++++++++ .../template-panel/template-actions.js | 3 +- 3 files changed, 97 insertions(+), 88 deletions(-) create mode 100644 packages/edit-site/src/components/sidebar-edit-mode/template-panel/hooks.js diff --git a/packages/edit-site/src/components/sidebar-edit-mode/page-panels/hooks.js b/packages/edit-site/src/components/sidebar-edit-mode/page-panels/hooks.js index f6614644df0345..92fad17cd1d3e4 100644 --- a/packages/edit-site/src/components/sidebar-edit-mode/page-panels/hooks.js +++ b/packages/edit-site/src/components/sidebar-edit-mode/page-panels/hooks.js @@ -4,18 +4,12 @@ import { useSelect } from '@wordpress/data'; import { useMemo } from '@wordpress/element'; import { store as coreStore } from '@wordpress/core-data'; -import { parse } from '@wordpress/blocks'; /** * Internal dependencies */ import { store as editSiteStore } from '../../../store'; -import { - PATTERN_CORE_SOURCES, - PATTERN_TYPES, - TEMPLATE_POST_TYPE, -} from '../../../utils/constants'; -import { unlock } from '../../../lock-unlock'; +import { TEMPLATE_POST_TYPE } from '../../../utils/constants'; export function useEditedPostContext() { return useSelect( @@ -92,83 +86,3 @@ export function useCurrentTemplateSlug() { return templates?.find( ( template ) => template.slug === entityTemplate ) ?.slug; } - -// This is duplicated. -const filterOutDuplicatesByName = ( currentItem, index, items ) => - index === items.findIndex( ( item ) => currentItem.name === item.name ); - -function injectThemeAttributeInBlockTemplateContent( - block, - currentThemeStylesheet -) { - block.innerBlocks = block.innerBlocks.map( ( innerBlock ) => { - return injectThemeAttributeInBlockTemplateContent( - innerBlock, - currentThemeStylesheet - ); - } ); - - if ( - block.name === 'core/template-part' && - block.attributes.theme === undefined - ) { - block.attributes.theme = currentThemeStylesheet; - } - return block; -} - -function preparePatterns( patterns, template, currentThemeStylesheet ) { - return ( - patterns - .filter( - ( pattern ) => ! PATTERN_CORE_SOURCES.includes( pattern.source ) - ) - .filter( filterOutDuplicatesByName ) - // Filter only the patterns that are compatible with the current template. - .filter( ( pattern ) => - pattern.templateTypes?.includes( template.slug ) - ) - .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 ) { - const { blockPatterns, restBlockPatterns, currentThemeStylesheet } = - useSelect( ( select ) => { - const { getSettings } = unlock( select( editSiteStore ) ); - const settings = getSettings(); - - return { - blockPatterns: - settings.__experimentalAdditionalBlockPatterns ?? - settings.__experimentalBlockPatterns, - restBlockPatterns: select( coreStore ).getBlockPatterns(), - currentThemeStylesheet: - select( coreStore ).getCurrentTheme().stylesheet, - }; - }, [] ); - - return useMemo( () => { - const mergedPatterns = [ - ...( blockPatterns || [] ), - ...( restBlockPatterns || [] ), - ]; - return preparePatterns( - mergedPatterns, - template, - currentThemeStylesheet - ); - }, [ blockPatterns, restBlockPatterns, template, currentThemeStylesheet ] ); -} 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 new file mode 100644 index 00000000000000..892039469b9999 --- /dev/null +++ b/packages/edit-site/src/components/sidebar-edit-mode/template-panel/hooks.js @@ -0,0 +1,94 @@ +/** + * WordPress dependencies + */ +import { useSelect } from '@wordpress/data'; +import { useMemo } from '@wordpress/element'; +import { store as coreStore } from '@wordpress/core-data'; +import { parse } from '@wordpress/blocks'; + +/** + * Internal dependencies + */ +import { store as editSiteStore } from '../../../store'; +import { PATTERN_CORE_SOURCES, PATTERN_TYPES } from '../../../utils/constants'; +import { unlock } from '../../../lock-unlock'; + +// This is duplicated. +const filterOutDuplicatesByName = ( currentItem, index, items ) => + index === items.findIndex( ( item ) => currentItem.name === item.name ); + +function injectThemeAttributeInBlockTemplateContent( + block, + currentThemeStylesheet +) { + block.innerBlocks = block.innerBlocks.map( ( innerBlock ) => { + return injectThemeAttributeInBlockTemplateContent( + innerBlock, + currentThemeStylesheet + ); + } ); + + if ( + block.name === 'core/template-part' && + block.attributes.theme === undefined + ) { + block.attributes.theme = currentThemeStylesheet; + } + return block; +} + +function preparePatterns( patterns, template, currentThemeStylesheet ) { + return ( + patterns + .filter( + ( pattern ) => ! PATTERN_CORE_SOURCES.includes( pattern.source ) + ) + .filter( filterOutDuplicatesByName ) + // Filter only the patterns that are compatible with the current template. + .filter( ( pattern ) => + pattern.templateTypes?.includes( template.slug ) + ) + .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 ) { + const { blockPatterns, restBlockPatterns, currentThemeStylesheet } = + useSelect( ( select ) => { + const { getSettings } = unlock( select( editSiteStore ) ); + const settings = getSettings(); + + return { + blockPatterns: + settings.__experimentalAdditionalBlockPatterns ?? + settings.__experimentalBlockPatterns, + restBlockPatterns: select( coreStore ).getBlockPatterns(), + currentThemeStylesheet: + select( coreStore ).getCurrentTheme().stylesheet, + }; + }, [] ); + + return useMemo( () => { + const mergedPatterns = [ + ...( blockPatterns || [] ), + ...( restBlockPatterns || [] ), + ]; + return preparePatterns( + mergedPatterns, + template, + currentThemeStylesheet + ); + }, [ blockPatterns, restBlockPatterns, template, currentThemeStylesheet ] ); +} 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 58d3d773030d70..e6195c56b57aed 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 @@ -12,7 +12,8 @@ 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 '../page-panels/hooks'; +import { useAvailablePatterns } from './hooks'; + export default function Actions( { template } ) { const availablePatterns = useAvailablePatterns( template ); const { revertTemplate } = useDispatch( editSiteStore ); From 3f1fd654bb8671328bf67819afae415bed811ae4 Mon Sep 17 00:00:00 2001 From: scruffian Date: Wed, 27 Sep 2023 16:27:33 +0100 Subject: [PATCH 27/35] check that there are patterns --- .../template-panel/template-actions.js | 21 ++++++++++++------- 1 file changed, 13 insertions(+), 8 deletions(-) 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 e6195c56b57aed..ec6928adb6b438 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 @@ -19,7 +19,11 @@ export default function Actions( { template } ) { const { revertTemplate } = useDispatch( editSiteStore ); const isRevertable = isTemplateRevertable( template ); - if ( ! isRevertable && availablePatterns.length === 0 ) { + if ( + ! isRevertable && + !! availablePatterns.length && + availablePatterns.length < 1 + ) { return null; } @@ -45,13 +49,14 @@ export default function Actions( { template } ) { { __( 'Clear customizations' ) } ) } - { availablePatterns.length > 1 && ( - - ) } + { !! availablePatterns.length && + availablePatterns.length > 1 && ( + + ) } ) } From dd80e0965ba7592f984d595374b72d7d03b6ef9f Mon Sep 17 00:00:00 2001 From: scruffian Date: Wed, 27 Sep 2023 16:31:24 +0100 Subject: [PATCH 28/35] move the check --- .../template-panel/replace-template-button.js | 5 +++++ .../template-panel/template-actions.js | 13 +++++-------- 2 files changed, 10 insertions(+), 8 deletions(-) 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 index 919c950bade9f8..1b61b4597959cc 100644 --- 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 @@ -40,6 +40,11 @@ export default function ReplaceTemplateButton( { content: serialize( selectedTemplate.blocks ), } ); }; + + if ( ! availableTemplates.length || availableTemplates.length < 1 ) { + return null; + } + return ( <> ) } - { !! availablePatterns.length && - availablePatterns.length > 1 && ( - - ) } + ) } From 4b4e835679973805ee54631be341772365cf4655 Mon Sep 17 00:00:00 2001 From: scruffian Date: Wed, 27 Sep 2023 16:50:29 +0100 Subject: [PATCH 29/35] remove useCallback --- .../template-panel/replace-template-button.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) 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 index 1b61b4597959cc..6fa45fa8cfa19e 100644 --- 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 @@ -2,7 +2,7 @@ * WordPress dependencies */ import { useSelect } from '@wordpress/data'; -import { useState, useCallback } from '@wordpress/element'; +import { useState } from '@wordpress/element'; import { __experimentalBlockPatternsList as BlockPatternsList } from '@wordpress/block-editor'; import { MenuItem, Modal } from '@wordpress/components'; import { __ } from '@wordpress/i18n'; @@ -20,9 +20,9 @@ export default function ReplaceTemplateButton( { availableTemplates, } ) { const [ showModal, setShowModal ] = useState( false ); - const onClose = useCallback( () => { + const onClose = () => { setShowModal( false ); - }, [] ); + }; const { postId, postType } = useSelect( ( select ) => { return { From 6c54a97e213486665913409b8abab2275badaaad Mon Sep 17 00:00:00 2001 From: scruffian Date: Wed, 27 Sep 2023 16:51:55 +0100 Subject: [PATCH 30/35] change condition to show the button --- .../sidebar-edit-mode/template-panel/template-actions.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) 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 e8e1c01036d653..f5022c348159eb 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 @@ -21,8 +21,7 @@ export default function Actions( { template } ) { if ( ! isRevertable && - !! availablePatterns.length && - availablePatterns.length < 1 + ( !! availablePatterns.length || availablePatterns.length < 1 ) ) { return null; } From 0b1af45c8677b822f9a954527f96d62cc76723b6 Mon Sep 17 00:00:00 2001 From: scruffian Date: Wed, 27 Sep 2023 16:56:04 +0100 Subject: [PATCH 31/35] change condition --- .../sidebar-edit-mode/template-panel/template-actions.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 f5022c348159eb..81acb244a11863 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 @@ -21,7 +21,7 @@ export default function Actions( { template } ) { if ( ! isRevertable && - ( !! availablePatterns.length || availablePatterns.length < 1 ) + ( ! availablePatterns.length || availablePatterns.length < 1 ) ) { return null; } From f7a087b18e885f5074395e09cf1565c79bfd5f8d Mon Sep 17 00:00:00 2001 From: scruffian Date: Wed, 27 Sep 2023 17:14:42 +0100 Subject: [PATCH 32/35] move to use editEntityRecord --- .../template-panel/replace-template-button.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) 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 index 6fa45fa8cfa19e..764fe61431a683 100644 --- 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 @@ -1,12 +1,12 @@ /** * WordPress dependencies */ -import { useSelect } from '@wordpress/data'; +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 { useEntityRecord } from '@wordpress/core-data'; +import { store as coreStore } from '@wordpress/core-data'; import { useAsyncList } from '@wordpress/compose'; import { serialize } from '@wordpress/blocks'; @@ -19,6 +19,7 @@ export default function ReplaceTemplateButton( { onClick, availableTemplates, } ) { + const { editEntityRecord } = useDispatch( coreStore ); const [ showModal, setShowModal ] = useState( false ); const onClose = () => { setShowModal( false ); @@ -31,11 +32,10 @@ export default function ReplaceTemplateButton( { }; }, [] ); - const entity = useEntityRecord( 'postType', postType, postId ); const onTemplateSelect = async ( selectedTemplate ) => { onClose(); // Close the template suggestions modal first. onClick(); - await entity.edit( { + editEntityRecord( 'postType', postType, postId, { blocks: selectedTemplate.blocks, content: serialize( selectedTemplate.blocks ), } ); From 7c7fdfd63a3f56bb97474d550f560ab4f4ce8ece Mon Sep 17 00:00:00 2001 From: scruffian Date: Wed, 27 Sep 2023 17:39:18 +0100 Subject: [PATCH 33/35] combine filters --- .../sidebar-edit-mode/template-panel/hooks.js | 58 ++++++++++--------- 1 file changed, 30 insertions(+), 28 deletions(-) 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 892039469b9999..29ff7a693e7dbc 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 @@ -13,10 +13,6 @@ import { store as editSiteStore } from '../../../store'; import { PATTERN_CORE_SOURCES, PATTERN_TYPES } from '../../../utils/constants'; import { unlock } from '../../../lock-unlock'; -// This is duplicated. -const filterOutDuplicatesByName = ( currentItem, index, items ) => - index === items.findIndex( ( item ) => currentItem.name === item.name ); - function injectThemeAttributeInBlockTemplateContent( block, currentThemeStylesheet @@ -38,30 +34,36 @@ function injectThemeAttributeInBlockTemplateContent( } function preparePatterns( patterns, template, currentThemeStylesheet ) { - return ( - patterns - .filter( - ( pattern ) => ! PATTERN_CORE_SOURCES.includes( pattern.source ) - ) - .filter( filterOutDuplicatesByName ) - // Filter only the patterns that are compatible with the current template. - .filter( ( pattern ) => - pattern.templateTypes?.includes( template.slug ) - ) - .map( ( pattern ) => ( { - ...pattern, - keywords: pattern.keywords || [], - type: PATTERN_TYPES.theme, - blocks: parse( pattern.content, { - __unstableSkipMigrationLogs: true, - } ).map( ( block ) => - injectThemeAttributeInBlockTemplateContent( - block, - currentThemeStylesheet - ) - ), - } ) ) - ); + // This is duplicated. + const filterOutDuplicatesByName = ( currentItem, index, items ) => + index === items.findIndex( ( item ) => currentItem.name === item.name ); + + const filterOutCorePatterns = ( pattern ) => + ! PATTERN_CORE_SOURCES.includes( pattern.source ); + + // Filter only the patterns that are compatible with the current template. + const filterCompatiblePatterns = ( pattern ) => + pattern.templateTypes?.includes( template.slug ); + + return patterns + .filter( + filterOutCorePatterns && + filterOutDuplicatesByName && + filterCompatiblePatterns + ) + .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 ) { From 3521d12272cb840bf5a5806dce7650b9c01b5c1c Mon Sep 17 00:00:00 2001 From: scruffian Date: Wed, 27 Sep 2023 17:59:52 +0100 Subject: [PATCH 34/35] add comments --- .../src/components/sidebar-edit-mode/template-panel/hooks.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) 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 29ff7a693e7dbc..b5e5988491396a 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 @@ -34,10 +34,11 @@ function injectThemeAttributeInBlockTemplateContent( } function preparePatterns( patterns, template, currentThemeStylesheet ) { - // This is duplicated. + // Filter out duplicates. const filterOutDuplicatesByName = ( currentItem, index, items ) => index === items.findIndex( ( item ) => currentItem.name === item.name ); + // Filter out core patterns. const filterOutCorePatterns = ( pattern ) => ! PATTERN_CORE_SOURCES.includes( pattern.source ); From 03e26f35f0fedb285e8a8626a389bef5e2ea7a1d Mon Sep 17 00:00:00 2001 From: Ben Dwyer Date: Wed, 27 Sep 2023 21:08:41 +0100 Subject: [PATCH 35/35] Update packages/edit-site/src/components/sidebar-edit-mode/template-panel/replace-template-button.js Co-authored-by: Andrei Draganescu --- .../sidebar-edit-mode/template-panel/replace-template-button.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 index 764fe61431a683..658aacd331debc 100644 --- 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 @@ -35,7 +35,7 @@ export default function ReplaceTemplateButton( { const onTemplateSelect = async ( selectedTemplate ) => { onClose(); // Close the template suggestions modal first. onClick(); - editEntityRecord( 'postType', postType, postId, { + await editEntityRecord( 'postType', postType, postId, { blocks: selectedTemplate.blocks, content: serialize( selectedTemplate.blocks ), } );