From e0daf20332c7dd7af027429f7cda88380a86bac6 Mon Sep 17 00:00:00 2001 From: Saxon Fletcher Date: Mon, 29 May 2023 15:42:29 +1000 Subject: [PATCH 1/3] separate template screens site editor --- .../index.js | 103 ++++++++++++++++++ .../index.js | 20 +--- .../edit-site/src/components/sidebar/index.js | 6 +- 3 files changed, 113 insertions(+), 16 deletions(-) create mode 100644 packages/edit-site/src/components/sidebar-navigation-screen-template-part/index.js diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-template-part/index.js b/packages/edit-site/src/components/sidebar-navigation-screen-template-part/index.js new file mode 100644 index 00000000000000..1823b97594f522 --- /dev/null +++ b/packages/edit-site/src/components/sidebar-navigation-screen-template-part/index.js @@ -0,0 +1,103 @@ +/** + * WordPress dependencies + */ +import { __, sprintf, _x } from '@wordpress/i18n'; +import { useDispatch, useSelect } from '@wordpress/data'; +import { pencil } from '@wordpress/icons'; +import { + __experimentalUseNavigator as useNavigator, + Icon, +} from '@wordpress/components'; +import { store as coreStore } from '@wordpress/core-data'; + +/** + * Internal dependencies + */ +import SidebarNavigationScreen from '../sidebar-navigation-screen'; +import useEditedEntityRecord from '../use-edited-entity-record'; +import { unlock } from '../../private-apis'; +import { store as editSiteStore } from '../../store'; +import SidebarButton from '../sidebar-button'; +import { useAddedBy } from '../list/added-by'; + +function useTemplateTitleAndDescription( postType, postId ) { + const { getDescription, getTitle, record } = useEditedEntityRecord( + postType, + postId + ); + const currentTheme = useSelect( + ( select ) => select( coreStore ).getCurrentTheme(), + [] + ); + const addedBy = useAddedBy( postType, postId ); + const isAddedByActiveTheme = + addedBy.type === 'theme' && record.theme === currentTheme?.stylesheet; + const title = getTitle(); + let descriptionText = getDescription(); + + if ( ! descriptionText && addedBy.text ) { + descriptionText = sprintf( + // translators: %s: template part title e.g: "Header". + __( 'This is your %s template part.' ), + getTitle() + ); + } + + const description = ( + <> + { descriptionText } + + { addedBy.text && ! isAddedByActiveTheme && ( + + + + { addedBy.imageUrl ? ( + + ) : ( + + ) } + + { addedBy.text } + + + { addedBy.isCustomized && ( + + { _x( '(Customized)', 'template part' ) } + + ) } + + ) } + + ); + + return { title, description }; +} + +export default function SidebarNavigationScreenTemplatePart() { + const { params } = useNavigator(); + const { postType, postId } = params; + const { setCanvasMode } = unlock( useDispatch( editSiteStore ) ); + const { title, description } = useTemplateTitleAndDescription( + postType, + postId + ); + + return ( + setCanvasMode( 'edit' ) } + label={ __( 'Edit' ) } + icon={ pencil } + /> + } + description={ description } + /> + ); +} 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 99139b55d87a5c..8ab3c1363af692 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 { __, sprintf, _x } from '@wordpress/i18n'; +import { __, _x } from '@wordpress/i18n'; import { useDispatch, useSelect } from '@wordpress/data'; import { pencil } from '@wordpress/icons'; import { @@ -36,17 +36,9 @@ function useTemplateTitleAndDescription( postType, postId ) { let descriptionText = getDescription(); if ( ! descriptionText && addedBy.text ) { - if ( record.type === 'wp_template' && record.is_custom ) { - descriptionText = __( - 'This is a custom template that can be applied manually to any Post or Page.' - ); - } else if ( record.type === 'wp_template_part' ) { - descriptionText = sprintf( - // translators: %s: template part title e.g: "Header". - __( 'This is your %s template part.' ), - getTitle() - ); - } + descriptionText = __( + 'This is a custom template that can be applied manually to any Post or Page.' + ); } const description = ( @@ -73,9 +65,7 @@ function useTemplateTitleAndDescription( postType, postId ) { { addedBy.isCustomized && ( - { postType === 'wp_template' - ? _x( '(Customized)', 'template' ) - : _x( '(Customized)', 'template part' ) } + { _x( '(Customized)', 'template' ) } ) } diff --git a/packages/edit-site/src/components/sidebar/index.js b/packages/edit-site/src/components/sidebar/index.js index 98fb77139090ee..0252b7c42f0265 100644 --- a/packages/edit-site/src/components/sidebar/index.js +++ b/packages/edit-site/src/components/sidebar/index.js @@ -14,6 +14,7 @@ import { privateApis as routerPrivateApis } from '@wordpress/router'; import SidebarNavigationScreenMain from '../sidebar-navigation-screen-main'; import SidebarNavigationScreenTemplates from '../sidebar-navigation-screen-templates'; import SidebarNavigationScreenTemplate from '../sidebar-navigation-screen-template'; +import SidebarNavigationScreenTemplatePart from '../sidebar-navigation-screen-template-part'; import useSyncPathWithURL, { getPathFromURL, } from '../sync-state-with-url/use-sync-path-with-url'; @@ -51,13 +52,16 @@ function SidebarScreens() { + + + - + From 28fa79ee437563c999dab87e7bc7a05c6b720620 Mon Sep 17 00:00:00 2001 From: Saxon Fletcher Date: Tue, 30 May 2023 16:05:42 +1000 Subject: [PATCH 2/3] adding the elements --- .../sidebar-navigation-data-list/style.scss | 12 +++- .../index.js | 65 +++++++++++++++++-- 2 files changed, 71 insertions(+), 6 deletions(-) diff --git a/packages/edit-site/src/components/sidebar-navigation-data-list/style.scss b/packages/edit-site/src/components/sidebar-navigation-data-list/style.scss index 3a19bba8ed924d..06b613fd598f77 100644 --- a/packages/edit-site/src/components/sidebar-navigation-data-list/style.scss +++ b/packages/edit-site/src/components/sidebar-navigation-data-list/style.scss @@ -6,7 +6,17 @@ width: 100px; } - .edit-site-sidebar-navigation_data-list__value.edit-site-sidebar-navigation_data-list__value { + .edit-site-sidebar-navigation_data-list__value { color: $gray-200; + flex-grow: 1; + } + .components-button.is-tertiary { + color: $gray-200; + width: 100%; + margin: 0 0 0 -$grid-unit-10; + &:hover { + background-color: $gray-800; + color: $gray-100; + } } } 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 8ab3c1363af692..4df2fe1c008a0b 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,14 +1,16 @@ /** * WordPress dependencies */ -import { __, _x } from '@wordpress/i18n'; +import { __, sprintf, _x } from '@wordpress/i18n'; import { useDispatch, useSelect } from '@wordpress/data'; -import { pencil } from '@wordpress/icons'; +import { pencil, header, footer } from '@wordpress/icons'; import { __experimentalUseNavigator as useNavigator, + Button, Icon, } from '@wordpress/components'; -import { store as coreStore } from '@wordpress/core-data'; +import { store as coreStore, useEntityRecord } from '@wordpress/core-data'; +import { humanTimeDiff } from '@wordpress/date'; /** * Internal dependencies @@ -19,6 +21,10 @@ import { unlock } from '../../private-apis'; import { store as editSiteStore } from '../../store'; import SidebarButton from '../sidebar-button'; import { useAddedBy } from '../list/added-by'; +import SidebarDetails from '../sidebar-navigation-data-list'; +import DataListItem from '../sidebar-navigation-data-list/data-list-item'; +import SidebarNavigationSubtitle from '../sidebar-navigation-subtitle'; +import { createInterpolateElement } from '@wordpress/element'; function useTemplateTitleAndDescription( postType, postId ) { const { getDescription, getTitle, record } = useEditedEntityRecord( @@ -84,8 +90,9 @@ export default function SidebarNavigationScreenTemplate() { postType, postId ); + const { record } = useEntityRecord( 'postType', 'wp_template', postId ); - return ( + return record ? ( } + content={ + <> + Areas + + Primary + + ), + }, + { + label: 'Footer', + value: ( + + ), + }, + ] } + /> + + } + footer={ + %s' ), + humanTimeDiff( record.modified ) + ), + { + time: