Show right chevrons for blocks that can be drilled into

WordPress · Apr 8, 2024 · b048414 · b048414
1 parent f71d80a
commit b048414
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 3 deletions.
diff --git a/packages/block-editor/src/components/block-inspector/index.js b/packages/block-editor/src/components/block-inspector/index.js
@@ -17,6 +17,7 @@ import { useSelect } from '@wordpress/data';
 /**
  * Internal dependencies
  */
+import { unlock } from '../../lock-unlock';
 import SkipToSelectedBlock from '../skip-to-selected-block';
 import BlockCard from '../block-card';
 import MultiSelectionInspector, {
@@ -76,6 +77,11 @@ function BlockInspectorContentLockedParent( { clientId } ) {
 		[ clientId ]
 	);
 	const blockInformation = useBlockDisplayInformation( clientId );
+	const contentClientIdsWithControls = useSelect(
+		( select ) =>
+			unlock( select( blockEditorStore ) ).getContentOnlyControlsBlocks(),
+		[]
+	);
 	return (
 		<div className="block-editor-block-inspector">
 			<BlockCard
@@ -86,7 +92,10 @@ function BlockInspectorContentLockedParent( { clientId } ) {
 			<BlockInfo.Slot />
 			{ contentClientIds.length > 0 && (
 				<PanelBody title={ __( 'Content' ) }>
-					<BlockQuickNavigation clientIds={ contentClientIds } />
+					<BlockQuickNavigation
+						clientIds={ contentClientIds }
+						clientIdsWithControls={ contentClientIdsWithControls }
+					/>
 				</PanelBody>
 			) }
 		</div>

diff --git a/packages/block-editor/src/components/block-quick-navigation/index.js b/packages/block-editor/src/components/block-quick-navigation/index.js
@@ -9,19 +9,24 @@ import {
 	Flex,
 	FlexBlock,
 	FlexItem,
+	Icon,
 } from '@wordpress/components';
 import {
 	__experimentalGetBlockLabel,
 	store as blocksStore,
 } from '@wordpress/blocks';
+import { chevronRight } from '@wordpress/icons';
 
 /**
  * Internal dependencies
  */
 import { store as blockEditorStore } from '../../store';
 import BlockIcon from '../block-icon';
 
-export default function BlockQuickNavigation( { clientIds } ) {
+export default function BlockQuickNavigation( {
+	clientIds,
+	clientIdsWithControls,
+} ) {
 	if ( ! clientIds.length ) {
 		return null;
 	}
@@ -31,13 +36,14 @@ export default function BlockQuickNavigation( { clientIds } ) {
 				<BlockQuickNavigationItem
 					key={ clientId }
 					clientId={ clientId }
+					hasControls={ clientIdsWithControls.includes( clientId ) }
 				/>
 			) ) }
 		</VStack>
 	);
 }
 
-function BlockQuickNavigationItem( { clientId } ) {
+function BlockQuickNavigationItem( { clientId, hasControls } ) {
 	const { name, icon, isSelected } = useSelect(
 		( select ) => {
 			const {
@@ -81,6 +87,11 @@ function BlockQuickNavigationItem( { clientId } ) {
 				<FlexBlock style={ { textAlign: 'left' } }>
 					<Truncate>{ name }</Truncate>
 				</FlexBlock>
+				{ hasControls && (
+					<FlexItem>
+						<Icon icon={ chevronRight } />
+					</FlexItem>
+				) }
 			</Flex>
 		</Button>
 	);