From 806660917c9c35cc13ed88b9a724a681d1155ce3 Mon Sep 17 00:00:00 2001 From: James Koster Date: Mon, 10 Jul 2023 16:21:56 +0100 Subject: [PATCH 1/7] Add template part details --- .../style.scss | 1 + .../use-pattern-details.js | 89 ++++++++++++------- 2 files changed, 57 insertions(+), 33 deletions(-) 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 3beef739f78082..2757ce5a620c58 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 @@ -18,6 +18,7 @@ .edit-site-sidebar-navigation-details-screen-panel__label.edit-site-sidebar-navigation-details-screen-panel__label { color: $gray-600; width: 100px; + flex-shrink: 0; } .edit-site-sidebar-navigation-details-screen-panel__value.edit-site-sidebar-navigation-details-screen-panel__value { diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-pattern/use-pattern-details.js b/packages/edit-site/src/components/sidebar-navigation-screen-pattern/use-pattern-details.js index 93d249355abe7e..0b7b6615953341 100644 --- a/packages/edit-site/src/components/sidebar-navigation-screen-pattern/use-pattern-details.js +++ b/packages/edit-site/src/components/sidebar-navigation-screen-pattern/use-pattern-details.js @@ -4,7 +4,6 @@ import { __, sprintf, _x } from '@wordpress/i18n'; import { store as coreStore } from '@wordpress/core-data'; import { useSelect } from '@wordpress/data'; -import { Icon } from '@wordpress/components'; /** * Internal dependencies @@ -54,37 +53,7 @@ export default function usePatternDetails( postType, postId ) { ); } - const description = ( - <> - { descriptionText } - - { addedBy.text && ! isAddedByActiveTheme && ( - - - - { addedBy.imageUrl ? ( - - ) : ( - - ) } - - { addedBy.text } - - - { addedBy.isCustomized && ( - - { _x( '(Customized)', 'pattern' ) } - - ) } - - ) } - - ); + const description = <>{ descriptionText }; const footer = !! record?.modified ? ( + + { addedBy.text } + + + ), + } ); + } + + if ( + postType === 'wp_template_part' && + addedBy.text && + ( record.origin === 'plugin' || record.has_theme_file === true ) + ) { + details.push( { + label: __( 'Customized' ), + value: ( + <> + { addedBy.isCustomized ? ( + + { _x( 'Yes', 'pattern' ) } + + ) : ( + + { _x( 'No', 'pattern' ) } + + ) } + + ), + } ); + } + const content = ( <> { !! details.length && ( From eddde5174607fc18f106fe0aaf1ebb27d373c1a5 Mon Sep 17 00:00:00 2001 From: James Koster Date: Wed, 19 Jul 2023 11:57:03 +0100 Subject: [PATCH 2/7] Simplify --- .../use-pattern-details.js | 36 +++++++------------ 1 file changed, 13 insertions(+), 23 deletions(-) diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-pattern/use-pattern-details.js b/packages/edit-site/src/components/sidebar-navigation-screen-pattern/use-pattern-details.js index 0b7b6615953341..5324ae8a6732bb 100644 --- a/packages/edit-site/src/components/sidebar-navigation-screen-pattern/use-pattern-details.js +++ b/packages/edit-site/src/components/sidebar-navigation-screen-pattern/use-pattern-details.js @@ -35,26 +35,24 @@ export default function usePatternDetails( postType, postId ) { const isAddedByActiveTheme = addedBy.type === 'theme' && record.theme === currentTheme?.stylesheet; const title = getTitle(); - let descriptionText = getDescription(); + let description = getDescription(); - if ( ! descriptionText && addedBy.text ) { - descriptionText = sprintf( + if ( ! description && addedBy.text ) { + description = sprintf( // translators: %s: pattern title e.g: "Header". __( 'This is the %s pattern.' ), getTitle() ); } - if ( ! descriptionText && postType === 'wp_block' && record?.title ) { - descriptionText = sprintf( + if ( ! description && postType === 'wp_block' && record?.title ) { + description = sprintf( // translators: %s: user created pattern title e.g. "Footer". __( 'This is the %s pattern.' ), record.title ); } - const description = <>{ descriptionText }; - const footer = !! record?.modified ? ( - - { addedBy.text } - - + + { addedBy.text } + ), } ); } @@ -112,17 +108,11 @@ export default function usePatternDetails( postType, postId ) { details.push( { label: __( 'Customized' ), value: ( - <> - { addedBy.isCustomized ? ( - - { _x( 'Yes', 'pattern' ) } - - ) : ( - - { _x( 'No', 'pattern' ) } - - ) } - + + { addedBy.isCustomized + ? _x( 'Yes', 'pattern' ) + : _x( 'No', 'pattern' ) } + ), } ); } From df68100cb68d2a21aba3541efc432ec2f02f3956 Mon Sep 17 00:00:00 2001 From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com> Date: Thu, 20 Jul 2023 09:59:48 +1000 Subject: [PATCH 3/7] Use registered template part areas to display area detail --- .../use-pattern-details.js | 19 +++++++++++-------- 1 file changed, 11 insertions(+), 8 deletions(-) diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-pattern/use-pattern-details.js b/packages/edit-site/src/components/sidebar-navigation-screen-pattern/use-pattern-details.js index 5324ae8a6732bb..13a4ac76f37508 100644 --- a/packages/edit-site/src/components/sidebar-navigation-screen-pattern/use-pattern-details.js +++ b/packages/edit-site/src/components/sidebar-navigation-screen-pattern/use-pattern-details.js @@ -3,6 +3,7 @@ */ import { __, sprintf, _x } from '@wordpress/i18n'; import { store as coreStore } from '@wordpress/core-data'; +import { store as editorStore } from '@wordpress/editor'; import { useSelect } from '@wordpress/data'; /** @@ -27,6 +28,11 @@ export default function usePatternDetails( postType, postId ) { postType, postId ); + const templatePartAreas = useSelect( + ( select ) => + select( editorStore ).__experimentalGetDefaultTemplatePartAreas(), + [] + ); const currentTheme = useSelect( ( select ) => select( coreStore ).getCurrentTheme(), [] @@ -71,17 +77,14 @@ export default function usePatternDetails( postType, postId ) { } ); } - const templatePartAreaLabels = { - header: __( 'Header' ), - footer: __( 'Footer' ), - sidebar: __( 'Sidebar' ), - uncategorized: __( 'General' ), - }; - if ( postType === 'wp_template_part' ) { + const templatePartArea = templatePartAreas.find( + ( area ) => area.area === record.area + ); + details.push( { label: __( 'Area' ), - value: templatePartAreaLabels[ record.area ], + value: templatePartArea?.label, } ); } From 065ca5c8bdb14cbce259cbf20a473fc934823c17 Mon Sep 17 00:00:00 2001 From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com> Date: Thu, 20 Jul 2023 10:21:56 +1000 Subject: [PATCH 4/7] Clean up customized detail --- .../use-pattern-details.js | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-pattern/use-pattern-details.js b/packages/edit-site/src/components/sidebar-navigation-screen-pattern/use-pattern-details.js index 13a4ac76f37508..346601253cbd02 100644 --- a/packages/edit-site/src/components/sidebar-navigation-screen-pattern/use-pattern-details.js +++ b/packages/edit-site/src/components/sidebar-navigation-screen-pattern/use-pattern-details.js @@ -1,7 +1,7 @@ /** * WordPress dependencies */ -import { __, sprintf, _x } from '@wordpress/i18n'; +import { __, sprintf } from '@wordpress/i18n'; import { store as coreStore } from '@wordpress/core-data'; import { store as editorStore } from '@wordpress/editor'; import { useSelect } from '@wordpress/data'; @@ -112,9 +112,7 @@ export default function usePatternDetails( postType, postId ) { label: __( 'Customized' ), value: ( - { addedBy.isCustomized - ? _x( 'Yes', 'pattern' ) - : _x( 'No', 'pattern' ) } + { addedBy.isCustomized ? __( 'Yes' ) : __( 'No' ) } ), } ); From 0a145e7d383cf18e36669a0ed9b53604c7c7585a Mon Sep 17 00:00:00 2001 From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com> Date: Wed, 26 Jul 2023 14:12:14 +1000 Subject: [PATCH 5/7] Add fallback for orphaned template part --- .../sidebar-navigation-screen-pattern/use-pattern-details.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-pattern/use-pattern-details.js b/packages/edit-site/src/components/sidebar-navigation-screen-pattern/use-pattern-details.js index 346601253cbd02..099abf789678b2 100644 --- a/packages/edit-site/src/components/sidebar-navigation-screen-pattern/use-pattern-details.js +++ b/packages/edit-site/src/components/sidebar-navigation-screen-pattern/use-pattern-details.js @@ -84,7 +84,7 @@ export default function usePatternDetails( postType, postId ) { details.push( { label: __( 'Area' ), - value: templatePartArea?.label, + value: templatePartArea?.label || record.area || __( 'None' ), } ); } From e6a5063afc1d6e27deb61c7f39ceafd117bbfe2e Mon Sep 17 00:00:00 2001 From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com> Date: Thu, 27 Jul 2023 11:19:14 +1000 Subject: [PATCH 6/7] Sentence case area slug for details --- .../use-pattern-details.js | 22 +++++++++++++++---- 1 file changed, 18 insertions(+), 4 deletions(-) diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-pattern/use-pattern-details.js b/packages/edit-site/src/components/sidebar-navigation-screen-pattern/use-pattern-details.js index 099abf789678b2..afa1fc69e69e1a 100644 --- a/packages/edit-site/src/components/sidebar-navigation-screen-pattern/use-pattern-details.js +++ b/packages/edit-site/src/components/sidebar-navigation-screen-pattern/use-pattern-details.js @@ -1,3 +1,8 @@ +/** + * External dependencies + */ +import { sentenceCase } from 'change-case'; + /** * WordPress dependencies */ @@ -82,10 +87,19 @@ export default function usePatternDetails( postType, postId ) { ( area ) => area.area === record.area ); - details.push( { - label: __( 'Area' ), - value: templatePartArea?.label || record.area || __( 'None' ), - } ); + let areaDetailValue = templatePartArea?.label; + + if ( ! areaDetailValue ) { + areaDetailValue = record.area + ? sprintf( + // translators: %s: Sentenced cased template part area e.g: "My custom area". + __( '%s (removed)' ), + sentenceCase( record.area ) + ) + : __( 'None' ); + } + + details.push( { label: __( 'Area' ), value: areaDetailValue } ); } if ( From 9770c76cb893edc4cbcd8c1e79f9e4d24ac74235 Mon Sep 17 00:00:00 2001 From: James Koster Date: Thu, 27 Jul 2023 10:36:01 +0100 Subject: [PATCH 7/7] Navigation before details --- .../sidebar-navigation-screen-pattern/use-pattern-details.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-pattern/use-pattern-details.js b/packages/edit-site/src/components/sidebar-navigation-screen-pattern/use-pattern-details.js index afa1fc69e69e1a..5aed89955ba4fc 100644 --- a/packages/edit-site/src/components/sidebar-navigation-screen-pattern/use-pattern-details.js +++ b/packages/edit-site/src/components/sidebar-navigation-screen-pattern/use-pattern-details.js @@ -134,6 +134,7 @@ export default function usePatternDetails( postType, postId ) { const content = ( <> + { useNavigationMenuContent( postType, postId ) } { !! details.length && ( ) } - { useNavigationMenuContent( postType, postId ) } );