From 2642697ff65f6f011044f8939f9f7ed70af2945c Mon Sep 17 00:00:00 2001
From: Aki Hamano <54422211+t-hamano@users.noreply.github.com>
Date: Mon, 11 Dec 2023 12:53:52 +0900
Subject: [PATCH] Site Editor Sidebar: Add "Areas" details panel to all
templates and update icon (#55677)
* Site Editor Sidebar: Add "Areas" details panel to all templates
* Use symbolFilled icon for general template parts
* Remove unnecessary code
---
.../home-template-details.js | 97 +------------
.../index.js | 10 +-
.../template-areas.js | 135 ++++++++++++++++++
3 files changed, 144 insertions(+), 98 deletions(-)
create mode 100644 packages/edit-site/src/components/sidebar-navigation-screen-template/template-areas.js
diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-template/home-template-details.js b/packages/edit-site/src/components/sidebar-navigation-screen-template/home-template-details.js
index c798067aca9c57..57a13377617533 100644
--- a/packages/edit-site/src/components/sidebar-navigation-screen-template/home-template-details.js
+++ b/packages/edit-site/src/components/sidebar-navigation-screen-template/home-template-details.js
@@ -9,12 +9,8 @@ import {
CheckboxControl,
__experimentalInputControl as InputControl,
__experimentalNumberControl as NumberControl,
- __experimentalTruncate as Truncate,
- __experimentalItemGroup as ItemGroup,
} from '@wordpress/components';
-import { header, footer, layout } from '@wordpress/icons';
-import { useMemo, useState, useEffect } from '@wordpress/element';
-import { decodeEntities } from '@wordpress/html-entities';
+import { useState, useEffect } from '@wordpress/element';
/**
* Internal dependencies
@@ -23,58 +19,19 @@ import {
SidebarNavigationScreenDetailsPanel,
SidebarNavigationScreenDetailsPanelRow,
} from '../sidebar-navigation-screen-details-panel';
-import { unlock } from '../../lock-unlock';
-import { store as editSiteStore } from '../../store';
-import { useLink } from '../routes/link';
-import SidebarNavigationItem from '../sidebar-navigation-item';
-import { TEMPLATE_PART_POST_TYPE } from '../../utils/constants';
const EMPTY_OBJECT = {};
-function TemplateAreaButton( { postId, icon, title } ) {
- const icons = {
- header,
- footer,
- };
- const linkInfo = useLink( {
- postType: TEMPLATE_PART_POST_TYPE,
- postId,
- } );
-
- return (
-
-
- { decodeEntities( title ) }
-
-
- );
-}
-
export default function HomeTemplateDetails() {
const { editEntityRecord } = useDispatch( coreStore );
const {
allowCommentsOnNewPosts,
- templatePartAreas,
postsPerPage,
postsPageTitle,
postsPageId,
- currentTemplateParts,
} = useSelect( ( select ) => {
const { getEntityRecord } = select( coreStore );
- const { getSettings, getCurrentTemplateTemplateParts } = unlock(
- select( editSiteStore )
- );
const siteSettings = getEntityRecord( 'root', 'site' );
const _postsPageRecord = siteSettings?.page_for_posts
? getEntityRecord(
@@ -90,8 +47,6 @@ export default function HomeTemplateDetails() {
postsPageTitle: _postsPageRecord?.title?.rendered,
postsPageId: _postsPageRecord?.id,
postsPerPage: siteSettings?.posts_per_page,
- templatePartAreas: getSettings()?.defaultTemplatePartAreas,
- currentTemplateParts: getCurrentTemplateTemplateParts(),
};
}, [] );
@@ -111,36 +66,6 @@ export default function HomeTemplateDetails() {
setPostsCountValue( postsPerPage );
}, [ postsPageTitle, allowCommentsOnNewPosts, postsPerPage ] );
- /*
- * Merge data in currentTemplateParts with templatePartAreas,
- * which contains the template icon and fallback labels
- */
- const templateAreas = useMemo( () => {
- // Keep track of template part IDs that have already been added to the array.
- const templatePartIds = new Set();
- const filterOutDuplicateTemplateParts = ( currentTemplatePart ) => {
- // If the template part has already been added to the array, skip it.
- if ( templatePartIds.has( currentTemplatePart.templatePart.id ) ) {
- return;
- }
- // Add to the array of template part IDs.
- templatePartIds.add( currentTemplatePart.templatePart.id );
- return currentTemplatePart;
- };
-
- return currentTemplateParts.length && templatePartAreas
- ? currentTemplateParts
- .filter( filterOutDuplicateTemplateParts )
- .map( ( { templatePart, block } ) => ( {
- ...templatePartAreas?.find(
- ( { area } ) => area === templatePart?.area
- ),
- ...templatePart,
- clientId: block.clientId,
- } ) )
- : [];
- }, [ currentTemplateParts, templatePartAreas ] );
-
const setAllowCommentsOnNewPosts = ( newValue ) => {
setCommentsOnNewPostsValue( newValue );
editEntityRecord( 'root', 'site', undefined, {
@@ -214,26 +139,6 @@ export default function HomeTemplateDetails() {
/>
-
-
- { templateAreas.map(
- ( { clientId, label, icon, theme, slug, title } ) => (
-
-
-
- )
- ) }
-
-
);
}
diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-template/index.js b/packages/edit-site/src/components/sidebar-navigation-screen-template/index.js
index fd60d0a509ace2..e6ead651fbbfc9 100644
--- a/packages/edit-site/src/components/sidebar-navigation-screen-template/index.js
+++ b/packages/edit-site/src/components/sidebar-navigation-screen-template/index.js
@@ -12,6 +12,7 @@ import { store as coreStore } from '@wordpress/core-data';
/**
* Internal dependencies
*/
+import TemplateAreas from './template-areas';
import SidebarNavigationScreen from '../sidebar-navigation-screen';
import useEditedEntityRecord from '../use-edited-entity-record';
import { unlock } from '../../lock-unlock';
@@ -45,8 +46,13 @@ function useTemplateDetails( postType, postId ) {
const content =
record?.slug === 'home' || record?.slug === 'index' ? (
-
- ) : null;
+ <>
+
+
+
+ ) : (
+
+ );
const footer = record?.modified ? (
diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-template/template-areas.js b/packages/edit-site/src/components/sidebar-navigation-screen-template/template-areas.js
new file mode 100644
index 00000000000000..db59f6886124be
--- /dev/null
+++ b/packages/edit-site/src/components/sidebar-navigation-screen-template/template-areas.js
@@ -0,0 +1,135 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { useSelect } from '@wordpress/data';
+import {
+ __experimentalTruncate as Truncate,
+ __experimentalItemGroup as ItemGroup,
+} from '@wordpress/components';
+import { store as editorStore } from '@wordpress/editor';
+import { useMemo } from '@wordpress/element';
+import { decodeEntities } from '@wordpress/html-entities';
+
+/**
+ * Internal dependencies
+ */
+import {
+ SidebarNavigationScreenDetailsPanel,
+ SidebarNavigationScreenDetailsPanelRow,
+} from '../sidebar-navigation-screen-details-panel';
+import { unlock } from '../../lock-unlock';
+import { store as editSiteStore } from '../../store';
+import { useLink } from '../routes/link';
+import SidebarNavigationItem from '../sidebar-navigation-item';
+import { TEMPLATE_PART_POST_TYPE } from '../../utils/constants';
+
+function TemplateAreaButton( { postId, area, title } ) {
+ const templatePartArea = useSelect(
+ ( select ) => {
+ const defaultAreas =
+ select(
+ editorStore
+ ).__experimentalGetDefaultTemplatePartAreas();
+
+ return defaultAreas.find(
+ ( defaultArea ) => defaultArea.area === area
+ );
+ },
+ [ area ]
+ );
+ const linkInfo = useLink( {
+ postType: TEMPLATE_PART_POST_TYPE,
+ postId,
+ } );
+
+ return (
+
+
+ { decodeEntities( title ) }
+
+
+ );
+}
+
+export default function TemplateAreas() {
+ const { templatePartAreas, currentTemplateParts } = useSelect(
+ ( select ) => {
+ const { getSettings, getCurrentTemplateTemplateParts } = unlock(
+ select( editSiteStore )
+ );
+ return {
+ templatePartAreas: getSettings()?.defaultTemplatePartAreas,
+ currentTemplateParts: getCurrentTemplateTemplateParts(),
+ };
+ },
+ []
+ );
+
+ /*
+ * Merge data in currentTemplateParts with templatePartAreas,
+ * which contains the template icon and fallback labels
+ */
+ const templateAreas = useMemo( () => {
+ // Keep track of template part IDs that have already been added to the array.
+ const templatePartIds = new Set();
+ const filterOutDuplicateTemplateParts = ( currentTemplatePart ) => {
+ // If the template part has already been added to the array, skip it.
+ if ( templatePartIds.has( currentTemplatePart.templatePart.id ) ) {
+ return;
+ }
+ // Add to the array of template part IDs.
+ templatePartIds.add( currentTemplatePart.templatePart.id );
+ return currentTemplatePart;
+ };
+
+ return currentTemplateParts.length && templatePartAreas
+ ? currentTemplateParts
+ .filter( filterOutDuplicateTemplateParts )
+ .map( ( { templatePart, block } ) => ( {
+ ...templatePartAreas?.find(
+ ( { area } ) => area === templatePart?.area
+ ),
+ ...templatePart,
+ clientId: block.clientId,
+ } ) )
+ : [];
+ }, [ currentTemplateParts, templatePartAreas ] );
+
+ if ( ! templateAreas.length ) {
+ return null;
+ }
+
+ return (
+
+
+ { templateAreas.map(
+ ( { clientId, label, area, theme, slug, title } ) => (
+
+
+
+ )
+ ) }
+
+
+ );
+}