From 1934fa7205f46996ccdbde0a908f1eec6cc65cf5 Mon Sep 17 00:00:00 2001 From: Jerry Jones Date: Tue, 9 May 2023 15:59:18 -0500 Subject: [PATCH 1/3] Move LeafMoreMenu into list-view so OffCanvasEditor can be eventually be deleted Move LeafMoreMenu to its own component Move Leaf More Menu to navigation block remove private API Add Leaf More Menu to the browse mode sidebar Add a note to show these files are duplicated --- .../src/components/list-view/block.js | 3 + .../src/components/off-canvas-editor/block.js | 4 +- packages/block-editor/src/private-apis.js | 2 - .../src/navigation/edit/leaf-more-menu.js | 164 ++++++++++++++++++ .../edit/menu-inspector-controls.js | 4 +- .../leaf-more-menu.js | 28 +-- .../navigation-menu-content.js | 4 +- 7 files changed, 192 insertions(+), 17 deletions(-) create mode 100644 packages/block-library/src/navigation/edit/leaf-more-menu.js rename packages/{block-editor/src/components/off-canvas-editor => edit-site/src/components/sidebar-navigation-screen-navigation-menus}/leaf-more-menu.js (85%) diff --git a/packages/block-editor/src/components/list-view/block.js b/packages/block-editor/src/components/list-view/block.js index 4b9ca17715179..1afde32cf1ec6 100644 --- a/packages/block-editor/src/components/list-view/block.js +++ b/packages/block-editor/src/components/list-view/block.js @@ -134,6 +134,7 @@ function ListViewBlock( { collapse, BlockSettingsMenu, listViewInstanceId, + expandedState, } = useListViewContext(); const hasSiblings = siblingBlockCount > 0; @@ -336,6 +337,8 @@ function ListViewBlock( { } } disableOpenOnArrowDown __experimentalSelectBlock={ updateSelection } + expand={ expand } + expandedState={ expandedState } /> ) } 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 aa47b9d8bebea..d5bc4e46c6ce9 100644 --- a/packages/block-editor/src/components/off-canvas-editor/block.js +++ b/packages/block-editor/src/components/off-canvas-editor/block.js @@ -124,7 +124,7 @@ function ListViewBlock( { [ selectBlock ] ); - const { isTreeGridMounted, expand, collapse, LeafMoreMenu } = + const { isTreeGridMounted, expand, expandedState, collapse, LeafMoreMenu } = useListViewContext(); const toggleExpanded = useCallback( @@ -334,6 +334,8 @@ function ListViewBlock( { __experimentalSelectBlock={ updateSelection } + expandedState={ expandedState } + expand={ expand } /> ) } diff --git a/packages/block-editor/src/private-apis.js b/packages/block-editor/src/private-apis.js index 0b7e8b2511aa6..a7357311eedbe 100644 --- a/packages/block-editor/src/private-apis.js +++ b/packages/block-editor/src/private-apis.js @@ -5,7 +5,6 @@ import * as globalStyles from './components/global-styles'; import { ExperimentalBlockEditorProvider } from './components/provider'; import { lock } from './lock-unlock'; import OffCanvasEditor from './components/off-canvas-editor'; -import LeafMoreMenu from './components/off-canvas-editor/leaf-more-menu'; import ResizableBoxPopover from './components/resizable-box-popover'; import { ComposedPrivateInserter as PrivateInserter } from './components/inserter'; import { PrivateListView } from './components/list-view'; @@ -20,7 +19,6 @@ export const privateApis = {}; lock( privateApis, { ...globalStyles, ExperimentalBlockEditorProvider, - LeafMoreMenu, OffCanvasEditor, PrivateInserter, PrivateListView, diff --git a/packages/block-library/src/navigation/edit/leaf-more-menu.js b/packages/block-library/src/navigation/edit/leaf-more-menu.js new file mode 100644 index 0000000000000..23a0b36ad7043 --- /dev/null +++ b/packages/block-library/src/navigation/edit/leaf-more-menu.js @@ -0,0 +1,164 @@ +// NOTE: This file is duplciated in /packages/edit-site/src/components/sidebar-navigation-screen-navigation-menus/leaf-more-menu.js + +/** + * WordPress dependencies + */ +import { createBlock } from '@wordpress/blocks'; +import { + addSubmenu, + chevronUp, + chevronDown, + moreVertical, +} from '@wordpress/icons'; +import { DropdownMenu, MenuItem, MenuGroup } from '@wordpress/components'; +import { useDispatch, useSelect } from '@wordpress/data'; +import { __, sprintf } from '@wordpress/i18n'; +import { + store as blockEditorStore, + useBlockDisplayInformation, +} from '@wordpress/block-editor'; + +const POPOVER_PROPS = { + className: 'block-editor-block-settings-menu__popover', + position: 'bottom right', + variant: 'toolbar', +}; + +const BLOCKS_THAT_CAN_BE_CONVERTED_TO_SUBMENU = [ + 'core/navigation-link', + 'core/navigation-submenu', +]; + +function AddSubmenuItem( { block, onClose, expandedState, expand } ) { + const { insertBlock, replaceBlock, replaceInnerBlocks } = + useDispatch( blockEditorStore ); + + const clientId = block.clientId; + const isDisabled = ! BLOCKS_THAT_CAN_BE_CONVERTED_TO_SUBMENU.includes( + block.name + ); + return ( + { + const updateSelectionOnInsert = false; + const newLink = createBlock( 'core/navigation-link' ); + + if ( block.name === 'core/navigation-submenu' ) { + 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 + ); + + // The following must happen as two independent actions. + // Why? Because the offcanvas editor relies on the getLastInsertedBlocksClientIds + // selector to determine which block is "active". As the UX needs the newLink to be + // the "active" block it must be the last block to be inserted. + // Therefore the Submenu is first created and **then** the newLink is inserted + // thus ensuring it is the last inserted block. + replaceBlock( clientId, newSubmenu ); + + replaceInnerBlocks( + newSubmenu.clientId, + [ newLink ], + updateSelectionOnInsert + ); + } + if ( ! expandedState[ block.clientId ] ) { + expand( block.clientId ); + } + onClose(); + } } + > + { __( 'Add submenu link' ) } + + ); +} + +export default function LeafMoreMenu( props ) { + const { block } = props; + const { clientId } = block; + + const { moveBlocksDown, moveBlocksUp, removeBlocks } = + useDispatch( blockEditorStore ); + + const blockInformation = useBlockDisplayInformation( clientId ); + const blockTitle = blockInformation?.title || __( 'Untitled' ); + const removeLabel = sprintf( + /* translators: %s: block name */ + __( 'Remove %s' ), + blockTitle + ); + + const rootClientId = useSelect( + ( select ) => { + const { getBlockRootClientId } = select( blockEditorStore ); + + return getBlockRootClientId( clientId ); + }, + [ clientId ] + ); + + return ( + + { ( { onClose } ) => ( + <> + + { + moveBlocksUp( [ clientId ], rootClientId ); + onClose(); + } } + > + { __( 'Move up' ) } + + { + moveBlocksDown( [ clientId ], rootClientId ); + onClose(); + } } + > + { __( 'Move down' ) } + + + + + { + removeBlocks( [ clientId ], false ); + onClose(); + } } + > + { removeLabel } + + + + ) } + + ); +} 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 20a8097be2272..19bc18fc069d0 100644 --- a/packages/block-library/src/navigation/edit/menu-inspector-controls.js +++ b/packages/block-library/src/navigation/edit/menu-inspector-controls.js @@ -22,10 +22,10 @@ import NavigationMenuSelector from './navigation-menu-selector'; import { unlock } from '../../private-apis'; import DeletedNavigationWarning from './deleted-navigation-warning'; import useNavigationMenu from '../use-navigation-menu'; +import LeafMoreMenu from './leaf-more-menu'; /* translators: %s: The name of a menu. */ const actionLabel = __( "Switch to '%s'" ); -const { OffCanvasEditor, LeafMoreMenu } = unlock( blockEditorPrivateApis ); const MainContent = ( { clientId, @@ -34,6 +34,8 @@ const MainContent = ( { isNavigationMenuMissing, onCreateNew, } ) => { + const { OffCanvasEditor } = unlock( blockEditorPrivateApis ); + // Provide a hierarchy of clientIds for the given Navigation block (clientId). // This is required else the list view will display the entire block tree. const clientIdsTree = useSelect( diff --git a/packages/block-editor/src/components/off-canvas-editor/leaf-more-menu.js b/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menus/leaf-more-menu.js similarity index 85% rename from packages/block-editor/src/components/off-canvas-editor/leaf-more-menu.js rename to packages/edit-site/src/components/sidebar-navigation-screen-navigation-menus/leaf-more-menu.js index 5d8aa7824728c..19e3448aa1752 100644 --- a/packages/block-editor/src/components/off-canvas-editor/leaf-more-menu.js +++ b/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menus/leaf-more-menu.js @@ -1,3 +1,5 @@ +// NOTE: This file is duplciated in packages/block-library/src/navigation/edit/leaf-more-menu.js + /** * WordPress dependencies */ @@ -11,13 +13,10 @@ import { import { DropdownMenu, MenuItem, MenuGroup } from '@wordpress/components'; import { useDispatch, useSelect } from '@wordpress/data'; import { __, sprintf } from '@wordpress/i18n'; - -/** - * Internal dependencies - */ -import { store as blockEditorStore } from '../../store'; -import BlockTitle from '../block-title'; -import { useListViewContext } from './context'; +import { + store as blockEditorStore, + useBlockDisplayInformation, +} from '@wordpress/block-editor'; const POPOVER_PROPS = { className: 'block-editor-block-settings-menu__popover', @@ -30,8 +29,7 @@ const BLOCKS_THAT_CAN_BE_CONVERTED_TO_SUBMENU = [ 'core/navigation-submenu', ]; -function AddSubmenuItem( { block, onClose } ) { - const { expandedState, expand } = useListViewContext(); +function AddSubmenuItem( { block, onClose, expandedState, expand } ) { const { insertBlock, replaceBlock, replaceInnerBlocks } = useDispatch( blockEditorStore ); @@ -94,10 +92,12 @@ export default function LeafMoreMenu( props ) { const { moveBlocksDown, moveBlocksUp, removeBlocks } = useDispatch( blockEditorStore ); + const blockInformation = useBlockDisplayInformation( clientId ); + const blockTitle = blockInformation?.title || __( 'Untitled' ); const removeLabel = sprintf( /* translators: %s: block name */ __( 'Remove %s' ), - BlockTitle( { clientId, maximumLength: 25 } ) + blockTitle ); const rootClientId = useSelect( @@ -139,7 +139,13 @@ export default function LeafMoreMenu( props ) { > { __( 'Move down' ) } - + { if ( From 66d3331531dbb18df9261b8344377cf15789e5e4 Mon Sep 17 00:00:00 2001 From: scruffian Date: Thu, 11 May 2023 14:44:50 +0100 Subject: [PATCH 2/3] Change block title --- .../src/navigation/edit/leaf-more-menu.js | 11 ++--------- .../leaf-more-menu.js | 11 ++--------- 2 files changed, 4 insertions(+), 18 deletions(-) diff --git a/packages/block-library/src/navigation/edit/leaf-more-menu.js b/packages/block-library/src/navigation/edit/leaf-more-menu.js index 23a0b36ad7043..f57335ce2bef6 100644 --- a/packages/block-library/src/navigation/edit/leaf-more-menu.js +++ b/packages/block-library/src/navigation/edit/leaf-more-menu.js @@ -1,5 +1,3 @@ -// NOTE: This file is duplciated in /packages/edit-site/src/components/sidebar-navigation-screen-navigation-menus/leaf-more-menu.js - /** * WordPress dependencies */ @@ -13,10 +11,7 @@ import { import { DropdownMenu, MenuItem, MenuGroup } from '@wordpress/components'; import { useDispatch, useSelect } from '@wordpress/data'; import { __, sprintf } from '@wordpress/i18n'; -import { - store as blockEditorStore, - useBlockDisplayInformation, -} from '@wordpress/block-editor'; +import { BlockTitle, store as blockEditorStore } from '@wordpress/block-editor'; const POPOVER_PROPS = { className: 'block-editor-block-settings-menu__popover', @@ -92,12 +87,10 @@ export default function LeafMoreMenu( props ) { const { moveBlocksDown, moveBlocksUp, removeBlocks } = useDispatch( blockEditorStore ); - const blockInformation = useBlockDisplayInformation( clientId ); - const blockTitle = blockInformation?.title || __( 'Untitled' ); const removeLabel = sprintf( /* translators: %s: block name */ __( 'Remove %s' ), - blockTitle + BlockTitle( { clientId, maximumLength: 25 } ) ); const rootClientId = useSelect( diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menus/leaf-more-menu.js b/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menus/leaf-more-menu.js index 19e3448aa1752..f57335ce2bef6 100644 --- a/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menus/leaf-more-menu.js +++ b/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menus/leaf-more-menu.js @@ -1,5 +1,3 @@ -// NOTE: This file is duplciated in packages/block-library/src/navigation/edit/leaf-more-menu.js - /** * WordPress dependencies */ @@ -13,10 +11,7 @@ import { import { DropdownMenu, MenuItem, MenuGroup } from '@wordpress/components'; import { useDispatch, useSelect } from '@wordpress/data'; import { __, sprintf } from '@wordpress/i18n'; -import { - store as blockEditorStore, - useBlockDisplayInformation, -} from '@wordpress/block-editor'; +import { BlockTitle, store as blockEditorStore } from '@wordpress/block-editor'; const POPOVER_PROPS = { className: 'block-editor-block-settings-menu__popover', @@ -92,12 +87,10 @@ export default function LeafMoreMenu( props ) { const { moveBlocksDown, moveBlocksUp, removeBlocks } = useDispatch( blockEditorStore ); - const blockInformation = useBlockDisplayInformation( clientId ); - const blockTitle = blockInformation?.title || __( 'Untitled' ); const removeLabel = sprintf( /* translators: %s: block name */ __( 'Remove %s' ), - blockTitle + BlockTitle( { clientId, maximumLength: 25 } ) ); const rootClientId = useSelect( From 1f5a962220bb9cb515bf440450ba39dffa9e410c Mon Sep 17 00:00:00 2001 From: scruffian Date: Thu, 11 May 2023 15:14:09 +0100 Subject: [PATCH 3/3] minor change --- .../sidebar-navigation-screen-navigation-menus/leaf-more-menu.js | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menus/leaf-more-menu.js b/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menus/leaf-more-menu.js index f57335ce2bef6..ab8c70fc852a6 100644 --- a/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menus/leaf-more-menu.js +++ b/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menus/leaf-more-menu.js @@ -83,7 +83,6 @@ function AddSubmenuItem( { block, onClose, expandedState, expand } ) { export default function LeafMoreMenu( props ) { const { block } = props; const { clientId } = block; - const { moveBlocksDown, moveBlocksUp, removeBlocks } = useDispatch( blockEditorStore );