From b048414a6e54e6f546f723fa4b2f985c3082a9c8 Mon Sep 17 00:00:00 2001
From: Daniel Richards <daniel.richards@automattic.com>
Date: Mon, 8 Apr 2024 17:05:21 +0800
Subject: [PATCH] Show right chevrons for blocks that can be drilled into

---
 .../src/components/block-inspector/index.js       | 11 ++++++++++-
 .../components/block-quick-navigation/index.js    | 15 +++++++++++++--
 2 files changed, 23 insertions(+), 3 deletions(-)

diff --git a/packages/block-editor/src/components/block-inspector/index.js b/packages/block-editor/src/components/block-inspector/index.js
index 8752ada5e72564..fa5dece1851c6d 100644
--- 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
index 7a0e7984b83cb7..8ed0d1840e5836 100644
--- a/packages/block-editor/src/components/block-quick-navigation/index.js
+++ b/packages/block-editor/src/components/block-quick-navigation/index.js
@@ -9,11 +9,13 @@ import {
 	Flex,
 	FlexBlock,
 	FlexItem,
+	Icon,
 } from '@wordpress/components';
 import {
 	__experimentalGetBlockLabel,
 	store as blocksStore,
 } from '@wordpress/blocks';
+import { chevronRight } from '@wordpress/icons';
 
 /**
  * Internal dependencies
@@ -21,7 +23,10 @@ import {
 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>
 	);