diff --git a/packages/block-editor/src/components/block-inspector/index.js b/packages/block-editor/src/components/block-inspector/index.js
index 9daf29f8043bba..75b5239f47d6cc 100644
--- a/packages/block-editor/src/components/block-inspector/index.js
+++ b/packages/block-editor/src/components/block-inspector/index.js
@@ -32,6 +32,14 @@ import { useBorderPanelLabel } from '../../hooks/border';
import { unlock } from '../../lock-unlock';
+function BlockStylesPanel( { clientId } ) {
+ return (
+
+
+
+ );
+}
+
function BlockInspectorLockedBlocks( { topLevelLockedBlock } ) {
const contentClientIds = useSelect(
( select ) => {
@@ -48,6 +56,15 @@ function BlockInspectorLockedBlocks( { topLevelLockedBlock } ) {
},
[ topLevelLockedBlock ]
);
+ const hasBlockStyles = useSelect(
+ ( select ) => {
+ const { getBlockName } = select( blockEditorStore );
+ const { getBlockStyles } = select( blocksStore );
+ return !! getBlockStyles( getBlockName( topLevelLockedBlock ) )
+ ?.length;
+ },
+ [ topLevelLockedBlock ]
+ );
const blockInformation = useBlockDisplayInformation( topLevelLockedBlock );
return (
@@ -57,6 +74,9 @@ function BlockInspectorLockedBlocks( { topLevelLockedBlock } ) {
/>
+ { hasBlockStyles && (
+
+ ) }
{ contentClientIds.length > 0 && (
@@ -81,7 +101,6 @@ const BlockInspector = ( { showNoBlockSelectedMessage = true } ) => {
getContentLockingParent,
getTemplateLock,
} = unlock( select( blockEditorStore ) );
-
const _selectedBlockClientId = getSelectedBlockClientId();
const _selectedBlockName =
_selectedBlockClientId && getBlockName( _selectedBlockClientId );
@@ -276,11 +295,7 @@ const BlockInspectorSingleBlock = ( { clientId, blockName } ) => {
{ ! showTabs && (
<>
{ hasBlockStyles && (
-
+
) }