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 b84e49684b4cd..3979ff09679a6 100644
--- 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 (
@@ -120,7 +133,18 @@ export default function Header( {
-
+
+ { templateType === 'wp_template' && (
+
+ ) }
+