diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-details-panel/style.scss b/packages/edit-site/src/components/sidebar-navigation-screen-details-panel/style.scss
index 6abe94a61ddca..358a9022a0a89 100644
--- a/packages/edit-site/src/components/sidebar-navigation-screen-details-panel/style.scss
+++ b/packages/edit-site/src/components/sidebar-navigation-screen-details-panel/style.scss
@@ -12,7 +12,7 @@
}
}
-.edit-site-sidebar-navigation-details-screen-panel__label {
+.edit-site-sidebar-navigation-details-screen-panel__label.edit-site-sidebar-navigation-details-screen-panel__label {
color: $gray-600;
width: 100px;
}
diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-page/index.js b/packages/edit-site/src/components/sidebar-navigation-screen-page/index.js
index 68cecbf3b1830..4f9dbbeb64aaf 100644
--- a/packages/edit-site/src/components/sidebar-navigation-screen-page/index.js
+++ b/packages/edit-site/src/components/sidebar-navigation-screen-page/index.js
@@ -13,8 +13,6 @@ import {
__experimentalVStack as VStack,
ExternalLink,
__experimentalTruncate as Truncate,
- __experimentalHStack as HStack,
- __experimentalText as Text,
} from '@wordpress/components';
import { store as coreStore, useEntityRecord } from '@wordpress/core-data';
import { decodeEntities } from '@wordpress/html-entities';
@@ -33,6 +31,11 @@ import { store as editSiteStore } from '../../store';
import SidebarButton from '../sidebar-button';
import PageDetails from './page-details';
import PageActions from '../page-actions';
+import {
+ SidebarNavigationScreenDetailsPanelRow,
+ SidebarNavigationScreenDetailsPanelLabel,
+ SidebarNavigationScreenDetailsPanelValue,
+} from '../sidebar-navigation-screen-details-panel';
export default function SidebarNavigationScreenPage() {
const navigator = useNavigator();
@@ -140,15 +143,11 @@ export default function SidebarNavigationScreenPage() {
}
footer={
!! record?.modified && (
-
-
+
+
{ __( 'Last modified' ) }
-
-
+
+
{ createInterpolateElement(
sprintf(
/* translators: %s: is the relative time when the post was last modified. */
@@ -159,8 +158,8 @@ export default function SidebarNavigationScreenPage() {
time: ,
}
) }
-
-
+
+
)
}
/>
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 85cfce53d0706..a0b1b2381a83d 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
@@ -4,8 +4,15 @@
import { __ } from '@wordpress/i18n';
import { useSelect } from '@wordpress/data';
import { store as coreStore } from '@wordpress/core-data';
-import { CheckboxControl } from '@wordpress/components';
+import {
+ CheckboxControl,
+ __experimentalUseNavigator as useNavigator,
+ Button,
+ Icon,
+} from '@wordpress/components';
import { store as blockEditorStore } from '@wordpress/block-editor';
+import { header, footer, layout, chevronRightSmall } from '@wordpress/icons';
+import { useMemo } from '@wordpress/element';
/**
* Internal dependencies
@@ -16,27 +23,71 @@ import {
SidebarNavigationScreenDetailsPanelLabel,
SidebarNavigationScreenDetailsPanelValue,
} from '../sidebar-navigation-screen-details-panel';
+import useEditedEntityRecord from '../use-edited-entity-record';
+
+function TemplateAreaButton( { icon, label } ) {
+ const icons = {
+ header,
+ footer,
+ };
+ return (
+
+ );
+}
export default function HomeTemplateDetails() {
- const { commentOrder, isHomePageBlog, postsPerPage, siteTitle } = useSelect(
- ( select ) => {
- const { getEntityRecord } = select( coreStore );
- const siteSettings = getEntityRecord( 'root', 'site' );
- const { getSettings } = select( blockEditorStore );
+ const navigator = useNavigator();
+ const {
+ params: { postType, postId },
+ } = navigator;
+ const { record } = useEditedEntityRecord( postType, postId );
+ const {
+ commentOrder,
+ templatePartAreas,
+ isHomePageBlog,
+ postsPerPage,
+ siteTitle,
+ } = useSelect( ( select ) => {
+ const { getEntityRecord } = select( coreStore );
+ const siteSettings = getEntityRecord( 'root', 'site' );
+ const { getSettings } = select( blockEditorStore );
+ const blockEditorSettings = getSettings();
- return {
- isHomePageBlog:
- siteSettings?.page_for_posts ===
- siteSettings?.page_on_front,
- siteTitle: siteSettings?.title,
- postsPerPage: siteSettings?.posts_per_page,
- commentOrder:
- getSettings()?.__experimentalDiscussionSettings
- ?.commentOrder,
- };
- },
- []
- );
+ return {
+ isHomePageBlog:
+ siteSettings?.page_for_posts === siteSettings?.page_on_front,
+ siteTitle: siteSettings?.title,
+ postsPerPage: +siteSettings?.posts_per_page,
+ commentOrder:
+ blockEditorSettings?.__experimentalDiscussionSettings
+ ?.commentOrder,
+ templatePartAreas: blockEditorSettings?.defaultTemplatePartAreas,
+ };
+ }, [] );
+
+ const templateAreas = useMemo( () => {
+ return record?.blocks && templatePartAreas
+ ? record.blocks
+ .filter(
+ ( { name, attributes } ) =>
+ name === 'core/template-part' &&
+ ( attributes?.slug === 'header' ||
+ attributes?.slug === 'footer' )
+ )
+ .map( ( { attributes } ) =>
+ templatePartAreas?.find(
+ ( { area } ) => area === attributes?.slug
+ )
+ )
+ : [];
+ }, [ record?.blocks, templatePartAreas ] );
const noop = () => {};
@@ -90,7 +141,16 @@ export default function HomeTemplateDetails() {
- Test
+ { templateAreas.map( ( { area, label, icon } ) => (
+
+
+ { label }
+
+
+
+
+
+ ) ) }
);
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 ec35a49d97706..7f3838df9b642 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
@@ -1,7 +1,7 @@
/**
* WordPress dependencies
*/
-import { __, _x } from '@wordpress/i18n';
+import { __, _x, sprintf } from '@wordpress/i18n';
import { useDispatch, useSelect } from '@wordpress/data';
import { pencil } from '@wordpress/icons';
import {
@@ -9,7 +9,8 @@ import {
Icon,
} from '@wordpress/components';
import { store as coreStore } from '@wordpress/core-data';
-
+import { createInterpolateElement } from '@wordpress/element';
+import { humanTimeDiff } from '@wordpress/date';
/**
* Internal dependencies
*/
@@ -21,13 +22,17 @@ import SidebarButton from '../sidebar-button';
import { useAddedBy } from '../list/added-by';
import TemplateActions from '../template-actions';
import HomeTemplateDetails from './home-template-details';
+import {
+ SidebarNavigationScreenDetailsPanelRow,
+ SidebarNavigationScreenDetailsPanelLabel,
+ SidebarNavigationScreenDetailsPanelValue,
+} from '../sidebar-navigation-screen-details-panel';
function useTemplateDetails( postType, postId ) {
const { getDescription, getTitle, record } = useEditedEntityRecord(
postType,
postId
);
-
const currentTheme = useSelect(
( select ) => select( coreStore ).getCurrentTheme(),
[]
@@ -49,6 +54,29 @@ function useTemplateDetails( postType, postId ) {
content = ;
}
+ let footer = null;
+ if ( !! record?.modified ) {
+ footer = (
+
+
+ { __( 'Last modified' ) }
+
+
+ { createInterpolateElement(
+ sprintf(
+ /* translators: %s: is the relative time when the post was last modified. */
+ __( '' ),
+ humanTimeDiff( record.modified )
+ ),
+ {
+ time: ,
+ }
+ ) }
+
+
+ );
+ }
+
const description = (
<>
{ descriptionText }
@@ -81,7 +109,7 @@ function useTemplateDetails( postType, postId ) {
);
- return { title, description, content };
+ return { title, description, content, footer };
}
export default function SidebarNavigationScreenTemplate() {
@@ -90,7 +118,7 @@ export default function SidebarNavigationScreenTemplate() {
params: { postType, postId },
} = navigator;
const { setCanvasMode } = unlock( useDispatch( editSiteStore ) );
- const { title, content, description } = useTemplateDetails(
+ const { title, content, description, footer } = useTemplateDetails(
postType,
postId
);
@@ -117,6 +145,7 @@ export default function SidebarNavigationScreenTemplate() {
}
description={ description }
content={ content }
+ footer={ footer }
/>
);
}
diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-template/style.scss b/packages/edit-site/src/components/sidebar-navigation-screen-template/style.scss
index e86c137a574d5..8c4e1891a090d 100644
--- a/packages/edit-site/src/components/sidebar-navigation-screen-template/style.scss
+++ b/packages/edit-site/src/components/sidebar-navigation-screen-template/style.scss
@@ -23,3 +23,7 @@
}
}
}
+
+.edit-site-sidebar-navigation-screen-template__template-area-button {
+ color: $white;
+}