Replace OffCanvasEditor in browse mode with the List View component

Add context to the block icon in list view update comment add another prop to list view change fixed color renamed blockSettingsMenu prop
WordPress · May 9, 2023 · 3060636 · 3060636
1 parent 86bc120
commit 3060636
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 8 deletions.
diff --git a/packages/block-editor/src/components/list-view/block-select-button.js b/packages/block-editor/src/components/list-view/block-select-button.js
@@ -84,7 +84,11 @@ function ListViewBlockSelectButton(
 				aria-expanded={ isExpanded }
 			>
 				<ListViewExpander onClick={ onToggleExpanded } />
-				<BlockIcon icon={ blockInformation?.icon } showColors />
+				<BlockIcon
+					icon={ blockInformation?.icon }
+					showColors
+					context="list-view"
+				/>
 				<HStack
 					alignment="center"
 					className="block-editor-list-view-block-select-button__label-wrapper"

diff --git a/packages/block-editor/src/components/list-view/index.js b/packages/block-editor/src/components/list-view/index.js
@@ -65,6 +65,7 @@ export const BLOCK_LIST_ITEM_HEIGHT = 36;
  * @param {?ComponentType} props.blockSettingsMenu       Optional more menu substitution. Defaults to the standard `BlockSettingsDropdown` component.
  * @param {string}         props.rootClientId            The client id of the root block from which we determine the blocks to show in the list.
  * @param {string}         props.description             Optional accessible description for the tree grid component.
+ * @param {?Function}      props.onSelect                Optional callback to be invoked when a block is selected. Receives the block object that was selected.
  * @param {Function}       props.renderAdditionalBlockUI Function that renders additional block content UI.
  * @param {Ref}            ref                           Forwarded ref
  */
@@ -78,6 +79,7 @@ function ListViewComponent(
 		blockSettingsMenu: BlockSettingsMenu = BlockSettingsDropdown,
 		rootClientId,
 		description,
+		onSelect,
 		renderAdditionalBlockUI,
 	},
 	ref
@@ -97,6 +99,7 @@ function ListViewComponent(
 	const { clientIdsTree, draggedClientIds, selectedClientIds } =
 		useListViewClientIds( { blocks, rootClientId } );
 
+	const { getBlock } = useSelect( blockEditorStore );
 	const { visibleBlockCount, shouldShowInnerBlocks } = useSelect(
 		( select ) => {
 			const {
@@ -130,11 +133,14 @@ function ListViewComponent(
 		setExpandedState,
 	} );
 	const selectEditorBlock = useCallback(
-		( event, clientId ) => {
-			updateBlockSelection( event, clientId );
-			setSelectedTreeId( clientId );
+		( event, blockClientId ) => {
+			updateBlockSelection( event, blockClientId );
+			setSelectedTreeId( blockClientId );
+			if ( onSelect ) {
+				onSelect( getBlock( blockClientId ) );
+			}
 		},
-		[ setSelectedTreeId, updateBlockSelection ]
+		[ setSelectedTreeId, updateBlockSelection, onSelect, getBlock ]
 	);
 	useEffect( () => {
 		isMounted.current = true;
@@ -268,6 +274,7 @@ export default forwardRef( ( props, ref ) => {
 			showAppender={ false }
 			blockSettingsMenu={ BlockSettingsDropdown }
 			rootClientId={ null }
+			onSelect={ null }
 			renderAdditionalBlockUICallback={ null }
 		/>
 	);

diff --git a/...site/src/components/sidebar-navigation-screen-navigation-menus/navigation-menu-content.js b/...site/src/components/sidebar-navigation-screen-navigation-menus/navigation-menu-content.js
@@ -144,7 +144,7 @@ export default function NavigationMenuContent( { rootClientId, onSelect } ) {
 		};
 	}, [ shouldKeepLoading, clientIdsTree, isLoading ] );
 
-	const { OffCanvasEditor, LeafMoreMenu } = unlock( blockEditorPrivateApis );
+	const { PrivateListView, LeafMoreMenu } = unlock( blockEditorPrivateApis );
 
 	const offCanvasOnselect = useCallback(
 		( block ) => {
@@ -181,14 +181,14 @@ export default function NavigationMenuContent( { rootClientId, onSelect } ) {
 		<>
 			{ isLoading && <NavigationMenuLoader /> }
 			{ ! isLoading && (
-				<OffCanvasEditor
+				<PrivateListView
 					blocks={
 						isSinglePageList
 							? clientIdsTree[ 0 ].innerBlocks
 							: clientIdsTree
 					}
 					onSelect={ offCanvasOnselect }
-					LeafMoreMenu={ LeafMoreMenu }
+					blockSettingsMenu={ LeafMoreMenu }
 					showAppender={ false }
 					renderAdditionalBlockUI={ renderAdditionalBlockUICallback }
 				/>