set border panel label based on the controls available (#59358)

WordPress · Feb 27, 2024 · 65a8496 · 65a8496
1 parent d9a49b4
commit 65a8496
Show file tree

Hide file tree

Showing 5 changed files with 58 additions and 30 deletions.
diff --git a/packages/block-editor/src/components/block-inspector/index.js b/packages/block-editor/src/components/block-inspector/index.js
@@ -30,7 +30,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(
@@ -116,6 +116,10 @@ const BlockInspector = ( { showNoBlockSelectedMessage = true } ) => {
 		selectedBlockClientId
 	);
 
+	const borderPanelLabel = useBorderPanelLabel( {
+		blockName: selectedBlockName,
+	} );
+
 	if ( count > 1 ) {
 		return (
 			<div className="block-editor-block-inspector">
@@ -140,9 +144,7 @@ const BlockInspector = ( { showNoBlockSelectedMessage = true } ) => {
 						/>
 						<InspectorControls.Slot
 							group="border"
-							label={ getBorderPanelLabel( {
-								blockName: selectedBlockName,
-							} ) }
+							label={ borderPanelLabel }
 						/>
 						<InspectorControls.Slot group="styles" />
 					</>
@@ -251,7 +253,7 @@ const BlockInspectorSingleBlock = ( { clientId, blockName } ) => {
 		[ blockName ]
 	);
 	const blockInformation = useBlockDisplayInformation( clientId );
-	const borderPanelLabel = getBorderPanelLabel( { blockName } );
+	const borderPanelLabel = useBorderPanelLabel( { blockName } );
 
 	return (
 		<div className="block-editor-block-inspector">

diff --git 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 }
 				>
-					<BaseControl.VisualLabel as="legend">
-						{ __( 'Shadow' ) }
-					</BaseControl.VisualLabel>
+					{ hasBorderControl ? (
+						<BaseControl.VisualLabel as="legend">
+							{ __( 'Shadow' ) }
+						</BaseControl.VisualLabel>
+					) : null }
+
 					<ItemGroup isBordered isSeparated>
 						<ShadowPopover
 							shadow={ shadow }

diff --git a/packages/block-editor/src/components/global-styles/index.js b/packages/block-editor/src/components/global-styles/index.js
@@ -19,7 +19,11 @@ export {
 	default as DimensionsPanel,
 	useHasDimensionsPanel,
 } from './dimensions-panel';
-export { default as BorderPanel, useHasBorderPanel } from './border-panel';
+export {
+	default as BorderPanel,
+	useHasBorderPanel,
+	useHasBorderPanelControls,
+} from './border-panel';
 export { default as ColorPanel, useHasColorPanel } from './color-panel';
 export { default as FiltersPanel, useHasFiltersPanel } from './filters-panel';
 export {

diff --git a/packages/block-editor/src/components/inspector-controls-tabs/styles-tab.js b/packages/block-editor/src/components/inspector-controls-tabs/styles-tab.js
@@ -11,10 +11,10 @@ import { __ } from '@wordpress/i18n';
 import BlockStyles from '../block-styles';
 import DefaultStylePicker from '../default-style-picker';
 import InspectorControls from '../inspector-controls';
-import { getBorderPanelLabel } from '../../hooks/border';
+import { useBorderPanelLabel } from '../../hooks/border';
 
 const StylesTab = ( { blockName, clientId, hasBlockStyles } ) => {
-	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
@@ -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 ) {