Show ellipsis menu in the List View (#35170)

WordPress · Oct 11, 2021 · 5b54f87 · 5b54f87
1 parent ba37ffd
commit 5b54f87
Show file tree

Hide file tree

Showing 12 changed files with 171 additions and 336 deletions.
diff --git a/packages/block-editor/src/components/block-settings-menu-controls/index.js b/packages/block-editor/src/components/block-settings-menu-controls/index.js
@@ -25,17 +25,20 @@ import { store as blockEditorStore } from '../../store';
 const { Fill, Slot } = createSlotFill( 'BlockSettingsMenuControls' );
 
 const BlockSettingsMenuControlsSlot = ( { fillProps, clientIds = null } ) => {
-	const selectedBlocks = useSelect(
+	const { selectedBlocks, selectedClientIds } = useSelect(
 		( select ) => {
 			const { getBlocksByClientId, getSelectedBlockClientIds } = select(
 				blockEditorStore
 			);
 			const ids =
 				clientIds !== null ? clientIds : getSelectedBlockClientIds();
-			return map(
-				compact( getBlocksByClientId( ids ) ),
-				( block ) => block.name
-			);
+			return {
+				selectedBlocks: map(
+					compact( getBlocksByClientId( ids ) ),
+					( block ) => block.name
+				),
+				selectedClientIds: ids,
+			};
 		},
 		[ clientIds ]
 	);
@@ -46,7 +49,7 @@ const BlockSettingsMenuControlsSlot = ( { fillProps, clientIds = null } ) => {
 	const { isGroupable, isUngroupable } = convertToGroupButtonProps;
 	const showConvertToGroupButton = isGroupable || isUngroupable;
 	return (
-		<Slot fillProps={ { ...fillProps, selectedBlocks } }>
+		<Slot fillProps={ { ...fillProps, selectedBlocks, selectedClientIds } }>
 			{ ( fills ) => {
 				if ( fills?.length > 0 || showConvertToGroupButton ) {
 					return (

diff --git a/packages/block-editor/src/components/index.js b/packages/block-editor/src/components/index.js
@@ -70,8 +70,6 @@ export { default as __experimentalLinkControlSearchResults } from './link-contro
 export { default as __experimentalLinkControlSearchItem } from './link-control/search-item';
 export { default as LineHeightControl } from './line-height-control';
 export { default as __experimentalListView } from './list-view';
-export { ListViewBlockFill as __experimentalListViewBlockFill } from './list-view/block-slot';
-export { default as __experimentalListViewEditor } from './list-view/editor';
 export { default as MediaReplaceFlow } from './media-replace-flow';
 export { default as MediaPlaceholder } from './media-placeholder';
 export { default as MediaUpload } from './media-upload';

diff --git a/packages/block-editor/src/components/list-view/block-contents.js b/packages/block-editor/src/components/list-view/block-contents.js
@@ -12,8 +12,6 @@ import { forwardRef } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import { useListViewContext } from './context';
-import ListViewBlockSlot from './block-slot';
 import ListViewBlockSelectButton from './block-select-button';
 import BlockDraggable from '../block-draggable';
 import { store as blockEditorStore } from '../../store';
@@ -32,8 +30,6 @@ const ListViewBlockContents = forwardRef(
 		},
 		ref
 	) => {
-		const { __experimentalFeatures } = useListViewContext();
-
 		const { clientId } = block;
 
 		const { blockMovingClientId, selectedBlockInBlockEditor } = useSelect(
@@ -61,40 +57,23 @@ const ListViewBlockContents = forwardRef(
 
 		return (
 			<BlockDraggable clientIds={ [ block.clientId ] }>
-				{ ( { draggable, onDragStart, onDragEnd } ) =>
-					__experimentalFeatures ? (
-						<ListViewBlockSlot
-							ref={ ref }
-							className={ className }
-							block={ block }
-							onToggleExpanded={ onToggleExpanded }
-							isSelected={ isSelected }
-							position={ position }
-							siblingBlockCount={ siblingBlockCount }
-							level={ level }
-							draggable={ draggable && __experimentalFeatures }
-							onDragStart={ onDragStart }
-							onDragEnd={ onDragEnd }
-							{ ...props }
-						/>
-					) : (
-						<ListViewBlockSelectButton
-							ref={ ref }
-							className={ className }
-							block={ block }
-							onClick={ onClick }
-							onToggleExpanded={ onToggleExpanded }
-							isSelected={ isSelected }
-							position={ position }
-							siblingBlockCount={ siblingBlockCount }
-							level={ level }
-							draggable={ draggable }
-							onDragStart={ onDragStart }
-							onDragEnd={ onDragEnd }
-							{ ...props }
-						/>
-					)
-				}
+				{ ( { draggable, onDragStart, onDragEnd } ) => (
+					<ListViewBlockSelectButton
+						ref={ ref }
+						className={ className }
+						block={ block }
+						onClick={ onClick }
+						onToggleExpanded={ onToggleExpanded }
+						isSelected={ isSelected }
+						position={ position }
+						siblingBlockCount={ siblingBlockCount }
+						level={ level }
+						draggable={ draggable }
+						onDragStart={ onDragStart }
+						onDragEnd={ onDragEnd }
+						{ ...props }
+					/>
+				) }
 			</BlockDraggable>
 		);
 	}

diff --git a/packages/block-editor/src/components/list-view/block-slot.js b/packages/block-editor/src/components/list-view/block-slot.js
diff --git a/packages/block-editor/src/components/list-view/block.js b/packages/block-editor/src/components/list-view/block.js
@@ -9,13 +9,10 @@ import classnames from 'classnames';
 import {
 	__experimentalTreeGridCell as TreeGridCell,
 	__experimentalTreeGridItem as TreeGridItem,
-	MenuGroup,
-	MenuItem,
 } from '@wordpress/components';
-import { __ } from '@wordpress/i18n';
 import { moreVertical } from '@wordpress/icons';
 import { useState, useRef, useEffect } from '@wordpress/element';
-import { useDispatch, useSelect } from '@wordpress/data';
+import { useDispatch } from '@wordpress/data';
 
 /**
  * Internal dependencies
@@ -49,23 +46,14 @@ export default function ListViewBlock( {
 	const cellRef = useRef( null );
 	const [ isHovered, setIsHovered ] = useState( false );
 	const { clientId } = block;
-	const blockParents = useSelect(
-		( select ) => {
-			return select( blockEditorStore ).getBlockParents( clientId );
-		},
-		[ clientId ]
-	);
 
-	const {
-		selectBlock: selectEditorBlock,
-		toggleBlockHighlight,
-	} = useDispatch( blockEditorStore );
+	const { toggleBlockHighlight } = useDispatch( blockEditorStore );
 
 	const hasSiblings = siblingBlockCount > 0;
 	const hasRenderedMovers = showBlockMovers && hasSiblings;
 	const moverCellClassName = classnames(
 		'block-editor-list-view-block__mover-cell',
-		{ 'is-visible': isHovered }
+		{ 'is-visible': isHovered || isSelected }
 	);
 	const {
 		__experimentalFeatures: withExperimentalFeatures,
@@ -74,7 +62,7 @@ export default function ListViewBlock( {
 	} = useListViewContext();
 	const listViewBlockSettingsClassName = classnames(
 		'block-editor-list-view-block__menu-cell',
-		{ 'is-visible': isHovered }
+		{ 'is-visible': isHovered || isSelected }
 	);
 
 	// If ListView has experimental features related to the Persistent List View,
@@ -90,14 +78,6 @@ export default function ListViewBlock( {
 		}
 	}, [] );
 
-	// If ListView has experimental features (such as drag and drop) enabled,
-	// leave the focus handling as it was before, to avoid accidental regressions.
-	useEffect( () => {
-		if ( withExperimentalFeatures && isSelected ) {
-			cellRef.current.focus();
-		}
-	}, [ withExperimentalFeatures, isSelected ] );
-
 	const highlightBlock = withExperimentalPersistentListViewFeatures
 		? toggleBlockHighlight
 		: () => {};
@@ -198,38 +178,13 @@ export default function ListViewBlock( {
 							icon={ moreVertical }
 							toggleProps={ {
 								ref,
+								className: 'block-editor-list-view-block__menu',
 								tabIndex,
 								onFocus,
 							} }
 							disableOpenOnArrowDown
 							__experimentalSelectBlock={ onClick }
-						>
-							{ ( { onClose } ) => (
-								<MenuGroup>
-									<MenuItem
-										onClick={ async () => {
-											if ( blockParents.length ) {
-												// If the block to select is inside a dropdown, we need to open the dropdown.
-												// Otherwise focus won't transfer to the block.
-												for ( const parent of blockParents ) {
-													await selectEditorBlock(
-														parent
-													);
-												}
-											} else {
-												// If clientId is already selected, it won't be focused (see block-wrapper.js)
-												// This removes the selection first to ensure the focus will always switch.
-												await selectEditorBlock( null );
-											}
-											await selectEditorBlock( clientId );
-											onClose();
-										} }
-									>
-										{ __( 'Go to block' ) }
-									</MenuItem>
-								</MenuGroup>
-							) }
-						</BlockSettingsDropdown>
+						/>
 					) }
 				</TreeGridCell>
 			) }

diff --git a/packages/block-editor/src/components/list-view/editor.js b/packages/block-editor/src/components/list-view/editor.js