Replace OffCanvasEditor in browse mode with the List View component (#…

…50287) 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 · b6d99dd · b6d99dd · github-actions · May 9, 2023
1 parent 2714f84
commit b6d99dd
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 }
 				/>