diff --git a/packages/block-editor/src/components/block-inspector/index.js b/packages/block-editor/src/components/block-inspector/index.js
index beeda0d9b647b..136cdef91286e 100644
--- a/packages/block-editor/src/components/block-inspector/index.js
+++ b/packages/block-editor/src/components/block-inspector/index.js
@@ -28,7 +28,7 @@ import PositionControls from '../inspector-controls-tabs/position-controls-panel
import useBlockInspectorAnimationSettings from './useBlockInspectorAnimationSettings';
import BlockInfo from '../block-info-slot-fill';
import BlockQuickNavigation from '../block-quick-navigation';
-import { getBorderPanelLabel } from '../../hooks/border';
+import { useBorderPanelLabel } from '../../hooks/border';
function BlockInspectorLockedBlocks( { topLevelLockedBlock } ) {
const contentClientIds = useSelect(
@@ -114,6 +114,10 @@ const BlockInspector = ( { showNoBlockSelectedMessage = true } ) => {
selectedBlockClientId
);
+ const borderPanelLabel = useBorderPanelLabel( {
+ blockName: selectedBlockName,
+ } );
+
if ( count > 1 ) {
return (
@@ -138,9 +142,7 @@ const BlockInspector = ( { showNoBlockSelectedMessage = true } ) => {
/>
>
@@ -249,7 +251,7 @@ const BlockInspectorSingleBlock = ( { clientId, blockName } ) => {
[ blockName ]
);
const blockInformation = useBlockDisplayInformation( clientId );
- const borderPanelLabel = getBorderPanelLabel( { blockName } );
+ const borderPanelLabel = useBorderPanelLabel( { blockName } );
return (
diff --git a/packages/block-editor/src/components/global-styles/border-panel.js b/packages/block-editor/src/components/global-styles/border-panel.js
index 5829d90cdf335..04bb5f9d15b1a 100644
--- a/packages/block-editor/src/components/global-styles/border-panel.js
+++ b/packages/block-editor/src/components/global-styles/border-panel.js
@@ -21,21 +21,26 @@ import { useColorsPerOrigin } from './hooks';
import { getValueFromVariable, TOOLSPANEL_DROPDOWNMENU_PROPS } from './utils';
import { overrideOrigins } from '../../store/get-block-settings';
import { setImmutably } from '../../utils/object';
-import { getBorderPanelLabel } from '../../hooks/border';
+import { useBorderPanelLabel } from '../../hooks/border';
import { ShadowPopover, useShadowPresets } from './shadow-panel-components';
export function useHasBorderPanel( settings ) {
- const controls = [
- useHasBorderColorControl( settings ),
- useHasBorderRadiusControl( settings ),
- useHasBorderStyleControl( settings ),
- useHasBorderWidthControl( settings ),
- useHasShadowControl( settings ),
- ];
-
+ const controls = Object.values( useHasBorderPanelControls( settings ) );
return controls.some( Boolean );
}
+export function useHasBorderPanelControls( settings ) {
+ const controls = {
+ hasBorderColor: useHasBorderColorControl( settings ),
+ hasBorderRadius: useHasBorderRadiusControl( settings ),
+ hasBorderStyle: useHasBorderStyleControl( settings ),
+ hasBorderWidth: useHasBorderWidthControl( settings ),
+ hasShadow: useHasShadowControl( settings ),
+ };
+
+ return controls;
+}
+
function useHasBorderColorControl( settings ) {
return settings?.border?.color;
}
@@ -216,14 +221,16 @@ export default function BorderPanel( {
const showBorderByDefault =
defaultControls?.color || defaultControls?.width;
- const label = getBorderPanelLabel( {
+ const hasBorderControl =
+ showBorderColor ||
+ showBorderStyle ||
+ showBorderWidth ||
+ showBorderRadius;
+
+ const label = useBorderPanelLabel( {
blockName: name,
hasShadowControl,
- hasBorderControl:
- showBorderColor ||
- showBorderStyle ||
- showBorderWidth ||
- showBorderRadius,
+ hasBorderControl,
} );
return (
@@ -281,9 +288,12 @@ export default function BorderPanel( {
isShownByDefault={ defaultControls.shadow }
panelId={ panelId }
>
-
- { __( 'Shadow' ) }
-
+ { hasBorderControl ? (
+
+ { __( 'Shadow' ) }
+
+ ) : null }
+
{
- const borderPanelLabel = getBorderPanelLabel( { blockName } );
+ const borderPanelLabel = useBorderPanelLabel( { blockName } );
return (
<>
diff --git a/packages/block-editor/src/hooks/border.js b/packages/block-editor/src/hooks/border.js
index c743b457fc05c..a8ed9bccaf7df 100644
--- a/packages/block-editor/src/hooks/border.js
+++ b/packages/block-editor/src/hooks/border.js
@@ -18,9 +18,14 @@ import { useSelect } from '@wordpress/data';
import { getColorClassName } from '../components/colors';
import InspectorControls from '../components/inspector-controls';
import useMultipleOriginColorsAndGradients from '../components/colors-gradients/use-multiple-origin-colors-and-gradients';
-import { cleanEmptyObject, shouldSkipSerialization } from './utils';
+import {
+ cleanEmptyObject,
+ shouldSkipSerialization,
+ useBlockSettings,
+} from './utils';
import {
useHasBorderPanel,
+ useHasBorderPanelControls,
BorderPanel as StylesBorderPanel,
} from '../components/global-styles';
import { store as blockEditorStore } from '../store';
@@ -220,14 +225,21 @@ export function hasShadowSupport( blockName ) {
return hasBlockSupport( blockName, SHADOW_SUPPORT_KEY );
}
-export function getBorderPanelLabel( {
+export function useBorderPanelLabel( {
blockName,
hasBorderControl,
hasShadowControl,
} = {} ) {
+ const settings = useBlockSettings( blockName );
+ const controls = useHasBorderPanelControls( settings );
+
if ( ! hasBorderControl && ! hasShadowControl && blockName ) {
- hasBorderControl = hasBorderSupport( blockName );
- hasShadowControl = hasShadowSupport( blockName );
+ hasBorderControl =
+ controls?.hasBorderColor ||
+ controls?.hasBorderStyle ||
+ controls?.hasBorderWidth ||
+ controls?.hasBorderRadius;
+ hasShadowControl = controls?.hasShadow;
}
if ( hasBorderControl && hasShadowControl ) {