From 5789a7fe6af0701f3a12e1b2af9a569b420aa3f9 Mon Sep 17 00:00:00 2001 From: Noah Allen Date: Mon, 12 Oct 2020 15:51:02 -0700 Subject: [PATCH 1/2] Refactor document actions to handle template parts --- .../header/document-actions/index.js | 46 ++++++----- .../edit-site/src/components/header/index.js | 76 +++++++++++++------ 2 files changed, 81 insertions(+), 41 deletions(-) diff --git a/packages/edit-site/src/components/header/document-actions/index.js b/packages/edit-site/src/components/header/document-actions/index.js index 4f4543d8fa6a9..342381fda0f23 100644 --- a/packages/edit-site/src/components/header/document-actions/index.js +++ b/packages/edit-site/src/components/header/document-actions/index.js @@ -6,7 +6,7 @@ import classnames from 'classnames'; /** * WordPress dependencies */ -import { __ } from '@wordpress/i18n'; +import { sprintf, __ } from '@wordpress/i18n'; import { __experimentalGetBlockLabel as getBlockLabel, getBlockType, @@ -16,12 +16,6 @@ import { Dropdown, Button, VisuallyHidden } from '@wordpress/components'; import { chevronDown } from '@wordpress/icons'; import { useRef } from '@wordpress/element'; -/** - * Internal dependencies - */ -import TemplateDetails from '../../template-details'; -import { getTemplateInfo } from '../../../utils'; - function getBlockDisplayText( block ) { return block ? getBlockLabel( getBlockType( block.name ), block.attributes ) @@ -50,8 +44,20 @@ function useSecondaryText() { return {}; } -export default function DocumentActions( { template } ) { - const { title: documentTitle } = getTemplateInfo( template ); +/** + * @param {Object} props Props for the DocumentActions component. + * @param {string} props.entityTitle The title to display. + * @param {string} props.entityLabel A label to use for entity-related options. + * E.g. "template" would be used for "edit + * template" and "show template details". + * @param {Object[]} props.children React component to use for the + * information dropdown area. + */ +export default function DocumentActions( { + entityTitle, + entityLabel, + children: dropdownContent, +} ) { const { label, isActive } = useSecondaryText(); // Title is active when there is no secondary item, or when the secondary @@ -69,7 +75,7 @@ export default function DocumentActions( { template } ) { 'has-secondary-label': !! label, } ) } > - { documentTitle ? ( + { entityTitle ? ( <>

- { __( 'Edit template:' ) } + { sprintf( + /* translators: %s: the entity being edited, like "template"*/ + __( 'Edit %s:' ), + entityLabel + ) }
- { documentTitle } + { entityTitle }

- { ! isActive && ( + { dropdownContent && ! isActive && ( ) } - renderContent={ () => ( - - ) } + renderContent={ () => dropdownContent } /> ) }
diff --git a/packages/edit-site/src/components/header/index.js b/packages/edit-site/src/components/header/index.js index 5f29e38517554..3afdf43661c76 100644 --- a/packages/edit-site/src/components/header/index.js +++ b/packages/edit-site/src/components/header/index.js @@ -22,32 +22,44 @@ import SaveButton from '../save-button'; import UndoButton from './undo-redo/undo'; import RedoButton from './undo-redo/redo'; import DocumentActions from './document-actions'; +import TemplateDetails from '../template-details'; +import { getTemplateInfo } from '../../utils'; export default function Header( { openEntitiesSavedStates } ) { - const { deviceType, hasFixedToolbar, template, isInserterOpen } = useSelect( - ( select ) => { - const { - __experimentalGetPreviewDeviceType, - isFeatureActive, - getTemplateId, - isInserterOpened, - } = select( 'core/edit-site' ); - const { getEntityRecord } = select( 'core' ); + const { + deviceType, + hasFixedToolbar, + template, + templatePart, + templateType, + isInserterOpen, + } = useSelect( ( select ) => { + const { + __experimentalGetPreviewDeviceType, + isFeatureActive, + getTemplateId, + getTemplatePartId, + getTemplateType, + isInserterOpened, + } = select( 'core/edit-site' ); + const { getEntityRecord } = select( 'core' ); - const _templateId = getTemplateId(); - return { - deviceType: __experimentalGetPreviewDeviceType(), - hasFixedToolbar: isFeatureActive( 'fixedToolbar' ), - template: getEntityRecord( - 'postType', - 'wp_template', - _templateId - ), - isInserterOpen: isInserterOpened(), - }; - }, - [] - ); + const templatePartId = getTemplatePartId(); + const templateId = getTemplateId(); + + return { + deviceType: __experimentalGetPreviewDeviceType(), + hasFixedToolbar: isFeatureActive( 'fixedToolbar' ), + template: getEntityRecord( 'postType', 'wp_template', templateId ), + templatePart: getEntityRecord( + 'postType', + 'wp_template_part', + templatePartId + ), + templateType: getTemplateType(), + isInserterOpen: isInserterOpened(), + }; + }, [] ); const { __experimentalSetPreviewDeviceType: setPreviewDeviceType, @@ -58,6 +70,11 @@ export default function Header( { openEntitiesSavedStates } ) { const displayBlockToolbar = ! isLargeViewport || deviceType !== 'Desktop' || hasFixedToolbar; + let { title } = getTemplateInfo( template ); + if ( 'wp_template_part' === templateType ) { + title = templatePart?.slug; + } + return (
@@ -88,7 +105,18 @@ export default function Header( { openEntitiesSavedStates } ) {
- + + { templateType === 'wp_template' && ( + + ) } +
From 2ef39e062ec9c2b85d206cce0a2e443ad94acb4f Mon Sep 17 00:00:00 2001 From: Noah Allen Date: Thu, 15 Oct 2020 12:58:03 -0700 Subject: [PATCH 2/2] remove ternary, make more readable --- .../header/document-actions/index.js | 114 +++++++++--------- 1 file changed, 58 insertions(+), 56 deletions(-) diff --git a/packages/edit-site/src/components/header/document-actions/index.js b/packages/edit-site/src/components/header/document-actions/index.js index 342381fda0f23..7a2764205b3b2 100644 --- a/packages/edit-site/src/components/header/document-actions/index.js +++ b/packages/edit-site/src/components/header/document-actions/index.js @@ -69,77 +69,79 @@ export default function DocumentActions( { // part of it. const titleRef = useRef(); + // Return a simple loading indicator until we have information to show. + if ( ! entityTitle ) { + return ( +
+ { __( 'Loading…' ) } +
+ ); + } + return (
- { entityTitle ? ( - <> -
-

- - { sprintf( - /* translators: %s: the entity being edited, like "template"*/ - __( 'Edit %s:' ), - entityLabel - ) } - -
- { entityTitle } -
-

- { dropdownContent && ! isActive && ( - ( -
+
+ { label ?? '' } +
); }