From f1f59887a8aa3b6d3fa5f7163338fec7bee1b79b Mon Sep 17 00:00:00 2001 From: Andrei Draganescu Date: Thu, 12 Dec 2024 15:24:30 +0200 Subject: [PATCH] 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 Co-authored-by: talldan Co-authored-by: rinkalpagdar Co-authored-by: richtabor --- .../block-settings-dropdown.js | 37 +++++++++---------- .../editor/src/components/provider/index.js | 19 ++-------- .../editor/various/write-design-mode.spec.js | 11 ++++++ test/e2e/specs/site-editor/zoom-out.spec.js | 33 +++++++++++++++++ 4 files changed, 64 insertions(+), 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 index b9caee7c338beb..ade9ddd5ec1657 100644 --- 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 ) && ( - - ) } + { canDuplicate && ( ) } - + { ! isContentOnly && ( + + ) } { 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 index 68d7bd1d3f4f5b..4b8a3b6b23c251 100644 --- 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 && ( - <> - - - - - ) } + + + { mode === 'template-locked' && ( ) } diff --git a/test/e2e/specs/editor/various/write-design-mode.spec.js b/test/e2e/specs/editor/various/write-design-mode.spec.js index 2892b4aea89e91..fb3e231e6fff60 100644 --- 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 index 77d121e1999397..493b566671f8be 100644 --- 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,