From 904ad02d3e438a8c94883e22c9cdf57d4b940ac3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Adam=20Zieli=C5=84ski?= Date: Mon, 18 May 2020 17:23:47 +0200 Subject: [PATCH 1/9] Super early prototype --- .../block-editor/src/components/block-navigation/block.js | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/packages/block-editor/src/components/block-navigation/block.js b/packages/block-editor/src/components/block-navigation/block.js index 50b8ad407c6b4a..1464219756f016 100644 --- a/packages/block-editor/src/components/block-navigation/block.js +++ b/packages/block-editor/src/components/block-navigation/block.js @@ -22,6 +22,7 @@ import DescenderLines from './descender-lines'; import BlockNavigationBlockContents from './block-contents'; import BlockSettingsDropdown from '../block-settings-menu/block-settings-dropdown'; import { useBlockNavigationContext } from './context'; +import BlockSettingsMenu from '../block-settings-menu'; export default function BlockNavigationBlock( { block, @@ -90,6 +91,9 @@ export default function BlockNavigationBlock( { level={ level } { ...props } /> + + + { /**/ } ) } From 4415d1e8b82185852491ffd278490621c0e5f6ab Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Adam=20Zieli=C5=84ski?= Date: Tue, 19 May 2020 13:02:39 +0200 Subject: [PATCH 2/9] Hide in the top level item --- .../block-editor/src/components/block-navigation/block.js | 4 ---- .../block-editor/src/components/block-navigation/style.scss | 4 ++++ 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/block-editor/src/components/block-navigation/block.js b/packages/block-editor/src/components/block-navigation/block.js index 1464219756f016..50b8ad407c6b4a 100644 --- a/packages/block-editor/src/components/block-navigation/block.js +++ b/packages/block-editor/src/components/block-navigation/block.js @@ -22,7 +22,6 @@ import DescenderLines from './descender-lines'; import BlockNavigationBlockContents from './block-contents'; import BlockSettingsDropdown from '../block-settings-menu/block-settings-dropdown'; import { useBlockNavigationContext } from './context'; -import BlockSettingsMenu from '../block-settings-menu'; export default function BlockNavigationBlock( { block, @@ -91,9 +90,6 @@ export default function BlockNavigationBlock( { level={ level } { ...props } /> - - - { /**/ } ) } diff --git a/packages/block-editor/src/components/block-navigation/style.scss b/packages/block-editor/src/components/block-navigation/style.scss index 6aea8059c9d5e4..47c848e2d4b7c1 100644 --- a/packages/block-editor/src/components/block-navigation/style.scss +++ b/packages/block-editor/src/components/block-navigation/style.scss @@ -114,6 +114,10 @@ $tree-item-height: 36px; .block-editor-block-navigation-block__contents-container, .block-editor-block-navigation-appender__container { display: flex; + + .components-toolbar { + border: 0; + } } .block-editor-block-navigator-descender-line { From e171bc4dfae9301119bd2abc2e9deeadc93dacbb Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Adam=20Zieli=C5=84ski?= Date: Tue, 19 May 2020 13:17:20 +0200 Subject: [PATCH 3/9] Move the menu to the same level as mover cells --- .../block-editor/src/components/block-navigation/style.scss | 4 ---- 1 file changed, 4 deletions(-) diff --git a/packages/block-editor/src/components/block-navigation/style.scss b/packages/block-editor/src/components/block-navigation/style.scss index 47c848e2d4b7c1..6aea8059c9d5e4 100644 --- a/packages/block-editor/src/components/block-navigation/style.scss +++ b/packages/block-editor/src/components/block-navigation/style.scss @@ -114,10 +114,6 @@ $tree-item-height: 36px; .block-editor-block-navigation-block__contents-container, .block-editor-block-navigation-appender__container { display: flex; - - .components-toolbar { - border: 0; - } } .block-editor-block-navigator-descender-line { From eecbc5a6e829d219f158af70355427226cb000b7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Adam=20Zieli=C5=84ski?= Date: Wed, 20 May 2020 12:30:47 +0200 Subject: [PATCH 4/9] Add the ellipsis menu to the post editor block navigation --- packages/block-library/src/navigation/edit.js | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/block-library/src/navigation/edit.js b/packages/block-library/src/navigation/edit.js index 0ee4af72f79ecc..765458880c387d 100644 --- a/packages/block-library/src/navigation/edit.js +++ b/packages/block-library/src/navigation/edit.js @@ -86,6 +86,7 @@ function Navigation( { const { navigatorToolbarButton, navigatorModal } = useBlockNavigator( clientId, + true, true ); From 586e3da55c0a98666de6570e27df24ab9811885a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Adam=20Zieli=C5=84ski?= Date: Tue, 19 May 2020 15:59:56 +0200 Subject: [PATCH 5/9] Explicitly specify additional ellipsis menu options --- .../src/components/block-navigation/block.js | 5 +- .../block-navigation/ellipsis-menu.js | 51 +++++++++++++++++++ packages/block-editor/src/components/index.js | 1 + .../block-library/src/navigation-link/edit.js | 7 +++ 4 files changed, 63 insertions(+), 1 deletion(-) create mode 100644 packages/block-editor/src/components/block-navigation/ellipsis-menu.js diff --git a/packages/block-editor/src/components/block-navigation/block.js b/packages/block-editor/src/components/block-navigation/block.js index 50b8ad407c6b4a..17ec109b0ea100 100644 --- a/packages/block-editor/src/components/block-navigation/block.js +++ b/packages/block-editor/src/components/block-navigation/block.js @@ -22,6 +22,7 @@ import DescenderLines from './descender-lines'; import BlockNavigationBlockContents from './block-contents'; import BlockSettingsDropdown from '../block-settings-menu/block-settings-dropdown'; import { useBlockNavigationContext } from './context'; +import EllipsisMenu from './ellipsis-menu'; export default function BlockNavigationBlock( { block, @@ -123,7 +124,9 @@ export default function BlockNavigationBlock( { clientIds={ [ clientId ] } icon={ moreVertical } { ...props } - /> + > + + ) } ) } diff --git a/packages/block-editor/src/components/block-navigation/ellipsis-menu.js b/packages/block-editor/src/components/block-navigation/ellipsis-menu.js new file mode 100644 index 00000000000000..9c45422ebed9c8 --- /dev/null +++ b/packages/block-editor/src/components/block-navigation/ellipsis-menu.js @@ -0,0 +1,51 @@ +/** + * External dependencies + */ +import { isEmpty } from 'lodash'; + +/** + * WordPress dependencies + */ +import { useContext } from '@wordpress/element'; +import { + __experimentalToolbarContext as ToolbarContext, + createSlotFill, + ToolbarGroup, +} from '@wordpress/components'; + +/** + * Internal dependencies + */ +import { ifBlockEditSelected } from '../block-edit/context'; + +const { Fill, Slot } = createSlotFill( 'EllipsisMenu' ); + +function EllipsisMenuSlot( props ) { + const accessibleToolbarState = useContext( ToolbarContext ); + return ; +} + +function EllipsisMenuFill( { controls, children } ) { + return ( + + { ( fillProps ) => { + // Children passed to EllipsisMenuFill will not have access to any + // React Context whose Provider is part of the EllipsisMenuSlot tree. + // So we re-create the Provider in this subtree. + const value = ! isEmpty( fillProps ) ? fillProps : null; + return ( + + + { children } + + ); + } } + + ); +} + +const EllipsisMenu = ifBlockEditSelected( EllipsisMenuFill ); + +EllipsisMenu.Slot = EllipsisMenuSlot; + +export default EllipsisMenu; diff --git a/packages/block-editor/src/components/index.js b/packages/block-editor/src/components/index.js index f8e37a7f4c5cfe..1283a19b8eb478 100644 --- a/packages/block-editor/src/components/index.js +++ b/packages/block-editor/src/components/index.js @@ -18,6 +18,7 @@ export { default as BlockFormatControls } from './block-format-controls'; export { default as BlockIcon } from './block-icon'; export { default as BlockNavigationDropdown } from './block-navigation/dropdown'; export { BlockNavigationBlockFill as __experimentalBlockNavigationBlockFill } from './block-navigation/block-contents'; +export { default as __experimentalEllipsisMenu } from './block-navigation/ellipsis-menu'; export { default as __experimentalBlockNavigationEditor } from './block-navigation/editor'; export { default as __experimentalBlockNavigationTree } from './block-navigation/tree'; export { default as __experimentalBlockVariationPicker } from './block-variation-picker'; diff --git a/packages/block-library/src/navigation-link/edit.js b/packages/block-library/src/navigation-link/edit.js index d5ec274a05470b..1a7d10be492d78 100644 --- a/packages/block-library/src/navigation-link/edit.js +++ b/packages/block-library/src/navigation-link/edit.js @@ -13,6 +13,7 @@ import { withDispatch, withSelect } from '@wordpress/data'; import { ExternalLink, KeyboardShortcuts, + MenuItem, PanelBody, Popover, TextareaControl, @@ -30,6 +31,7 @@ import { __experimentalLinkControl as LinkControl, __experimentalBlock as Block, __experimentalBlockNavigationEditor as BlockNavigationEditor, + __experimentalEllipsisMenu as BlockNavigationEllipsisMenu, } from '@wordpress/block-editor'; import { isURL, prependHTTP } from '@wordpress/url'; import { Fragment, useState, useEffect, useRef } from '@wordpress/element'; @@ -158,6 +160,11 @@ function NavigationLinkEdit( { /> + + {} }> + { __( 'Add submenu' ) } + + Date: Wed, 20 May 2020 13:20:55 +0200 Subject: [PATCH 6/9] Simplify EllipsisMenu slot/fill mechanics --- .../src/components/block-navigation/block.js | 5 ++++ .../block-navigation/ellipsis-menu.js | 23 +------------------ .../block-settings-dropdown.js | 3 ++- .../components/src/dropdown-menu/index.js | 2 ++ 4 files changed, 10 insertions(+), 23 deletions(-) diff --git a/packages/block-editor/src/components/block-navigation/block.js b/packages/block-editor/src/components/block-navigation/block.js index 17ec109b0ea100..96a778deb01ef3 100644 --- a/packages/block-editor/src/components/block-navigation/block.js +++ b/packages/block-editor/src/components/block-navigation/block.js @@ -123,6 +123,11 @@ export default function BlockNavigationBlock( { { + if ( isOpen ) { + onClick(); + } + } } { ...props } > diff --git a/packages/block-editor/src/components/block-navigation/ellipsis-menu.js b/packages/block-editor/src/components/block-navigation/ellipsis-menu.js index 9c45422ebed9c8..47ce1824747cc0 100644 --- a/packages/block-editor/src/components/block-navigation/ellipsis-menu.js +++ b/packages/block-editor/src/components/block-navigation/ellipsis-menu.js @@ -1,7 +1,6 @@ /** * External dependencies */ -import { isEmpty } from 'lodash'; /** * WordPress dependencies @@ -10,7 +9,6 @@ import { useContext } from '@wordpress/element'; import { __experimentalToolbarContext as ToolbarContext, createSlotFill, - ToolbarGroup, } from '@wordpress/components'; /** @@ -25,26 +23,7 @@ function EllipsisMenuSlot( props ) { return ; } -function EllipsisMenuFill( { controls, children } ) { - return ( - - { ( fillProps ) => { - // Children passed to EllipsisMenuFill will not have access to any - // React Context whose Provider is part of the EllipsisMenuSlot tree. - // So we re-create the Provider in this subtree. - const value = ! isEmpty( fillProps ) ? fillProps : null; - return ( - - - { children } - - ); - } } - - ); -} - -const EllipsisMenu = ifBlockEditSelected( EllipsisMenuFill ); +const EllipsisMenu = ifBlockEditSelected( Fill ); EllipsisMenu.Slot = EllipsisMenuSlot; diff --git a/packages/block-editor/src/components/block-settings-menu/block-settings-dropdown.js b/packages/block-editor/src/components/block-settings-menu/block-settings-dropdown.js index e9e3ae9b235a9b..687cc129d149b7 100644 --- a/packages/block-editor/src/components/block-settings-menu/block-settings-dropdown.js +++ b/packages/block-editor/src/components/block-settings-menu/block-settings-dropdown.js @@ -34,7 +34,7 @@ const POPOVER_PROPS = { isAlternate: true, }; -export function BlockSettingsDropdown( { clientIds, ...props } ) { +export function BlockSettingsDropdown( { clientIds, children, ...props } ) { const blockClientIds = castArray( clientIds ); const count = blockClientIds.length; const firstBlockClientId = blockClientIds[ 0 ]; @@ -145,6 +145,7 @@ export function BlockSettingsDropdown( { clientIds, ...props } ) { /> ) } + { children } {}, toggleProps, menuProps, // The following props exist for backward compatibility. @@ -85,6 +86,7 @@ function DropdownMenu( { { const openOnArrowDown = ( event ) => { if ( ! isOpen && event.keyCode === DOWN ) { From 469a9f1b97d71df17274a1f5c4dd33754aebfb19 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Adam=20Zieli=C5=84ski?= Date: Wed, 20 May 2020 13:31:42 +0200 Subject: [PATCH 7/9] Render MenuGroup correctly in the ellipsis menu --- .../src/components/block-navigation/block.js | 4 +-- .../ellipsis-menu-controls.js | 30 +++++++++++++++++++ .../block-navigation/ellipsis-menu.js | 30 ------------------- packages/block-editor/src/components/index.js | 2 +- .../block-library/src/navigation-link/edit.js | 15 ++++++---- 5 files changed, 42 insertions(+), 39 deletions(-) create mode 100644 packages/block-editor/src/components/block-navigation/ellipsis-menu-controls.js delete mode 100644 packages/block-editor/src/components/block-navigation/ellipsis-menu.js diff --git a/packages/block-editor/src/components/block-navigation/block.js b/packages/block-editor/src/components/block-navigation/block.js index 96a778deb01ef3..eb1a89145f320a 100644 --- a/packages/block-editor/src/components/block-navigation/block.js +++ b/packages/block-editor/src/components/block-navigation/block.js @@ -22,7 +22,7 @@ import DescenderLines from './descender-lines'; import BlockNavigationBlockContents from './block-contents'; import BlockSettingsDropdown from '../block-settings-menu/block-settings-dropdown'; import { useBlockNavigationContext } from './context'; -import EllipsisMenu from './ellipsis-menu'; +import EllipsisMenuControls from './ellipsis-menu-controls'; export default function BlockNavigationBlock( { block, @@ -130,7 +130,7 @@ export default function BlockNavigationBlock( { } } { ...props } > - + ) } diff --git a/packages/block-editor/src/components/block-navigation/ellipsis-menu-controls.js b/packages/block-editor/src/components/block-navigation/ellipsis-menu-controls.js new file mode 100644 index 00000000000000..516f06b2c13a00 --- /dev/null +++ b/packages/block-editor/src/components/block-navigation/ellipsis-menu-controls.js @@ -0,0 +1,30 @@ +/** + * External dependencies + */ +import { isEmpty } from 'lodash'; + +/** + * WordPress dependencies + */ +import { createSlotFill } from '@wordpress/components'; + +/** + * Internal dependencies + */ +import { ifBlockEditSelected } from '../block-edit/context'; + +const { Fill, Slot } = createSlotFill( 'EllipsisMenu' ); + +const EllipsisMenuControlsSlot = ( { fillProps } ) => { + return ( + + { ( fills ) => ! isEmpty( fills ) && <>{ fills } } + + ); +}; + +const EllipsisMenuControls = ifBlockEditSelected( Fill ); + +EllipsisMenuControls.Slot = EllipsisMenuControlsSlot; + +export default EllipsisMenuControls; diff --git a/packages/block-editor/src/components/block-navigation/ellipsis-menu.js b/packages/block-editor/src/components/block-navigation/ellipsis-menu.js deleted file mode 100644 index 47ce1824747cc0..00000000000000 --- a/packages/block-editor/src/components/block-navigation/ellipsis-menu.js +++ /dev/null @@ -1,30 +0,0 @@ -/** - * External dependencies - */ - -/** - * WordPress dependencies - */ -import { useContext } from '@wordpress/element'; -import { - __experimentalToolbarContext as ToolbarContext, - createSlotFill, -} from '@wordpress/components'; - -/** - * Internal dependencies - */ -import { ifBlockEditSelected } from '../block-edit/context'; - -const { Fill, Slot } = createSlotFill( 'EllipsisMenu' ); - -function EllipsisMenuSlot( props ) { - const accessibleToolbarState = useContext( ToolbarContext ); - return ; -} - -const EllipsisMenu = ifBlockEditSelected( Fill ); - -EllipsisMenu.Slot = EllipsisMenuSlot; - -export default EllipsisMenu; diff --git a/packages/block-editor/src/components/index.js b/packages/block-editor/src/components/index.js index 1283a19b8eb478..ae199b196e03e4 100644 --- a/packages/block-editor/src/components/index.js +++ b/packages/block-editor/src/components/index.js @@ -18,7 +18,7 @@ export { default as BlockFormatControls } from './block-format-controls'; export { default as BlockIcon } from './block-icon'; export { default as BlockNavigationDropdown } from './block-navigation/dropdown'; export { BlockNavigationBlockFill as __experimentalBlockNavigationBlockFill } from './block-navigation/block-contents'; -export { default as __experimentalEllipsisMenu } from './block-navigation/ellipsis-menu'; +export { default as __experimentalBlockNavigationEllipsisMenuControls } from './block-navigation/ellipsis-menu-controls'; export { default as __experimentalBlockNavigationEditor } from './block-navigation/editor'; export { default as __experimentalBlockNavigationTree } from './block-navigation/tree'; export { default as __experimentalBlockVariationPicker } from './block-variation-picker'; diff --git a/packages/block-library/src/navigation-link/edit.js b/packages/block-library/src/navigation-link/edit.js index 1a7d10be492d78..21f533a1a1b71f 100644 --- a/packages/block-library/src/navigation-link/edit.js +++ b/packages/block-library/src/navigation-link/edit.js @@ -13,6 +13,7 @@ import { withDispatch, withSelect } from '@wordpress/data'; import { ExternalLink, KeyboardShortcuts, + MenuGroup, MenuItem, PanelBody, Popover, @@ -31,7 +32,7 @@ import { __experimentalLinkControl as LinkControl, __experimentalBlock as Block, __experimentalBlockNavigationEditor as BlockNavigationEditor, - __experimentalEllipsisMenu as BlockNavigationEllipsisMenu, + __experimentalBlockNavigationEllipsisMenuControls as BlockNavigationEllipsisMenuControls, } from '@wordpress/block-editor'; import { isURL, prependHTTP } from '@wordpress/url'; import { Fragment, useState, useEffect, useRef } from '@wordpress/element'; @@ -160,11 +161,13 @@ function NavigationLinkEdit( { /> - - {} }> - { __( 'Add submenu' ) } - - + + + {} }> + { __( 'Add submenu' ) } + + + Date: Wed, 20 May 2020 13:49:28 +0200 Subject: [PATCH 8/9] Per-block EllipsisMenuControlsSlot --- .../src/components/block-navigation/block.js | 10 ++++----- .../ellipsis-menu-controls.js | 21 +++++++++++-------- .../block-library/src/navigation-link/edit.js | 2 +- .../components/src/dropdown-menu/index.js | 2 -- 4 files changed, 17 insertions(+), 18 deletions(-) diff --git a/packages/block-editor/src/components/block-navigation/block.js b/packages/block-editor/src/components/block-navigation/block.js index eb1a89145f320a..166ca9fbd78f04 100644 --- a/packages/block-editor/src/components/block-navigation/block.js +++ b/packages/block-editor/src/components/block-navigation/block.js @@ -123,14 +123,12 @@ export default function BlockNavigationBlock( { { - if ( isOpen ) { - onClick(); - } - } } { ...props } > - + ) } diff --git a/packages/block-editor/src/components/block-navigation/ellipsis-menu-controls.js b/packages/block-editor/src/components/block-navigation/ellipsis-menu-controls.js index 516f06b2c13a00..dde7cbd8fc30b2 100644 --- a/packages/block-editor/src/components/block-navigation/ellipsis-menu-controls.js +++ b/packages/block-editor/src/components/block-navigation/ellipsis-menu-controls.js @@ -7,23 +7,26 @@ import { isEmpty } from 'lodash'; * WordPress dependencies */ import { createSlotFill } from '@wordpress/components'; +import { useContext } from '@wordpress/element'; /** * Internal dependencies */ -import { ifBlockEditSelected } from '../block-edit/context'; +import { BlockListBlockContext } from '../block-list/block'; +const getSlotName = ( clientId ) => `BlockNavigationEllipsisMenu-${ clientId }`; const { Fill, Slot } = createSlotFill( 'EllipsisMenu' ); -const EllipsisMenuControlsSlot = ( { fillProps } ) => { - return ( - - { ( fills ) => ! isEmpty( fills ) && <>{ fills } } - - ); -}; +const EllipsisMenuControlsSlot = ( { fillProps, clientId } ) => ( + + { ( fills ) => ! isEmpty( fills ) && <>{ fills } } + +); -const EllipsisMenuControls = ifBlockEditSelected( Fill ); +export const EllipsisMenuControls = ( props ) => { + const { clientId } = useContext( BlockListBlockContext ); + return ; +}; EllipsisMenuControls.Slot = EllipsisMenuControlsSlot; diff --git a/packages/block-library/src/navigation-link/edit.js b/packages/block-library/src/navigation-link/edit.js index 21f533a1a1b71f..6c27cc00913ade 100644 --- a/packages/block-library/src/navigation-link/edit.js +++ b/packages/block-library/src/navigation-link/edit.js @@ -163,7 +163,7 @@ function NavigationLinkEdit( { - {} }> + { __( 'Add submenu' ) } diff --git a/packages/components/src/dropdown-menu/index.js b/packages/components/src/dropdown-menu/index.js index 0715ab865a7680..288ea6f72d9d41 100644 --- a/packages/components/src/dropdown-menu/index.js +++ b/packages/components/src/dropdown-menu/index.js @@ -40,7 +40,6 @@ function DropdownMenu( { icon = 'menu', label, popoverProps, - onDropdownToggle = () => {}, toggleProps, menuProps, // The following props exist for backward compatibility. @@ -86,7 +85,6 @@ function DropdownMenu( { { const openOnArrowDown = ( event ) => { if ( ! isOpen && event.keyCode === DOWN ) { From 2f1704179ef3a784793187dd9c31182244053b61 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Adam=20Zieli=C5=84ski?= Date: Thu, 21 May 2020 16:58:57 +0200 Subject: [PATCH 9/9] Rename EllipsisMenu to BlockNavigatorItemSettings --- .../src/components/block-navigation/block.js | 14 ++++++------- .../components/block-navigation/context.js | 4 ++-- .../components/block-navigation/dropdown.js | 6 +++--- .../src/components/block-navigation/index.js | 20 +++++++++---------- ...-controls.js => item-settings-controls.js} | 12 +++++------ .../src/components/block-navigation/tree.js | 16 +++++++-------- packages/block-editor/src/components/index.js | 3 ++- .../block-library/src/navigation-link/edit.js | 6 +++--- .../menu-editor/navigation-structure-panel.js | 4 ++-- .../components/header/header-toolbar/index.js | 2 +- 10 files changed, 44 insertions(+), 43 deletions(-) rename packages/block-editor/src/components/block-navigation/{ellipsis-menu-controls.js => item-settings-controls.js} (64%) diff --git a/packages/block-editor/src/components/block-navigation/block.js b/packages/block-editor/src/components/block-navigation/block.js index 166ca9fbd78f04..1e95f85dbef57a 100644 --- a/packages/block-editor/src/components/block-navigation/block.js +++ b/packages/block-editor/src/components/block-navigation/block.js @@ -22,7 +22,7 @@ import DescenderLines from './descender-lines'; import BlockNavigationBlockContents from './block-contents'; import BlockSettingsDropdown from '../block-settings-menu/block-settings-dropdown'; import { useBlockNavigationContext } from './context'; -import EllipsisMenuControls from './ellipsis-menu-controls'; +import ItemSettingsControls from './item-settings-controls'; export default function BlockNavigationBlock( { block, @@ -49,10 +49,10 @@ export default function BlockNavigationBlock( { { 'is-visible': hasVisibleMovers } ); const { - __experimentalWithEllipsisMenu: withEllipsisMenu, - __experimentalWithEllipsisMenuMinLevel: ellipsisMenuMinLevel, + __experimentalWithItemSettings: withItemSettings, + __experimentalWithItemSettingsMinLevel: itemSettingsMinLevel, } = useBlockNavigationContext(); - const ellipsisMenuClassName = classnames( + const itemSettingsClassName = classnames( 'block-editor-block-navigation-block__menu-cell', { 'is-visible': hasVisibleMovers } ); @@ -117,15 +117,15 @@ export default function BlockNavigationBlock( { ) } - { withEllipsisMenu && level >= ellipsisMenuMinLevel && ( - + { withItemSettings && level >= itemSettingsMinLevel && ( + { ( props ) => ( - diff --git a/packages/block-editor/src/components/block-navigation/context.js b/packages/block-editor/src/components/block-navigation/context.js index 7d087b5f0e7490..0ef22e4ca966dc 100644 --- a/packages/block-editor/src/components/block-navigation/context.js +++ b/packages/block-editor/src/components/block-navigation/context.js @@ -5,8 +5,8 @@ import { createContext, useContext } from '@wordpress/element'; export const BlockNavigationContext = createContext( { __experimentalWithBlockNavigationSlots: false, - __experimentalWithEllipsisMenu: false, - __experimentalWithEllipsisMenuMinLevel: 0, + __experimentalWithItemSettings: false, + __experimentalWithItemSettingsMinLevel: 0, } ); export const useBlockNavigationContext = () => diff --git a/packages/block-editor/src/components/block-navigation/dropdown.js b/packages/block-editor/src/components/block-navigation/dropdown.js index 287a0da8cfa78c..e29c366ce36af2 100644 --- a/packages/block-editor/src/components/block-navigation/dropdown.js +++ b/packages/block-editor/src/components/block-navigation/dropdown.js @@ -56,7 +56,7 @@ function BlockNavigationDropdownToggle( { isEnabled, onToggle, isOpen } ) { function BlockNavigationDropdown( { isDisabled, __experimentalWithBlockNavigationSlots, - __experimentalWithEllipsisMenu, + __experimentalWithItemSettings, } ) { const hasBlocks = useSelect( ( select ) => !! select( 'core/block-editor' ).getBlockCount(), @@ -80,8 +80,8 @@ function BlockNavigationDropdown( { __experimentalWithBlockNavigationSlots={ __experimentalWithBlockNavigationSlots } - __experimentalWithEllipsisMenu={ - __experimentalWithEllipsisMenu + __experimentalWithItemSettings={ + __experimentalWithItemSettings } /> ) } diff --git a/packages/block-editor/src/components/block-navigation/index.js b/packages/block-editor/src/components/block-navigation/index.js index 1f7a5b20e14c6a..90e78863796d7f 100644 --- a/packages/block-editor/src/components/block-navigation/index.js +++ b/packages/block-editor/src/components/block-navigation/index.js @@ -21,8 +21,8 @@ function BlockNavigation( { selectedBlockClientId, selectBlock, __experimentalWithBlockNavigationSlots, - __experimentalWithEllipsisMenu, - __experimentalWithEllipsisMenuMinLevel, + __experimentalWithItemSettings, + __experimentalWithItemSettingsMinLevel, } ) { if ( ! rootBlocks || rootBlocks.length === 0 ) { return null; @@ -43,11 +43,11 @@ function BlockNavigation( { blocks={ [ rootBlock ] } selectedBlockClientId={ selectedBlockClientId } selectBlock={ selectBlock } - __experimentalWithEllipsisMenu={ - __experimentalWithEllipsisMenu + __experimentalWithItemSettings={ + __experimentalWithItemSettings } - __experimentalWithEllipsisMenuMinLevel={ - __experimentalWithEllipsisMenuMinLevel + __experimentalWithItemSettingsMinLevel={ + __experimentalWithItemSettingsMinLevel } __experimentalWithBlockNavigationSlots={ __experimentalWithBlockNavigationSlots @@ -60,11 +60,11 @@ function BlockNavigation( { blocks={ rootBlocks } selectedBlockClientId={ selectedBlockClientId } selectBlock={ selectBlock } - __experimentalWithEllipsisMenu={ - __experimentalWithEllipsisMenu + __experimentalWithItemSettings={ + __experimentalWithItemSettings } - __experimentalWithEllipsisMenuMinLevel={ - __experimentalWithEllipsisMenuMinLevel + __experimentalWithItemSettingsMinLevel={ + __experimentalWithItemSettingsMinLevel } __experimentalWithBlockNavigationSlots={ __experimentalWithBlockNavigationSlots diff --git a/packages/block-editor/src/components/block-navigation/ellipsis-menu-controls.js b/packages/block-editor/src/components/block-navigation/item-settings-controls.js similarity index 64% rename from packages/block-editor/src/components/block-navigation/ellipsis-menu-controls.js rename to packages/block-editor/src/components/block-navigation/item-settings-controls.js index dde7cbd8fc30b2..82230ba4975948 100644 --- a/packages/block-editor/src/components/block-navigation/ellipsis-menu-controls.js +++ b/packages/block-editor/src/components/block-navigation/item-settings-controls.js @@ -14,20 +14,20 @@ import { useContext } from '@wordpress/element'; */ import { BlockListBlockContext } from '../block-list/block'; -const getSlotName = ( clientId ) => `BlockNavigationEllipsisMenu-${ clientId }`; -const { Fill, Slot } = createSlotFill( 'EllipsisMenu' ); +const getSlotName = ( clientId ) => `BlockNavigationItemSettings-${ clientId }`; +const { Fill, Slot } = createSlotFill( 'ItemSettings' ); -const EllipsisMenuControlsSlot = ( { fillProps, clientId } ) => ( +const ItemSettingsControlsSlot = ( { fillProps, clientId } ) => ( { ( fills ) => ! isEmpty( fills ) && <>{ fills } } ); -export const EllipsisMenuControls = ( props ) => { +export const ItemSettingsControls = ( props ) => { const { clientId } = useContext( BlockListBlockContext ); return ; }; -EllipsisMenuControls.Slot = EllipsisMenuControlsSlot; +ItemSettingsControls.Slot = ItemSettingsControlsSlot; -export default EllipsisMenuControls; +export default ItemSettingsControls; diff --git a/packages/block-editor/src/components/block-navigation/tree.js b/packages/block-editor/src/components/block-navigation/tree.js index 096231e7159ecf..bc4324653dad55 100644 --- a/packages/block-editor/src/components/block-navigation/tree.js +++ b/packages/block-editor/src/components/block-navigation/tree.js @@ -21,23 +21,23 @@ import { BlockNavigationContext } from './context'; */ export default function BlockNavigationTree( { __experimentalWithBlockNavigationSlots, - __experimentalWithEllipsisMenu, - __experimentalWithEllipsisMenuMinLevel, + __experimentalWithItemSettings, + __experimentalWithItemSettingsMinLevel, ...props } ) { const contextValue = useMemo( () => ( { __experimentalWithBlockNavigationSlots, - __experimentalWithEllipsisMenu, - __experimentalWithEllipsisMenuMinLevel: - typeof __experimentalWithEllipsisMenuMinLevel === 'number' - ? __experimentalWithEllipsisMenuMinLevel + __experimentalWithItemSettings, + __experimentalWithItemSettingsMinLevel: + typeof __experimentalWithItemSettingsMinLevel === 'number' + ? __experimentalWithItemSettingsMinLevel : 0, } ), [ __experimentalWithBlockNavigationSlots, - __experimentalWithEllipsisMenu, - __experimentalWithEllipsisMenuMinLevel, + __experimentalWithItemSettings, + __experimentalWithItemSettingsMinLevel, ] ); diff --git a/packages/block-editor/src/components/index.js b/packages/block-editor/src/components/index.js index ae199b196e03e4..0c31da88470019 100644 --- a/packages/block-editor/src/components/index.js +++ b/packages/block-editor/src/components/index.js @@ -1,3 +1,4 @@ +/* /* * Block Creation Components */ @@ -18,7 +19,7 @@ export { default as BlockFormatControls } from './block-format-controls'; export { default as BlockIcon } from './block-icon'; export { default as BlockNavigationDropdown } from './block-navigation/dropdown'; export { BlockNavigationBlockFill as __experimentalBlockNavigationBlockFill } from './block-navigation/block-contents'; -export { default as __experimentalBlockNavigationEllipsisMenuControls } from './block-navigation/ellipsis-menu-controls'; +export { default as __experimentalBlockNavigationItemSettingsControls } from './block-navigation/item-settings-controls'; export { default as __experimentalBlockNavigationEditor } from './block-navigation/editor'; export { default as __experimentalBlockNavigationTree } from './block-navigation/tree'; export { default as __experimentalBlockVariationPicker } from './block-variation-picker'; diff --git a/packages/block-library/src/navigation-link/edit.js b/packages/block-library/src/navigation-link/edit.js index 6c27cc00913ade..5b2fccabd6789c 100644 --- a/packages/block-library/src/navigation-link/edit.js +++ b/packages/block-library/src/navigation-link/edit.js @@ -32,7 +32,7 @@ import { __experimentalLinkControl as LinkControl, __experimentalBlock as Block, __experimentalBlockNavigationEditor as BlockNavigationEditor, - __experimentalBlockNavigationEllipsisMenuControls as BlockNavigationEllipsisMenuControls, + __experimentalBlockNavigationItemSettingsControls as BlockNavigationItemSettingsControls, } from '@wordpress/block-editor'; import { isURL, prependHTTP } from '@wordpress/url'; import { Fragment, useState, useEffect, useRef } from '@wordpress/element'; @@ -161,13 +161,13 @@ function NavigationLinkEdit( { /> - + { __( 'Add submenu' ) } - + { displayBlockToolbar && (