Make Write mode and Zoom out block options menus consistent (#67749)

* hide block settings slot in content only and zoom out, allow copy in content only * adds tests for counting the length of the options menu * remove duplicate condition, zoom out makes sections content only Co-authored-by: draganescu <andraganescu@git.wordpress.org> Co-authored-by: talldan <talldanwp@git.wordpress.org> Co-authored-by: rinkalpagdar <rinkalpagdar@git.wordpress.org> Co-authored-by: richtabor <richtabor@git.wordpress.org>
WordPress · Dec 12, 2024 · f1f5988 · f1f5988
1 parent e283f73
commit f1f5988
Show file tree

Hide file tree

Showing 4 changed files with 64 additions and 36 deletions.
diff --git a/packages/block-editor/src/components/block-settings-menu/block-settings-dropdown.js b/packages/block-editor/src/components/block-settings-menu/block-settings-dropdown.js
@@ -65,7 +65,6 @@ export function BlockSettingsDropdown( {
 		selectedBlockClientIds,
 		openedBlockSettingsMenu,
 		isContentOnly,
-		isZoomOut,
 	} = useSelect(
 		( select ) => {
 			const {
@@ -76,7 +75,6 @@ export function BlockSettingsDropdown( {
 				getBlockAttributes,
 				getOpenedBlockSettingsMenu,
 				getBlockEditingMode,
-				isZoomOut: _isZoomOut,
 			} = unlock( select( blockEditorStore ) );
 
 			const { getActiveBlockVariation } = select( blocksStore );
@@ -101,7 +99,6 @@ export function BlockSettingsDropdown( {
 				openedBlockSettingsMenu: getOpenedBlockSettingsMenu(),
 				isContentOnly:
 					getBlockEditingMode( firstBlockClientId ) === 'contentOnly',
-				isZoomOut: _isZoomOut(),
 			};
 		},
 		[ firstBlockClientId ]
@@ -253,15 +250,13 @@ export function BlockSettingsDropdown( {
 											clientId={ firstBlockClientId }
 										/>
 									) }
-									{ ( ! isContentOnly || isZoomOut ) && (
-										<CopyMenuItem
-											clientIds={ clientIds }
-											onCopy={ onCopy }
-											shortcut={ displayShortcut.primary(
-												'c'
-											) }
-										/>
-									) }
+									<CopyMenuItem
+										clientIds={ clientIds }
+										onCopy={ onCopy }
+										shortcut={ displayShortcut.primary(
+											'c'
+										) }
+									/>
 									{ canDuplicate && (
 										<MenuItem
 											onClick={ pipe(
@@ -316,14 +311,16 @@ export function BlockSettingsDropdown( {
 										</MenuItem>
 									</MenuGroup>
 								) }
-								<BlockSettingsMenuControls.Slot
-									fillProps={ {
-										onClose,
-										count,
-										firstBlockClientId,
-									} }
-									clientIds={ clientIds }
-								/>
+								{ ! isContentOnly && (
+									<BlockSettingsMenuControls.Slot
+										fillProps={ {
+											onClose,
+											count,
+											firstBlockClientId,
+										} }
+										clientIds={ clientIds }
+									/>
+								) }
 								{ typeof children === 'function'
 									? children( { onClose } )
 									: Children.map( ( child ) =>

diff --git a/packages/editor/src/components/provider/index.js b/packages/editor/src/components/provider/index.js
@@ -13,7 +13,6 @@ import {
 	BlockEditorProvider,
 	BlockContextProvider,
 	privateApis as blockEditorPrivateApis,
-	store as blockEditorStore,
 } from '@wordpress/block-editor';
 import { store as noticesStore } from '@wordpress/notices';
 import { privateApis as editPatternsPrivateApis } from '@wordpress/patterns';
@@ -207,14 +206,6 @@ export const ExperimentalEditorProvider = withRegistryProvider(
 			[ post.type ]
 		);
 
-		const isZoomOut = useSelect( ( select ) => {
-			const { isZoomOut: _isZoomOut } = unlock(
-				select( blockEditorStore )
-			);
-
-			return _isZoomOut();
-		} );
-
 		const shouldRenderTemplate = !! template && mode !== 'post-only';
 		const rootLevelPost = shouldRenderTemplate ? template : post;
 		const defaultBlockContext = useMemo( () => {
@@ -367,13 +358,9 @@ export const ExperimentalEditorProvider = withRegistryProvider(
 							{ children }
 							{ ! settings.isPreviewMode && (
 								<>
-									{ ! isZoomOut && (
-										<>
-											<PatternsMenuItems />
-											<TemplatePartMenuItems />
-											<ContentOnlySettingsMenu />
-										</>
-									) }
+									<PatternsMenuItems />
+									<TemplatePartMenuItems />
+									<ContentOnlySettingsMenu />
 									{ mode === 'template-locked' && (
 										<DisableNonPageContentBlocks />
 									) }

diff --git a/test/e2e/specs/editor/various/write-design-mode.spec.js b/test/e2e/specs/editor/various/write-design-mode.spec.js
@@ -100,6 +100,17 @@ test.describe( 'Write/Design mode', () => {
 
 		expect( await getSelectedBlock() ).toEqual( sectionClientId );
 
+		// open the block toolbar more settings menu
+		await page.getByLabel( 'Block tools' ).getByLabel( 'Options' ).click();
+
+		// get the length of the options menu
+		const optionsMenu = page
+			.getByRole( 'menu', { name: 'Options' } )
+			.getByRole( 'menuitem' );
+
+		// we expect 3 items in the options menu
+		await expect( optionsMenu ).toHaveCount( 3 );
+
 		// We should be able to select the paragraph block and write in it.
 		await paragraph.click();
 		await page.keyboard.type( ' something' );

diff --git a/test/e2e/specs/site-editor/zoom-out.spec.js b/test/e2e/specs/site-editor/zoom-out.spec.js
@@ -234,6 +234,39 @@ test.describe( 'Zoom Out', () => {
 		await expect( fourthSectionStart ).not.toBeInViewport();
 	} );
 
+	test( 'Zoom out selected section has three items in options menu', async ( {
+		page,
+	} ) => {
+		// open the inserter
+		await page
+			.getByRole( 'button', {
+				name: 'Block Inserter',
+				exact: true,
+			} )
+			.click();
+		// switch to patterns tab
+		await page.getByRole( 'tab', { name: 'Patterns' } ).click();
+		// search for a pattern
+		await page
+			.getByRole( 'searchbox', { name: 'Search' } )
+			.fill( 'Footer' );
+		// click on Footer with colophon, 3 columns
+		await page
+			.getByRole( 'option', { name: 'Footer with colophon, 3 columns' } )
+			.click();
+
+		// open the block toolbar more settings menu
+		await page.getByLabel( 'Block tools' ).getByLabel( 'Options' ).click();
+
+		// get the length of the options menu
+		const optionsMenu = page
+			.getByRole( 'menu', { name: 'Options' } )
+			.getByRole( 'menuitem' );
+
+		// we expect 3 items in the options menu
+		await expect( optionsMenu ).toHaveCount( 3 );
+	} );
+
 	test( 'Zoom Out cannot be activated when the section root is missing', async ( {
 		page,
 		editor,