make the default list view have no more controls

WordPress · Feb 15, 2023 · e956a19 · e956a19
1 parent e32bb13
commit e956a19
Show file tree

Hide file tree

Showing 5 changed files with 42 additions and 36 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
@@ -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 (
 		<ListViewLeaf
 			className={ classes }
@@ -313,22 +308,24 @@ function ListViewBlock( {
 					className={ listViewBlockSettingsClassName }
 					aria-selected={ !! isSelected || forceSelectionContentLock }
 				>
-					{ ( { 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 }
-						/>
-					) }
+					{ 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,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,15 +177,15 @@ function ListView(
 			expandedState,
 			expand,
 			collapse,
-			LeafMoreMenu,
+			MoreMenuComponent,
 		} ),
 		[
 			isMounted.current,
 			draggedClientIds,
 			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
@@ -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,
 				] ) }
 			>
-				<ListView LeafMoreMenu={ LeafMoreMenu } />
+				<ListView MoreMenuComponent={ BlockSettingsDropdown } />
 			</div>
 		</div>
 	);