List View: Allow the component to show a custom "more" menu. (#48097)

* List View: Allow custom more menus to be passed to the component * Update packages/edit-site/src/components/secondary-sidebar/list-view-sidebar.js Co-authored-by: Alex Lende <alex@lende.xyz> * fix prop name * Set a default for the prop * lock the blockSettingsMenu prop * unconnected change * Improve jsdoc --------- Co-authored-by: Alex Lende <alex@lende.xyz> Co-authored-by: Daniel Richards <daniel.richards@automattic.com>
WordPress · Mar 28, 2023 · 65cd782 · 65cd782
1 parent 113e858
commit 65cd782
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 13 deletions.
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, BlockSettingsMenu } =
+		useListViewContext();
 
 	const hasSiblings = siblingBlockCount > 0;
 	const hasRenderedMovers = showBlockMovers && hasSiblings;
@@ -321,14 +321,15 @@ function ListViewBlock( {
 				</>
 			) }
 
-			{ showBlockActions && (
+			{ showBlockActions && BlockSettingsMenu && (
 				<TreeGridCell
 					className={ listViewBlockSettingsClassName }
 					aria-selected={ !! isSelected || forceSelectionContentLock }
 				>
 					{ ( { ref, tabIndex, onFocus } ) => (
-						<BlockSettingsDropdown
+						<BlockSettingsMenu
 							clientIds={ dropdownClientIds }
+							block={ block }
 							icon={ moreVertical }
 							label={ settingsAriaLabel }
 							toggleProps={ {

diff --git a/packages/block-editor/src/components/list-view/index.js b/packages/block-editor/src/components/list-view/index.js
@@ -28,6 +28,7 @@ import useListViewClientIds from './use-list-view-client-ids';
 import useListViewDropZone from './use-list-view-drop-zone';
 import useListViewExpandSelectedItem from './use-list-view-expand-selected-item';
 import { store as blockEditorStore } from '../../store';
+import { BlockSettingsDropdown } from '../block-settings-menu/block-settings-dropdown';
 
 const expanded = ( state, action ) => {
 	if ( Array.isArray( action.clientIds ) ) {
@@ -47,16 +48,20 @@ const expanded = ( state, action ) => {
 
 export const BLOCK_LIST_ITEM_HEIGHT = 36;
 
+/** @typedef {import('react').ComponentType} ComponentType */
+/** @typedef {import('react').Ref<HTMLElement>} Ref */
+
 /**
  * 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 {boolean} props.showAppender    Flag to show or hide the block appender.
- * @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. Defaults to `false`.
+ * @param {?boolean}       props.isExpanded        Flag to determine whether nested levels are expanded by default. Defaults to `false`.
+ * @param {?boolean}       props.showAppender      Flag to show or hide the block appender. Defaults to `false`.
+ * @param {?ComponentType} props.blockSettingsMenu Optional more menu substitution. Defaults to the standard `BlockSettingsDropdown` component.
+ * @param {Ref}            ref                     Forwarded ref
  */
 function ListViewComponent(
 	{
@@ -65,6 +70,7 @@ function ListViewComponent(
 		showBlockMovers = false,
 		isExpanded = false,
 		showAppender = false,
+		blockSettingsMenu: BlockSettingsMenu = BlockSettingsDropdown,
 	},
 	ref
 ) {
@@ -177,8 +183,16 @@ function ListViewComponent(
 			expandedState,
 			expand,
 			collapse,
+			BlockSettingsMenu,
 		} ),
-		[ isMounted.current, draggedClientIds, expandedState, expand, collapse ]
+		[
+			isMounted.current,
+			draggedClientIds,
+			expandedState,
+			expand,
+			collapse,
+			BlockSettingsMenu,
+		]
 	);
 
 	// If there are no blocks to show, do not render the list view.
@@ -221,5 +235,12 @@ function ListViewComponent(
 export const PrivateListView = forwardRef( ListViewComponent );
 
 export default forwardRef( ( props, ref ) => {
-	return <PrivateListView ref={ ref } { ...props } showAppender={ false } />;
+	return (
+		<PrivateListView
+			ref={ ref }
+			{ ...props }
+			showAppender={ false }
+			blockSettingsMenu={ BlockSettingsDropdown }
+		/>
+	);
 } );