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 && ( -
- - - -
+ ) }