Patterns: Disable the preview option button when editing (#53913)

* Don't show the preview options button when editing patterns * Refactor with FOCUSABLE_ENTITIES * Use disabled view icon * Use isEnabled prop * Also set 'disableOpenOnArrowDown' * Fix e2e test * Use `toBeDisabled` --------- Co-authored-by: George Mamadashvili <[email protected]>
WordPress · Aug 29, 2023 · 2db2dc0 · 2db2dc0 · github-actions · Aug 29, 2023
1 parent 4f6d1b3
commit 2db2dc0
Show file tree

Hide file tree

Showing 5 changed files with 39 additions and 36 deletions.
diff --git a/packages/block-editor/src/components/preview-options/index.js b/packages/block-editor/src/components/preview-options/index.js
@@ -33,6 +33,7 @@ export default function PreviewOptions( {
 	const toggleProps = {
 		className: 'block-editor-post-preview__button-toggle',
 		disabled: ! isEnabled,
+		__experimentalIsFocusable: ! isEnabled,
 		children: viewLabel,
 	};
 	const menuProps = {
@@ -53,6 +54,7 @@ export default function PreviewOptions( {
 			menuProps={ menuProps }
 			icon={ deviceIcons[ deviceType.toLowerCase() ] }
 			label={ label || __( 'Preview' ) }
+			disableOpenOnArrowDown={ ! isEnabled }
 		>
 			{ ( renderProps ) => (
 				<>

diff --git a/packages/edit-site/src/components/block-editor/site-editor-canvas.js b/packages/edit-site/src/components/block-editor/site-editor-canvas.js
@@ -27,7 +27,7 @@ import EditorCanvas from './editor-canvas';
 import EditorCanvasContainer from '../editor-canvas-container';
 import useSiteEditorSettings from './use-site-editor-settings';
 import { store as editSiteStore } from '../../store';
-import { FOCUSABLE_ENTITIES } from './constants';
+import { FOCUSABLE_ENTITIES } from '../../utils/constants';
 import { unlock } from '../../lock-unlock';
 import PageContentFocusManager from '../page-content-focus-manager';
 

diff --git a/packages/edit-site/src/components/header-edit-mode/index.js b/packages/edit-site/src/components/header-edit-mode/index.js
@@ -45,6 +45,7 @@ import {
 	useHasEditorCanvasContainer,
 } from '../editor-canvas-container';
 import { unlock } from '../../lock-unlock';
+import { FOCUSABLE_ENTITIES } from '../../utils/constants';
 
 const { useShouldContextualToolbarShow } = unlock( blockEditorPrivateApis );
 
@@ -156,8 +157,7 @@ export default function HeaderEditMode() {
 
 	const hasDefaultEditorCanvasView = ! useHasEditorCanvasContainer();
 
-	const isFocusMode =
-		templateType === 'wp_template_part' || templateType === 'wp_navigation';
+	const isFocusMode = FOCUSABLE_ENTITIES.includes( templateType );
 
 	/* translators: button label text should, if possible, be under 16 characters. */
 	const longLabel = _x(
@@ -313,39 +313,40 @@ export default function HeaderEditMode() {
 					variants={ toolbarVariants }
 					transition={ toolbarTransition }
 				>
-					{ ! isFocusMode && hasDefaultEditorCanvasView && (
-						<div
-							className={ classnames(
-								'edit-site-header-edit-mode__preview-options',
-								{ 'is-zoomed-out': isZoomedOutView }
-							) }
+					<div
+						className={ classnames(
+							'edit-site-header-edit-mode__preview-options',
+							{ 'is-zoomed-out': isZoomedOutView }
+						) }
+					>
+						<PreviewOptions
+							deviceType={ deviceType }
+							setDeviceType={ setPreviewDeviceType }
+							label={ __( 'View' ) }
+							isEnabled={
+								! isFocusMode && hasDefaultEditorCanvasView
+							}
 						>
-							<PreviewOptions
-								deviceType={ deviceType }
-								setDeviceType={ setPreviewDeviceType }
-								label={ __( 'View' ) }
-							>
-								{ ( { onClose } ) => (
-									<MenuGroup>
-										<MenuItem
-											href={ homeUrl }
-											target="_blank"
-											icon={ external }
-											onClick={ onClose }
-										>
-											{ __( 'View site' ) }
-											<VisuallyHidden as="span">
-												{
-													/* translators: accessibility text */
-													__( '(opens in a new tab)' )
-												}
-											</VisuallyHidden>
-										</MenuItem>
-									</MenuGroup>
-								) }
-							</PreviewOptions>
-						</div>
-					) }
+							{ ( { onClose } ) => (
+								<MenuGroup>
+									<MenuItem
+										href={ homeUrl }
+										target="_blank"
+										icon={ external }
+										onClick={ onClose }
+									>
+										{ __( 'View site' ) }
+										<VisuallyHidden as="span">
+											{
+												/* translators: accessibility text */
+												__( '(opens in a new tab)' )
+											}
+										</VisuallyHidden>
+									</MenuItem>
+								</MenuGroup>
+							) }
+						</PreviewOptions>
+					</div>
 					<SaveButton />
 					{ ! isDistractionFree && (
 						<PinnedItems.Slot scope="core/edit-site" />

diff --git a/.../src/components/block-editor/constants.js → packages/edit-site/src/utils/constants.js b/.../src/components/block-editor/constants.js → packages/edit-site/src/utils/constants.js
diff --git a/test/e2e/specs/site-editor/style-book.spec.js b/test/e2e/specs/site-editor/style-book.spec.js
@@ -42,7 +42,7 @@ test.describe( 'Style Book', () => {
 		).not.toBeVisible();
 		await expect(
 			page.locator( 'role=button[name="View"i]' )
-		).not.toBeVisible();
+		).toBeDisabled();
 	} );
 
 	test( 'should have tabs containing block examples', async ( { page } ) => {