Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Block Editor Settings: use v2 DropdownMenu #51400

Closed
wants to merge 35 commits into from
Closed

Block Editor Settings: use v2 DropdownMenu #51400

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
35 commits
Select commit Hold shift + click to select a range
e736ca8
Start using dropdownmenu v2 in block settings dropdown
ciampo Jun 12, 2023
6af23df
Add Shortcut component
ciampo Jun 12, 2023
bb71a23
Refactor block settings dropdown menu items to use dropdownmenu v2
ciampo Jun 12, 2023
d80301a
Add notes about duplicate implementations/classnames
ciampo Jun 12, 2023
53663cb
Convert more menu items to use the dropdownmenu v2 components
ciampo Jun 12, 2023
235a841
Convert menu items from the reusable-blocks package to use the dropdo…
ciampo Jun 12, 2023
b933e85
Add separator to BlockSettingsMenuControls
ciampo Jun 12, 2023
6f50219
Simplify Shortcut suffix component
ciampo Jun 12, 2023
d444e01
Refactor more menu items rendering inside `BlockSettingsMenuControls`
ciampo Jun 12, 2023
04220d4
Remove onKeyDown menu props (it doesn't seem to be needed?)
ciampo Jun 12, 2023
44a5cf3
Migrate from calling onClose to calling preventDefault() when needing…
ciampo Jun 12, 2023
dc78e0d
Fix broken copy/paste by using native clipboard APIs instead of exter…
ciampo Jun 13, 2023
6faf5fd
Remove unnecessary wrapper functions, unused imports, clean up code, …
ciampo Jun 13, 2023
d642c70
Add default z-index
ciampo Jun 13, 2023
e0075d5
Capture pointer events in modals
ciampo Jun 13, 2023
4a7a0ac
DropdownMenuV2: accept onKeyDown prop
ciampo Jun 13, 2023
40fd830
Restore onKeyDown ev listener on the block settings dropdown
ciampo Jun 13, 2023
a27962e
Add a few pointer-related props to DropdownMenuItemProps
ciampo Jun 13, 2023
e5a7b12
Destructure and properly allocate more props in Block settings menu
ciampo Jun 13, 2023
2c2ae3b
DropdownMenuItem cursor styles
ciampo Jun 13, 2023
f6c4937
Clean up classnames:
ciampo Jun 13, 2023
1141cab
Temp fix for e2e test
ciampo Jun 13, 2023
43204d2
Refactor block settings dropdown to controlled mode. This helps with:
ciampo Jun 14, 2023
0425a81
Support rendering anchor tags in DropdownMenuItem
ciampo Jun 14, 2023
e51fdcf
Remove done comment
ciampo Jun 14, 2023
7823fc2
Avoid unnecessary function
ciampo Jun 14, 2023
b4e7cc4
Set the correct value for aria-labelledby, update e2e tests
ciampo Jun 15, 2023
e6342a7
Fix unit test by wrapping the BlockModeToggle in dropdownmenu
ciampo Jun 15, 2023
5347105
Sync package-lock.json
ciampo Jun 15, 2023
d7dcf02
Cleanup code
ciampo Jun 15, 2023
3332023
Back compat styles for legacy menuitems
ciampo Jun 16, 2023
02a2e0a
Resize dropdown menu + show scrollbars when there's not enough space
ciampo Jun 16, 2023
1c5aef5
Forward ref on DropdownMenu component
ciampo Jun 16, 2023
b53783e
Allow specifying container on useCopyToClipboard hook
ciampo Jun 16, 2023
601a07e
Revert to using useCopyToCliboard hook
ciampo Jun 16, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

26 changes: 21 additions & 5 deletions packages/block-editor/src/components/block-lock/menu-item.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,14 +3,20 @@
*/
import { __ } from '@wordpress/i18n';
import { useReducer } from '@wordpress/element';
import { MenuItem } from '@wordpress/components';
import {
Icon,
privateApis as componentsPrivateApis,
} from '@wordpress/components';
import { lockOutline, unlock } from '@wordpress/icons';

/**
* Internal dependencies
*/
import useBlockLock from './use-block-lock';
import BlockLockModal from './modal';
import { unlock as unlockPrivateApis } from '../../lock-unlock';

const { DropdownMenuItemV2 } = unlockPrivateApis( componentsPrivateApis );

export default function BlockLockMenuItem( { clientId } ) {
const { canLock, isLocked } = useBlockLock( clientId );
Expand All @@ -28,12 +34,22 @@ export default function BlockLockMenuItem( { clientId } ) {

return (
<>
<MenuItem
icon={ isLocked ? unlock : lockOutline }
onClick={ toggleModal }
{ /* TODO: check if this used in other legacy dropdown menus */ }
<DropdownMenuItemV2
prefix={
<Icon
icon={ isLocked ? unlock : lockOutline }
size={ 24 }
/>
}
onSelect={ ( event ) => {
toggleModal();
// Keep the dropdown menu open
event.preventDefault();
} }
>
{ label }
</MenuItem>
</DropdownMenuItemV2>
{ isModalOpen && (
<BlockLockModal clientId={ clientId } onClose={ toggleModal } />
) }
Expand Down
6 changes: 4 additions & 2 deletions packages/block-editor/src/components/block-settings-menu-controls/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,12 +6,14 @@ Block Settings Menu Controls appear in the block settings dropdown menu when the

```jsx
import { BlockSettingsMenuControls } from '@wordress/block-editor';
import MyButton from './my-toggle-button';
import MyToggleButton from './my-toggle-button';

function ReusableBlocksMenuItems() {
return (
<BlockSettingsMenuControls>
{ ( { onClose } ) => <MyToggleButton onToggle={ onClose } /> }
{/* Is this a breaking change? */}
{/* Should this use a menu item example? */}
<MyToggleButton onToggle={ /* ... */ } />
</BlockSettingsMenuControls>
);
}
Expand Down
68 changes: 35 additions & 33 deletions packages/block-editor/src/components/block-settings-menu-controls/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,12 +3,10 @@
*/
import {
createSlotFill,
MenuGroup,
MenuItem,
__experimentalStyleProvider as StyleProvider,
privateApis as componentsPrivateApis,
} from '@wordpress/components';
import { useSelect } from '@wordpress/data';
import { pipe } from '@wordpress/compose';
import { __ } from '@wordpress/i18n';

/**
Expand All @@ -21,9 +19,13 @@ import {
import { BlockLockMenuItem, useBlockLock } from '../block-lock';
import { store as blockEditorStore } from '../../store';
import BlockModeToggle from '../block-settings-menu/block-mode-toggle';
import { unlock } from '../../lock-unlock';

const { Fill, Slot } = createSlotFill( 'BlockSettingsMenuControls' );

const { DropdownMenuGroupV2, DropdownMenuItemV2, DropdownMenuSeparatorV2 } =
unlock( componentsPrivateApis );

const BlockSettingsMenuControlsSlot = ( {
fillProps,
clientIds = null,
Expand Down Expand Up @@ -77,36 +79,36 @@ const BlockSettingsMenuControlsSlot = ( {
}

return (
<MenuGroup>
{ showConvertToGroupButton && (
<ConvertToGroupButton
{ ...convertToGroupButtonProps }
onClose={ fillProps?.onClose }
/>
) }
{ showLockButton && (
<BlockLockMenuItem
clientId={ selectedClientIds[ 0 ] }
/>
) }
{ fills }
{ fillProps?.canMove && ! fillProps?.onlyBlock && (
<MenuItem
onClick={ pipe(
fillProps?.onClose,
fillProps?.onMoveTo
) }
>
{ __( 'Move to' ) }
</MenuItem>
) }
{ fillProps?.count === 1 && (
<BlockModeToggle
clientId={ fillProps?.firstBlockClientId }
onToggle={ fillProps?.onClose }
/>
) }
</MenuGroup>
<>
{ /* TODO: check if this used in other legacy dropdown
menus */ }
<DropdownMenuSeparatorV2 />
<DropdownMenuGroupV2>
{ showConvertToGroupButton && (
<ConvertToGroupButton
{ ...convertToGroupButtonProps }
/>
) }
{ showLockButton && (
<BlockLockMenuItem
clientId={ selectedClientIds[ 0 ] }
/>
) }
{ fills }
{ fillProps?.canMove && ! fillProps?.onlyBlock && (
<DropdownMenuItemV2
onSelect={ fillProps?.onMoveTo }
>
{ __( 'Move to' ) }
</DropdownMenuItemV2>
) }
{ fillProps?.count === 1 && (
<BlockModeToggle
clientId={ fillProps?.firstBlockClientId }
/>
) }
</DropdownMenuGroupV2>
</>
);
} }
</Slot>
Expand Down
16 changes: 14 additions & 2 deletions packages/block-editor/src/components/block-settings-menu/block-convert-button.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,13 +2,25 @@
* WordPress dependencies
*/
import { __ } from '@wordpress/i18n';
import { MenuItem } from '@wordpress/components';
import { privateApis as componentsPrivateApis } from '@wordpress/components';

/**
* Internal dependencies
*/
import { unlock } from '../../lock-unlock';

const { DropdownMenuItemV2 } = unlock( componentsPrivateApis );

export default function BlockConvertButton( { shouldRender, onClick, small } ) {
if ( ! shouldRender ) {
return null;
}

const label = __( 'Convert to Blocks' );
return <MenuItem onClick={ onClick }>{ ! small && label }</MenuItem>;
return (
/* TODO: check if this used in other legacy dropdown menus */
<DropdownMenuItemV2 onSelect={ onClick }>
{ ! small && label }
</DropdownMenuItemV2>
);
}
13 changes: 11 additions & 2 deletions packages/block-editor/src/components/block-settings-menu/block-mode-toggle.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
* WordPress dependencies
*/
import { __ } from '@wordpress/i18n';
import { MenuItem } from '@wordpress/components';
import { privateApis as componentsPrivateApis } from '@wordpress/components';
import { getBlockType, hasBlockSupport } from '@wordpress/blocks';
import { withSelect, withDispatch } from '@wordpress/data';
import { compose } from '@wordpress/compose';
Expand All @@ -11,6 +11,9 @@ import { compose } from '@wordpress/compose';
* Internal dependencies
*/
import { store as blockEditorStore } from '../../store';
import { unlock } from '../../lock-unlock';

const { DropdownMenuItemV2 } = unlock( componentsPrivateApis );

const noop = () => {};

Expand All @@ -32,7 +35,13 @@ export function BlockModeToggle( {
const label =
mode === 'visual' ? __( 'Edit as HTML' ) : __( 'Edit visually' );

return <MenuItem onClick={ onToggleMode }>{ ! small && label }</MenuItem>;
return (
// TODO: check if this used in other legacy dropdown menus
<DropdownMenuItemV2 onSelect={ onToggleMode }>
{ /* TODO: what if `small` is true? What contents are displayed? */ }
{ ! small && label }
</DropdownMenuItemV2>
);
}

export default compose( [
Expand Down
Loading