From 65a84961b3ad9410878fda3b92e08d2d8f927623 Mon Sep 17 00:00:00 2001 From: Madhu Dollu Date: Tue, 27 Feb 2024 15:27:23 +0530 Subject: [PATCH] set border panel label based on the controls available (#59358) --- .../src/components/block-inspector/index.js | 12 +++-- .../components/global-styles/border-panel.js | 46 +++++++++++-------- .../src/components/global-styles/index.js | 6 ++- .../inspector-controls-tabs/styles-tab.js | 4 +- packages/block-editor/src/hooks/border.js | 20 ++++++-- 5 files changed, 58 insertions(+), 30 deletions(-) diff --git a/packages/block-editor/src/components/block-inspector/index.js b/packages/block-editor/src/components/block-inspector/index.js index e8df38232306cf..43b3c4dc09327d 100644 --- 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 (
@@ -140,9 +144,7 @@ const BlockInspector = ( { showNoBlockSelectedMessage = true } ) => { /> @@ -251,7 +253,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 5829d90cdf3359..04bb5f9d15b1ad 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 c743b457fc05cc..a8ed9bccaf7df9 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 ) {