diff --git a/packages/block-editor/README.md b/packages/block-editor/README.md index 18c2c2cfbce52..1482871b6bf69 100644 --- a/packages/block-editor/README.md +++ b/packages/block-editor/README.md @@ -205,6 +205,10 @@ _Returns_ Undocumented declaration. +### BlockSettingsDropdown + +Undocumented declaration. + ### BlockSettingsMenu Undocumented declaration. diff --git a/packages/block-editor/src/components/index.js b/packages/block-editor/src/components/index.js index f5b2c17e87740..80d608ab4946f 100644 --- a/packages/block-editor/src/components/index.js +++ b/packages/block-editor/src/components/index.js @@ -117,6 +117,7 @@ export { useBlockSelectionClearer as __unstableUseBlockSelectionClearer, } from './block-selection-clearer'; export { default as BlockSettingsMenu } from './block-settings-menu'; +export { default as BlockSettingsDropdown } from './block-settings-menu/block-settings-dropdown.js'; export { default as BlockSettingsMenuControls } from './block-settings-menu-controls'; export { default as BlockTitle } from './block-title'; export { default as BlockToolbar } from './block-toolbar'; diff --git a/packages/block-editor/src/components/list-view/block.js b/packages/block-editor/src/components/list-view/block.js index d766fa19ccdb4..13b81de93f366 100644 --- a/packages/block-editor/src/components/list-view/block.js +++ b/packages/block-editor/src/components/list-view/block.js @@ -32,7 +32,6 @@ import { BlockMoverDownButton, } from '../block-mover/button'; import ListViewBlockContents from './block-contents'; -import BlockSettingsDropdown from '../block-settings-menu/block-settings-dropdown'; import { useListViewContext } from './context'; import { getBlockPositionDescription } from './utils'; import { store as blockEditorStore } from '../../store'; @@ -133,7 +132,7 @@ function ListViewBlock( { ) : __( 'Options' ); - const { isTreeGridMounted, expand, collapse, LeafMoreMenu } = + const { isTreeGridMounted, expand, collapse, MoreMenuComponent } = useListViewContext(); const hasSiblings = siblingBlockCount > 0; @@ -221,10 +220,6 @@ function ListViewBlock( { ? selectedClientIds : [ clientId ]; - const MoreMenuComponent = LeafMoreMenu - ? LeafMoreMenu - : BlockSettingsDropdown; - return ( - { ( { ref, tabIndex, onFocus } ) => ( - - ) } + { MoreMenuComponent && + ( ( { ref, tabIndex, onFocus } ) => ( + + ) ) } ) } diff --git a/packages/block-editor/src/components/list-view/index.js b/packages/block-editor/src/components/list-view/index.js index c39bbc4217179..e1eabc975ce42 100644 --- a/packages/block-editor/src/components/list-view/index.js +++ b/packages/block-editor/src/components/list-view/index.js @@ -50,16 +50,22 @@ export const BLOCK_LIST_ITEM_HEIGHT = 36; /** * Show a hierarchical list of blocks. * - * @param {Object} props Components props. - * @param {string} props.id An HTML element id for the root element of ListView. - * @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 {Object} props.LeafMoreMenu Optional more menu substitution. - * @param {Object} ref Forwarded ref + * @param {Object} props Components props. + * @param {string} props.id An HTML element id for the root element of ListView. + * @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 {Object} props.MoreMenuComponent Optional more menu substitution. + * @param {Object} ref Forwarded ref */ function ListView( - { id, blocks, showBlockMovers = false, isExpanded = false, LeafMoreMenu }, + { + id, + blocks, + showBlockMovers = false, + isExpanded = false, + MoreMenuComponent, + }, ref ) { const { clientIdsTree, draggedClientIds, selectedClientIds } = @@ -171,7 +177,7 @@ function ListView( expandedState, expand, collapse, - LeafMoreMenu, + MoreMenuComponent, } ), [ isMounted.current, @@ -179,7 +185,7 @@ function ListView( expandedState, expand, collapse, - LeafMoreMenu, + MoreMenuComponent, ] ); diff --git a/packages/edit-site/src/components/secondary-sidebar/list-view-sidebar.js b/packages/edit-site/src/components/secondary-sidebar/list-view-sidebar.js index dcd2472ffd90a..41cbeca94790b 100644 --- a/packages/edit-site/src/components/secondary-sidebar/list-view-sidebar.js +++ b/packages/edit-site/src/components/secondary-sidebar/list-view-sidebar.js @@ -2,8 +2,8 @@ * WordPress dependencies */ import { - privateApis as blockEditorPrivateApis, __experimentalListView as ListView, + BlockSettingsDropdown, } from '@wordpress/block-editor'; import { Button } from '@wordpress/components'; import { @@ -21,7 +21,6 @@ import { ESCAPE } from '@wordpress/keycodes'; * Internal dependencies */ import { store as editSiteStore } from '../../store'; -import { unlock } from '../../private-apis'; export default function ListViewSidebar() { const { setIsListViewOpened } = useDispatch( editSiteStore ); @@ -37,7 +36,6 @@ export default function ListViewSidebar() { const instanceId = useInstanceId( ListViewSidebar ); const labelId = `edit-site-editor__list-view-panel-label-${ instanceId }`; - const { LeafMoreMenu } = unlock( blockEditorPrivateApis ); return ( // eslint-disable-next-line jsx-a11y/no-static-element-interactions @@ -64,7 +62,7 @@ export default function ListViewSidebar() { focusOnMountRef, ] ) } > - + );