Skip to content

Commit

Permalink
Make Write mode and Zoom out block options menus consistent (WordPres…
Browse files Browse the repository at this point in the history
…s#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>
  • Loading branch information
5 people authored and yogeshbhutkar committed Dec 18, 2024
1 parent 3c5d428 commit fce039f
Show file tree
Hide file tree
Showing 4 changed files with 64 additions and 36 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -65,7 +65,6 @@ export function BlockSettingsDropdown( {
selectedBlockClientIds,
openedBlockSettingsMenu,
isContentOnly,
isZoomOut,
} = useSelect(
( select ) => {
const {
Expand All @@ -76,7 +75,6 @@ export function BlockSettingsDropdown( {
getBlockAttributes,
getOpenedBlockSettingsMenu,
getBlockEditingMode,
isZoomOut: _isZoomOut,
} = unlock( select( blockEditorStore ) );

const { getActiveBlockVariation } = select( blocksStore );
Expand All @@ -101,7 +99,6 @@ export function BlockSettingsDropdown( {
openedBlockSettingsMenu: getOpenedBlockSettingsMenu(),
isContentOnly:
getBlockEditingMode( firstBlockClientId ) === 'contentOnly',
isZoomOut: _isZoomOut(),
};
},
[ firstBlockClientId ]
Expand Down Expand Up @@ -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(
Expand Down Expand Up @@ -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 ) =>
Expand Down
19 changes: 3 additions & 16 deletions packages/editor/src/components/provider/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -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( () => {
Expand Down Expand Up @@ -367,13 +358,9 @@ export const ExperimentalEditorProvider = withRegistryProvider(
{ children }
{ ! settings.isPreviewMode && (
<>
{ ! isZoomOut && (
<>
<PatternsMenuItems />
<TemplatePartMenuItems />
<ContentOnlySettingsMenu />
</>
) }
<PatternsMenuItems />
<TemplatePartMenuItems />
<ContentOnlySettingsMenu />
{ mode === 'template-locked' && (
<DisableNonPageContentBlocks />
) }
Expand Down
11 changes: 11 additions & 0 deletions test/e2e/specs/editor/various/write-design-mode.spec.js
Original file line number Diff line number Diff line change
Expand Up @@ -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' );
Expand Down
33 changes: 33 additions & 0 deletions test/e2e/specs/site-editor/zoom-out.spec.js
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down

0 comments on commit fce039f

Please sign in to comment.