From f968cd5b710be2cdb5c13c480c035bfd7a59fc23 Mon Sep 17 00:00:00 2001
From: ntsekouras <ntsekouras@outlook.com>
Date: Wed, 28 Aug 2024 17:08:45 +0300
Subject: [PATCH 1/3] ContentOnly: Add support for block styles on top-level
 contentOnly locked blocks

---
 .../src/components/block-inspector/index.js   | 40 +++++++++++++------
 1 file changed, 28 insertions(+), 12 deletions(-)

diff --git a/packages/block-editor/src/components/block-inspector/index.js b/packages/block-editor/src/components/block-inspector/index.js
index 9daf29f8043bb..6bbd28f85ee9e 100644
--- a/packages/block-editor/src/components/block-inspector/index.js
+++ b/packages/block-editor/src/components/block-inspector/index.js
@@ -32,19 +32,37 @@ import { useBorderPanelLabel } from '../../hooks/border';
 
 import { unlock } from '../../lock-unlock';
 
+function BlockStylesPanel( { clientId } ) {
+	return (
+		<div>
+			<PanelBody title={ __( 'Styles' ) }>
+				<BlockStyles clientId={ clientId } />
+			</PanelBody>
+		</div>
+	);
+}
+
 function BlockInspectorLockedBlocks( { topLevelLockedBlock } ) {
-	const contentClientIds = useSelect(
+	const { contentClientIds, hasBlockStyles } = useSelect(
 		( select ) => {
 			const {
 				getClientIdsOfDescendants,
 				getBlockName,
 				getBlockEditingMode,
 			} = select( blockEditorStore );
-			return getClientIdsOfDescendants( topLevelLockedBlock ).filter(
-				( clientId ) =>
-					getBlockName( clientId ) !== 'core/list-item' &&
-					getBlockEditingMode( clientId ) === 'contentOnly'
-			);
+			const { getBlockStyles } = select( blocksStore );
+			return {
+				contentClientIds: getClientIdsOfDescendants(
+					topLevelLockedBlock
+				).filter(
+					( clientId ) =>
+						getBlockName( clientId ) !== 'core/list-item' &&
+						getBlockEditingMode( clientId ) === 'contentOnly'
+				),
+				hasBlockStyles: !! getBlockStyles(
+					getBlockName( topLevelLockedBlock )
+				)?.length,
+			};
 		},
 		[ topLevelLockedBlock ]
 	);
@@ -57,6 +75,9 @@ function BlockInspectorLockedBlocks( { topLevelLockedBlock } ) {
 			/>
 			<BlockVariationTransforms blockClientId={ topLevelLockedBlock } />
 			<BlockInfo.Slot />
+			{ hasBlockStyles && (
+				<BlockStylesPanel clientId={ topLevelLockedBlock } />
+			) }
 			{ contentClientIds.length > 0 && (
 				<PanelBody title={ __( 'Content' ) }>
 					<BlockQuickNavigation clientIds={ contentClientIds } />
@@ -81,7 +102,6 @@ const BlockInspector = ( { showNoBlockSelectedMessage = true } ) => {
 			getContentLockingParent,
 			getTemplateLock,
 		} = unlock( select( blockEditorStore ) );
-
 		const _selectedBlockClientId = getSelectedBlockClientId();
 		const _selectedBlockName =
 			_selectedBlockClientId && getBlockName( _selectedBlockClientId );
@@ -276,11 +296,7 @@ const BlockInspectorSingleBlock = ( { clientId, blockName } ) => {
 			{ ! showTabs && (
 				<>
 					{ hasBlockStyles && (
-						<div>
-							<PanelBody title={ __( 'Styles' ) }>
-								<BlockStyles clientId={ clientId } />
-							</PanelBody>
-						</div>
+						<BlockStylesPanel clientId={ clientId } />
 					) }
 					<InspectorControls.Slot />
 					<InspectorControls.Slot group="list" />

From 09b5a08313a642ec1f63a013b23e18d69fe5b021 Mon Sep 17 00:00:00 2001
From: ntsekouras <ntsekouras@outlook.com>
Date: Thu, 29 Aug 2024 12:44:21 +0300
Subject: [PATCH 2/3] address feedback

---
 .../src/components/block-inspector/index.js   | 42 ++++++++++---------
 1 file changed, 22 insertions(+), 20 deletions(-)

diff --git a/packages/block-editor/src/components/block-inspector/index.js b/packages/block-editor/src/components/block-inspector/index.js
index 6bbd28f85ee9e..59976ed860c5a 100644
--- a/packages/block-editor/src/components/block-inspector/index.js
+++ b/packages/block-editor/src/components/block-inspector/index.js
@@ -9,6 +9,7 @@ import {
 } from '@wordpress/blocks';
 import { PanelBody, __unstableMotion as motion } from '@wordpress/components';
 import { useSelect } from '@wordpress/data';
+import { useMemo } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -34,37 +35,36 @@ import { unlock } from '../../lock-unlock';
 
 function BlockStylesPanel( { clientId } ) {
 	return (
-		<div>
-			<PanelBody title={ __( 'Styles' ) }>
-				<BlockStyles clientId={ clientId } />
-			</PanelBody>
-		</div>
+		<PanelBody title={ __( 'Styles' ) }>
+			<BlockStyles clientId={ clientId } />
+		</PanelBody>
 	);
 }
 
 function BlockInspectorLockedBlocks( { topLevelLockedBlock } ) {
+	const { getBlockName, getBlockEditingMode } = useSelect( blockEditorStore );
 	const { contentClientIds, hasBlockStyles } = useSelect(
 		( select ) => {
-			const {
-				getClientIdsOfDescendants,
-				getBlockName,
-				getBlockEditingMode,
-			} = select( blockEditorStore );
+			const { getClientIdsOfDescendants } = select( blockEditorStore );
 			const { getBlockStyles } = select( blocksStore );
 			return {
-				contentClientIds: getClientIdsOfDescendants(
-					topLevelLockedBlock
-				).filter(
-					( clientId ) =>
-						getBlockName( clientId ) !== 'core/list-item' &&
-						getBlockEditingMode( clientId ) === 'contentOnly'
-				),
+				contentClientIds:
+					getClientIdsOfDescendants( topLevelLockedBlock ),
 				hasBlockStyles: !! getBlockStyles(
 					getBlockName( topLevelLockedBlock )
 				)?.length,
 			};
 		},
-		[ topLevelLockedBlock ]
+		[ topLevelLockedBlock, getBlockName ]
+	);
+	const eligibleContentClientIds = useMemo(
+		() =>
+			contentClientIds.filter(
+				( clientId ) =>
+					getBlockName( clientId ) !== 'core/list-item' &&
+					getBlockEditingMode( clientId ) === 'contentOnly'
+			),
+		[ contentClientIds, getBlockName, getBlockEditingMode ]
 	);
 	const blockInformation = useBlockDisplayInformation( topLevelLockedBlock );
 	return (
@@ -78,9 +78,11 @@ function BlockInspectorLockedBlocks( { topLevelLockedBlock } ) {
 			{ hasBlockStyles && (
 				<BlockStylesPanel clientId={ topLevelLockedBlock } />
 			) }
-			{ contentClientIds.length > 0 && (
+			{ eligibleContentClientIds.length > 0 && (
 				<PanelBody title={ __( 'Content' ) }>
-					<BlockQuickNavigation clientIds={ contentClientIds } />
+					<BlockQuickNavigation
+						clientIds={ eligibleContentClientIds }
+					/>
 				</PanelBody>
 			) }
 		</div>

From c6bb728acd2af88e98eb71f94f0bd1dc30de9536 Mon Sep 17 00:00:00 2001
From: ntsekouras <ntsekouras@outlook.com>
Date: Thu, 29 Aug 2024 15:04:03 +0300
Subject: [PATCH 3/3] feedback

---
 .../src/components/block-inspector/index.js   | 45 +++++++++----------
 1 file changed, 21 insertions(+), 24 deletions(-)

diff --git a/packages/block-editor/src/components/block-inspector/index.js b/packages/block-editor/src/components/block-inspector/index.js
index 59976ed860c5a..75b5239f47d6c 100644
--- a/packages/block-editor/src/components/block-inspector/index.js
+++ b/packages/block-editor/src/components/block-inspector/index.js
@@ -9,7 +9,6 @@ import {
 } from '@wordpress/blocks';
 import { PanelBody, __unstableMotion as motion } from '@wordpress/components';
 import { useSelect } from '@wordpress/data';
-import { useMemo } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -42,29 +41,29 @@ function BlockStylesPanel( { clientId } ) {
 }
 
 function BlockInspectorLockedBlocks( { topLevelLockedBlock } ) {
-	const { getBlockName, getBlockEditingMode } = useSelect( blockEditorStore );
-	const { contentClientIds, hasBlockStyles } = useSelect(
+	const contentClientIds = useSelect(
 		( select ) => {
-			const { getClientIdsOfDescendants } = select( blockEditorStore );
-			const { getBlockStyles } = select( blocksStore );
-			return {
-				contentClientIds:
-					getClientIdsOfDescendants( topLevelLockedBlock ),
-				hasBlockStyles: !! getBlockStyles(
-					getBlockName( topLevelLockedBlock )
-				)?.length,
-			};
-		},
-		[ topLevelLockedBlock, getBlockName ]
-	);
-	const eligibleContentClientIds = useMemo(
-		() =>
-			contentClientIds.filter(
+			const {
+				getClientIdsOfDescendants,
+				getBlockName,
+				getBlockEditingMode,
+			} = select( blockEditorStore );
+			return getClientIdsOfDescendants( topLevelLockedBlock ).filter(
 				( clientId ) =>
 					getBlockName( clientId ) !== 'core/list-item' &&
 					getBlockEditingMode( clientId ) === 'contentOnly'
-			),
-		[ contentClientIds, getBlockName, getBlockEditingMode ]
+			);
+		},
+		[ topLevelLockedBlock ]
+	);
+	const hasBlockStyles = useSelect(
+		( select ) => {
+			const { getBlockName } = select( blockEditorStore );
+			const { getBlockStyles } = select( blocksStore );
+			return !! getBlockStyles( getBlockName( topLevelLockedBlock ) )
+				?.length;
+		},
+		[ topLevelLockedBlock ]
 	);
 	const blockInformation = useBlockDisplayInformation( topLevelLockedBlock );
 	return (
@@ -78,11 +77,9 @@ function BlockInspectorLockedBlocks( { topLevelLockedBlock } ) {
 			{ hasBlockStyles && (
 				<BlockStylesPanel clientId={ topLevelLockedBlock } />
 			) }
-			{ eligibleContentClientIds.length > 0 && (
+			{ contentClientIds.length > 0 && (
 				<PanelBody title={ __( 'Content' ) }>
-					<BlockQuickNavigation
-						clientIds={ eligibleContentClientIds }
-					/>
+					<BlockQuickNavigation clientIds={ contentClientIds } />
 				</PanelBody>
 			) }
 		</div>