Skip to content

Border Panel: Fix incorrect panel label #78830

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
t-hamano merged 5 commits into from
Aug 25, 2026
Merged

Border Panel: Fix incorrect panel label #78830

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
f8bfc03
Border: Fix panel label resolving settings without block context
t-hamano May 30, 2026
ccfe244
Border: Avoid unstable useSelect return in panel label hook
t-hamano May 30, 2026
ce72db2
Border: Drop redundant blockName from panel label hook
t-hamano May 30, 2026
abac999
Merge branch 'trunk' into shadow-panel-label
t-hamano Aug 25, 2026
f612701
Border: Memoize the settings object so shadow preset memos stay valid
t-hamano Aug 25, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 6 additions & 6 deletions packages/block-editor/src/components/block-inspector/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,12 +42,12 @@ import {
} from '../../hooks/block-style-state';

function StyleInspectorSlots( {
blockName,
clientId,
showAdvancedControls = true,
showPositionControls = true,
showBindingsControls = true,
} ) {
const borderPanelLabel = useBorderPanelLabel( { blockName } );
const borderPanelLabel = useBorderPanelLabel( { clientId } );
return (
<>
<InspectorControls.Slot />
Expand Down Expand Up @@ -97,7 +97,7 @@ function StyleStateInspectorSlots( {
isSectionBlock,
selectedBlockStyleState,
} ) {
const borderPanelLabel = useBorderPanelLabel( { blockName } );
const borderPanelLabel = useBorderPanelLabel( { clientId } );
const showLayoutControls =
hasViewportBlockStyleState( selectedBlockStyleState ) &&
! hasPseudoBlockStyleState( selectedBlockStyleState );
Expand Down Expand Up @@ -298,7 +298,6 @@ function BlockInspector() {
<InspectorControlsTabs tabs={ availableTabs } />
) : (
<StyleInspectorSlots
blockName={ renderedBlockName }
showAdvancedControls={ false }
showPositionControls={ false }
showBindingsControls={ false }
Expand Down Expand Up @@ -501,7 +500,6 @@ const BlockInspectorSingleBlock = ( {
<BlockInspectorPreTabsSlot />
{ isEditingStyleState && (
<StyleStateInspectorSlots
blockName={ blockName }
clientId={ renderedBlockClientId }
contentClientIds={ contentClientIds }
isSectionBlock={ isSectionBlock }
Expand Down Expand Up @@ -530,7 +528,9 @@ const BlockInspectorSingleBlock = ( {
<InspectorControls.Slot group="list" ref={ listViewRef } />
<ListViewContentPopover listViewRef={ listViewRef } />
{ ! isSectionBlock && (
<StyleInspectorSlots blockName={ blockName } />
<StyleInspectorSlots
clientId={ renderedBlockClientId }
/>
) }
</>
) }
Expand Down
2 changes: 0 additions & 2 deletions packages/block-editor/src/components/global-styles/border-panel.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -98,7 +98,6 @@ export default function BorderPanel( {
inheritedValue = value,
settings,
panelId,
name,
defaultControls = DEFAULT_CONTROLS,
showInheritanceLabelIndicators = isGlobalStylesInheritanceEnabled(),
} ) {
Expand Down Expand Up @@ -373,7 +372,6 @@ export default function BorderPanel( {
showBorderRadius;

const label = useBorderPanelLabel( {
blockName: name,
hasShadowControl,
hasBorderControl,
} );
Expand Down
2 changes: 1 addition & 1 deletion packages/block-editor/src/components/inspector-controls-tabs/styles-tab.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -103,7 +103,7 @@ const StylesTab = ( {
isSectionBlock,
contentClientIds,
} ) => {
const borderPanelLabel = useBorderPanelLabel( { blockName } );
const borderPanelLabel = useBorderPanelLabel( { clientId } );

return (
<>
Expand Down
32 changes: 24 additions & 8 deletions packages/block-editor/src/hooks/border.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,11 +8,7 @@ import { __ } from '@wordpress/i18n';
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,
useBlockSettings,
} from './utils';
import { cleanEmptyObject, shouldSkipSerialization } from './utils';
import {
useHasBorderPanel,
useHasBorderPanelControls,
Expand All @@ -26,10 +22,13 @@ import {
setStyleForState,
useBlockStyleState,
} from './block-style-state';
import { unlock } from '../lock-unlock';

export const BORDER_SUPPORT_KEY = '__experimentalBorder';
export const SHADOW_SUPPORT_KEY = 'shadow';

const EMPTY_ARRAY = [];

const getColorByProperty = ( colors, property, value ) => {
let matchedColor;

Expand Down Expand Up @@ -251,14 +250,31 @@ export function hasShadowSupport( blockName ) {
}

export function useBorderPanelLabel( {
blockName,
clientId,
hasBorderControl,
hasShadowControl,
} = {} ) {
const settings = useBlockSettings( blockName );
const [ color, radius, style, width, shadow ] = useSelect(
( select ) => {
if ( ! clientId ) {
return EMPTY_ARRAY;
}
const { getBlockSettings } = unlock( select( blockEditorStore ) );
return getBlockSettings(
clientId,
'border.color',
'border.radius',
'border.style',
'border.width',
'shadow'
);
},
[ clientId ]
);
const settings = { border: { color, radius, style, width }, shadow };
Comment thread
t-hamano marked this conversation as resolved.
Resolved
const controls = useHasBorderPanelControls( settings );

if ( ! hasBorderControl && ! hasShadowControl && blockName ) {
if ( ! hasBorderControl && ! hasShadowControl && clientId ) {
hasBorderControl =
controls?.hasBorderColor ||
controls?.hasBorderStyle ||
Expand Down
Loading