Experiment with block drill down in contentOnly mode

packages/block-editor/src/components/block-card/index.js

@@ -13,14 +13,15 @@ import {
 	__experimentalVStack as VStack,
 } from '@wordpress/components';
 import { chevronLeft, chevronRight } from '@wordpress/icons';
-import { __, isRTL } from '@wordpress/i18n';
+import { __, isRTL, sprintf } from '@wordpress/i18n';
 import { useSelect, useDispatch } from '@wordpress/data';
 
 /**
  * Internal dependencies
  */
 import BlockIcon from '../block-icon';
 import { store as blockEditorStore } from '../../store';
+import { unlock } from '../../lock-unlock';
 
 function BlockCard( { title, icon, description, blockType, className } ) {
 	if ( blockType ) {
@@ -31,29 +32,51 @@ function BlockCard( { title, icon, description, blockType, className } ) {
 		( { title, icon, description } = blockType );
 	}
 
-	const { parentNavBlockClientId } = useSelect( ( select ) => {
-		const { getSelectedBlockClientId, getBlockParentsByBlockName } =
-			select( blockEditorStore );
+	const { parentNavBlockClientId, contentLockedParentClientId } = useSelect(
+		( select ) => {
+			const {
+				getSelectedBlockClientId,
+				getBlockParentsByBlockName,
+				getContentLockingParent,
+			} = unlock( select( blockEditorStore ) );
 
-		const _selectedBlockClientId = getSelectedBlockClientId();
+			const _selectedBlockClientId = getSelectedBlockClientId();
 
-		return {
-			parentNavBlockClientId: getBlockParentsByBlockName(
-				_selectedBlockClientId,
-				'core/navigation',
-				true
-			)[ 0 ],
-		};
-	}, [] );
+			return {
+				parentNavBlockClientId: getBlockParentsByBlockName(
+					_selectedBlockClientId,
+					'core/navigation',
+					true
+				)[ 0 ],
+				contentLockedParentClientId: getContentLockingParent(
+					_selectedBlockClientId
+				),
+			};
+		},
+		[]
+	);
+
+	const hasContentLockedParent = contentLockedParentClientId !== undefined;
 
 	const { selectBlock } = useDispatch( blockEditorStore );
 
 	return (
 		<div className={ clsx( 'block-editor-block-card', className ) }>
-			{ parentNavBlockClientId && ( // This is only used by the Navigation block for now. It's not ideal having Navigation block specific code here.
+			{ ( parentNavBlockClientId || hasContentLockedParent ) && ( // This is only used by the Navigation block for now. It's not ideal having Navigation block specific code here.
 				<Button
-					onClick={ () => selectBlock( parentNavBlockClientId ) }
-					label={ __( 'Go to parent Navigation block' ) }
+					onClick={ () => {
+						const targetClientId =
+							parentNavBlockClientId ||
+							contentLockedParentClientId;
+						selectBlock( targetClientId );
+					} }
+					label={ sprintf(
+						// Translators: Go to the parent navigation block or the parent block.
+						__( 'Go to %s' ),
+						parentNavBlockClientId
+							? 'parent navigation block'
+							: 'parent block'
+					) }
 					style={
 						// TODO: This style override is also used in ToolsPanelHeader.
 						// It should be supported out-of-the-box by Button.

packages/block-editor/src/components/block-inspector/index.js

@@ -98,7 +98,6 @@ const BlockInspector = ( { showNoBlockSelectedMessage = true } ) => {
 			getSelectedBlockClientId,
 			getSelectedBlockCount,
 			getBlockName,
-			getContentLockingParent,
 			getTemplateLock,
 		} = unlock( select( blockEditorStore ) );
 		const _selectedBlockClientId = getSelectedBlockClientId();
@@ -113,11 +112,10 @@ const BlockInspector = ( { showNoBlockSelectedMessage = true } ) => {
 			selectedBlockName: _selectedBlockName,
 			blockType: _blockType,
 			topLevelLockedBlock:
-				getContentLockingParent( _selectedBlockClientId ) ||
-				( getTemplateLock( _selectedBlockClientId ) === 'contentOnly' ||
+				getTemplateLock( _selectedBlockClientId ) === 'contentOnly' ||
 				_selectedBlockName === 'core/block'
 					? _selectedBlockClientId
-					: undefined ),
+					: undefined,
 		};
 	}, [] );
 

packages/block-editor/src/components/block-quick-navigation/index.js

@@ -9,7 +9,10 @@ import {
 	Flex,
 	FlexBlock,
 	FlexItem,
+	Icon,
 } from '@wordpress/components';
+import { chevronLeftSmall, chevronRightSmall } from '@wordpress/icons';
+import { isRTL } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
@@ -42,18 +45,24 @@ function BlockQuickNavigationItem( { clientId, onSelect } ) {
 		clientId,
 		context: 'list-view',
 	} );
-	const { isSelected } = useSelect(
+
+	const isSynced = blockInformation?.isSynced;
+
+	const { isSelected, showDrillDown } = useSelect(
 		( select ) => {
 			const { isBlockSelected, hasSelectedInnerBlock } =
 				select( blockEditorStore );
 
+			const _showDrillDown = ! isSynced;
+
 			return {
 				isSelected:
 					isBlockSelected( clientId ) ||
 					hasSelectedInnerBlock( clientId, /* deep: */ true ),
+				showDrillDown: _showDrillDown,
 			};
 		},
-		[ clientId ]
+		[ isSynced, clientId ]
 	);
 	const { selectBlock } = useDispatch( blockEditorStore );
 
@@ -76,6 +85,16 @@ function BlockQuickNavigationItem( { clientId, onSelect } ) {
 				<FlexBlock style={ { textAlign: 'left' } }>
 					<Truncate>{ blockTitle }</Truncate>
 				</FlexBlock>
+
+				{ showDrillDown && (
+					<FlexItem>
+						<Icon
+							icon={
+								isRTL() ? chevronLeftSmall : chevronRightSmall
+							}
+						/>
+					</FlexItem>
+				) }
 			</Flex>
 		</Button>
 	);