From 8eb3fa0bdd96e7e2361ccba545d5938dbc57714d Mon Sep 17 00:00:00 2001 From: Andrei Draganescu Date: Tue, 20 Dec 2022 13:06:37 +0000 Subject: [PATCH 1/4] add a custom menu via context to off cavas editor blocks --- .../src/components/off-canvas-editor/block.js | 88 ++++++------------- .../src/components/off-canvas-editor/index.js | 14 ++- .../edit/menu-inspector-controls.js | 74 +++++++++++++++- 3 files changed, 113 insertions(+), 63 deletions(-) diff --git a/packages/block-editor/src/components/off-canvas-editor/block.js b/packages/block-editor/src/components/off-canvas-editor/block.js index a3861ef847274..f6544aaee5cec 100644 --- a/packages/block-editor/src/components/off-canvas-editor/block.js +++ b/packages/block-editor/src/components/off-canvas-editor/block.js @@ -6,11 +6,10 @@ import classnames from 'classnames'; /** * WordPress dependencies */ -import { createBlock, hasBlockSupport } from '@wordpress/blocks'; +import { hasBlockSupport } from '@wordpress/blocks'; import { __experimentalTreeGridCell as TreeGridCell, __experimentalTreeGridItem as TreeGridItem, - MenuItem, } from '@wordpress/components'; import { useInstanceId } from '@wordpress/compose'; import { moreVertical } from '@wordpress/icons'; @@ -86,8 +85,7 @@ function ListViewBlock( { ( isSelected && selectedClientIds[ selectedClientIds.length - 1 ] === clientId ); - const { insertBlock, replaceBlock, toggleBlockHighlight } = - useDispatch( blockEditorStore ); + const { toggleBlockHighlight } = useDispatch( blockEditorStore ); const blockInformation = useBlockDisplayInformation( clientId ); const block = useSelect( @@ -128,7 +126,8 @@ function ListViewBlock( { [ selectBlock ] ); - const { isTreeGridMounted, expand, collapse } = useListViewContext(); + const { isTreeGridMounted, expand, collapse, LeafMoreMenu } = + useListViewContext(); const toggleExpanded = useCallback( ( event ) => { @@ -237,6 +236,10 @@ function ListViewBlock( { ? selectedClientIds : [ clientId ]; + const BlockSettingsDropdownComponent = LeafMoreMenu + ? LeafMoreMenu + : BlockSettingsDropdown; + return ( { ( { ref, tabIndex, onFocus } ) => ( - - { ( { onClose } ) => ( - { - const newLink = createBlock( - 'core/navigation-link' - ); - if ( - block.name === - 'core/navigation-submenu' - ) { - const updateSelectionOnInsert = false; - insertBlock( - newLink, - block.innerBlocks.length, - clientId, - updateSelectionOnInsert - ); - } else { - // Convert to a submenu if the block currently isn't one. - const newSubmenu = createBlock( - 'core/navigation-submenu', - block.attributes, - block.innerBlocks - ? [ - ...block.innerBlocks, - newLink, - ] - : [ newLink ] - ); - replaceBlock( - clientId, - newSubmenu - ); - } - onClose(); - } } - > - { __( 'Add submenu item' ) } - - ) } - + <> + + ) } diff --git a/packages/block-editor/src/components/off-canvas-editor/index.js b/packages/block-editor/src/components/off-canvas-editor/index.js index 2642d6605baac..9cf3c59f8b632 100644 --- a/packages/block-editor/src/components/off-canvas-editor/index.js +++ b/packages/block-editor/src/components/off-canvas-editor/index.js @@ -60,7 +60,8 @@ export const BLOCK_LIST_ITEM_HEIGHT = 36; * @param {Array} props.blocks Custom subset of block client IDs to be used instead of the default hierarchy. * @param {boolean} props.showBlockMovers Flag to enable block movers * @param {boolean} props.isExpanded Flag to determine whether nested levels are expanded by default. - * @param {boolean} props.selectBlockInCanvas Flag to determine whether the list view should be a block selection mechanism,. + * @param {boolean} props.selectBlockInCanvas Flag to determine whether the list view should be a block selection mechanism. + * @param {Object} props.LeafMoreMenu Optional more menu substitution. * @param {Object} ref Forwarded ref */ function __ExperimentalOffCanvasEditor( @@ -70,6 +71,7 @@ function __ExperimentalOffCanvasEditor( showBlockMovers = false, isExpanded = false, selectBlockInCanvas = true, + LeafMoreMenu, }, ref ) { @@ -188,8 +190,16 @@ function __ExperimentalOffCanvasEditor( expandedState, expand, collapse, + LeafMoreMenu, } ), - [ isMounted.current, draggedClientIds, expandedState, expand, collapse ] + [ + isMounted.current, + draggedClientIds, + expandedState, + expand, + collapse, + LeafMoreMenu, + ] ); return ( diff --git a/packages/block-library/src/navigation/edit/menu-inspector-controls.js b/packages/block-library/src/navigation/edit/menu-inspector-controls.js index d6eb607120c46..85ebc64768ac3 100644 --- a/packages/block-library/src/navigation/edit/menu-inspector-controls.js +++ b/packages/block-library/src/navigation/edit/menu-inspector-controls.js @@ -1,6 +1,7 @@ /** * WordPress dependencies */ +import { createBlock } from '@wordpress/blocks'; import { __experimentalOffCanvasEditor as OffCanvasEditor, InspectorControls, @@ -10,9 +11,13 @@ import { PanelBody, __experimentalHStack as HStack, __experimentalHeading as Heading, + DropdownMenu, + MenuItem, + MenuGroup, } from '@wordpress/components'; -import { useSelect } from '@wordpress/data'; +import { useSelect, useDispatch } from '@wordpress/data'; import { __ } from '@wordpress/i18n'; +import { moreVertical } from '@wordpress/icons'; /** * Internal dependencies @@ -20,6 +25,72 @@ import { __ } from '@wordpress/i18n'; import ManageMenusButton from './manage-menus-button'; import NavigationMenuSelector from './navigation-menu-selector'; +const POPOVER_PROPS = { + className: 'block-editor-block-settings-menu__popover', + position: 'bottom right', + variant: 'toolbar', +}; + +const LeafMoreMenu = ( props ) => { + const { clientId, block } = props; + + const { insertBlock, replaceBlock, removeBlocks } = + useDispatch( blockEditorStore ); + + return ( + + { ( { onClose } ) => ( + + { + const newLink = createBlock( + 'core/navigation-link' + ); + if ( block.name === 'core/navigation-submenu' ) { + const updateSelectionOnInsert = false; + insertBlock( + newLink, + block.innerBlocks.length, + clientId, + updateSelectionOnInsert + ); + } else { + // Convert to a submenu if the block currently isn't one. + const newSubmenu = createBlock( + 'core/navigation-submenu', + block.attributes, + block.innerBlocks + ? [ ...block.innerBlocks, newLink ] + : [ newLink ] + ); + replaceBlock( clientId, newSubmenu ); + } + onClose(); + } } + > + { __( 'Add submenu item' ) } + + { + removeBlocks( [ clientId ], false ); + onClose(); + } } + > + { __( 'Remove item' ) } + + + ) } + + ); +}; + const MenuInspectorControls = ( { clientId, createNavigationMenuIsSuccess, @@ -88,6 +159,7 @@ const MenuInspectorControls = ( { blocks={ clientIdsTree } isExpanded={ true } selectBlockInCanvas={ false } + LeafMoreMenu={ LeafMoreMenu } /> ) } From d585e7387f5d376551024d52336592b5499e8a07 Mon Sep 17 00:00:00 2001 From: Andrei Draganescu Date: Wed, 21 Dec 2022 13:05:55 +0000 Subject: [PATCH 2/4] moves the navigation item menu to a standalone file --- .../edit/menu-inspector-controls.js | 74 +----------------- .../src/navigation/leaf-more-menu.js | 75 +++++++++++++++++++ 2 files changed, 77 insertions(+), 72 deletions(-) create mode 100644 packages/block-library/src/navigation/leaf-more-menu.js diff --git a/packages/block-library/src/navigation/edit/menu-inspector-controls.js b/packages/block-library/src/navigation/edit/menu-inspector-controls.js index 85ebc64768ac3..72d011f3a4e75 100644 --- a/packages/block-library/src/navigation/edit/menu-inspector-controls.js +++ b/packages/block-library/src/navigation/edit/menu-inspector-controls.js @@ -1,7 +1,6 @@ /** * WordPress dependencies */ -import { createBlock } from '@wordpress/blocks'; import { __experimentalOffCanvasEditor as OffCanvasEditor, InspectorControls, @@ -11,85 +10,16 @@ import { PanelBody, __experimentalHStack as HStack, __experimentalHeading as Heading, - DropdownMenu, - MenuItem, - MenuGroup, } from '@wordpress/components'; -import { useSelect, useDispatch } from '@wordpress/data'; +import { useSelect } from '@wordpress/data'; import { __ } from '@wordpress/i18n'; -import { moreVertical } from '@wordpress/icons'; /** * Internal dependencies */ import ManageMenusButton from './manage-menus-button'; import NavigationMenuSelector from './navigation-menu-selector'; - -const POPOVER_PROPS = { - className: 'block-editor-block-settings-menu__popover', - position: 'bottom right', - variant: 'toolbar', -}; - -const LeafMoreMenu = ( props ) => { - const { clientId, block } = props; - - const { insertBlock, replaceBlock, removeBlocks } = - useDispatch( blockEditorStore ); - - return ( - - { ( { onClose } ) => ( - - { - const newLink = createBlock( - 'core/navigation-link' - ); - if ( block.name === 'core/navigation-submenu' ) { - const updateSelectionOnInsert = false; - insertBlock( - newLink, - block.innerBlocks.length, - clientId, - updateSelectionOnInsert - ); - } else { - // Convert to a submenu if the block currently isn't one. - const newSubmenu = createBlock( - 'core/navigation-submenu', - block.attributes, - block.innerBlocks - ? [ ...block.innerBlocks, newLink ] - : [ newLink ] - ); - replaceBlock( clientId, newSubmenu ); - } - onClose(); - } } - > - { __( 'Add submenu item' ) } - - { - removeBlocks( [ clientId ], false ); - onClose(); - } } - > - { __( 'Remove item' ) } - - - ) } - - ); -}; +import { LeafMoreMenu } from '../leaf-more-menu'; const MenuInspectorControls = ( { clientId, diff --git a/packages/block-library/src/navigation/leaf-more-menu.js b/packages/block-library/src/navigation/leaf-more-menu.js new file mode 100644 index 0000000000000..714e8b3bd9d6e --- /dev/null +++ b/packages/block-library/src/navigation/leaf-more-menu.js @@ -0,0 +1,75 @@ +/** + * WordPress dependencies + */ +import { createBlock } from '@wordpress/blocks'; +import { moreVertical } from '@wordpress/icons'; +import { DropdownMenu, MenuItem, MenuGroup } from '@wordpress/components'; +import { useDispatch } from '@wordpress/data'; +import { store as blockEditorStore } from '@wordpress/block-editor'; +import { __ } from '@wordpress/i18n'; + +const POPOVER_PROPS = { + className: 'block-editor-block-settings-menu__popover', + position: 'bottom right', + variant: 'toolbar', +}; + +export const LeafMoreMenu = ( props ) => { + const { clientId, block } = props; + + const { insertBlock, replaceBlock, removeBlocks } = + useDispatch( blockEditorStore ); + + return ( + + { ( { onClose } ) => ( + + { + const newLink = createBlock( + 'core/navigation-link' + ); + if ( block.name === 'core/navigation-submenu' ) { + const updateSelectionOnInsert = false; + insertBlock( + newLink, + block.innerBlocks.length, + clientId, + updateSelectionOnInsert + ); + } else { + // Convert to a submenu if the block currently isn't one. + const newSubmenu = createBlock( + 'core/navigation-submenu', + block.attributes, + block.innerBlocks + ? [ ...block.innerBlocks, newLink ] + : [ newLink ] + ); + replaceBlock( clientId, newSubmenu ); + } + onClose(); + } } + > + { __( 'Add submenu item' ) } + + { + removeBlocks( [ clientId ], false ); + onClose(); + } } + > + { __( 'Remove item' ) } + + + ) } + + ); +}; From 657aa12af71f8d629a3c3fb95aba0ea2572d7099 Mon Sep 17 00:00:00 2001 From: Andrei Draganescu Date: Wed, 21 Dec 2022 13:41:01 +0000 Subject: [PATCH 3/4] renames menu component variable --- .../block-editor/src/components/off-canvas-editor/block.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/block-editor/src/components/off-canvas-editor/block.js b/packages/block-editor/src/components/off-canvas-editor/block.js index f6544aaee5cec..0d70a75376ca9 100644 --- a/packages/block-editor/src/components/off-canvas-editor/block.js +++ b/packages/block-editor/src/components/off-canvas-editor/block.js @@ -236,7 +236,7 @@ function ListViewBlock( { ? selectedClientIds : [ clientId ]; - const BlockSettingsDropdownComponent = LeafMoreMenu + const MoreMenuComponent = LeafMoreMenu ? LeafMoreMenu : BlockSettingsDropdown; @@ -356,7 +356,7 @@ function ListViewBlock( { > { ( { ref, tabIndex, onFocus } ) => ( <> - Date: Wed, 21 Dec 2022 14:34:50 +0000 Subject: [PATCH 4/4] add block name or content to the remove menu item's label --- .../block-library/src/navigation/leaf-more-menu.js | 12 +++++++++--- 1 file changed, 9 insertions(+), 3 deletions(-) diff --git a/packages/block-library/src/navigation/leaf-more-menu.js b/packages/block-library/src/navigation/leaf-more-menu.js index 714e8b3bd9d6e..3700137e8e66b 100644 --- a/packages/block-library/src/navigation/leaf-more-menu.js +++ b/packages/block-library/src/navigation/leaf-more-menu.js @@ -5,8 +5,8 @@ import { createBlock } from '@wordpress/blocks'; import { moreVertical } from '@wordpress/icons'; import { DropdownMenu, MenuItem, MenuGroup } from '@wordpress/components'; import { useDispatch } from '@wordpress/data'; -import { store as blockEditorStore } from '@wordpress/block-editor'; -import { __ } from '@wordpress/i18n'; +import { store as blockEditorStore, BlockTitle } from '@wordpress/block-editor'; +import { __, sprintf } from '@wordpress/i18n'; const POPOVER_PROPS = { className: 'block-editor-block-settings-menu__popover', @@ -20,6 +20,12 @@ export const LeafMoreMenu = ( props ) => { const { insertBlock, replaceBlock, removeBlocks } = useDispatch( blockEditorStore ); + const label = sprintf( + /* translators: %s: block name */ + __( 'Remove %s' ), + BlockTitle( { clientId, maximumLength: 25 } ) + ); + return ( { onClose(); } } > - { __( 'Remove item' ) } + { label } ) }