List View: Allow custom more menus to be passed to the component

WordPress · Mar 16, 2023 · 76679ff · 76679ff
1 parent c9b83b5
commit 76679ff
Show file tree

Hide file tree

Showing 6 changed files with 55 additions and 28 deletions.
diff --git 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
@@ -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
@@ -33,7 +33,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';
@@ -135,7 +134,8 @@ function ListViewBlock( {
 		  )
 		: __( 'Options' );
 
-	const { isTreeGridMounted, expand, collapse } = useListViewContext();
+	const { isTreeGridMounted, expand, collapse, MoreMenuComponent } =
+		useListViewContext();
 
 	const hasSiblings = siblingBlockCount > 0;
 	const hasRenderedMovers = showBlockMovers && hasSiblings;
@@ -326,21 +326,24 @@ function ListViewBlock( {
 					className={ listViewBlockSettingsClassName }
 					aria-selected={ !! isSelected || forceSelectionContentLock }
 				>
-					{ ( { ref, tabIndex, onFocus } ) => (
-						<BlockSettingsDropdown
-							clientIds={ dropdownClientIds }
-							icon={ moreVertical }
-							label={ settingsAriaLabel }
-							toggleProps={ {
-								ref,
-								className: 'block-editor-list-view-block__menu',
-								tabIndex,
-								onFocus,
-							} }
-							disableOpenOnArrowDown
-							__experimentalSelectBlock={ updateSelection }
-						/>
-					) }
+					{ MoreMenuComponent &&
+						( ( { ref, tabIndex, onFocus } ) => (
+							<MoreMenuComponent
+								clientIds={ dropdownClientIds }
+								block={ block }
+								icon={ moreVertical }
+								label={ settingsAriaLabel }
+								toggleProps={ {
+									ref,
+									className:
+										'block-editor-list-view-block__menu',
+									tabIndex,
+									onFocus,
+								} }
+								disableOpenOnArrowDown
+								__experimentalSelectBlock={ updateSelection }
+							/>
+						) ) }
 				</TreeGridCell>
 			) }
 		</ListViewLeaf>

diff --git a/packages/block-editor/src/components/list-view/index.js b/packages/block-editor/src/components/list-view/index.js
@@ -50,15 +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}  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 },
+	{
+		id,
+		blocks,
+		showBlockMovers = false,
+		isExpanded = false,
+		MoreMenuComponent,
+	},
 	ref
 ) {
 	const { clientIdsTree, draggedClientIds, selectedClientIds } =
@@ -170,8 +177,16 @@ function ListView(
 			expandedState,
 			expand,
 			collapse,
+			MoreMenuComponent,
 		} ),
-		[ isMounted.current, draggedClientIds, expandedState, expand, collapse ]
+		[
+			isMounted.current,
+			draggedClientIds,
+			expandedState,
+			expand,
+			collapse,
+			MoreMenuComponent,
+		]
 	);
 
 	// If there are no blocks to show, do not render the list view.

diff --git a/packages/block-editor/src/components/off-canvas-editor/leaf-more-menu.js b/packages/block-editor/src/components/off-canvas-editor/leaf-more-menu.js
@@ -88,7 +88,8 @@ function AddSubmenuItem( { block, onClose } ) {
 }
 
 export default function LeafMoreMenu( props ) {
-	const { clientId, block } = props;
+	const { block } = props;
+	const { clientId } = block;
 
 	const { moveBlocksDown, moveBlocksUp, removeBlocks } =
 		useDispatch( blockEditorStore );

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
@@ -1,7 +1,10 @@
 /**
  * WordPress dependencies
  */
-import { __experimentalListView as ListView } from '@wordpress/block-editor';
+import {
+	__experimentalListView as ListView,
+	BlockSettingsDropdown,
+} from '@wordpress/block-editor';
 import { Button } from '@wordpress/components';
 import {
 	useFocusOnMount,
@@ -59,7 +62,7 @@ export default function ListViewSidebar() {
 					focusOnMountRef,
 				] ) }
 			>
-				<ListView />
+				<ListView MoreMenuComponent={ BlockSettingsDropdown } />
 			</div>
 		</div>
 	);