Update the document title in the site editor to open the command tool

packages/edit-site/src/components/header-edit-mode/document-actions/index.js

@@ -1,112 +1,39 @@
-/**
- * External dependencies
- */
-import classnames from 'classnames';
-
 /**
  * WordPress dependencies
  */
 import { sprintf, __ } from '@wordpress/i18n';
+import { useDispatch } from '@wordpress/data';
 import {
-	__experimentalGetBlockLabel as getBlockLabel,
-	getBlockType,
-} from '@wordpress/blocks';
-import { useSelect } from '@wordpress/data';
-import {
-	Dropdown,
 	Button,
 	VisuallyHidden,
 	__experimentalText as Text,
+	__experimentalHStack as HStack,
 } from '@wordpress/components';
-import { chevronDown } from '@wordpress/icons';
-import { useState, useMemo } from '@wordpress/element';
-import {
-	store as blockEditorStore,
-	useBlockDisplayInformation,
-	BlockIcon,
-} from '@wordpress/block-editor';
-import { store as preferencesStore } from '@wordpress/preferences';
+import { BlockIcon } from '@wordpress/block-editor';
+import { privateApis as commandsPrivateApis } from '@wordpress/commands';
 
 /**
  * Internal dependencies
  */
-import TemplateDetails from '../../template-details';
 import useEditedEntityRecord from '../../use-edited-entity-record';
+import { unlock } from '../../../private-apis';
 
