From b795e9caad91727f4384058079212f4f22ef517b Mon Sep 17 00:00:00 2001 From: Luigi Teschio Date: Fri, 25 Oct 2024 12:40:44 +0200 Subject: [PATCH 01/24] move default template types and template part areas to REST API --- lib/compat/wordpress-6.8/template-parts.php | 38 +++++++++++++++++++++ lib/load.php | 1 + packages/core-data/src/entities.js | 2 ++ packages/edit-site/src/index.js | 14 +------- packages/editor/src/store/selectors.js | 26 ++++++-------- 5 files changed, 53 insertions(+), 28 deletions(-) create mode 100644 lib/compat/wordpress-6.8/template-parts.php diff --git a/lib/compat/wordpress-6.8/template-parts.php b/lib/compat/wordpress-6.8/template-parts.php new file mode 100644 index 00000000000000..1f126d1bdd98ee --- /dev/null +++ b/lib/compat/wordpress-6.8/template-parts.php @@ -0,0 +1,38 @@ +data['defaultTemplatePartAreas'] = get_allowed_block_template_part_areas(); + return $response; +} + +add_action( 'rest_index', 'gutenberg_add_default_template_part_areas_to_index' ); + +/** + * Adds the default template types to the REST API index. + * + * This function exposes the default template types through the WordPress REST API. + * Note: This function backports into the wp-includes/rest-api/class-wp-rest-server.php file. + * + * @param WP_REST_Response $response REST API response. + * @return WP_REST_Response Modified REST API response with default template part areas. + */ +function gutenberg_add_default_template_types_to_index( WP_REST_Response $response ) { + $indexed_template_types = array(); + foreach ( get_default_block_template_types() as $slug => $template_type ) { + $template_type['slug'] = (string) $slug; + $indexed_template_types[] = $template_type; + } + + $response->data['defaultTemplateTypes'] = indexed_template_types(); + return $response; +} + +add_action( 'rest_index', 'gutenberg_add_default_template_types_to_index' ); diff --git a/lib/load.php b/lib/load.php index 6236f0eb04b3c6..71d1ba50a95e44 100644 --- a/lib/load.php +++ b/lib/load.php @@ -49,6 +49,7 @@ function gutenberg_is_experiment_enabled( $name ) { // WordPress 6.8 compat. require __DIR__ . '/compat/wordpress-6.8/block-comments.php'; require __DIR__ . '/compat/wordpress-6.8/class-gutenberg-rest-comment-controller-6-8.php'; + require __DIR__ . '/compat/wordpress-6.8/template-parts.php'; // Plugin specific code. require_once __DIR__ . '/class-wp-rest-global-styles-controller-gutenberg.php'; diff --git a/packages/core-data/src/entities.js b/packages/core-data/src/entities.js index 3c10676750a2ab..7235f25c863742 100644 --- a/packages/core-data/src/entities.js +++ b/packages/core-data/src/entities.js @@ -31,6 +31,8 @@ export const rootEntitiesConfig = [ 'site_icon_url', 'site_logo', 'timezone_string', + 'defaultTemplatePartAreas', + 'defaultTemplateTypes', 'url', ].join( ',' ), }, diff --git a/packages/edit-site/src/index.js b/packages/edit-site/src/index.js index 7f124e6b5f7ac6..b96ce5cb67f5e1 100644 --- a/packages/edit-site/src/index.js +++ b/packages/edit-site/src/index.js @@ -10,10 +10,7 @@ import { import { dispatch } from '@wordpress/data'; import deprecated from '@wordpress/deprecated'; import { createRoot, StrictMode } from '@wordpress/element'; -import { - store as editorStore, - privateApis as editorPrivateApis, -} from '@wordpress/editor'; +import { privateApis as editorPrivateApis } from '@wordpress/editor'; import { store as preferencesStore } from '@wordpress/preferences'; import { registerLegacyWidgetBlock, @@ -88,15 +85,6 @@ export function initializeEditor( id, settings ) { dispatch( editSiteStore ).updateSettings( settings ); - // Keep the defaultTemplateTypes in the core/editor settings too, - // so that they can be selected with core/editor selectors in any editor. - // This is needed because edit-site doesn't initialize with EditorProvider, - // which internally uses updateEditorSettings as well. - dispatch( editorStore ).updateEditorSettings( { - defaultTemplateTypes: settings.defaultTemplateTypes, - defaultTemplatePartAreas: settings.defaultTemplatePartAreas, - } ); - // Prevent the default browser action for files dropped outside of dropzones. window.addEventListener( 'dragover', ( e ) => e.preventDefault(), false ); window.addEventListener( 'drop', ( e ) => e.preventDefault(), false ); diff --git a/packages/editor/src/store/selectors.js b/packages/editor/src/store/selectors.js index 2396cb67c73e69..3aa1c4daca96e7 100644 --- a/packages/editor/src/store/selectors.js +++ b/packages/editor/src/store/selectors.js @@ -1702,16 +1702,11 @@ export const getBlockListSettings = getBlockEditorSelector( 'getBlockListSettings' ); -/** - * Returns the default template types. - * - * @param {Object} state Global application state. - * - * @return {Object} The template types. - */ -export function __experimentalGetDefaultTemplateTypes( state ) { - return getEditorSettings( state )?.defaultTemplateTypes; -} +export const __experimentalGetDefaultTemplateTypes = createRegistrySelector( + ( select ) => () => + select( coreStore ).getEntityRecord( 'root', '__unstableBase' ) + ?.defaultTemplateTypes +); /** * Returns the default template part areas. @@ -1720,15 +1715,16 @@ export function __experimentalGetDefaultTemplateTypes( state ) { * * @return {Array} The template part areas. */ -export const __experimentalGetDefaultTemplatePartAreas = createSelector( - ( state ) => { +export const __experimentalGetDefaultTemplatePartAreas = createRegistrySelector( + ( select ) => () => { const areas = - getEditorSettings( state )?.defaultTemplatePartAreas ?? []; + select( coreStore ).getEntityRecord( 'root', '__unstableBase' ) + ?.defaultTemplatePartAreas ?? []; + return areas.map( ( item ) => { return { ...item, icon: getTemplatePartIcon( item.icon ) }; } ); - }, - ( state ) => [ getEditorSettings( state )?.defaultTemplatePartAreas ] + } ); /** From 61b90b5b6a2b156a9f8c7be52013412c9c6a95c4 Mon Sep 17 00:00:00 2001 From: Luigi Teschio Date: Fri, 25 Oct 2024 14:48:30 +0200 Subject: [PATCH 02/24] fix logic --- lib/compat/wordpress-6.8/template-parts.php | 2 +- .../src/template-part/edit/utils/hooks.js | 9 ++------- packages/editor/src/store/selectors.js | 19 ++++++++++--------- 3 files changed, 13 insertions(+), 17 deletions(-) diff --git a/lib/compat/wordpress-6.8/template-parts.php b/lib/compat/wordpress-6.8/template-parts.php index 1f126d1bdd98ee..7f7fb32a0e6a5e 100644 --- a/lib/compat/wordpress-6.8/template-parts.php +++ b/lib/compat/wordpress-6.8/template-parts.php @@ -31,7 +31,7 @@ function gutenberg_add_default_template_types_to_index( WP_REST_Response $respon $indexed_template_types[] = $template_type; } - $response->data['defaultTemplateTypes'] = indexed_template_types(); + $response->data['defaultTemplateTypes'] = $indexed_template_types; return $response; } diff --git a/packages/block-library/src/template-part/edit/utils/hooks.js b/packages/block-library/src/template-part/edit/utils/hooks.js index 39daa4080c8160..a8ed6b673675a6 100644 --- a/packages/block-library/src/template-part/edit/utils/hooks.js +++ b/packages/block-library/src/template-part/edit/utils/hooks.js @@ -136,14 +136,9 @@ export function useCreateTemplatePartFromBlocks( area, setAttributes ) { export function useTemplatePartArea( area ) { return useSelect( ( select ) => { - // FIXME: @wordpress/block-library should not depend on @wordpress/editor. - // Blocks can be loaded into a *non-post* block editor. - /* eslint-disable @wordpress/data-no-store-string-literals */ const definedAreas = - select( - 'core/editor' - ).__experimentalGetDefaultTemplatePartAreas(); - /* eslint-enable @wordpress/data-no-store-string-literals */ + select( coreStore ).getEntityRecord( 'root', '__unstableBase' ) + ?.defaultTemplatePartAreas || []; const selectedArea = definedAreas.find( ( definedArea ) => definedArea.area === area diff --git a/packages/editor/src/store/selectors.js b/packages/editor/src/store/selectors.js index 3aa1c4daca96e7..b3ad5e73928357 100644 --- a/packages/editor/src/store/selectors.js +++ b/packages/editor/src/store/selectors.js @@ -1716,15 +1716,16 @@ export const __experimentalGetDefaultTemplateTypes = createRegistrySelector( * @return {Array} The template part areas. */ export const __experimentalGetDefaultTemplatePartAreas = createRegistrySelector( - ( select ) => () => { - const areas = - select( coreStore ).getEntityRecord( 'root', '__unstableBase' ) - ?.defaultTemplatePartAreas ?? []; - - return areas.map( ( item ) => { - return { ...item, icon: getTemplatePartIcon( item.icon ) }; - } ); - } + ( select ) => + createSelector( () => { + const areas = + select( coreStore ).getEntityRecord( 'root', '__unstableBase' ) + ?.defaultTemplatePartAreas || []; + + return areas.map( ( item ) => { + return { ...item, icon: getTemplatePartIcon( item.icon ) }; + } ); + } ) ); /** From 6aaf16048b991b31374d86095c8d5ea5f03991cb Mon Sep 17 00:00:00 2001 From: Luigi Teschio Date: Fri, 1 Nov 2024 15:48:52 +0100 Subject: [PATCH 03/24] fix E2E test --- .../use-template-part-areas.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-patterns/use-template-part-areas.js b/packages/edit-site/src/components/sidebar-navigation-screen-patterns/use-template-part-areas.js index 77cbf87b3d439e..57d1aeaaabbd6e 100644 --- a/packages/edit-site/src/components/sidebar-navigation-screen-patterns/use-template-part-areas.js +++ b/packages/edit-site/src/components/sidebar-navigation-screen-patterns/use-template-part-areas.js @@ -43,7 +43,7 @@ const useTemplatePartsGroupedByArea = ( items ) => { const key = accumulator[ item.area ] ? item.area : TEMPLATE_PART_AREA_DEFAULT_CATEGORY; - accumulator[ key ].templateParts.push( item ); + accumulator[ key ]?.templateParts?.push( item ); return accumulator; }, knownAreas ); From d141278ef538fdd1518e1a78c9550011f6ce3867 Mon Sep 17 00:00:00 2001 From: Luigi Teschio Date: Mon, 4 Nov 2024 17:05:02 +0100 Subject: [PATCH 04/24] move default template types and template part areas to REST API --- .../use-template-part-area-label.js | 20 +- .../template-part/edit/advanced-controls.js | 22 +- .../edit/utils/get-template-part-icon.js | 20 ++ .../src/components/add-new-template/utils.js | 4 +- .../src/components/page-patterns/header.js | 5 +- .../components/page-patterns/use-patterns.js | 12 +- .../use-template-part-areas.js | 6 +- .../use-edited-entity-record/index.js | 65 ++++- .../create-template-part-modal/index.js | 5 +- .../src/components/post-card-panel/index.js | 62 ++++- packages/editor/src/hooks/template.js | 42 +++ .../editor/src/store/private-selectors.js | 16 +- packages/editor/src/store/selectors.js | 137 ++++++---- packages/editor/src/store/test/selectors.js | 255 ------------------ 14 files changed, 324 insertions(+), 347 deletions(-) create mode 100644 packages/block-library/src/template-part/edit/utils/get-template-part-icon.js create mode 100644 packages/editor/src/hooks/template.js diff --git a/packages/block-library/src/navigation/use-template-part-area-label.js b/packages/block-library/src/navigation/use-template-part-area-label.js index 48763a38ac62d1..c86fb8adeabef5 100644 --- a/packages/block-library/src/navigation/use-template-part-area-label.js +++ b/packages/block-library/src/navigation/use-template-part-area-label.js @@ -11,6 +11,7 @@ import { useSelect } from '@wordpress/data'; // TODO: this util should perhaps be refactored somewhere like core-data. import { createTemplatePartId } from '../template-part/edit/utils/create-template-part-id'; +import { getTemplatePartIcon } from '../template-part/edit/utils/get-template-part-icon'; export default function useTemplatePartAreaLabel( clientId ) { return useSelect( @@ -35,16 +36,15 @@ export default function useTemplatePartAreaLabel( clientId ) { return; } - // FIXME: @wordpress/block-library should not depend on @wordpress/editor. - // Blocks can be loaded into a *non-post* block editor. - // This code is lifted from this file: - // packages/block-library/src/template-part/edit/advanced-controls.js - /* eslint-disable @wordpress/data-no-store-string-literals */ - const definedAreas = - select( - 'core/editor' - ).__experimentalGetDefaultTemplatePartAreas(); - /* eslint-enable @wordpress/data-no-store-string-literals */ + const defaultTemplatePartAreas = + select( coreStore ).getEntityRecord( 'root', '__unstableBase' ) + ?.defaultTemplatePartAreas || []; + + const definedAreas = defaultTemplatePartAreas.map( ( item ) => ( { + ...item, + icon: getTemplatePartIcon( item.icon ), + } ) ); + const { getCurrentTheme, getEditedEntityRecord } = select( coreStore ); diff --git a/packages/block-library/src/template-part/edit/advanced-controls.js b/packages/block-library/src/template-part/edit/advanced-controls.js index 3c319a7ec0fe73..a18a94c7790cca 100644 --- a/packages/block-library/src/template-part/edit/advanced-controls.js +++ b/packages/block-library/src/template-part/edit/advanced-controls.js @@ -1,7 +1,7 @@ /** * WordPress dependencies */ -import { useEntityProp } from '@wordpress/core-data'; +import { useEntityProp, store as coreStore } from '@wordpress/core-data'; import { SelectControl, TextControl } from '@wordpress/components'; import { sprintf, __ } from '@wordpress/i18n'; import { useSelect } from '@wordpress/data'; @@ -10,6 +10,7 @@ import { useSelect } from '@wordpress/data'; * Internal dependencies */ import { TemplatePartImportControls } from './import-controls'; +import { getTemplatePartIcon } from './utils/get-template-part-icon'; const htmlElementMessages = { header: __( @@ -54,14 +55,17 @@ export function TemplatePartAdvancedControls( { templatePartId ); - const definedAreas = useSelect( ( select ) => { - // FIXME: @wordpress/block-library should not depend on @wordpress/editor. - // Blocks can be loaded into a *non-post* block editor. - /* eslint-disable-next-line @wordpress/data-no-store-string-literals */ - return select( - 'core/editor' - ).__experimentalGetDefaultTemplatePartAreas(); - }, [] ); + const defaultTemplatePartAreas = useSelect( + ( select ) => + select( coreStore ).getEntityRecord( 'root', '__unstableBase' ) + ?.defaultTemplatePartAreas || [], + [] + ); + + const definedAreas = defaultTemplatePartAreas.map( ( item ) => ( { + ...item, + icon: getTemplatePartIcon( item.icon ), + } ) ); const areaOptions = definedAreas.map( ( { label, area: _area } ) => ( { label, diff --git a/packages/block-library/src/template-part/edit/utils/get-template-part-icon.js b/packages/block-library/src/template-part/edit/utils/get-template-part-icon.js new file mode 100644 index 00000000000000..bb13a8840c9458 --- /dev/null +++ b/packages/block-library/src/template-part/edit/utils/get-template-part-icon.js @@ -0,0 +1,20 @@ +/** + * WordPress dependencies + */ +import { + header as headerIcon, + footer as footerIcon, + sidebar as sidebarIcon, + symbolFilled as symbolFilledIcon, +} from '@wordpress/icons'; + +export const getTemplatePartIcon = ( iconName ) => { + if ( 'header' === iconName ) { + return headerIcon; + } else if ( 'footer' === iconName ) { + return footerIcon; + } else if ( 'sidebar' === iconName ) { + return sidebarIcon; + } + return symbolFilledIcon; +}; diff --git a/packages/edit-site/src/components/add-new-template/utils.js b/packages/edit-site/src/components/add-new-template/utils.js index e3e2faf9457926..4407062dbc329c 100644 --- a/packages/edit-site/src/components/add-new-template/utils.js +++ b/packages/edit-site/src/components/add-new-template/utils.js @@ -3,7 +3,6 @@ */ import { useSelect } from '@wordpress/data'; import { store as coreStore } from '@wordpress/core-data'; -import { store as editorStore } from '@wordpress/editor'; import { decodeEntities } from '@wordpress/html-entities'; import { useMemo, useCallback } from '@wordpress/element'; import { __, _x, sprintf } from '@wordpress/i18n'; @@ -69,7 +68,8 @@ export const useExistingTemplates = () => { export const useDefaultTemplateTypes = () => { return useSelect( ( select ) => - select( editorStore ).__experimentalGetDefaultTemplateTypes(), + select( coreStore ).getEntityRecord( 'root', '__unstableBase' ) + ?.defaultTemplateTypes || [], [] ); }; diff --git a/packages/edit-site/src/components/page-patterns/header.js b/packages/edit-site/src/components/page-patterns/header.js index 641dc577cb7fe0..0dfd1201bb3dc6 100644 --- a/packages/edit-site/src/components/page-patterns/header.js +++ b/packages/edit-site/src/components/page-patterns/header.js @@ -9,7 +9,7 @@ import { __experimentalText as Text, __experimentalVStack as VStack, } from '@wordpress/components'; -import { store as editorStore } from '@wordpress/editor'; +import { store as coreStore } from '@wordpress/core-data'; import { useSelect } from '@wordpress/data'; import { __, sprintf } from '@wordpress/i18n'; import { moreVertical } from '@wordpress/icons'; @@ -32,7 +32,8 @@ export default function PatternsHeader( { const { patternCategories } = usePatternCategories(); const templatePartAreas = useSelect( ( select ) => - select( editorStore ).__experimentalGetDefaultTemplatePartAreas(), + select( coreStore ).getEntityRecord( 'root', '__unstableBase' ) + ?.defaultTemplatePartAreas || [], [] ); diff --git a/packages/edit-site/src/components/page-patterns/use-patterns.js b/packages/edit-site/src/components/page-patterns/use-patterns.js index f32e278e6354f5..7ad23ea27e2bcc 100644 --- a/packages/edit-site/src/components/page-patterns/use-patterns.js +++ b/packages/edit-site/src/components/page-patterns/use-patterns.js @@ -4,7 +4,6 @@ import { parse } from '@wordpress/blocks'; import { useSelect, createSelector } from '@wordpress/data'; import { store as coreStore } from '@wordpress/core-data'; -import { store as editorStore } from '@wordpress/editor'; import { useMemo } from '@wordpress/element'; /** @@ -28,8 +27,7 @@ const selectTemplateParts = createSelector( ( select, categoryId, search = '' ) => { const { getEntityRecords, isResolving: isResolvingSelector } = select( coreStore ); - const { __experimentalGetDefaultTemplatePartAreas } = - select( editorStore ); + const query = { per_page: -1 }; const templateParts = getEntityRecords( 'postType', TEMPLATE_PART_POST_TYPE, query ) ?? @@ -38,7 +36,10 @@ const selectTemplateParts = createSelector( // In the case where a custom template part area has been removed we need // the current list of areas to cross check against so orphaned template // parts can be treated as uncategorized. - const knownAreas = __experimentalGetDefaultTemplatePartAreas() || []; + const knownAreas = + select( coreStore ).getEntityRecord( 'root', '__unstableBase' ) + ?.defaultTemplatePartAreas || []; + const templatePartAreas = knownAreas.map( ( area ) => area.area ); const templatePartHasCategory = ( item, category ) => { @@ -78,7 +79,8 @@ const selectTemplateParts = createSelector( TEMPLATE_PART_POST_TYPE, { per_page: -1 }, ] ), - select( editorStore ).__experimentalGetDefaultTemplatePartAreas(), + select( coreStore ).getEntityRecord( 'root', '__unstableBase' ) + ?.defaultTemplatePartAreas, ] ); diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-patterns/use-template-part-areas.js b/packages/edit-site/src/components/sidebar-navigation-screen-patterns/use-template-part-areas.js index 57d1aeaaabbd6e..d040751a744804 100644 --- a/packages/edit-site/src/components/sidebar-navigation-screen-patterns/use-template-part-areas.js +++ b/packages/edit-site/src/components/sidebar-navigation-screen-patterns/use-template-part-areas.js @@ -1,9 +1,8 @@ /** * WordPress dependencies */ -import { useEntityRecords } from '@wordpress/core-data'; +import { useEntityRecords, store as coreStore } from '@wordpress/core-data'; import { useSelect } from '@wordpress/data'; -import { store as editorStore } from '@wordpress/editor'; /** * Internal dependencies @@ -18,7 +17,8 @@ const useTemplatePartsGroupedByArea = ( items ) => { const templatePartAreas = useSelect( ( select ) => - select( editorStore ).__experimentalGetDefaultTemplatePartAreas(), + select( coreStore ).getEntityRecord( 'root', '__unstableBase' ) + ?.defaultTemplatePartAreas || [], [] ); diff --git a/packages/edit-site/src/components/use-edited-entity-record/index.js b/packages/edit-site/src/components/use-edited-entity-record/index.js index 22a8bdc32a94a0..35a71d8035a9a7 100644 --- a/packages/edit-site/src/components/use-edited-entity-record/index.js +++ b/packages/edit-site/src/components/use-edited-entity-record/index.js @@ -3,14 +3,71 @@ */ import { useSelect } from '@wordpress/data'; import { store as coreStore } from '@wordpress/core-data'; -import { store as editorStore } from '@wordpress/editor'; import { decodeEntities } from '@wordpress/html-entities'; +import { + header as headerIcon, + footer as footerIcon, + sidebar as sidebarIcon, + symbolFilled as symbolFilledIcon, + layout, +} from '@wordpress/icons'; /** * Internal dependencies */ import { store as editSiteStore } from '../../store'; +const EMPTY_OBJECT = {}; + +const getTemplatePartIcon = ( iconName ) => { + if ( 'header' === iconName ) { + return headerIcon; + } else if ( 'footer' === iconName ) { + return footerIcon; + } else if ( 'sidebar' === iconName ) { + return sidebarIcon; + } + return symbolFilledIcon; +}; + +const getInfoTemplate = ( select, template ) => { + const { description, slug, title, area } = template; + + const templateTypes = + select( coreStore ).getEntityRecord( 'root', '__unstableBase' ) + ?.defaultTemplateTypes || EMPTY_OBJECT; + + const { title: defaultTitle, description: defaultDescription } = + Object.values( templateTypes ).find( ( type ) => type.slug === slug ) ?? + EMPTY_OBJECT; + + const templateTitle = typeof title === 'string' ? title : title?.rendered; + const templateDescription = + typeof description === 'string' ? description : description?.raw; + + const templateAreas = + select( coreStore ).getEntityRecord( 'root', '__unstableBase' ) + ?.defaultTemplatePartAreas || []; + + const templateAreasWithIcon = templateAreas.map( ( item ) => ( { + ...item, + icon: getTemplatePartIcon( item.icon ), + } ) ); + + const templateIcon = + templateAreasWithIcon.find( ( item ) => area === item.area )?.icon || + layout; + + return { + title: + templateTitle && templateTitle !== slug + ? templateTitle + : defaultTitle || slug, + description: templateDescription || defaultDescription, + icon: templateIcon, + }; +}; + export default function useEditedEntityRecord( postType, postId ) { const { record, title, description, isLoaded, icon } = useSelect( ( select ) => { @@ -18,8 +75,9 @@ export default function useEditedEntityRecord( postType, postId ) { select( editSiteStore ); const { getEditedEntityRecord, hasFinishedResolution } = select( coreStore ); - const { __experimentalGetTemplateInfo: getTemplateInfo } = - select( editorStore ); + + const templateInfo = getInfoTemplate( select, _record ); + const usedPostType = postType ?? getEditedPostType(); const usedPostId = postId ?? getEditedPostId(); const _record = getEditedEntityRecord( @@ -34,7 +92,6 @@ export default function useEditedEntityRecord( postType, postId ) { usedPostType, usedPostId, ] ); - const templateInfo = getTemplateInfo( _record ); return { record: _record, diff --git a/packages/editor/src/components/create-template-part-modal/index.js b/packages/editor/src/components/create-template-part-modal/index.js index 5d594cd646cc10..b107ebe84f9e17 100644 --- a/packages/editor/src/components/create-template-part-modal/index.js +++ b/packages/editor/src/components/create-template-part-modal/index.js @@ -27,7 +27,6 @@ import { serialize } from '@wordpress/blocks'; /** * Internal dependencies */ -import { store as editorStore } from '../../store'; import { TEMPLATE_PART_POST_TYPE, TEMPLATE_PART_AREA_DEFAULT_CATEGORY, @@ -81,9 +80,11 @@ export function CreateTemplatePartModalContents( { const templatePartAreas = useSelect( ( select ) => - select( editorStore ).__experimentalGetDefaultTemplatePartAreas(), + select( coreStore ).getEntityRecord( 'root', '__unstableBase' ) + ?.defaultTemplatePartAreas || [], [] ); + async function createTemplatePart() { if ( ! title || isSubmitting ) { return; diff --git a/packages/editor/src/components/post-card-panel/index.js b/packages/editor/src/components/post-card-panel/index.js index 410b8cfd4447d9..4e3cc8c103c7a1 100644 --- a/packages/editor/src/components/post-card-panel/index.js +++ b/packages/editor/src/components/post-card-panel/index.js @@ -10,6 +10,13 @@ import { store as coreStore } from '@wordpress/core-data'; import { useSelect } from '@wordpress/data'; import { __ } from '@wordpress/i18n'; import { decodeEntities } from '@wordpress/html-entities'; +import { + header as headerIcon, + footer as footerIcon, + sidebar as sidebarIcon, + symbolFilled as symbolFilledIcon, + layout, +} from '@wordpress/icons'; /** * Internal dependencies @@ -23,6 +30,57 @@ import { unlock } from '../../lock-unlock'; import PostActions from '../post-actions'; import usePageTypeBadge from '../../utils/pageTypeBadge'; +const EMPTY_OBJECT = {}; + +const getTemplatePartIcon = ( iconName ) => { + if ( 'header' === iconName ) { + return headerIcon; + } else if ( 'footer' === iconName ) { + return footerIcon; + } else if ( 'sidebar' === iconName ) { + return sidebarIcon; + } + return symbolFilledIcon; +}; + +const getInfoTemplate = ( select, template ) => { + const { description, slug, title, area } = template; + + const templateTypes = + select( coreStore ).getEntityRecord( 'root', '__unstableBase' ) + ?.defaultTemplateTypes || EMPTY_OBJECT; + + const { title: defaultTitle, description: defaultDescription } = + Object.values( templateTypes ).find( ( type ) => type.slug === slug ) ?? + EMPTY_OBJECT; + + const templateTitle = typeof title === 'string' ? title : title?.rendered; + const templateDescription = + typeof description === 'string' ? description : description?.raw; + + const templateAreas = + select( coreStore ).getEntityRecord( 'root', '__unstableBase' ) + ?.defaultTemplatePartAreas || []; + + const templateAreasWithIcon = templateAreas.map( ( item ) => ( { + ...item, + icon: getTemplatePartIcon( item.icon ), + } ) ); + + const templateIcon = + templateAreasWithIcon.find( ( item ) => area === item.area )?.icon || + layout; + + return { + title: + templateTitle && templateTitle !== slug + ? templateTitle + : defaultTitle || slug, + description: templateDescription || defaultDescription, + icon: templateIcon, + }; +}; + export default function PostCardPanel( { postType, postId, @@ -30,17 +88,17 @@ export default function PostCardPanel( { } ) { const { title, icon } = useSelect( ( select ) => { - const { __experimentalGetTemplateInfo } = select( editorStore ); const { getEditedEntityRecord } = select( coreStore ); const _record = getEditedEntityRecord( 'postType', postType, postId ); + const _templateInfo = [ TEMPLATE_POST_TYPE, TEMPLATE_PART_POST_TYPE ].includes( postType - ) && __experimentalGetTemplateInfo( _record ); + ) && getInfoTemplate( select, _record ); return { title: _templateInfo?.title || _record?.title, icon: unlock( select( editorStore ) ).getPostIcon( postType, { diff --git a/packages/editor/src/hooks/template.js b/packages/editor/src/hooks/template.js new file mode 100644 index 00000000000000..799a3c6b35a26a --- /dev/null +++ b/packages/editor/src/hooks/template.js @@ -0,0 +1,42 @@ +/** + * WordPress dependencies + */ +import { useSelect } from '@wordpress/data'; +import { store as coreStore } from '@wordpress/core-data'; +/** + * Internal dependencies + */ +import { getTemplatePartIcon } from '../utils'; + +const EMPTY_OBJECT = {}; + +export const useGetDefaultTemplateTypes = () => { + return useSelect( ( select ) => { + return ( + // @ts-expect-error __unstableBase is not in the types + select( coreStore ).getEntityRecord( 'root', '__unstableBase' ) ?? + [] + ); + }, [] ); +}; + +export const useGetDefaultTemplatePartAreas = () => { + const areas = useGetDefaultTemplateTypes(); + + return areas.map( ( item ) => { + return { ...item, icon: getTemplatePartIcon( item.icon ) }; + } ); +}; + +export const useGetDefaultTemplateType = ( slug ) => { + const templateTypes = useGetDefaultTemplateTypes(); + if ( ! templateTypes ) { + return EMPTY_OBJECT; + } + + return ( + Object.values( templateTypes ).find( + ( type ) => type?.slug === slug + ) ?? EMPTY_OBJECT + ); +}; diff --git a/packages/editor/src/store/private-selectors.js b/packages/editor/src/store/private-selectors.js index 9bc065436c10bb..bed221fe1a600e 100644 --- a/packages/editor/src/store/private-selectors.js +++ b/packages/editor/src/store/private-selectors.js @@ -20,11 +20,7 @@ import { store as coreStore } from '@wordpress/core-data'; /** * Internal dependencies */ -import { - getRenderingMode, - getCurrentPost, - __experimentalGetDefaultTemplatePartAreas, -} from './selectors'; +import { getRenderingMode, getCurrentPost } from './selectors'; import { getEntityActions as _getEntityActions, isEntityReady as _isEntityReady, @@ -101,9 +97,13 @@ export const getPostIcon = createRegistrySelector( postType === 'wp_template' ) { return ( - __experimentalGetDefaultTemplatePartAreas( state ).find( - ( item ) => options.area === item.area - )?.icon || layout + ( + select( coreStore ).getEntityRecord( + 'root', + '__unstableBase' + )?.defaultTemplatePartAreas || [] + ).find( ( item ) => options.area === item.area )?.icon || + layout ); } if ( CARD_ICONS[ postType ] ) { diff --git a/packages/editor/src/store/selectors.js b/packages/editor/src/store/selectors.js index b3ad5e73928357..1f7650e3d55ad4 100644 --- a/packages/editor/src/store/selectors.js +++ b/packages/editor/src/store/selectors.js @@ -1703,9 +1703,18 @@ export const getBlockListSettings = getBlockEditorSelector( ); export const __experimentalGetDefaultTemplateTypes = createRegistrySelector( - ( select ) => () => - select( coreStore ).getEntityRecord( 'root', '__unstableBase' ) - ?.defaultTemplateTypes + ( select ) => () => { + deprecated( + "select('core/editor').__experimentalGetDefaultTemplateTypes", + { + since: '6.7', + alternative: + "select('core/core-data').getEntityRecord( 'root', '__unstableBase' )?.defaultTemplateTypes", + } + ); + return select( coreStore ).getEntityRecord( 'root', '__unstableBase' ) + ?.defaultTemplateTypes; + } ); /** @@ -1718,6 +1727,15 @@ export const __experimentalGetDefaultTemplateTypes = createRegistrySelector( export const __experimentalGetDefaultTemplatePartAreas = createRegistrySelector( ( select ) => createSelector( () => { + deprecated( + "select('core/editor').__experimentalGetDefaultTemplatePartAreas", + { + since: '6.7', + alternative: + "select('core/core-data').getEntityRecord( 'root', '__unstableBase' )?.defaultTemplatePartAreas", + } + ); + const areas = select( coreStore ).getEntityRecord( 'root', '__unstableBase' ) ?.defaultTemplatePartAreas || []; @@ -1736,20 +1754,30 @@ export const __experimentalGetDefaultTemplatePartAreas = createRegistrySelector( * * @return {Object} The template type. */ -export const __experimentalGetDefaultTemplateType = createSelector( - ( state, slug ) => { - const templateTypes = __experimentalGetDefaultTemplateTypes( state ); - if ( ! templateTypes ) { - return EMPTY_OBJECT; - } +export const __experimentalGetDefaultTemplateType = createRegistrySelector( + ( select ) => + createSelector( ( state, slug ) => { + deprecated( + "select('core/editor').__experimentalGetDefaultTemplateType", + { + since: '6.7', + } + ); + const templateTypes = select( coreStore ).getEntityRecord( + 'root', + '__unstableBase' + )?.defaultTemplateTypes; + + if ( ! templateTypes ) { + return EMPTY_OBJECT; + } - return ( - Object.values( templateTypes ).find( - ( type ) => type.slug === slug - ) ?? EMPTY_OBJECT - ); - }, - ( state ) => [ __experimentalGetDefaultTemplateTypes( state ) ] + return ( + Object.values( templateTypes ).find( + ( type ) => type.slug === slug + ) ?? EMPTY_OBJECT + ); + } ) ); /** @@ -1760,38 +1788,57 @@ export const __experimentalGetDefaultTemplateType = createSelector( * @param {Object} template The template for which we need information. * @return {Object} Information about the template, including title, description, and icon. */ -export const __experimentalGetTemplateInfo = createSelector( - ( state, template ) => { - if ( ! template ) { - return EMPTY_OBJECT; - } +export const __experimentalGetTemplateInfo = createRegistrySelector( + ( select ) => + createSelector( ( state, template ) => { + deprecated( "select('core/editor').__experimentalGetTemplateInfo", { + since: '6.7', + } ); - const { description, slug, title, area } = template; - const { title: defaultTitle, description: defaultDescription } = - __experimentalGetDefaultTemplateType( state, slug ); + if ( ! template ) { + return EMPTY_OBJECT; + } - const templateTitle = - typeof title === 'string' ? title : title?.rendered; - const templateDescription = - typeof description === 'string' ? description : description?.raw; - const templateIcon = - __experimentalGetDefaultTemplatePartAreas( state ).find( - ( item ) => area === item.area - )?.icon || layout; + const { description, slug, title, area } = template; - return { - title: - templateTitle && templateTitle !== slug - ? templateTitle - : defaultTitle || slug, - description: templateDescription || defaultDescription, - icon: templateIcon, - }; - }, - ( state ) => [ - __experimentalGetDefaultTemplateTypes( state ), - __experimentalGetDefaultTemplatePartAreas( state ), - ] + const templateTypes = + select( coreStore ).getEntityRecord( 'root', '__unstableBase' ) + ?.defaultTemplateTypes || EMPTY_OBJECT; + + const { title: defaultTitle, description: defaultDescription } = + Object.values( templateTypes ).find( + ( type ) => type.slug === slug + ) ?? EMPTY_OBJECT; + + const templateTitle = + typeof title === 'string' ? title : title?.rendered; + const templateDescription = + typeof description === 'string' + ? description + : description?.raw; + + const templateAreas = + select( coreStore ).getEntityRecord( 'root', '__unstableBase' ) + ?.defaultTemplatePartAreas || []; + + const templateAreasWithIcon = templateAreas.map( ( item ) => ( { + ...item, + icon: getTemplatePartIcon( item.icon ), + } ) ); + + const templateIcon = + templateAreasWithIcon.find( ( item ) => area === item.area ) + ?.icon || layout; + + return { + title: + templateTitle && templateTitle !== slug + ? templateTitle + : defaultTitle || slug, + description: templateDescription || defaultDescription, + icon: templateIcon, + }; + } ) ); /** diff --git a/packages/editor/src/store/test/selectors.js b/packages/editor/src/store/test/selectors.js index 1de25604ebd7e3..2a36fabcd2ec97 100644 --- a/packages/editor/src/store/test/selectors.js +++ b/packages/editor/src/store/test/selectors.js @@ -16,7 +16,6 @@ import { getBlockTypes, } from '@wordpress/blocks'; import { RawHTML } from '@wordpress/element'; -import { layout, footer, header } from '@wordpress/icons'; /** * Internal dependencies @@ -188,43 +187,11 @@ const { isPostAutosavingLocked, canUserUseUnfilteredHTML, getPostTypeLabel, - __experimentalGetDefaultTemplateType, - __experimentalGetDefaultTemplateTypes, - __experimentalGetTemplateInfo, - __experimentalGetDefaultTemplatePartAreas, isEditorPanelRemoved, isInserterOpened, isListViewOpened, } = selectors; -const defaultTemplateTypes = [ - { - title: 'Default (Index)', - description: 'Main template', - slug: 'index', - }, - { - title: '404 (Not Found)', - description: 'Applied when content cannot be found', - slug: '404', - }, -]; - -const defaultTemplatePartAreas = [ - { - area: 'header', - label: 'Header', - description: 'Some description of a header', - icon: 'header', - }, - { - area: 'footer', - label: 'Footer', - description: 'Some description of a footer', - icon: 'footer', - }, -]; - describe( 'selectors', () => { let cachedSelectors; @@ -2766,228 +2733,6 @@ describe( 'selectors', () => { } ); } ); - describe( '__experimentalGetDefaultTemplateTypes', () => { - const state = { editorSettings: { defaultTemplateTypes } }; - - it( 'returns undefined if there are no default template types', () => { - const emptyState = { editorSettings: {} }; - expect( - __experimentalGetDefaultTemplateTypes( emptyState ) - ).toBeUndefined(); - } ); - - it( 'returns a list of default template types if present in state', () => { - expect( - __experimentalGetDefaultTemplateTypes( state ) - ).toHaveLength( 2 ); - } ); - } ); - - describe( '__experimentalGetDefaultTemplatePartAreas', () => { - const state = { editorSettings: { defaultTemplatePartAreas } }; - - it( 'returns empty array if there are no default template part areas', () => { - const emptyState = { editorSettings: {} }; - expect( - __experimentalGetDefaultTemplatePartAreas( emptyState ) - ).toHaveLength( 0 ); - } ); - - it( 'returns a list of default template part areas if present in state', () => { - expect( - __experimentalGetDefaultTemplatePartAreas( state ) - ).toHaveLength( 2 ); - } ); - - it( 'assigns an icon to each area', () => { - const templatePartAreas = - __experimentalGetDefaultTemplatePartAreas( state ); - templatePartAreas.forEach( ( area ) => - expect( area.icon ).not.toBeNull() - ); - } ); - } ); - - describe( '__experimentalGetDefaultTemplateType', () => { - const state = { editorSettings: { defaultTemplateTypes } }; - - it( 'returns an empty object if there are no default template types', () => { - const emptyState = { editorSettings: {} }; - expect( - __experimentalGetDefaultTemplateType( emptyState, 'slug' ) - ).toEqual( {} ); - } ); - - it( 'returns an empty object if the requested slug is not found', () => { - expect( - __experimentalGetDefaultTemplateType( state, 'foobar' ) - ).toEqual( {} ); - } ); - - it( 'returns the requested default template type', () => { - expect( - __experimentalGetDefaultTemplateType( state, 'index' ) - ).toEqual( { - title: 'Default (Index)', - description: 'Main template', - slug: 'index', - } ); - } ); - - it( 'returns the requested default template type even when the slug is numeric', () => { - expect( - __experimentalGetDefaultTemplateType( state, '404' ) - ).toEqual( { - title: '404 (Not Found)', - description: 'Applied when content cannot be found', - slug: '404', - } ); - } ); - } ); - - describe( '__experimentalGetTemplateInfo', () => { - const state = { - editorSettings: { defaultTemplateTypes, defaultTemplatePartAreas }, - }; - - it( 'should return an empty object if no template is passed', () => { - expect( __experimentalGetTemplateInfo( state, null ) ).toEqual( - {} - ); - expect( __experimentalGetTemplateInfo( state, undefined ) ).toEqual( - {} - ); - expect( __experimentalGetTemplateInfo( state, false ) ).toEqual( - {} - ); - } ); - - it( 'should return the default title if none is defined on the template', () => { - expect( - __experimentalGetTemplateInfo( state, { slug: 'index' } ).title - ).toEqual( 'Default (Index)' ); - } ); - - it( 'should return the rendered title if defined on the template', () => { - expect( - __experimentalGetTemplateInfo( state, { - slug: 'index', - title: { rendered: 'test title' }, - } ).title - ).toEqual( 'test title' ); - } ); - - it( 'should return the slug if no title is found', () => { - expect( - __experimentalGetTemplateInfo( state, { - slug: 'not a real template', - } ).title - ).toEqual( 'not a real template' ); - } ); - - it( 'should return the default description if none is defined on the template', () => { - expect( - __experimentalGetTemplateInfo( state, { slug: 'index' } ) - .description - ).toEqual( 'Main template' ); - } ); - - it( 'should return the raw excerpt as description if defined on the template', () => { - expect( - __experimentalGetTemplateInfo( state, { - slug: 'index', - description: { raw: 'test description' }, - } ).description - ).toEqual( 'test description' ); - } ); - - it( 'should return a title, description, and icon', () => { - expect( - __experimentalGetTemplateInfo( state, { slug: 'index' } ) - ).toEqual( { - title: 'Default (Index)', - description: 'Main template', - icon: layout, - } ); - - expect( - __experimentalGetTemplateInfo( state, { - slug: 'index', - title: { rendered: 'test title' }, - } ) - ).toEqual( { - title: 'test title', - description: 'Main template', - icon: layout, - } ); - - expect( - __experimentalGetTemplateInfo( state, { - slug: 'index', - description: { raw: 'test description' }, - } ) - ).toEqual( { - title: 'Default (Index)', - description: 'test description', - icon: layout, - } ); - - expect( - __experimentalGetTemplateInfo( state, { - slug: 'index', - title: { rendered: 'test title' }, - description: { raw: 'test description' }, - } ) - ).toEqual( { - title: 'test title', - description: 'test description', - icon: layout, - } ); - } ); - - it( 'should return correct icon based on area', () => { - expect( - __experimentalGetTemplateInfo( state, { - slug: 'template part, area = uncategorized', - area: 'uncategorized', - } ) - ).toEqual( { - title: 'template part, area = uncategorized', - icon: layout, - } ); - - expect( - __experimentalGetTemplateInfo( state, { - slug: 'template part, area = invalid', - area: 'invalid', - } ) - ).toEqual( { - title: 'template part, area = invalid', - icon: layout, - } ); - - expect( - __experimentalGetTemplateInfo( state, { - slug: 'template part, area = header', - area: 'header', - } ) - ).toEqual( { - title: 'template part, area = header', - icon: header, - } ); - - expect( - __experimentalGetTemplateInfo( state, { - slug: 'template part, area = footer', - area: 'footer', - } ) - ).toEqual( { - title: 'template part, area = footer', - icon: footer, - } ); - } ); - } ); - describe( 'getPostTypeLabel', () => { it( 'should return the correct label for the current post type', () => { const postTypes = [ From bde1d80d8dc775e06fe4ef6b88207782253c3d7c Mon Sep 17 00:00:00 2001 From: Luigi Teschio Date: Mon, 4 Nov 2024 17:34:16 +0100 Subject: [PATCH 05/24] fix error --- .../src/components/use-edited-entity-record/index.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/packages/edit-site/src/components/use-edited-entity-record/index.js b/packages/edit-site/src/components/use-edited-entity-record/index.js index 35a71d8035a9a7..fb9ec2f77d3d0c 100644 --- a/packages/edit-site/src/components/use-edited-entity-record/index.js +++ b/packages/edit-site/src/components/use-edited-entity-record/index.js @@ -76,8 +76,6 @@ export default function useEditedEntityRecord( postType, postId ) { const { getEditedEntityRecord, hasFinishedResolution } = select( coreStore ); - const templateInfo = getInfoTemplate( select, _record ); - const usedPostType = postType ?? getEditedPostType(); const usedPostId = postId ?? getEditedPostId(); const _record = getEditedEntityRecord( @@ -85,6 +83,9 @@ export default function useEditedEntityRecord( postType, postId ) { usedPostType, usedPostId ); + + const templateInfo = getInfoTemplate( select, _record ); + const _isLoaded = usedPostId && hasFinishedResolution( 'getEditedEntityRecord', [ From de703b50c54def19449b98411a358122b8dcfe2c Mon Sep 17 00:00:00 2001 From: Luigi Teschio Date: Mon, 4 Nov 2024 17:38:14 +0100 Subject: [PATCH 06/24] remove not necessary file --- packages/editor/src/hooks/template.js | 42 --------------------------- 1 file changed, 42 deletions(-) delete mode 100644 packages/editor/src/hooks/template.js diff --git a/packages/editor/src/hooks/template.js b/packages/editor/src/hooks/template.js deleted file mode 100644 index 799a3c6b35a26a..00000000000000 --- a/packages/editor/src/hooks/template.js +++ /dev/null @@ -1,42 +0,0 @@ -/** - * WordPress dependencies - */ -import { useSelect } from '@wordpress/data'; -import { store as coreStore } from '@wordpress/core-data'; -/** - * Internal dependencies - */ -import { getTemplatePartIcon } from '../utils'; - -const EMPTY_OBJECT = {}; - -export const useGetDefaultTemplateTypes = () => { - return useSelect( ( select ) => { - return ( - // @ts-expect-error __unstableBase is not in the types - select( coreStore ).getEntityRecord( 'root', '__unstableBase' ) ?? - [] - ); - }, [] ); -}; - -export const useGetDefaultTemplatePartAreas = () => { - const areas = useGetDefaultTemplateTypes(); - - return areas.map( ( item ) => { - return { ...item, icon: getTemplatePartIcon( item.icon ) }; - } ); -}; - -export const useGetDefaultTemplateType = ( slug ) => { - const templateTypes = useGetDefaultTemplateTypes(); - if ( ! templateTypes ) { - return EMPTY_OBJECT; - } - - return ( - Object.values( templateTypes ).find( - ( type ) => type?.slug === slug - ) ?? EMPTY_OBJECT - ); -}; From f8962ce1573202b9fc2dd4a4aea58112533b1d08 Mon Sep 17 00:00:00 2001 From: Luigi Teschio Date: Mon, 4 Nov 2024 17:38:19 +0100 Subject: [PATCH 07/24] fix naming --- lib/compat/wordpress-6.8/template-parts.php | 4 ++-- packages/core-data/src/entities.js | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/lib/compat/wordpress-6.8/template-parts.php b/lib/compat/wordpress-6.8/template-parts.php index 7f7fb32a0e6a5e..2d85e49982a234 100644 --- a/lib/compat/wordpress-6.8/template-parts.php +++ b/lib/compat/wordpress-6.8/template-parts.php @@ -9,7 +9,7 @@ * @return WP_REST_Response Modified REST API response with default template part areas. */ function gutenberg_add_default_template_part_areas_to_index( WP_REST_Response $response ) { - $response->data['defaultTemplatePartAreas'] = get_allowed_block_template_part_areas(); + $response->data['default_template_part_areas'] = get_allowed_block_template_part_areas(); return $response; } @@ -31,7 +31,7 @@ function gutenberg_add_default_template_types_to_index( WP_REST_Response $respon $indexed_template_types[] = $template_type; } - $response->data['defaultTemplateTypes'] = $indexed_template_types; + $response->data['default_template_types'] = $indexed_template_types; return $response; } diff --git a/packages/core-data/src/entities.js b/packages/core-data/src/entities.js index 7235f25c863742..2730cdf3d64bf4 100644 --- a/packages/core-data/src/entities.js +++ b/packages/core-data/src/entities.js @@ -31,8 +31,8 @@ export const rootEntitiesConfig = [ 'site_icon_url', 'site_logo', 'timezone_string', - 'defaultTemplatePartAreas', - 'defaultTemplateTypes', + 'default_template_part_areas', + 'default_template_types', 'url', ].join( ',' ), }, From fc95c3fb445c2466de0c9a019d8ae83dee64d585 Mon Sep 17 00:00:00 2001 From: Luigi Teschio Date: Mon, 4 Nov 2024 18:27:17 +0100 Subject: [PATCH 08/24] remove duplicate code --- .../src/template-part/variations.js | 20 ++++--------------- .../use-edited-entity-record/index.js | 20 ++----------------- .../src/components/post-card-panel/index.js | 20 ++----------------- 3 files changed, 8 insertions(+), 52 deletions(-) diff --git a/packages/block-library/src/template-part/variations.js b/packages/block-library/src/template-part/variations.js index acd8af13508ba9..6f62057bec33dd 100644 --- a/packages/block-library/src/template-part/variations.js +++ b/packages/block-library/src/template-part/variations.js @@ -3,23 +3,11 @@ */ import { store as coreDataStore } from '@wordpress/core-data'; import { select } from '@wordpress/data'; -import { - header as headerIcon, - footer as footerIcon, - sidebar as sidebarIcon, - symbolFilled as symbolFilledIcon, -} from '@wordpress/icons'; -function getTemplatePartIcon( iconName ) { - if ( 'header' === iconName ) { - return headerIcon; - } else if ( 'footer' === iconName ) { - return footerIcon; - } else if ( 'sidebar' === iconName ) { - return sidebarIcon; - } - return symbolFilledIcon; -} +/** + * Internal dependencies + */ +import { getTemplatePartIcon } from './edit/utils/get-template-part-icon'; export function enhanceTemplatePartVariations( settings, name ) { if ( name !== 'core/template-part' ) { diff --git a/packages/edit-site/src/components/use-edited-entity-record/index.js b/packages/edit-site/src/components/use-edited-entity-record/index.js index fb9ec2f77d3d0c..3593ba5906b816 100644 --- a/packages/edit-site/src/components/use-edited-entity-record/index.js +++ b/packages/edit-site/src/components/use-edited-entity-record/index.js @@ -4,13 +4,8 @@ import { useSelect } from '@wordpress/data'; import { store as coreStore } from '@wordpress/core-data'; import { decodeEntities } from '@wordpress/html-entities'; -import { - header as headerIcon, - footer as footerIcon, - sidebar as sidebarIcon, - symbolFilled as symbolFilledIcon, - layout, -} from '@wordpress/icons'; +import { layout } from '@wordpress/icons'; +import { getTemplatePartIcon } from '@wordpress/editor'; /** * Internal dependencies @@ -19,17 +14,6 @@ import { store as editSiteStore } from '../../store'; const EMPTY_OBJECT = {}; -const getTemplatePartIcon = ( iconName ) => { - if ( 'header' === iconName ) { - return headerIcon; - } else if ( 'footer' === iconName ) { - return footerIcon; - } else if ( 'sidebar' === iconName ) { - return sidebarIcon; - } - return symbolFilledIcon; -}; - const getInfoTemplate = ( select, template ) => { const { description, slug, title, area } = template; diff --git a/packages/editor/src/components/post-card-panel/index.js b/packages/editor/src/components/post-card-panel/index.js index 4e3cc8c103c7a1..b3beb1f6e806cd 100644 --- a/packages/editor/src/components/post-card-panel/index.js +++ b/packages/editor/src/components/post-card-panel/index.js @@ -10,13 +10,7 @@ import { store as coreStore } from '@wordpress/core-data'; import { useSelect } from '@wordpress/data'; import { __ } from '@wordpress/i18n'; import { decodeEntities } from '@wordpress/html-entities'; -import { - header as headerIcon, - footer as footerIcon, - sidebar as sidebarIcon, - symbolFilled as symbolFilledIcon, - layout, -} from '@wordpress/icons'; +import { layout } from '@wordpress/icons'; /** * Internal dependencies @@ -29,20 +23,10 @@ import { import { unlock } from '../../lock-unlock'; import PostActions from '../post-actions'; import usePageTypeBadge from '../../utils/pageTypeBadge'; +import { getTemplatePartIcon } from '../../utils'; const EMPTY_OBJECT = {}; -const getTemplatePartIcon = ( iconName ) => { - if ( 'header' === iconName ) { - return headerIcon; - } else if ( 'footer' === iconName ) { - return footerIcon; - } else if ( 'sidebar' === iconName ) { - return sidebarIcon; - } - return symbolFilledIcon; -}; - const getInfoTemplate = ( select, template ) => { const { description, slug, title, area } = template; From d20b8adf65e4c25ad14c48ba2e733e6f0cb38d78 Mon Sep 17 00:00:00 2001 From: Luigi Teschio Date: Tue, 5 Nov 2024 10:29:48 +0100 Subject: [PATCH 09/24] remove duplicated code --- .../use-edited-entity-record/index.js | 58 +++++-------------- packages/editor/README.md | 4 ++ .../src/components/document-bar/index.js | 23 +++++--- .../entity-record-item.js | 19 ++++-- packages/editor/src/private-apis.js | 3 +- packages/editor/src/store/selectors.js | 40 +++---------- .../editor/src/utils/get-template-info.js | 44 ++++++++++++++ packages/editor/src/utils/index.js | 1 + 8 files changed, 105 insertions(+), 87 deletions(-) create mode 100644 packages/editor/src/utils/get-template-info.js diff --git a/packages/edit-site/src/components/use-edited-entity-record/index.js b/packages/edit-site/src/components/use-edited-entity-record/index.js index 3593ba5906b816..796d333ca09caf 100644 --- a/packages/edit-site/src/components/use-edited-entity-record/index.js +++ b/packages/edit-site/src/components/use-edited-entity-record/index.js @@ -4,53 +4,15 @@ import { useSelect } from '@wordpress/data'; import { store as coreStore } from '@wordpress/core-data'; import { decodeEntities } from '@wordpress/html-entities'; -import { layout } from '@wordpress/icons'; -import { getTemplatePartIcon } from '@wordpress/editor'; +import { privateApis as editorPrivateApis } from '@wordpress/editor'; /** * Internal dependencies */ import { store as editSiteStore } from '../../store'; +import { unlock } from '../../lock-unlock'; -const EMPTY_OBJECT = {}; - -const getInfoTemplate = ( select, template ) => { - const { description, slug, title, area } = template; - - const templateTypes = - select( coreStore ).getEntityRecord( 'root', '__unstableBase' ) - ?.defaultTemplateTypes || EMPTY_OBJECT; - - const { title: defaultTitle, description: defaultDescription } = - Object.values( templateTypes ).find( ( type ) => type.slug === slug ) ?? - EMPTY_OBJECT; - - const templateTitle = typeof title === 'string' ? title : title?.rendered; - const templateDescription = - typeof description === 'string' ? description : description?.raw; - - const templateAreas = - select( coreStore ).getEntityRecord( 'root', '__unstableBase' ) - ?.defaultTemplatePartAreas || []; - - const templateAreasWithIcon = templateAreas.map( ( item ) => ( { - ...item, - icon: getTemplatePartIcon( item.icon ), - } ) ); - - const templateIcon = - templateAreasWithIcon.find( ( item ) => area === item.area )?.icon || - layout; - - return { - title: - templateTitle && templateTitle !== slug - ? templateTitle - : defaultTitle || slug, - description: templateDescription || defaultDescription, - icon: templateIcon, - }; -}; +const { getTemplateInfo } = unlock( editorPrivateApis ); export default function useEditedEntityRecord( postType, postId ) { const { record, title, description, isLoaded, icon } = useSelect( @@ -68,7 +30,19 @@ export default function useEditedEntityRecord( postType, postId ) { usedPostId ); - const templateInfo = getInfoTemplate( select, _record ); + const templateAreas = + select( coreStore ).getEntityRecord( 'root', '__unstableBase' ) + ?.defaultTemplatePartAreas || []; + + const templateTypes = + select( coreStore ).getEntityRecord( 'root', '__unstableBase' ) + ?.defaultTemplateTypes || []; + + const templateInfo = getTemplateInfo( { + template: _record, + templateAreas, + templateTypes, + } ); const _isLoaded = usedPostId && diff --git a/packages/editor/README.md b/packages/editor/README.md index bcd1727e046d07..de15118dc0b28d 100644 --- a/packages/editor/README.md +++ b/packages/editor/README.md @@ -440,6 +440,10 @@ getDerivedStateFromError is used to render a fallback UI after an error has been > **Deprecated** since 5.3, use `wp.blockEditor.getFontSizeClass` instead. +### getTemplateInfo + +Undocumented declaration. + ### getTemplatePartIcon Helper function to retrieve the corresponding icon by name. diff --git a/packages/editor/src/components/document-bar/index.js b/packages/editor/src/components/document-bar/index.js index 031262f52f7268..6498f4598541a4 100644 --- a/packages/editor/src/components/document-bar/index.js +++ b/packages/editor/src/components/document-bar/index.js @@ -29,6 +29,7 @@ import { decodeEntities } from '@wordpress/html-entities'; import { TEMPLATE_POST_TYPES } from '../../store/constants'; import { store as editorStore } from '../../store'; import usePageTypeBadge from '../../utils/pageTypeBadge'; +import { getTemplateInfo } from '../../utils'; /** @typedef {import("@wordpress/components").IconType} IconType */ @@ -60,12 +61,8 @@ export default function DocumentBar( props ) { templateTitle, onNavigateToPreviousEntityRecord, } = useSelect( ( select ) => { - const { - getCurrentPostType, - getCurrentPostId, - getEditorSettings, - __experimentalGetTemplateInfo: getTemplateInfo, - } = select( editorStore ); + const { getCurrentPostType, getCurrentPostId, getEditorSettings } = + select( editorStore ); const { getEditedEntityRecord, getPostType, @@ -78,7 +75,19 @@ export default function DocumentBar( props ) { _postType, _postId ); - const _templateInfo = getTemplateInfo( _document ); + + const templateAreas = + select( coreStore ).getEntityRecord( 'root', '__unstableBase' ) + ?.defaultTemplatePartAreas || []; + + const templateTypes = + select( coreStore ).getEntityRecord( 'root', '__unstableBase' ) + ?.defaultTemplateTypes || []; + const _templateInfo = getTemplateInfo( { + templateAreas, + templateTypes, + template: _document, + } ); const _postTypeLabel = getPostType( _postType )?.labels?.singular_name; return { diff --git a/packages/editor/src/components/entities-saved-states/entity-record-item.js b/packages/editor/src/components/entities-saved-states/entity-record-item.js index ca9fb2e0b169c3..c21937d3042545 100644 --- a/packages/editor/src/components/entities-saved-states/entity-record-item.js +++ b/packages/editor/src/components/entities-saved-states/entity-record-item.js @@ -12,6 +12,7 @@ import { decodeEntities } from '@wordpress/html-entities'; */ import { store as editorStore } from '../../store'; import { unlock } from '../../lock-unlock'; +import { getTemplateInfo } from '../../utils'; export default function EntityRecordItem( { record, checked, onChange } ) { const { name, kind, title, key } = record; @@ -33,11 +34,21 @@ export default function EntityRecordItem( { record, checked, onChange } ) { name, key ); + + const templateAreas = + select( coreStore ).getEntityRecord( 'root', '__unstableBase' ) + ?.defaultTemplatePartAreas || []; + + const templateTypes = + select( coreStore ).getEntityRecord( 'root', '__unstableBase' ) + ?.defaultTemplateTypes || []; + return { - entityRecordTitle: - select( editorStore ).__experimentalGetTemplateInfo( - template - ).title, + entityRecordTitle: getTemplateInfo( { + template, + templateAreas, + templateTypes, + } ).title, hasPostMetaChanges: unlock( select( editorStore ) ).hasPostMetaChanges( name, key ), diff --git a/packages/editor/src/private-apis.js b/packages/editor/src/private-apis.js index f9a6d4d17904ee..ebbc55208e9ca5 100644 --- a/packages/editor/src/private-apis.js +++ b/packages/editor/src/private-apis.js @@ -24,6 +24,7 @@ import { GlobalStylesProvider, } from './components/global-styles-provider'; import { registerCoreBlockBindingsSources } from './bindings/api'; +import { getTemplateInfo } from './utils'; const { store: interfaceStore, ...remainingInterfaceApis } = interfaceApis; @@ -44,7 +45,7 @@ lock( privateApis, { ViewMoreMenuGroup, ResizableEditor, registerCoreBlockBindingsSources, - + getTemplateInfo, // This is a temporary private API while we're updating the site editor to use EditorProvider. interfaceStore, ...remainingInterfaceApis, diff --git a/packages/editor/src/store/selectors.js b/packages/editor/src/store/selectors.js index 1f7650e3d55ad4..376a12f369fde8 100644 --- a/packages/editor/src/store/selectors.js +++ b/packages/editor/src/store/selectors.js @@ -12,7 +12,6 @@ import { addQueryArgs, cleanForSlug } from '@wordpress/url'; import { createSelector, createRegistrySelector } from '@wordpress/data'; import deprecated from '@wordpress/deprecated'; import { Platform } from '@wordpress/element'; -import { layout } from '@wordpress/icons'; import { store as blockEditorStore } from '@wordpress/block-editor'; import { store as coreStore } from '@wordpress/core-data'; import { store as preferencesStore } from '@wordpress/preferences'; @@ -29,6 +28,7 @@ import { import { getPostRawValue } from './reducer'; import { getTemplatePartIcon } from '../utils/get-template-part-icon'; import { unlock } from '../lock-unlock'; +import { getTemplateInfo } from '../utils'; /** * Shared reference to an empty object for cases where it is important to avoid @@ -1799,45 +1799,19 @@ export const __experimentalGetTemplateInfo = createRegistrySelector( return EMPTY_OBJECT; } - const { description, slug, title, area } = template; - const templateTypes = select( coreStore ).getEntityRecord( 'root', '__unstableBase' ) - ?.defaultTemplateTypes || EMPTY_OBJECT; - - const { title: defaultTitle, description: defaultDescription } = - Object.values( templateTypes ).find( - ( type ) => type.slug === slug - ) ?? EMPTY_OBJECT; - - const templateTitle = - typeof title === 'string' ? title : title?.rendered; - const templateDescription = - typeof description === 'string' - ? description - : description?.raw; + ?.defaultTemplateTypes || []; const templateAreas = select( coreStore ).getEntityRecord( 'root', '__unstableBase' ) ?.defaultTemplatePartAreas || []; - const templateAreasWithIcon = templateAreas.map( ( item ) => ( { - ...item, - icon: getTemplatePartIcon( item.icon ), - } ) ); - - const templateIcon = - templateAreasWithIcon.find( ( item ) => area === item.area ) - ?.icon || layout; - - return { - title: - templateTitle && templateTitle !== slug - ? templateTitle - : defaultTitle || slug, - description: templateDescription || defaultDescription, - icon: templateIcon, - }; + return getTemplateInfo( { + template, + templateAreas, + templateTypes, + } ); } ) ); diff --git a/packages/editor/src/utils/get-template-info.js b/packages/editor/src/utils/get-template-info.js new file mode 100644 index 00000000000000..a8de159ecf8058 --- /dev/null +++ b/packages/editor/src/utils/get-template-info.js @@ -0,0 +1,44 @@ +/** + * WordPress dependencies + */ +import { layout } from '@wordpress/icons'; +/** + * Internal dependencies + */ +import { getTemplatePartIcon } from '.'; + +const EMPTY_OBJECT = {}; + +export const getTemplateInfo = ( { + templateTypes, + templateAreas, + template, +} ) => { + const { description, slug, title, area } = template; + + const { title: defaultTitle, description: defaultDescription } = + Object.values( templateTypes ).find( ( type ) => type.slug === slug ) ?? + EMPTY_OBJECT; + + const templateTitle = typeof title === 'string' ? title : title?.rendered; + const templateDescription = + typeof description === 'string' ? description : description?.raw; + + const templateAreasWithIcon = templateAreas.map( ( item ) => ( { + ...item, + icon: getTemplatePartIcon( item.icon ), + } ) ); + + const templateIcon = + templateAreasWithIcon.find( ( item ) => area === item.area )?.icon || + layout; + + return { + title: + templateTitle && templateTitle !== slug + ? templateTitle + : defaultTitle || slug, + description: templateDescription || defaultDescription, + icon: templateIcon, + }; +}; diff --git a/packages/editor/src/utils/index.js b/packages/editor/src/utils/index.js index d85892a57bd0a8..de1e8e5c21c01e 100644 --- a/packages/editor/src/utils/index.js +++ b/packages/editor/src/utils/index.js @@ -6,3 +6,4 @@ import mediaUpload from './media-upload'; export { mediaUpload }; export { cleanForSlug } from './url.js'; export { getTemplatePartIcon } from './get-template-part-icon'; +export { getTemplateInfo } from './get-template-info'; From afe5365891e00579181a15f81cf184799fe43ad0 Mon Sep 17 00:00:00 2001 From: Luigi Teschio Date: Tue, 5 Nov 2024 10:39:42 +0100 Subject: [PATCH 10/24] improve logic --- .../src/components/post-card-panel/index.js | 66 ++++++------------- 1 file changed, 20 insertions(+), 46 deletions(-) diff --git a/packages/editor/src/components/post-card-panel/index.js b/packages/editor/src/components/post-card-panel/index.js index b3beb1f6e806cd..c371f700706813 100644 --- a/packages/editor/src/components/post-card-panel/index.js +++ b/packages/editor/src/components/post-card-panel/index.js @@ -10,7 +10,6 @@ import { store as coreStore } from '@wordpress/core-data'; import { useSelect } from '@wordpress/data'; import { __ } from '@wordpress/i18n'; import { decodeEntities } from '@wordpress/html-entities'; -import { layout } from '@wordpress/icons'; /** * Internal dependencies @@ -23,47 +22,7 @@ import { import { unlock } from '../../lock-unlock'; import PostActions from '../post-actions'; import usePageTypeBadge from '../../utils/pageTypeBadge'; -import { getTemplatePartIcon } from '../../utils'; - -const EMPTY_OBJECT = {}; - -const getInfoTemplate = ( select, template ) => { - const { description, slug, title, area } = template; - - const templateTypes = - select( coreStore ).getEntityRecord( 'root', '__unstableBase' ) - ?.defaultTemplateTypes || EMPTY_OBJECT; - - const { title: defaultTitle, description: defaultDescription } = - Object.values( templateTypes ).find( ( type ) => type.slug === slug ) ?? - EMPTY_OBJECT; - - const templateTitle = typeof title === 'string' ? title : title?.rendered; - const templateDescription = - typeof description === 'string' ? description : description?.raw; - - const templateAreas = - select( coreStore ).getEntityRecord( 'root', '__unstableBase' ) - ?.defaultTemplatePartAreas || []; - - const templateAreasWithIcon = templateAreas.map( ( item ) => ( { - ...item, - icon: getTemplatePartIcon( item.icon ), - } ) ); - - const templateIcon = - templateAreasWithIcon.find( ( item ) => area === item.area )?.icon || - layout; - - return { - title: - templateTitle && templateTitle !== slug - ? templateTitle - : defaultTitle || slug, - description: templateDescription || defaultDescription, - icon: templateIcon, - }; -}; +import { getTemplateInfo } from '../../utils'; export default function PostCardPanel( { postType, @@ -79,10 +38,25 @@ export default function PostCardPanel( { postId ); - const _templateInfo = - [ TEMPLATE_POST_TYPE, TEMPLATE_PART_POST_TYPE ].includes( - postType - ) && getInfoTemplate( select, _record ); + const templateAreas = + select( coreStore ).getEntityRecord( 'root', '__unstableBase' ) + ?.defaultTemplatePartAreas || []; + + const templateTypes = + select( coreStore ).getEntityRecord( 'root', '__unstableBase' ) + ?.defaultTemplateTypes || []; + + const _templateInfo = [ + TEMPLATE_POST_TYPE, + TEMPLATE_PART_POST_TYPE, + ].includes( postType ) + ? getTemplateInfo( { + template: _record, + templateAreas, + templateTypes, + } ) + : {}; + return { title: _templateInfo?.title || _record?.title, icon: unlock( select( editorStore ) ).getPostIcon( postType, { From ac06843cd8909a0932f1e30aeadb7533d0a377b3 Mon Sep 17 00:00:00 2001 From: Luigi Teschio Date: Tue, 5 Nov 2024 11:06:33 +0100 Subject: [PATCH 11/24] fix naming --- .../src/navigation/use-template-part-area-label.js | 2 +- .../src/template-part/edit/advanced-controls.js | 2 +- .../src/template-part/edit/utils/hooks.js | 2 +- .../src/components/add-new-template/utils.js | 2 +- .../src/components/page-patterns/header.js | 2 +- .../src/components/page-patterns/use-patterns.js | 4 ++-- .../use-template-part-areas.js | 2 +- .../components/use-edited-entity-record/index.js | 4 ++-- .../components/create-template-part-modal/index.js | 2 +- .../editor/src/components/document-bar/index.js | 4 ++-- .../entities-saved-states/entity-record-item.js | 4 ++-- .../editor/src/components/post-card-panel/index.js | 4 ++-- packages/editor/src/store/private-selectors.js | 2 +- packages/editor/src/store/selectors.js | 14 +++++++------- 14 files changed, 25 insertions(+), 25 deletions(-) diff --git a/packages/block-library/src/navigation/use-template-part-area-label.js b/packages/block-library/src/navigation/use-template-part-area-label.js index c86fb8adeabef5..7b4d514975e113 100644 --- a/packages/block-library/src/navigation/use-template-part-area-label.js +++ b/packages/block-library/src/navigation/use-template-part-area-label.js @@ -38,7 +38,7 @@ export default function useTemplatePartAreaLabel( clientId ) { const defaultTemplatePartAreas = select( coreStore ).getEntityRecord( 'root', '__unstableBase' ) - ?.defaultTemplatePartAreas || []; + ?.default_template_part_areas || []; const definedAreas = defaultTemplatePartAreas.map( ( item ) => ( { ...item, diff --git a/packages/block-library/src/template-part/edit/advanced-controls.js b/packages/block-library/src/template-part/edit/advanced-controls.js index a18a94c7790cca..5356ca29492d10 100644 --- a/packages/block-library/src/template-part/edit/advanced-controls.js +++ b/packages/block-library/src/template-part/edit/advanced-controls.js @@ -58,7 +58,7 @@ export function TemplatePartAdvancedControls( { const defaultTemplatePartAreas = useSelect( ( select ) => select( coreStore ).getEntityRecord( 'root', '__unstableBase' ) - ?.defaultTemplatePartAreas || [], + ?.default_template_part_areas || [], [] ); diff --git a/packages/block-library/src/template-part/edit/utils/hooks.js b/packages/block-library/src/template-part/edit/utils/hooks.js index a8ed6b673675a6..c71327db0290c4 100644 --- a/packages/block-library/src/template-part/edit/utils/hooks.js +++ b/packages/block-library/src/template-part/edit/utils/hooks.js @@ -138,7 +138,7 @@ export function useTemplatePartArea( area ) { ( select ) => { const definedAreas = select( coreStore ).getEntityRecord( 'root', '__unstableBase' ) - ?.defaultTemplatePartAreas || []; + ?.default_template_part_areas || []; const selectedArea = definedAreas.find( ( definedArea ) => definedArea.area === area diff --git a/packages/edit-site/src/components/add-new-template/utils.js b/packages/edit-site/src/components/add-new-template/utils.js index 4407062dbc329c..759f3f478cadaf 100644 --- a/packages/edit-site/src/components/add-new-template/utils.js +++ b/packages/edit-site/src/components/add-new-template/utils.js @@ -69,7 +69,7 @@ export const useDefaultTemplateTypes = () => { return useSelect( ( select ) => select( coreStore ).getEntityRecord( 'root', '__unstableBase' ) - ?.defaultTemplateTypes || [], + ?.default_template_types || [], [] ); }; diff --git a/packages/edit-site/src/components/page-patterns/header.js b/packages/edit-site/src/components/page-patterns/header.js index 0dfd1201bb3dc6..0d3763aec62c1a 100644 --- a/packages/edit-site/src/components/page-patterns/header.js +++ b/packages/edit-site/src/components/page-patterns/header.js @@ -33,7 +33,7 @@ export default function PatternsHeader( { const templatePartAreas = useSelect( ( select ) => select( coreStore ).getEntityRecord( 'root', '__unstableBase' ) - ?.defaultTemplatePartAreas || [], + ?.default_template_part_areas || [], [] ); diff --git a/packages/edit-site/src/components/page-patterns/use-patterns.js b/packages/edit-site/src/components/page-patterns/use-patterns.js index 7ad23ea27e2bcc..a9c2e7c6049254 100644 --- a/packages/edit-site/src/components/page-patterns/use-patterns.js +++ b/packages/edit-site/src/components/page-patterns/use-patterns.js @@ -38,7 +38,7 @@ const selectTemplateParts = createSelector( // parts can be treated as uncategorized. const knownAreas = select( coreStore ).getEntityRecord( 'root', '__unstableBase' ) - ?.defaultTemplatePartAreas || []; + ?.default_template_part_areas || []; const templatePartAreas = knownAreas.map( ( area ) => area.area ); @@ -80,7 +80,7 @@ const selectTemplateParts = createSelector( { per_page: -1 }, ] ), select( coreStore ).getEntityRecord( 'root', '__unstableBase' ) - ?.defaultTemplatePartAreas, + ?.default_template_part_areas, ] ); diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-patterns/use-template-part-areas.js b/packages/edit-site/src/components/sidebar-navigation-screen-patterns/use-template-part-areas.js index d040751a744804..6a67a8f8a30fb9 100644 --- a/packages/edit-site/src/components/sidebar-navigation-screen-patterns/use-template-part-areas.js +++ b/packages/edit-site/src/components/sidebar-navigation-screen-patterns/use-template-part-areas.js @@ -18,7 +18,7 @@ const useTemplatePartsGroupedByArea = ( items ) => { const templatePartAreas = useSelect( ( select ) => select( coreStore ).getEntityRecord( 'root', '__unstableBase' ) - ?.defaultTemplatePartAreas || [], + ?.default_template_part_areas || [], [] ); diff --git a/packages/edit-site/src/components/use-edited-entity-record/index.js b/packages/edit-site/src/components/use-edited-entity-record/index.js index 796d333ca09caf..1a3eb4d58b1fb3 100644 --- a/packages/edit-site/src/components/use-edited-entity-record/index.js +++ b/packages/edit-site/src/components/use-edited-entity-record/index.js @@ -32,11 +32,11 @@ export default function useEditedEntityRecord( postType, postId ) { const templateAreas = select( coreStore ).getEntityRecord( 'root', '__unstableBase' ) - ?.defaultTemplatePartAreas || []; + ?.default_template_part_areas || []; const templateTypes = select( coreStore ).getEntityRecord( 'root', '__unstableBase' ) - ?.defaultTemplateTypes || []; + ?.default_template_types || []; const templateInfo = getTemplateInfo( { template: _record, diff --git a/packages/editor/src/components/create-template-part-modal/index.js b/packages/editor/src/components/create-template-part-modal/index.js index b107ebe84f9e17..660439ded2300f 100644 --- a/packages/editor/src/components/create-template-part-modal/index.js +++ b/packages/editor/src/components/create-template-part-modal/index.js @@ -81,7 +81,7 @@ export function CreateTemplatePartModalContents( { const templatePartAreas = useSelect( ( select ) => select( coreStore ).getEntityRecord( 'root', '__unstableBase' ) - ?.defaultTemplatePartAreas || [], + ?.default_template_part_areas || [], [] ); diff --git a/packages/editor/src/components/document-bar/index.js b/packages/editor/src/components/document-bar/index.js index 60c8c801c3b2d8..2e283cc47dff36 100644 --- a/packages/editor/src/components/document-bar/index.js +++ b/packages/editor/src/components/document-bar/index.js @@ -84,11 +84,11 @@ export default function DocumentBar( props ) { const templateAreas = select( coreStore ).getEntityRecord( 'root', '__unstableBase' ) - ?.defaultTemplatePartAreas || []; + ?.default_template_part_areas || []; const templateTypes = select( coreStore ).getEntityRecord( 'root', '__unstableBase' ) - ?.defaultTemplateTypes || []; + ?.default_template_types || []; const _templateInfo = getTemplateInfo( { templateAreas, templateTypes, diff --git a/packages/editor/src/components/entities-saved-states/entity-record-item.js b/packages/editor/src/components/entities-saved-states/entity-record-item.js index c21937d3042545..79e200dede6fe4 100644 --- a/packages/editor/src/components/entities-saved-states/entity-record-item.js +++ b/packages/editor/src/components/entities-saved-states/entity-record-item.js @@ -37,11 +37,11 @@ export default function EntityRecordItem( { record, checked, onChange } ) { const templateAreas = select( coreStore ).getEntityRecord( 'root', '__unstableBase' ) - ?.defaultTemplatePartAreas || []; + ?.default_template_part_areas || []; const templateTypes = select( coreStore ).getEntityRecord( 'root', '__unstableBase' ) - ?.defaultTemplateTypes || []; + ?.default_template_types || []; return { entityRecordTitle: getTemplateInfo( { diff --git a/packages/editor/src/components/post-card-panel/index.js b/packages/editor/src/components/post-card-panel/index.js index c371f700706813..51d156d1bd7f86 100644 --- a/packages/editor/src/components/post-card-panel/index.js +++ b/packages/editor/src/components/post-card-panel/index.js @@ -40,11 +40,11 @@ export default function PostCardPanel( { const templateAreas = select( coreStore ).getEntityRecord( 'root', '__unstableBase' ) - ?.defaultTemplatePartAreas || []; + ?.default_template_part_areas || []; const templateTypes = select( coreStore ).getEntityRecord( 'root', '__unstableBase' ) - ?.defaultTemplateTypes || []; + ?.default_template_types || []; const _templateInfo = [ TEMPLATE_POST_TYPE, diff --git a/packages/editor/src/store/private-selectors.js b/packages/editor/src/store/private-selectors.js index bed221fe1a600e..4a7534713f51f9 100644 --- a/packages/editor/src/store/private-selectors.js +++ b/packages/editor/src/store/private-selectors.js @@ -101,7 +101,7 @@ export const getPostIcon = createRegistrySelector( select( coreStore ).getEntityRecord( 'root', '__unstableBase' - )?.defaultTemplatePartAreas || [] + )?.default_template_part_areas || [] ).find( ( item ) => options.area === item.area )?.icon || layout ); diff --git a/packages/editor/src/store/selectors.js b/packages/editor/src/store/selectors.js index 376a12f369fde8..6761df11d8e0a8 100644 --- a/packages/editor/src/store/selectors.js +++ b/packages/editor/src/store/selectors.js @@ -1709,11 +1709,11 @@ export const __experimentalGetDefaultTemplateTypes = createRegistrySelector( { since: '6.7', alternative: - "select('core/core-data').getEntityRecord( 'root', '__unstableBase' )?.defaultTemplateTypes", + "select('core/core-data').getEntityRecord( 'root', '__unstableBase' )?.default_template_types", } ); return select( coreStore ).getEntityRecord( 'root', '__unstableBase' ) - ?.defaultTemplateTypes; + ?.default_template_types; } ); @@ -1732,13 +1732,13 @@ export const __experimentalGetDefaultTemplatePartAreas = createRegistrySelector( { since: '6.7', alternative: - "select('core/core-data').getEntityRecord( 'root', '__unstableBase' )?.defaultTemplatePartAreas", + "select('core/core-data').getEntityRecord( 'root', '__unstableBase' )?.default_template_part_areas", } ); const areas = select( coreStore ).getEntityRecord( 'root', '__unstableBase' ) - ?.defaultTemplatePartAreas || []; + ?.default_template_part_areas || []; return areas.map( ( item ) => { return { ...item, icon: getTemplatePartIcon( item.icon ) }; @@ -1766,7 +1766,7 @@ export const __experimentalGetDefaultTemplateType = createRegistrySelector( const templateTypes = select( coreStore ).getEntityRecord( 'root', '__unstableBase' - )?.defaultTemplateTypes; + )?.default_template_types; if ( ! templateTypes ) { return EMPTY_OBJECT; @@ -1801,11 +1801,11 @@ export const __experimentalGetTemplateInfo = createRegistrySelector( const templateTypes = select( coreStore ).getEntityRecord( 'root', '__unstableBase' ) - ?.defaultTemplateTypes || []; + ?.default_template_types || []; const templateAreas = select( coreStore ).getEntityRecord( 'root', '__unstableBase' ) - ?.defaultTemplatePartAreas || []; + ?.default_template_part_areas || []; return getTemplateInfo( { template, From 69c3d6d557ab5ca08b296542aeb053af665614ed Mon Sep 17 00:00:00 2001 From: Luigi Teschio Date: Tue, 5 Nov 2024 11:33:14 +0100 Subject: [PATCH 12/24] fix unit test --- packages/editor/src/store/selectors.js | 2 +- packages/editor/src/utils/get-template-info.js | 3 +-- 2 files changed, 2 insertions(+), 3 deletions(-) diff --git a/packages/editor/src/store/selectors.js b/packages/editor/src/store/selectors.js index 6761df11d8e0a8..a25fc18729fa15 100644 --- a/packages/editor/src/store/selectors.js +++ b/packages/editor/src/store/selectors.js @@ -28,7 +28,7 @@ import { import { getPostRawValue } from './reducer'; import { getTemplatePartIcon } from '../utils/get-template-part-icon'; import { unlock } from '../lock-unlock'; -import { getTemplateInfo } from '../utils'; +import { getTemplateInfo } from '../utils/get-template-info'; /** * Shared reference to an empty object for cases where it is important to avoid diff --git a/packages/editor/src/utils/get-template-info.js b/packages/editor/src/utils/get-template-info.js index a8de159ecf8058..ccfc934ee089a8 100644 --- a/packages/editor/src/utils/get-template-info.js +++ b/packages/editor/src/utils/get-template-info.js @@ -5,8 +5,7 @@ import { layout } from '@wordpress/icons'; /** * Internal dependencies */ -import { getTemplatePartIcon } from '.'; - +import { getTemplatePartIcon } from './get-template-part-icon'; const EMPTY_OBJECT = {}; export const getTemplateInfo = ( { From a5647de85d9ccc1997d69b1ac8e4b1a927940c41 Mon Sep 17 00:00:00 2001 From: Luigi Teschio Date: Tue, 5 Nov 2024 12:00:33 +0100 Subject: [PATCH 13/24] update doc --- packages/editor/README.md | 9 ++++++++- packages/editor/src/utils/get-template-info.js | 7 +++++++ 2 files changed, 15 insertions(+), 1 deletion(-) diff --git a/packages/editor/README.md b/packages/editor/README.md index de15118dc0b28d..f4dc9c78bd2be5 100644 --- a/packages/editor/README.md +++ b/packages/editor/README.md @@ -442,7 +442,14 @@ getDerivedStateFromError is used to render a fallback UI after an error has been ### getTemplateInfo -Undocumented declaration. +Helper function to retrieve the corresponding template info for a given template. + +_Parameters_ + +- _params_ `Object`: +- _params.templateTypes_ `Array`: +- _params.templateAreas_ `Array`: +- _params.template_ `Object`: ### getTemplatePartIcon diff --git a/packages/editor/src/utils/get-template-info.js b/packages/editor/src/utils/get-template-info.js index ccfc934ee089a8..d380a1832b95d3 100644 --- a/packages/editor/src/utils/get-template-info.js +++ b/packages/editor/src/utils/get-template-info.js @@ -8,6 +8,13 @@ import { layout } from '@wordpress/icons'; import { getTemplatePartIcon } from './get-template-part-icon'; const EMPTY_OBJECT = {}; +/** + * Helper function to retrieve the corresponding template info for a given template. + * @param {Object} params + * @param {Array} params.templateTypes + * @param {Array} params.templateAreas + * @param {Object} params.template + */ export const getTemplateInfo = ( { templateTypes, templateAreas, From 2a04ba14fbe2bb575cbe53aaad63a2809c1c3408 Mon Sep 17 00:00:00 2001 From: Luigi Teschio Date: Tue, 5 Nov 2024 12:39:45 +0100 Subject: [PATCH 14/24] add unit test for getTemplateInfo function --- .../editor/src/utils/get-template-info.js | 12 +- .../src/utils/test/get-template-info.js | 224 ++++++++++++++++++ 2 files changed, 231 insertions(+), 5 deletions(-) create mode 100644 packages/editor/src/utils/test/get-template-info.js diff --git a/packages/editor/src/utils/get-template-info.js b/packages/editor/src/utils/get-template-info.js index d380a1832b95d3..a6bc4c2d8dc461 100644 --- a/packages/editor/src/utils/get-template-info.js +++ b/packages/editor/src/utils/get-template-info.js @@ -15,11 +15,13 @@ const EMPTY_OBJECT = {}; * @param {Array} params.templateAreas * @param {Object} params.template */ -export const getTemplateInfo = ( { - templateTypes, - templateAreas, - template, -} ) => { +export const getTemplateInfo = ( params ) => { + if ( ! params ) { + return EMPTY_OBJECT; + } + + const { templateTypes, templateAreas, template } = params; + const { description, slug, title, area } = template; const { title: defaultTitle, description: defaultDescription } = diff --git a/packages/editor/src/utils/test/get-template-info.js b/packages/editor/src/utils/test/get-template-info.js new file mode 100644 index 00000000000000..d0ffe15aa902ad --- /dev/null +++ b/packages/editor/src/utils/test/get-template-info.js @@ -0,0 +1,224 @@ +/** + * WordPress dependencies + */ +import { footer, header, layout } from '@wordpress/icons'; +/** + * Internal dependencies + */ +import { getTemplateInfo } from '../get-template-info'; + +describe( '__experimentalGetTemplateInfo', () => { + const defaultTemplateTypes = [ + { + title: 'Default (Index)', + description: 'Main template', + slug: 'index', + }, + { + title: '404 (Not Found)', + description: 'Applied when content cannot be found', + slug: '404', + }, + ]; + + const defaultTemplatePartAreas = [ + { + area: 'header', + label: 'Header', + description: 'Some description of a header', + icon: 'header', + }, + { + area: 'footer', + label: 'Footer', + description: 'Some description of a footer', + icon: 'footer', + }, + ]; + + it( 'should return an empty object if no template is passed', () => { + expect( getTemplateInfo( undefined ) ).toEqual( {} ); + expect( getTemplateInfo( null ) ).toEqual( {} ); + expect( getTemplateInfo( false ) ).toEqual( {} ); + } ); + + it( 'should return the default title if none is defined on the template', () => { + expect( + getTemplateInfo( { + templateAreas: defaultTemplatePartAreas, + templateTypes: defaultTemplateTypes, + template: { + slug: 'index', + }, + } ).title + ).toEqual( 'Default (Index)' ); + } ); + + it( 'should return the rendered title if defined on the template', () => { + expect( + getTemplateInfo( { + templateAreas: defaultTemplatePartAreas, + templateTypes: defaultTemplateTypes, + template: { + slug: 'index', + title: { rendered: 'test title' }, + }, + } ).title + ).toEqual( 'test title' ); + } ); + + it( 'should return the slug if no title is found', () => { + expect( + getTemplateInfo( { + templateAreas: defaultTemplatePartAreas, + templateTypes: defaultTemplateTypes, + template: { + slug: 'not a real template', + }, + } ).title + ).toEqual( 'not a real template' ); + } ); + + it( 'should return the default description if none is defined on the template', () => { + expect( + getTemplateInfo( { + templateAreas: defaultTemplatePartAreas, + templateTypes: defaultTemplateTypes, + template: { + slug: 'index', + }, + } ).description + ).toEqual( 'Main template' ); + } ); + + it( 'should return the raw excerpt as description if defined on the template', () => { + expect( + getTemplateInfo( { + templateAreas: defaultTemplatePartAreas, + templateTypes: defaultTemplateTypes, + template: { + slug: 'index', + description: { raw: 'test description' }, + }, + } ).description + ).toEqual( 'test description' ); + } ); + + it( 'should return a title, description, and icon', () => { + expect( + getTemplateInfo( { + templateAreas: defaultTemplatePartAreas, + templateTypes: defaultTemplateTypes, + template: { slug: 'index' }, + } ) + ).toEqual( { + title: 'Default (Index)', + description: 'Main template', + icon: layout, + } ); + + expect( + getTemplateInfo( { + templateAreas: defaultTemplatePartAreas, + templateTypes: defaultTemplateTypes, + template: { + slug: 'index', + title: { rendered: 'test title' }, + }, + } ) + ).toEqual( { + title: 'test title', + description: 'Main template', + icon: layout, + } ); + + expect( + getTemplateInfo( { + templateAreas: defaultTemplatePartAreas, + templateTypes: defaultTemplateTypes, + template: { + slug: 'index', + description: { raw: 'test description' }, + }, + } ) + ).toEqual( { + title: 'Default (Index)', + description: 'test description', + icon: layout, + } ); + + expect( + getTemplateInfo( { + templateAreas: defaultTemplatePartAreas, + templateTypes: defaultTemplateTypes, + template: { + slug: 'index', + title: { rendered: 'test title' }, + description: { raw: 'test description' }, + }, + } ) + ).toEqual( { + title: 'test title', + description: 'test description', + icon: layout, + } ); + } ); + + it( 'should return correct icon based on area', () => { + expect( + getTemplateInfo( { + templateAreas: defaultTemplatePartAreas, + templateTypes: defaultTemplateTypes, + template: { + slug: 'template part, area = uncategorized', + area: 'uncategorized', + }, + } ) + ).toEqual( { + title: 'template part, area = uncategorized', + icon: layout, + } ); + + expect( + getTemplateInfo( { + templateAreas: defaultTemplatePartAreas, + templateTypes: defaultTemplateTypes, + template: { + slug: 'template part, area = invalid', + area: 'invalid', + }, + } ) + ).toEqual( { + title: 'template part, area = invalid', + icon: layout, + } ); + + expect( + getTemplateInfo( { + templateAreas: defaultTemplatePartAreas, + templateTypes: defaultTemplateTypes, + template: { + slug: 'template part, area = header', + area: 'header', + }, + } ) + ).toEqual( { + title: 'template part, area = header', + icon: header, + } ); + + expect( + getTemplateInfo( { + templateAreas: defaultTemplatePartAreas, + templateTypes: defaultTemplateTypes, + template: { + slug: 'template part, area = footer', + area: 'footer', + }, + } ) + ).toEqual( { + title: 'template part, area = footer', + icon: footer, + } ); + } ); +} ); From 7241badef68e639db690021acce5d4841cc628d9 Mon Sep 17 00:00:00 2001 From: Luigi Teschio Date: Thu, 14 Nov 2024 12:47:25 +0100 Subject: [PATCH 15/24] restore not necessary changes --- packages/block-library/src/image/block.json | 9 +-------- packages/block-library/src/post-content/block.json | 2 +- 2 files changed, 2 insertions(+), 9 deletions(-) diff --git a/packages/block-library/src/image/block.json b/packages/block-library/src/image/block.json index 26835df9e856cd..16e31217476026 100644 --- a/packages/block-library/src/image/block.json +++ b/packages/block-library/src/image/block.json @@ -4,14 +4,7 @@ "name": "core/image", "title": "Image", "category": "media", - "usesContext": [ - "allowResize", - "imageCrop", - "fixedHeight", - "postId", - "postType", - "queryId" - ], + "usesContext": [ "allowResize", "imageCrop", "fixedHeight", "postId", "postType", "queryId" ], "description": "Insert an image to make a visual statement.", "keywords": [ "img", "photo", "picture" ], "textdomain": "default", diff --git a/packages/block-library/src/post-content/block.json b/packages/block-library/src/post-content/block.json index e5d455b97a8a3d..ed9c47154b2f8e 100644 --- a/packages/block-library/src/post-content/block.json +++ b/packages/block-library/src/post-content/block.json @@ -69,4 +69,4 @@ }, "style": "wp-block-post-content", "editorStyle": "wp-block-post-content-editor" -} +} \ No newline at end of file From 8f47873b479531a9dbe2afda1d7ea716db549409 Mon Sep 17 00:00:00 2001 From: Luigi Teschio Date: Thu, 14 Nov 2024 13:31:25 +0100 Subject: [PATCH 16/24] fix e2e test --- .../edit-site/src/components/editor/use-editor-title.js | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/packages/edit-site/src/components/editor/use-editor-title.js b/packages/edit-site/src/components/editor/use-editor-title.js index 4dfd58c3fa5181..d9d2b720c0bc38 100644 --- a/packages/edit-site/src/components/editor/use-editor-title.js +++ b/packages/edit-site/src/components/editor/use-editor-title.js @@ -4,22 +4,24 @@ import { _x, sprintf } from '@wordpress/i18n'; import { useSelect } from '@wordpress/data'; import { store as coreStore } from '@wordpress/core-data'; -import { store as editorStore } from '@wordpress/editor'; import { decodeEntities } from '@wordpress/html-entities'; +import { privateApis as editorPrivateApis } from '@wordpress/editor'; /** * Internal dependencies */ import useTitle from '../routes/use-title'; import { POST_TYPE_LABELS, TEMPLATE_POST_TYPE } from '../../utils/constants'; +import { unlock } from '../../lock-unlock'; + +const { getTemplateInfo } = unlock( editorPrivateApis ); function useEditorTitle( postType, postId ) { const { title, isLoaded } = useSelect( ( select ) => { const { getEditedEntityRecord, hasFinishedResolution } = select( coreStore ); - const { __experimentalGetTemplateInfo: getTemplateInfo } = - select( editorStore ); + const _record = getEditedEntityRecord( 'postType', postType, From 7aab231e73075333b36b4d08727c012b9ca180a3 Mon Sep 17 00:00:00 2001 From: Luigi Teschio Date: Mon, 25 Nov 2024 15:48:00 +0100 Subject: [PATCH 17/24] remove not necessary variable --- .../src/template-part/edit/advanced-controls.js | 16 ++++++---------- 1 file changed, 6 insertions(+), 10 deletions(-) diff --git a/packages/block-library/src/template-part/edit/advanced-controls.js b/packages/block-library/src/template-part/edit/advanced-controls.js index 5356ca29492d10..04c6d3387346ac 100644 --- a/packages/block-library/src/template-part/edit/advanced-controls.js +++ b/packages/block-library/src/template-part/edit/advanced-controls.js @@ -10,7 +10,6 @@ import { useSelect } from '@wordpress/data'; * Internal dependencies */ import { TemplatePartImportControls } from './import-controls'; -import { getTemplatePartIcon } from './utils/get-template-part-icon'; const htmlElementMessages = { header: __( @@ -62,15 +61,12 @@ export function TemplatePartAdvancedControls( { [] ); - const definedAreas = defaultTemplatePartAreas.map( ( item ) => ( { - ...item, - icon: getTemplatePartIcon( item.icon ), - } ) ); - - const areaOptions = definedAreas.map( ( { label, area: _area } ) => ( { - label, - value: _area, - } ) ); + const areaOptions = defaultTemplatePartAreas.map( + ( { label, area: _area } ) => ( { + label, + value: _area, + } ) + ); return ( <> From ffdcc1d585c6879dbd07c817971480df43be65f3 Mon Sep 17 00:00:00 2001 From: Luigi Teschio Date: Mon, 25 Nov 2024 15:56:05 +0100 Subject: [PATCH 18/24] replace add_action with add_filter --- lib/compat/wordpress-6.8/template-parts.php | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/lib/compat/wordpress-6.8/template-parts.php b/lib/compat/wordpress-6.8/template-parts.php index 2d85e49982a234..3e073abc2ca80f 100644 --- a/lib/compat/wordpress-6.8/template-parts.php +++ b/lib/compat/wordpress-6.8/template-parts.php @@ -13,7 +13,7 @@ function gutenberg_add_default_template_part_areas_to_index( WP_REST_Response $r return $response; } -add_action( 'rest_index', 'gutenberg_add_default_template_part_areas_to_index' ); +add_filter( 'rest_index', 'gutenberg_add_default_template_part_areas_to_index' ); /** * Adds the default template types to the REST API index. @@ -35,4 +35,4 @@ function gutenberg_add_default_template_types_to_index( WP_REST_Response $respon return $response; } -add_action( 'rest_index', 'gutenberg_add_default_template_types_to_index' ); +add_filter( 'rest_index', 'gutenberg_add_default_template_types_to_index' ); From e395bf67bd06b772e8057f1c78c21b78bbf2630d Mon Sep 17 00:00:00 2001 From: Luigi Teschio Date: Mon, 25 Nov 2024 15:59:01 +0100 Subject: [PATCH 19/24] improve readibility code --- .../src/components/editor/use-editor-title.js | 15 ++++++++------- .../editor/src/components/document-bar/index.js | 12 ++++++------ .../entities-saved-states/entity-record-item.js | 15 ++++++++------- .../src/components/post-card-panel/index.js | 15 ++++++++------- 4 files changed, 30 insertions(+), 27 deletions(-) diff --git a/packages/edit-site/src/components/editor/use-editor-title.js b/packages/edit-site/src/components/editor/use-editor-title.js index d9d2b720c0bc38..91a56f9fbd4929 100644 --- a/packages/edit-site/src/components/editor/use-editor-title.js +++ b/packages/edit-site/src/components/editor/use-editor-title.js @@ -28,13 +28,14 @@ function useEditorTitle( postType, postId ) { postId ); - const templateAreas = - select( coreStore ).getEntityRecord( 'root', '__unstableBase' ) - ?.default_template_part_areas || []; - - const templateTypes = - select( coreStore ).getEntityRecord( 'root', '__unstableBase' ) - ?.default_template_types || []; + const { + default_template_part_areas: templateAreas = [], + default_template_types: templateTypes = [], + } = + select( coreStore ).getEntityRecord( + 'root', + '__unstableBase' + ) ?? {}; const templateInfo = getTemplateInfo( { template: _record, diff --git a/packages/editor/src/components/document-bar/index.js b/packages/editor/src/components/document-bar/index.js index a1d1861a3d2f50..d081e6b83d6acd 100644 --- a/packages/editor/src/components/document-bar/index.js +++ b/packages/editor/src/components/document-bar/index.js @@ -82,13 +82,13 @@ export default function DocumentBar( props ) { _postId ); - const templateAreas = - select( coreStore ).getEntityRecord( 'root', '__unstableBase' ) - ?.default_template_part_areas || []; + const { + default_template_part_areas: templateAreas = [], + default_template_types: templateTypes = [], + } = + select( coreStore ).getEntityRecord( 'root', '__unstableBase' ) ?? + {}; - const templateTypes = - select( coreStore ).getEntityRecord( 'root', '__unstableBase' ) - ?.default_template_types || []; const _templateInfo = getTemplateInfo( { templateAreas, templateTypes, diff --git a/packages/editor/src/components/entities-saved-states/entity-record-item.js b/packages/editor/src/components/entities-saved-states/entity-record-item.js index 79e200dede6fe4..ac1492f282a049 100644 --- a/packages/editor/src/components/entities-saved-states/entity-record-item.js +++ b/packages/editor/src/components/entities-saved-states/entity-record-item.js @@ -35,13 +35,14 @@ export default function EntityRecordItem( { record, checked, onChange } ) { key ); - const templateAreas = - select( coreStore ).getEntityRecord( 'root', '__unstableBase' ) - ?.default_template_part_areas || []; - - const templateTypes = - select( coreStore ).getEntityRecord( 'root', '__unstableBase' ) - ?.default_template_types || []; + const { + default_template_part_areas: templateAreas = [], + default_template_types: templateTypes = [], + } = + select( coreStore ).getEntityRecord( + 'root', + '__unstableBase' + ) ?? {}; return { entityRecordTitle: getTemplateInfo( { diff --git a/packages/editor/src/components/post-card-panel/index.js b/packages/editor/src/components/post-card-panel/index.js index 51d156d1bd7f86..78cc721eca57f0 100644 --- a/packages/editor/src/components/post-card-panel/index.js +++ b/packages/editor/src/components/post-card-panel/index.js @@ -38,13 +38,14 @@ export default function PostCardPanel( { postId ); - const templateAreas = - select( coreStore ).getEntityRecord( 'root', '__unstableBase' ) - ?.default_template_part_areas || []; - - const templateTypes = - select( coreStore ).getEntityRecord( 'root', '__unstableBase' ) - ?.default_template_types || []; + const { + default_template_part_areas: templateAreas = [], + default_template_types: templateTypes = [], + } = + select( coreStore ).getEntityRecord( + 'root', + '__unstableBase' + ) ?? {}; const _templateInfo = [ TEMPLATE_POST_TYPE, From 1f47713e10a01561fc78f212a73bfb9f209b6461 Mon Sep 17 00:00:00 2001 From: Luigi Teschio Date: Mon, 25 Nov 2024 16:16:46 +0100 Subject: [PATCH 20/24] make getTemplateInfo private --- packages/editor/README.md | 11 ----------- packages/editor/src/components/document-bar/index.js | 2 +- .../entities-saved-states/entity-record-item.js | 2 +- .../editor/src/components/post-card-panel/index.js | 2 +- packages/editor/src/private-apis.js | 2 +- packages/editor/src/utils/index.js | 1 - 6 files changed, 4 insertions(+), 16 deletions(-) diff --git a/packages/editor/README.md b/packages/editor/README.md index 1c3ff3e0d64f4a..ac655bd1c99d8c 100644 --- a/packages/editor/README.md +++ b/packages/editor/README.md @@ -439,17 +439,6 @@ getDerivedStateFromError is used to render a fallback UI after an error has been > **Deprecated** since 5.3, use `wp.blockEditor.getFontSizeClass` instead. -### getTemplateInfo - -Helper function to retrieve the corresponding template info for a given template. - -_Parameters_ - -- _params_ `Object`: -- _params.templateTypes_ `Array`: -- _params.templateAreas_ `Array`: -- _params.template_ `Object`: - ### getTemplatePartIcon Helper function to retrieve the corresponding icon by name. diff --git a/packages/editor/src/components/document-bar/index.js b/packages/editor/src/components/document-bar/index.js index d081e6b83d6acd..094827019c8751 100644 --- a/packages/editor/src/components/document-bar/index.js +++ b/packages/editor/src/components/document-bar/index.js @@ -29,7 +29,7 @@ import { decodeEntities } from '@wordpress/html-entities'; import { TEMPLATE_POST_TYPES } from '../../store/constants'; import { store as editorStore } from '../../store'; import usePageTypeBadge from '../../utils/pageTypeBadge'; -import { getTemplateInfo } from '../../utils'; +import { getTemplateInfo } from '../../utils/get-template-info'; /** @typedef {import("@wordpress/components").IconType} IconType */ diff --git a/packages/editor/src/components/entities-saved-states/entity-record-item.js b/packages/editor/src/components/entities-saved-states/entity-record-item.js index ac1492f282a049..9c4568dc237bb9 100644 --- a/packages/editor/src/components/entities-saved-states/entity-record-item.js +++ b/packages/editor/src/components/entities-saved-states/entity-record-item.js @@ -12,7 +12,7 @@ import { decodeEntities } from '@wordpress/html-entities'; */ import { store as editorStore } from '../../store'; import { unlock } from '../../lock-unlock'; -import { getTemplateInfo } from '../../utils'; +import { getTemplateInfo } from '../../utils/get-template-info'; export default function EntityRecordItem( { record, checked, onChange } ) { const { name, kind, title, key } = record; diff --git a/packages/editor/src/components/post-card-panel/index.js b/packages/editor/src/components/post-card-panel/index.js index 78cc721eca57f0..e7b6b9b325044b 100644 --- a/packages/editor/src/components/post-card-panel/index.js +++ b/packages/editor/src/components/post-card-panel/index.js @@ -22,7 +22,7 @@ import { import { unlock } from '../../lock-unlock'; import PostActions from '../post-actions'; import usePageTypeBadge from '../../utils/pageTypeBadge'; -import { getTemplateInfo } from '../../utils'; +import { getTemplateInfo } from '../../utils/get-template-info'; export default function PostCardPanel( { postType, diff --git a/packages/editor/src/private-apis.js b/packages/editor/src/private-apis.js index 902d93a50437e9..2699858b3164f6 100644 --- a/packages/editor/src/private-apis.js +++ b/packages/editor/src/private-apis.js @@ -25,7 +25,7 @@ import { GlobalStylesProvider, } from './components/global-styles-provider'; import { registerCoreBlockBindingsSources } from './bindings/api'; -import { getTemplateInfo } from './utils'; +import { getTemplateInfo } from './utils/get-template-info'; const { store: interfaceStore, ...remainingInterfaceApis } = interfaceApis; diff --git a/packages/editor/src/utils/index.js b/packages/editor/src/utils/index.js index de1e8e5c21c01e..d85892a57bd0a8 100644 --- a/packages/editor/src/utils/index.js +++ b/packages/editor/src/utils/index.js @@ -6,4 +6,3 @@ import mediaUpload from './media-upload'; export { mediaUpload }; export { cleanForSlug } from './url.js'; export { getTemplatePartIcon } from './get-template-part-icon'; -export { getTemplateInfo } from './get-template-info'; From 078d2f61efbc5696395558a84edb9bacae70daf8 Mon Sep 17 00:00:00 2001 From: Luigi Teschio Date: Mon, 25 Nov 2024 16:58:42 +0100 Subject: [PATCH 21/24] make templateAreas optional --- .../edit-site/src/components/editor/use-editor-title.js | 6 +----- packages/editor/src/components/document-bar/index.js | 6 +----- .../components/entities-saved-states/entity-record-item.js | 6 +----- packages/editor/src/components/post-card-panel/index.js | 6 +----- packages/editor/src/utils/get-template-info.js | 6 +++--- 5 files changed, 7 insertions(+), 23 deletions(-) diff --git a/packages/edit-site/src/components/editor/use-editor-title.js b/packages/edit-site/src/components/editor/use-editor-title.js index 91a56f9fbd4929..727b190117e02a 100644 --- a/packages/edit-site/src/components/editor/use-editor-title.js +++ b/packages/edit-site/src/components/editor/use-editor-title.js @@ -28,10 +28,7 @@ function useEditorTitle( postType, postId ) { postId ); - const { - default_template_part_areas: templateAreas = [], - default_template_types: templateTypes = [], - } = + const { default_template_types: templateTypes = [] } = select( coreStore ).getEntityRecord( 'root', '__unstableBase' @@ -39,7 +36,6 @@ function useEditorTitle( postType, postId ) { const templateInfo = getTemplateInfo( { template: _record, - templateAreas, templateTypes, } ); diff --git a/packages/editor/src/components/document-bar/index.js b/packages/editor/src/components/document-bar/index.js index 094827019c8751..7b94a6fbeb3be9 100644 --- a/packages/editor/src/components/document-bar/index.js +++ b/packages/editor/src/components/document-bar/index.js @@ -82,15 +82,11 @@ export default function DocumentBar( props ) { _postId ); - const { - default_template_part_areas: templateAreas = [], - default_template_types: templateTypes = [], - } = + const { default_template_types: templateTypes = [] } = select( coreStore ).getEntityRecord( 'root', '__unstableBase' ) ?? {}; const _templateInfo = getTemplateInfo( { - templateAreas, templateTypes, template: _document, } ); diff --git a/packages/editor/src/components/entities-saved-states/entity-record-item.js b/packages/editor/src/components/entities-saved-states/entity-record-item.js index 9c4568dc237bb9..e8219c4cca7ae1 100644 --- a/packages/editor/src/components/entities-saved-states/entity-record-item.js +++ b/packages/editor/src/components/entities-saved-states/entity-record-item.js @@ -35,10 +35,7 @@ export default function EntityRecordItem( { record, checked, onChange } ) { key ); - const { - default_template_part_areas: templateAreas = [], - default_template_types: templateTypes = [], - } = + const { default_template_types: templateTypes = [] } = select( coreStore ).getEntityRecord( 'root', '__unstableBase' @@ -47,7 +44,6 @@ export default function EntityRecordItem( { record, checked, onChange } ) { return { entityRecordTitle: getTemplateInfo( { template, - templateAreas, templateTypes, } ).title, hasPostMetaChanges: unlock( diff --git a/packages/editor/src/components/post-card-panel/index.js b/packages/editor/src/components/post-card-panel/index.js index e7b6b9b325044b..8fcca6c6bd6d40 100644 --- a/packages/editor/src/components/post-card-panel/index.js +++ b/packages/editor/src/components/post-card-panel/index.js @@ -38,10 +38,7 @@ export default function PostCardPanel( { postId ); - const { - default_template_part_areas: templateAreas = [], - default_template_types: templateTypes = [], - } = + const { default_template_types: templateTypes = [] } = select( coreStore ).getEntityRecord( 'root', '__unstableBase' @@ -53,7 +50,6 @@ export default function PostCardPanel( { ].includes( postType ) ? getTemplateInfo( { template: _record, - templateAreas, templateTypes, } ) : {}; diff --git a/packages/editor/src/utils/get-template-info.js b/packages/editor/src/utils/get-template-info.js index a6bc4c2d8dc461..bc84c06c9399d4 100644 --- a/packages/editor/src/utils/get-template-info.js +++ b/packages/editor/src/utils/get-template-info.js @@ -12,7 +12,7 @@ const EMPTY_OBJECT = {}; * Helper function to retrieve the corresponding template info for a given template. * @param {Object} params * @param {Array} params.templateTypes - * @param {Array} params.templateAreas + * @param {Array} [params.templateAreas] * @param {Object} params.template */ export const getTemplateInfo = ( params ) => { @@ -32,13 +32,13 @@ export const getTemplateInfo = ( params ) => { const templateDescription = typeof description === 'string' ? description : description?.raw; - const templateAreasWithIcon = templateAreas.map( ( item ) => ( { + const templateAreasWithIcon = templateAreas?.map( ( item ) => ( { ...item, icon: getTemplatePartIcon( item.icon ), } ) ); const templateIcon = - templateAreasWithIcon.find( ( item ) => area === item.area )?.icon || + templateAreasWithIcon?.find( ( item ) => area === item.area )?.icon || layout; return { From fdc291d41221895d6ad6f38f8aed4fb21f9539f8 Mon Sep 17 00:00:00 2001 From: Luigi Teschio Date: Mon, 25 Nov 2024 17:06:46 +0100 Subject: [PATCH 22/24] add default_template_part_areas and default_template_types --- lib/compat/wordpress-6.8/preload.php | 2 ++ 1 file changed, 2 insertions(+) diff --git a/lib/compat/wordpress-6.8/preload.php b/lib/compat/wordpress-6.8/preload.php index aabe0d4fb574cc..ae6c738c6627c5 100644 --- a/lib/compat/wordpress-6.8/preload.php +++ b/lib/compat/wordpress-6.8/preload.php @@ -32,6 +32,8 @@ function gutenberg_block_editor_preload_paths_6_8( $paths, $context ) { 'site_logo', 'timezone_string', 'url', + 'default_template_part_areas', + 'default_template_types', ) ); $paths[] = '/wp/v2/templates/lookup?slug=front-page'; From b2c0bf587e30c302d6dc0bda91881933b87e3984 Mon Sep 17 00:00:00 2001 From: Luigi Teschio Date: Mon, 25 Nov 2024 17:56:04 +0100 Subject: [PATCH 23/24] move code to rest-api.php file --- lib/compat/wordpress-6.8/rest-api.php | 38 +++++++++++++++++++++ lib/compat/wordpress-6.8/template-parts.php | 38 --------------------- 2 files changed, 38 insertions(+), 38 deletions(-) delete mode 100644 lib/compat/wordpress-6.8/template-parts.php diff --git a/lib/compat/wordpress-6.8/rest-api.php b/lib/compat/wordpress-6.8/rest-api.php index 080e4003f57b38..b94e42d5f2ccd0 100644 --- a/lib/compat/wordpress-6.8/rest-api.php +++ b/lib/compat/wordpress-6.8/rest-api.php @@ -49,3 +49,41 @@ function ( $taxonomy ) { remove_filter( "rest_{$taxonomy}_query", 'gutenberg_respect_taxonomy_default_args_in_rest_api' ); } ); + +/** + * Adds the default template part areas to the REST API index. + * + * This function exposes the default template part areas through the WordPress REST API. + * Note: This function backports into the wp-includes/rest-api/class-wp-rest-server.php file. + * + * @param WP_REST_Response $response REST API response. + * @return WP_REST_Response Modified REST API response with default template part areas. + */ +function gutenberg_add_default_template_part_areas_to_index( WP_REST_Response $response ) { + $response->data['default_template_part_areas'] = get_allowed_block_template_part_areas(); + return $response; +} + +add_filter( 'rest_index', 'gutenberg_add_default_template_part_areas_to_index' ); + +/** + * Adds the default template types to the REST API index. + * + * This function exposes the default template types through the WordPress REST API. + * Note: This function backports into the wp-includes/rest-api/class-wp-rest-server.php file. + * + * @param WP_REST_Response $response REST API response. + * @return WP_REST_Response Modified REST API response with default template part areas. + */ +function gutenberg_add_default_template_types_to_index( WP_REST_Response $response ) { + $indexed_template_types = array(); + foreach ( get_default_block_template_types() as $slug => $template_type ) { + $template_type['slug'] = (string) $slug; + $indexed_template_types[] = $template_type; + } + + $response->data['default_template_types'] = $indexed_template_types; + return $response; +} + +add_filter( 'rest_index', 'gutenberg_add_default_template_types_to_index' ); diff --git a/lib/compat/wordpress-6.8/template-parts.php b/lib/compat/wordpress-6.8/template-parts.php deleted file mode 100644 index 3e073abc2ca80f..00000000000000 --- a/lib/compat/wordpress-6.8/template-parts.php +++ /dev/null @@ -1,38 +0,0 @@ -data['default_template_part_areas'] = get_allowed_block_template_part_areas(); - return $response; -} - -add_filter( 'rest_index', 'gutenberg_add_default_template_part_areas_to_index' ); - -/** - * Adds the default template types to the REST API index. - * - * This function exposes the default template types through the WordPress REST API. - * Note: This function backports into the wp-includes/rest-api/class-wp-rest-server.php file. - * - * @param WP_REST_Response $response REST API response. - * @return WP_REST_Response Modified REST API response with default template part areas. - */ -function gutenberg_add_default_template_types_to_index( WP_REST_Response $response ) { - $indexed_template_types = array(); - foreach ( get_default_block_template_types() as $slug => $template_type ) { - $template_type['slug'] = (string) $slug; - $indexed_template_types[] = $template_type; - } - - $response->data['default_template_types'] = $indexed_template_types; - return $response; -} - -add_filter( 'rest_index', 'gutenberg_add_default_template_types_to_index' ); From 230ba72a0a74c86b9a1946b4f5162e041a040ceb Mon Sep 17 00:00:00 2001 From: Luigi Teschio Date: Tue, 26 Nov 2024 09:01:22 +0100 Subject: [PATCH 24/24] remove not used import --- lib/load.php | 1 - 1 file changed, 1 deletion(-) diff --git a/lib/load.php b/lib/load.php index 5e79f022451e64..85d1c7e3292b50 100644 --- a/lib/load.php +++ b/lib/load.php @@ -44,7 +44,6 @@ function gutenberg_is_experiment_enabled( $name ) { // WordPress 6.8 compat. require __DIR__ . '/compat/wordpress-6.8/block-comments.php'; require __DIR__ . '/compat/wordpress-6.8/class-gutenberg-rest-comment-controller-6-8.php'; - require __DIR__ . '/compat/wordpress-6.8/template-parts.php'; require __DIR__ . '/compat/wordpress-6.8/class-gutenberg-rest-post-types-controller-6-8.php'; require __DIR__ . '/compat/wordpress-6.8/rest-api.php';