Skip to content

Commit

Permalink
Block Editor: Refactor BlockSettingsMenu as DropdownMenu
Browse files Browse the repository at this point in the history
  • Loading branch information
@aduth
aduth committed Apr 5, 2019
1 parent 743e4da commit ea82658
Show file tree
Hide file tree
Showing 3 changed files with 79 additions and 105 deletions.
167 changes: 73 additions & 94 deletions packages/block-editor/src/components/block-settings-menu/index.js
View file
Original file line number Diff line number Diff line change
@@ -1,16 +1,19 @@
/**
* External dependencies
*/
import classnames from 'classnames';
import { castArray } from 'lodash';

/**
* WordPress dependencies
*/
import { __ } from '@wordpress/i18n';
import { Fragment } from '@wordpress/element';
import { Toolbar, Dropdown, NavigableMenu, MenuItem } from '@wordpress/components';
import { withDispatch } from '@wordpress/data';
import {
Toolbar,
DropdownMenu,
DropdownMenuSeparator,
MenuItem,
} from '@wordpress/components';

/**
* Internal dependencies
Expand All @@ -23,113 +26,89 @@ import BlockUnknownConvertButton from './block-unknown-convert-button';
import __experimentalBlockSettingsMenuFirstItem from './block-settings-menu-first-item';
import __experimentalBlockSettingsMenuPluginsExtension from './block-settings-menu-plugins-extension';

export function BlockSettingsMenu( { clientIds, onSelect } ) {
export function BlockSettingsMenu( { clientIds } ) {
const blockClientIds = castArray( clientIds );
const count = blockClientIds.length;
const firstBlockClientId = blockClientIds[ 0 ];

return (
<BlockActions clientIds={ clientIds }>
{ ( { onDuplicate, onRemove, onInsertAfter, onInsertBefore, canDuplicate, isLocked } ) => (
<Dropdown
contentClassName="editor-block-settings-menu__popover block-editor-block-settings-menu__popover"
position="bottom right"
renderToggle={ ( { onToggle, isOpen } ) => {
const toggleClassname = classnames( 'editor-block-settings-menu__toggle block-editor-block-settings-menu__toggle', {
'is-opened': isOpen,
} );
const label = isOpen ? __( 'Hide options' ) : __( 'More options' );

return (
<Toolbar controls={ [ {
icon: 'ellipsis',
title: label,
onClick: () => {
if ( count === 1 ) {
onSelect( firstBlockClientId );
}
onToggle();
},
className: toggleClassname,
extraProps: { 'aria-expanded': isOpen },
} ] } />
);
} }
renderContent={ ( { onClose } ) => (
<NavigableMenu className="editor-block-settings-menu__content block-editor-block-settings-menu__content">
<__experimentalBlockSettingsMenuFirstItem.Slot fillProps={ { onClose } } />
{ count === 1 && (
<BlockUnknownConvertButton
clientId={ firstBlockClientId }
/>
) }
{ count === 1 && (
<BlockHTMLConvertButton
clientId={ firstBlockClientId }
<Toolbar>
<DropdownMenu
icon="ellipsis"
label={ __( 'Block options' ) }
position="bottom right"
className="block-editor-block-settings-menu"
>
{ ( { onClose } ) => (
<Fragment>
<__experimentalBlockSettingsMenuFirstItem.Slot
fillProps={ { onClose } }
/>
) }
{ ! isLocked && canDuplicate && (
<MenuItem
className="editor-block-settings-menu__control block-editor-block-settings-menu__control"
onClick={ onDuplicate }
icon="admin-page"
shortcut={ shortcuts.duplicate.display }
>
{ __( 'Duplicate' ) }
</MenuItem>
) }
{ ! isLocked && (
<Fragment>
{ count === 1 && (
<BlockUnknownConvertButton
clientId={ firstBlockClientId }
/>
) }
{ count === 1 && (
<BlockHTMLConvertButton
clientId={ firstBlockClientId }
/>
) }
{ ! isLocked && canDuplicate && (
<MenuItem
className="editor-block-settings-menu__control block-editor-block-settings-menu__control"
onClick={ onInsertBefore }
icon="insert-before"
shortcut={ shortcuts.insertBefore.display }
onClick={ onDuplicate }
icon="admin-page"
shortcut={ shortcuts.duplicate.display }
>
{ __( 'Insert Before' ) }
{ __( 'Duplicate' ) }
</MenuItem>
) }
{ ! isLocked && (
<Fragment>
<MenuItem
onClick={ onInsertBefore }
icon="insert-before"
shortcut={ shortcuts.insertBefore.display }
>
{ __( 'Insert Before' ) }
</MenuItem>
<MenuItem
onClick={ onInsertAfter }
icon="insert-after"
shortcut={ shortcuts.insertAfter.display }
>
{ __( 'Insert After' ) }
</MenuItem>
</Fragment>
) }
{ count === 1 && (
<BlockModeToggle
clientId={ firstBlockClientId }
onToggle={ onClose }
/>
) }
<__experimentalBlockSettingsMenuPluginsExtension.Slot
fillProps={ { clientIds, onClose } }
/>
<DropdownMenuSeparator />
{ ! isLocked && (
<MenuItem
className="editor-block-settings-menu__control block-editor-block-settings-menu__control"
onClick={ onInsertAfter }
icon="insert-after"
shortcut={ shortcuts.insertAfter.display }
onClick={ onRemove }
icon="trash"
shortcut={ shortcuts.removeBlock.display }
>
{ __( 'Insert After' ) }
{ __( 'Remove Block' ) }
</MenuItem>
</Fragment>
) }
{ count === 1 && (
<BlockModeToggle
clientId={ firstBlockClientId }
onToggle={ onClose }
/>
) }
<__experimentalBlockSettingsMenuPluginsExtension.Slot fillProps={ { clientIds, onClose } } />
<div className="editor-block-settings-menu__separator block-editor-block-settings-menu__separator" />
{ ! isLocked && (
<MenuItem
className="editor-block-settings-menu__control block-editor-block-settings-menu__control"
onClick={ onRemove }
icon="trash"
shortcut={ shortcuts.removeBlock.display }
>
{ __( 'Remove Block' ) }
</MenuItem>
) }
</NavigableMenu>
) }
/>
) }
</Fragment>
) }
</DropdownMenu>
</Toolbar>
) }
</BlockActions>
);
}

export default withDispatch( ( dispatch ) => {
const { selectBlock } = dispatch( 'core/block-editor' );

return {
onSelect( clientId ) {
selectBlock( clientId );
},
};
} )( BlockSettingsMenu );
export default BlockSettingsMenu;
8 changes: 3 additions & 5 deletions packages/block-editor/src/components/block-settings-menu/style.scss
View file
Original file line number Diff line number Diff line change
@@ -1,13 +1,11 @@
.block-editor-block-settings-menu__toggle .dashicon {
.block-editor-block-settings-menu .components-dropdown-menu__toggle .dashicon {
transform: rotate(90deg);
}

.block-editor-block-settings-menu .components-icon-button.has-text svg {
margin-right: 0;
}

.dashicon {
margin-right: 5px;
}
}
.block-editor-block-settings-menu .components-dropdown-menu__indicator {
display: none;
}
9 changes: 3 additions & 6 deletions packages/components/src/menu-item/style.scss
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
.components-menu-item__button,
.components-menu-item__button.components-icon-button {
@include menu-style__neutral;
width: 100%;
padding: $grid-size ($grid-size-large - $border-width);
text-align: left;
Expand All @@ -9,7 +10,7 @@
.dashicon,
.components-menu-items__item-icon,
> span > svg {
margin-right: 4px;
margin-right: 5px;
}

.components-menu-items__item-icon {
Expand All @@ -18,12 +19,8 @@
}

&:hover:not(:disabled):not([aria-disabled="true"]) {
@include menu-style__hover;
color: $dark-gray-500;
// Disable hover style on mobile to prevent odd scroll behaviour.
// See: https://github.com/WordPress/gutenberg/pull/10333
@include break-medium() {
@include menu-style__hover;
}

.components-menu-item__shortcut {
opacity: 1;
Expand Down

0 comments on commit ea82658

Please sign in to comment.