-function getBlockDisplayText( block ) {
-	if ( block ) {
-		const blockType = getBlockType( block.name );
-		return blockType ? getBlockLabel( blockType, block.attributes ) : null;
-	}
-	return null;
-}
-
-function useSecondaryText() {
-	const { getBlock } = useSelect( blockEditorStore );
-	const activeEntityBlockId = useSelect(
-		( select ) =>
-			select(
-				blockEditorStore
-			).__experimentalGetActiveBlockIdByBlockNames( [
-				'core/template-part',
-			] ),
-		[]
-	);
-
-	const blockInformation = useBlockDisplayInformation( activeEntityBlockId );
-
-	if ( activeEntityBlockId ) {
-		return {
-			label: getBlockDisplayText( getBlock( activeEntityBlockId ) ),
-			isActive: true,
-			icon: blockInformation?.icon,
-		};
-	}
-
-	return {};
-}
+const { store: commandsStore } = unlock( commandsPrivateApis );
 
 export default function DocumentActions() {
-	const showIconLabels = useSelect(
-		( select ) =>
-			select( preferencesStore ).get(
-				'core/edit-site',
-				'showIconLabels'
-			),
-		[]
-	);
-	const { isLoaded, record, getTitle } = useEditedEntityRecord();
-	const { label, icon } = useSecondaryText();
-
-	// Use internal state instead of a ref to make sure that the component
-	// re-renders when the popover's anchor updates.
-	const [ popoverAnchor, setPopoverAnchor ] = useState( null );
-
-	// Memoize popoverProps to avoid returning a new object every time.
-	const popoverProps = useMemo(
-		() => ( {
-			// Use the title wrapper as the popover anchor so that the dropdown is
-			// centered over the whole title area rather than just one part of it.
-			anchor: popoverAnchor,
-			placement: 'bottom',
-		} ),
-		[ popoverAnchor ]
-	);
+	const { open: openCommandCenter } = useDispatch( commandsStore );
+	const { isLoaded, record, getTitle, icon } = useEditedEntityRecord();
 
 	// Return a simple loading indicator until we have information to show.
 	if ( ! isLoaded ) {
-		return (
-			<div className="edit-site-document-actions">
-				{ __( 'Loading…' ) }
-			</div>
-		);
+		return null;
 	}
 
 	// Return feedback that the template does not seem to exist.
 	if ( ! record ) {
 		return (
 			<div className="edit-site-document-actions">
-				{ __( 'Template not found' ) }
+				{ __( 'Document not found' ) }
 			</div>
 		);
 	}
@@ -116,21 +43,21 @@ export default function DocumentActions() {
 			? __( 'template part' )
 			: __( 'template' );
 
+	const isMac = /Mac|iPod|iPhone|iPad/.test( window.navigator.platform );
+
 	return (
-		<div
-			className={ classnames( 'edit-site-document-actions', {
-				'has-secondary-label': !! label,
-			} ) }
+		<Button
+			className="edit-site-document-actions"
+			onClick={ () => openCommandCenter() }
 		>
-			<div
-				ref={ setPopoverAnchor }
-				className="edit-site-document-actions__title-wrapper"
+			<span className="edit-site-document-actions__left"></span>
+			<HStack
+				spacing={ 1 }
+				justify="center"
+				className="edit-site-document-actions__title"
 			>
-				<Text
-					size="body"
-					className="edit-site-document-actions__title"
-					as="h1"
-				>
+				<BlockIcon icon={ icon } />
+				<Text size="body" as="h1">
 					<VisuallyHidden as="span">
 						{ sprintf(
 							/* translators: %s: the entity being edited, like "template"*/
@@ -140,39 +67,10 @@ export default function DocumentActions() {
 					</VisuallyHidden>
 					{ getTitle() }
 				</Text>
-				<div className="edit-site-document-actions__secondary-item">
-					<BlockIcon icon={ icon } showColors />
-					<Text size="body">{ label ?? '' }</Text>
-				</div>
-
-				<Dropdown
-					popoverProps={ popoverProps }
-					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={ record }
-							onClose={ onClose }
-						/>
-					) }
-				/>
-			</div>
-		</div>
+			</HStack>
+			<span className="edit-site-document-actions__shortcut">
+				{ isMac ? '⌘' : 'Ctrl' } K
+			</span>
+		</Button>
 	);
 }

packages/edit-site/src/components/header-edit-mode/document-actions/style.scss

@@ -1,79 +1,48 @@
 .edit-site-document-actions {
 	display: flex;
-	flex-direction: column;
-	justify-content: center;
-	padding: 0 $grid-unit;
-	height: 100%;
+	align-items: center;
+	gap: $grid-unit;
+	height: $button-size;
+	padding: $grid-unit;
+	justify-content: space-between;
 	// Flex items will, by default, refuse to shrink below a minimum
 	// intrinsic width. In order to shrink this flexbox item, and
 	// subsequently truncate child text, we set an explicit min-width.
 	// See https://dev.w3.org/csswg/css-flexbox/#min-size-auto
 	min-width: 0;
+	background: $gray-100;
+	border-radius: 4px;
+	width: min(100%, 450px);
 
-	.edit-site-document-actions__title-wrapper {
-		display: flex;
-		flex-direction: row;
-		justify-content: center;
-		align-items: center;
-
-		// See comment above about min-width
-		min-width: 0;
-
-		.components-dropdown {
-			display: inline-flex;
-			margin-left: $grid-unit-05;
-
-			.components-button {
-				min-width: 0;
-				padding: 0;
-			}
-		}
-	}
-
-	.edit-site-document-actions__title-wrapper > h1 {
-		margin: 0;
-
-		// See comment above about min-width
-		min-width: 0;
-	}
-
-	.edit-site-document-actions__title {
-		white-space: nowrap;
-		overflow: hidden;
-		text-overflow: ellipsis;
+	&:hover {
 		color: currentColor;
+		background: $gray-200;
 	}
+}
 
-	.edit-site-document-actions__secondary-item {
-		display: flex;
-		align-items: center;
+.edit-site-document-actions__title {
+	flex-grow: 1;
+	color: var(--wp-block-synced-color);
+	overflow: hidden;
+
+	h1 {
+		color: var(--wp-block-synced-color);
 		white-space: nowrap;
 		overflow: hidden;
 		text-overflow: ellipsis;
-		max-width: 0;
-		opacity: 0;
-		padding: 0;
-		transition: all ease 0.2s;
-		background: rgba(var(--wp-block-synced-color--rgb), 0.04);
-		border-radius: 2px;
-		@include reduce-motion(transition);
-
-		.block-editor-block-icon.has-colors {
-			color: var(--wp-block-synced-color);
-		}
 	}
+}
 
-	&.has-secondary-label {
-		.edit-site-document-actions__secondary-item {
-			opacity: 1;
-			padding: 0 4px;
-			max-width: 180px;
-			margin-left: 6px;
-		}
+.edit-site-document-actions__shortcut {
+	flex-shrink: 0;
+	color: $gray-700;
+	width: #{$grid-unit * 4.5};
+	&:hover {
+		color: $gray-700;
 	}
 }
 
-.edit-site-document-actions__info-dropdown > .components-popover__content {
-	padding: 0;
-	min-width: 240px;
+.edit-site-document-actions__left {
+	min-width: $button-size;
+	flex-shrink: 0;
 }

packages/edit-site/src/components/header-edit-mode/style.scss

@@ -27,6 +27,7 @@ $header-toolbar-min-width: 335px;
 		align-items: center;
 		height: 100%;
 		flex-grow: 1;
+		margin: 0 $grid-unit-10;
 		justify-content: center;
 		// Flex items will, by default, refuse to shrink below a minimum
 		// intrinsic width. In order to shrink this flexbox item, and