Display the DocumentBar for Style Book and Style Revisions

packages/edit-site/src/components/editor-canvas-container/index.js

@@ -9,7 +9,7 @@ import {
 import { ESCAPE } from '@wordpress/keycodes';
 import { __ } from '@wordpress/i18n';
 import { useDispatch, useSelect } from '@wordpress/data';
-import { closeSmall } from '@wordpress/icons';
+import { backup, closeSmall, seen } from '@wordpress/icons';
 import { useFocusOnMount, useFocusReturn } from '@wordpress/compose';
 import { store as preferencesStore } from '@wordpress/preferences';
 import {
@@ -30,17 +30,26 @@ const { EditorContentSlotFill, ResizableEditor } = unlock( editorPrivateApis );
  *
  * @param {string} view Editor canvas container view.
  *
- * @return {string} Translated string corresponding to value of view. Default is ''.
+ * @return {Object} Translated string for the view title and associated icon, both defaulting to ''.
  */
-function getEditorCanvasContainerTitle( view ) {
+function getEditorCanvasContainerTitleAndIcon( view ) {
 	switch ( view ) {
 		case 'style-book':
-			return __( 'Style Book' );
+			return {
+				title: __( 'Style Book' ),
+				icon: seen,
+			};
 		case 'global-styles-revisions':
 		case 'global-styles-revisions:style-book':
-			return __( 'Style Revisions' );
+			return {
+				title: __( 'Style Revisions' ),
+				icon: backup,
+			};
 		default:
-			return '';
+			return {
+				title: '',
+				icon: '',
+			};
 	}
 }
 
@@ -109,7 +118,9 @@ function EditorCanvasContainer( {
 		return null;
 	}
 
-	const title = getEditorCanvasContainerTitle( editorCanvasContainerView );
+	const { title } = getEditorCanvasContainerTitleAndIcon(
+		editorCanvasContainerView
+	);
 	const shouldShowCloseButton = onClose || closeButtonLabel;
 
 	return (
@@ -138,10 +149,11 @@ function EditorCanvasContainer( {
 		</EditorContentSlotFill.Fill>
 	);
 }
+
 function useHasEditorCanvasContainer() {
 	const fills = useSlotFills( EditorContentSlotFill.privateKey );
 	return !! fills?.length;
 }
 
 export default EditorCanvasContainer;
-export { useHasEditorCanvasContainer, getEditorCanvasContainerTitle };
+export { useHasEditorCanvasContainer, getEditorCanvasContainerTitleAndIcon };

packages/edit-site/src/components/editor/index.js

@@ -36,7 +36,7 @@ import PluginTemplateSettingPanel from '../plugin-template-setting-panel';
 import GlobalStylesSidebar from '../global-styles-sidebar';
 import { isPreviewingTheme } from '../../utils/is-previewing-theme';
 import {
-	getEditorCanvasContainerTitle,
+	getEditorCanvasContainerTitleAndIcon,
 	useHasEditorCanvasContainer,
 } from '../editor-canvas-container';
 import SaveButton from '../save-button';
@@ -63,6 +63,7 @@ export default function EditSiteEditor( { isLoading } ) {
 		currentPostIsTrashed,
 	} = useSelect( ( select ) => {
 		const {
+			getEditorCanvasContainerView,
 			getEditedPostContext,
 			getCanvasMode,
 			isPage,
@@ -84,9 +85,7 @@ export default function EditSiteEditor( { isLoading } ) {
 			isEditingPage: isPage(),
 			supportsGlobalStyles: getCurrentTheme()?.is_block_theme,
 			showIconLabels: get( 'core', 'showIconLabels' ),
-			editorCanvasView: unlock(
-				select( editSiteStore )
-			).getEditorCanvasContainerView(),
+			editorCanvasView: getEditorCanvasContainerView(),
 			currentPostIsTrashed:
 				select( editorStore ).getCurrentPostAttribute( 'status' ) ===
 				'trash',
@@ -171,6 +170,10 @@ export default function EditSiteEditor( { isLoading } ) {
 		[ history, createSuccessNotice ]
 	);
 
+	// Replace the title and icon displayed in the DocumentBar when there's an overlay visible.
+	const { title, icon } =
+		getEditorCanvasContainerTitleAndIcon( editorCanvasView );
+
 	const isReady = ! isLoading;
 
 	return (
@@ -197,11 +200,8 @@ export default function EditSiteEditor( { isLoading } ) {
 						_isPreviewingTheme && <SaveButton size="compact" />
 					}
 					forceDisableBlockTools={ ! hasDefaultEditorCanvasView }
-					title={
-						! hasDefaultEditorCanvasView
-							? getEditorCanvasContainerTitle( editorCanvasView )
-							: undefined
-					}
+					title={ title }
+					icon={ icon }
 					iframeProps={ iframeProps }
 					onActionPerformed={ onActionPerformed }
 					extraSidebarPanels={

packages/edit-site/src/hooks/commands/use-set-command-context.js

@@ -10,6 +10,7 @@ import { store as blockEditorStore } from '@wordpress/block-editor';
  */
 import { store as editSiteStore } from '../../store';
 import { unlock } from '../../lock-unlock';
+import { useHasEditorCanvasContainer } from '../../components/editor-canvas-container';
 
 const { useCommandContext } = unlock( commandsPrivateApis );
 
@@ -25,6 +26,9 @@ export default function useSetCommandContext() {
 			hasBlockSelected: getBlockSelectionStart(),
 		};
 	}, [] );
+
+	const hasEditorCanvasContainer = useHasEditorCanvasContainer();
+
 	// Sets the right context for the command palette
 	let commandContext = 'site-editor';
 	if ( canvasMode === 'edit' ) {
@@ -33,5 +37,13 @@ export default function useSetCommandContext() {
 	if ( hasBlockSelected ) {
 		commandContext = 'block-selection-edit';
 	}
+	if ( hasEditorCanvasContainer ) {
+		/*
+		 * The editor canvas overlay will likely be deprecated in the future, so for now we clear the command context
+		 * to remove the suggested commands that may not make sense with Style Book or Style Revisions open.
+		 * See https://github.com/WordPress/gutenberg/issues/62216.
+		 */
+		commandContext = '';
+	}
 	useCommandContext( commandContext );
 }

packages/editor/README.md

@@ -262,6 +262,12 @@ _Usage_
 <DocumentBar />
 ```
 
+_Parameters_
+
+-   _props_ `Object`: The component props.
+-   _props.title_ `string`: A title for the document, defaulting to the document or template title currently being edited.
+-   _props.icon_ `import("@wordpress/components").IconType`: An icon for the document, defaulting to an icon for document or template currently being edited.
+
 _Returns_
 
 -   `JSX.Element`: The rendered DocumentBar component.

packages/editor/src/components/document-bar/index.js

@@ -52,10 +52,15 @@ const MotionButton = motion( Button );
  * ```jsx
  * <DocumentBar />
  * ```
+ * @param {Object}                                   props       The component props.
+ * @param {string}                                   props.title A title for the document, defaulting to the document or
+ *                                                               template title currently being edited.
+ * @param {import("@wordpress/components").IconType} props.icon  An icon for the document, defaulting to an icon for document
+ *                                                               or template currently being edited.
  *
  * @return {JSX.Element} The rendered DocumentBar component.
  */
-export default function DocumentBar() {
+export default function DocumentBar( props ) {
 	const {
 		postType,
 		documentTitle,
@@ -111,7 +116,9 @@ export default function DocumentBar() {
 	const isTemplate = TEMPLATE_POST_TYPES.includes( postType );
 	const isGlobalEntity = GLOBAL_POST_TYPES.includes( postType );
 	const hasBackButton = !! onNavigateToPreviousEntityRecord;
-	const title = isTemplate ? templateTitle : documentTitle;
+	const entityTitle = isTemplate ? templateTitle : documentTitle;
+	const title = props.title || entityTitle;
+	const icon = props.icon || templateIcon;
 
 	const mounted = useRef( false );
 	useEffect( () => {
@@ -180,12 +187,12 @@ export default function DocumentBar() {
 							isReducedMotion ? { duration: 0 } : undefined
 						}
 					>
-						<BlockIcon icon={ templateIcon } />
+						<BlockIcon icon={ icon } />
 						<Text
 							size="body"
 							as="h1"
 							aria-label={
-								TYPE_LABELS[ postType ]
+								! props.title && TYPE_LABELS[ postType ]
 									? // eslint-disable-next-line @wordpress/valid-sprintf
 									  sprintf( TYPE_LABELS[ postType ], title )
 									: undefined

packages/editor/src/components/editor-interface/index.js

@@ -57,6 +57,7 @@ export default function EditorInterface( {
 	customSaveButton,
 	forceDisableBlockTools,
 	title,
+	icon,
 	iframeProps,
 } ) {
 	const {
@@ -140,6 +141,7 @@ export default function EditorInterface( {
 						customSaveButton={ customSaveButton }
 						forceDisableBlockTools={ forceDisableBlockTools }
 						title={ title }
+						icon={ icon }
 					/>
 				)
 			}

packages/editor/src/components/header/index.js

@@ -51,6 +51,7 @@ function Header( {
 	forceDisableBlockTools,
 	setEntitiesSavedStatesCallback,
 	title,
+	icon,
 } ) {
 	const isWideViewport = useViewportMatch( 'large' );
 	const isLargeViewport = useViewportMatch( 'medium' );
@@ -116,7 +117,7 @@ function Header( {
 							! isBlockToolsCollapsed && hasTopToolbar,
 					} ) }
 				>
-					{ ! title ? <DocumentBar /> : title }
+					<DocumentBar title={ title } icon={ icon } />
 				</div>
 			</motion.div>
 			<motion.div

test/e2e/specs/site-editor/style-book.spec.js

@@ -176,6 +176,21 @@ test.describe( 'Style Book', () => {
 			'style book should be visible'
 		).toBeVisible();
 	} );
+
+	test( 'should allow opening the command menu from the header when open', async ( {
+		page,
+	} ) => {
+		// Open the command menu from the header.
+		await page
+			.getByRole( 'heading', {
+				name: 'Style Book',
+			} )
+			.click();
+
+		await expect(
+			page.getByLabel( 'Search commands and settings' )
+		).toBeVisible();
+	} );
 } );
 
 class StyleBook {

test/e2e/specs/site-editor/user-global-styles-revisions.spec.js

@@ -155,11 +155,14 @@ test.describe( 'Style Revisions', () => {
 	} ) => {
 		await editor.canvas.locator( 'body' ).click();
 		await userGlobalStylesRevisions.openStylesPanel();
+		// Search for exact names to avoid selecting the command bar button in the header.
 		const revisionsButton = page.getByRole( 'button', {
 			name: 'Revisions',
+			exact: true,
 		} );
 		const styleBookButton = page.getByRole( 'button', {
 			name: 'Style Book',
+			exact: true,
 		} );
 		await revisionsButton.click();
 		// We can see the Revisions list.
@@ -224,6 +227,32 @@ test.describe( 'Style Revisions', () => {
 		).toBeVisible();
 	} );
 
+	test( 'should allow opening the command menu from the header when open', async ( {
+		page,
+		editor,
+		userGlobalStylesRevisions,
+	} ) => {
+		await editor.canvas.locator( 'body' ).click();
+		await userGlobalStylesRevisions.openStylesPanel();
+		await page
+			.getByRole( 'button', {
+				name: 'Revisions',
+				exact: true,
+			} )
+			.click();
+
+		// Open the command menu from the header.
+		await page
+			.getByRole( 'heading', {
+				name: 'Style Revisions',
+			} )
+			.click();
+
+		await expect(
+			page.getByLabel( 'Search commands and settings' )
+		).toBeVisible();
+	} );
+
 	test( 'should paginate', async ( {
 		page,
 		editor,