From 5d317d88f12bb52557b7dff097b5db5574bee9f8 Mon Sep 17 00:00:00 2001
From: Robert Anderson <robert@noisysocks.com>
Date: Mon, 24 Apr 2023 12:56:56 +1000
Subject: [PATCH] Show content block as selected if a descendant is selected

---
 .../components/content-blocks-list/index.js   | 39 +++++++++++--------
 1 file changed, 23 insertions(+), 16 deletions(-)

diff --git a/packages/block-editor/src/components/content-blocks-list/index.js b/packages/block-editor/src/components/content-blocks-list/index.js
index cf893004c4fe5..3de4fcda3c5d2 100644
--- a/packages/block-editor/src/components/content-blocks-list/index.js
+++ b/packages/block-editor/src/components/content-blocks-list/index.js
@@ -17,26 +17,24 @@ import { store as blockEditorStore } from '../../store';
 import BlockIcon from '../block-icon';
 
 export default function ContentBlocksList( { rootClientId } ) {
-	const { contentBlocks, selectedBlockClientId } = useSelect(
+	const contentBlocks = useSelect(
 		( select ) => {
 			const {
+				getSelectedBlockClientId,
 				__experimentalGetContentClientIdsTree,
 				getBlockName,
-				getSelectedBlockClientId,
 			} = select( blockEditorStore );
-			return {
-				contentBlocks: __experimentalGetContentClientIdsTree(
-					rootClientId
-				)
-					.map( ( block ) => ( {
-						...block,
-						blockName: getBlockName( block.clientId ),
-					} ) )
-					.filter(
-						( { blockName } ) => blockName !== 'core/list-item'
+			const selectedBlockClientId = getSelectedBlockClientId();
+			return __experimentalGetContentClientIdsTree( rootClientId )
+				.map( ( block ) => ( {
+					...block,
+					blockName: getBlockName( block.clientId ),
+					isSelected: blockHasDescendant(
+						block,
+						selectedBlockClientId
 					),
-				selectedBlockClientId: getSelectedBlockClientId(),
-			};
+				} ) )
+				.filter( ( { blockName } ) => blockName !== 'core/list-item' );
 		},
 		[ rootClientId ]
 	);
@@ -49,12 +47,12 @@ export default function ContentBlocksList( { rootClientId } ) {
 
 	return (
 		<VStack spacing={ 1 }>
-			{ contentBlocks.map( ( { clientId, blockName } ) => {
+			{ contentBlocks.map( ( { clientId, blockName, isSelected } ) => {
 				const blockType = getBlockType( blockName );
 				return (
 					<Button
 						key={ clientId }
-						isPressed={ clientId === selectedBlockClientId }
+						isPressed={ isSelected }
 						onClick={ () => selectBlock( clientId ) }
 					>
 						<HStack justify="flex-start">
@@ -67,3 +65,12 @@ export default function ContentBlocksList( { rootClientId } ) {
 		</VStack>
 	);
 }
+
+function blockHasDescendant( block, clientId ) {
+	return (
+		block.clientId === clientId ||
+		block.innerBlocks.some( ( child ) =>
+			blockHasDescendant( child, clientId )
+		)
+	);
+}