Add the currently edited template title to the view mode header

WordPress · youknowriad · Dec 1, 2022 · Sep 15, 2022 · Oct 14, 2022 · Oct 14, 2022
commit d6983d32a0b8d202e23440fe51e66b25a1cabc74
diff --git a/packages/edit-site/src/components/header-edit-mode/document-actions/index.js b/packages/edit-site/src/components/header-edit-mode/document-actions/index.js
@@ -69,7 +69,7 @@ function useSecondaryText() {
 	return {};
 }
 
-export default function DocumentActions() {
+export default function DocumentActions( { showDropdown = true } ) {
 	const { showIconLabels, entityTitle, template, templateType, isLoaded } =
 		useSelect( ( select ) => {
 			const { getEditedPostType, getEditedPostId } =
@@ -163,34 +163,38 @@ export default function DocumentActions() {
 					<Text size="body">{ label ?? '' }</Text>
 				</div>
 
-				<Dropdown
-					popoverProps={ popoverProps }
-					position="bottom center"
-					renderToggle={ ( { isOpen, onToggle } ) => (
-						<Button
-							className="edit-site-document-actions__get-info"
-							icon={ chevronDown }
-							aria-expanded={ isOpen }
-							aria-haspopup="true"
-							onClick={ onToggle }
-							variant={ showIconLabels ? 'tertiary' : undefined }
-							label={ sprintf(
-								/* translators: %s: the entity to see details about, like "template"*/
-								__( 'Show %s details' ),
-								entityLabel
-							) }
-						>
-							{ showIconLabels && __( 'Details' ) }
-						</Button>
-					) }
-					contentClassName="edit-site-document-actions__info-dropdown"
-					renderContent={ ( { onClose } ) => (
-						<TemplateDetails
-							template={ template }
-							onClose={ onClose }
-						/>
-					) }
-				/>
+				{ showDropdown && (
+					<Dropdown
+						popoverProps={ popoverProps }
+						position="bottom center"
+						renderToggle={ ( { isOpen, onToggle } ) => (
+							<Button
+								className="edit-site-document-actions__get-info"
+								icon={ chevronDown }
+								aria-expanded={ isOpen }
+								aria-haspopup="true"
+								onClick={ onToggle }
+								variant={
+									showIconLabels ? 'tertiary' : undefined
+								}
+								label={ sprintf(
+									/* translators: %s: the entity to see details about, like "template"*/
+									__( 'Show %s details' ),
+									entityLabel
+								) }
+							>
+								{ showIconLabels && __( 'Details' ) }
+							</Button>
+						) }
+						contentClassName="edit-site-document-actions__info-dropdown"
+						renderContent={ ( { onClose } ) => (
+							<TemplateDetails
+								template={ template }
+								onClose={ onClose }
+							/>
+						) }
+					/>
+				) }
 			</div>
 		</div>
 	);

diff --git a/packages/edit-site/src/components/header/index.js b/packages/edit-site/src/components/header/index.js
@@ -17,6 +17,7 @@ import { store as editSiteStore } from '../../store';
 import HeaderEditMode from '../header-edit-mode';
 import SiteIconAndTitle from '../site-icon-and-title';
 import SaveButton from '../save-button';
+import DocumentActions from '../header-edit-mode/document-actions';
 
 export default function Header() {
 	const { canvasMode } = useSelect(
@@ -55,7 +56,9 @@ export default function Header() {
 			<FlexBlock>
 				{ canvasMode === 'edit' && <HeaderEditMode /> }
 				{ canvasMode === 'view' && (
-					<HStack alignment="right">
+					<HStack justify="space-between">
+						<div></div>
+						<DocumentActions showDropdown={ false } />
 						<SaveButton />
 					</HStack>
 				) }