Refactor document actions to handle template parts

WordPress · Oct 12, 2020 · 3e38b81 · 3e38b81
1 parent 1e3cc61
commit 3e38b81
Show file tree

Hide file tree

Showing 2 changed files with 58 additions and 22 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
@@ -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,15 +75,19 @@ export default function DocumentActions( { template } ) {
 				'has-secondary-label': !! label,
 			} ) }
 		>
-			{ documentTitle ? (
+			{ entityTitle ? (
 				<>
 					<div
 						ref={ titleRef }
 						className="edit-site-document-actions__title-wrapper"
 					>
 						<h1>
 							<VisuallyHidden>
-								{ __( 'Edit template:' ) }
+								{ sprintf(
+									/* translators: %s: the entity being edited, like "template"*/
+									__( 'Edit %s:' ),
+									entityLabel
+								) }
 							</VisuallyHidden>
 							<div
 								className={ classnames(
@@ -88,10 +98,10 @@ export default function DocumentActions( { template } ) {
 									}
 								) }
 							>
-								{ documentTitle }
+								{ entityTitle }
 							</div>
 						</h1>
-						{ ! isActive && (
+						{ dropdownContent && ! isActive && (
 							<Dropdown
 								popoverProps={ {
 									anchorRef: titleRef.current,
@@ -104,12 +114,14 @@ export default function DocumentActions( { template } ) {
 										aria-expanded={ isOpen }
 										aria-haspopup="true"
 										onClick={ onToggle }
-										label={ __( 'Show template details' ) }
+										label={ sprintf(
+											/* translators: %s: the entity to see details about, like "template"*/
+											__( 'Show %s details' ),
+											entityLabel
+										) }
 									/>
 								) }
-								renderContent={ () => (
-									<TemplateDetails template={ template } />
-								) }
+								renderContent={ () => dropdownContent }
 							/>
 						) }
 					</div>

diff --git a/packages/edit-site/src/components/header/index.js b/packages/edit-site/src/components/header/index.js
@@ -27,6 +27,8 @@ import UndoButton from './undo-redo/undo';
 import RedoButton from './undo-redo/redo';
 import DocumentActions from './document-actions';
 import NavigationToggle from './navigation-toggle';
+import TemplateDetails from '../template-details';
+import { getTemplateInfo } from '../../utils';
 
 export default function Header( {
 	openEntitiesSavedStates,
@@ -39,8 +41,10 @@ export default function Header( {
 		deviceType,
 		hasFixedToolbar,
 		template,
+		templatePart,
 		page,
 		showOnFront,
+		templateType,
 	} = useSelect( ( select ) => {
 		const {
 			__experimentalGetPreviewDeviceType,
@@ -56,14 +60,18 @@ export default function Header( {
 			'root',
 			'site'
 		);
+		const templatePartId = getTemplatePartId();
+		const templateId = getTemplateId();
 
-		const _templateId = getTemplateId();
 		return {
 			deviceType: __experimentalGetPreviewDeviceType(),
 			hasFixedToolbar: isFeatureActive( 'fixedToolbar' ),
-			templateId: _templateId,
-			template: getEntityRecord( 'postType', 'wp_template', _templateId ),
-			templatePartId: getTemplatePartId(),
+			template: getEntityRecord( 'postType', 'wp_template', templateId ),
+			templatePart: getEntityRecord(
+				'postType',
+				'wp_template_part',
+				templatePartId
+			),
 			templateType: getTemplateType(),
 			page: getPage(),
 			showOnFront: _showOnFront,
@@ -79,6 +87,11 @@ export default function Header( {
 	const displayBlockToolbar =
 		! isLargeViewport || deviceType !== 'Desktop' || hasFixedToolbar;
 
+	let { title } = getTemplateInfo( template );
+	if ( 'wp_template_part' === templateType ) {
+		title = templatePart?.slug;
+	}
+
 	return (
 		<div className="edit-site-header">
 			<div className="edit-site-header_start">
@@ -120,7 +133,18 @@ export default function Header( {
 			</div>
 
 			<div className="edit-site-header_center">
-				<DocumentActions template={ template } />
+				<DocumentActions
+					entityTitle={ title }
+					entityLabel={
+						templateType === 'wp_template'
+							? 'template'
+							: 'template part'
+					}
+				>
+					{ templateType === 'wp_template' && (
+						<TemplateDetails template={ template } />
+					) }
+				</DocumentActions>
 			</div>
 
 			<div className="edit-site-header_end">