@wordpress/block-editor 16.0.1-next.v.202607070741.0 → 16.1.0

package/build-module/components/global-styles/border-panel.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/global-styles/border-panel.js"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport {\n\tBorderBoxControl,\n\t__experimentalHasSplitBorders as hasSplitBorders,\n\t__experimentalIsDefinedBorder as isDefinedBorder,\n\t__experimentalToolsPanel as ToolsPanel,\n\t__experimentalToolsPanelItem as ToolsPanelItem,\n\tBaseControl,\n} from '@wordpress/components';\nimport { useCallback, useMemo } from '@wordpress/element';\nimport { __ } from '@wordpress/i18n';\nimport { getValueFromVariable } from '@wordpress/global-styles-engine';\n\n/**\n * Internal dependencies\n */\nimport BorderRadiusControl from '../border-radius-control';\nimport { useColorsPerOrigin } from './hooks';\nimport { useToolsPanelDropdownMenuProps } from './utils';\nimport { setImmutably } from '../../utils/object';\nimport { useBorderPanelLabel } from '../../hooks/border';\nimport { ShadowPopover, useShadowPresets } from './shadow-panel-components';\n\nexport function useHasBorderPanel( settings ) {\n\tconst controls = Object.values( useHasBorderPanelControls( settings ) );\n\treturn controls.some( Boolean );\n}\n\nexport function useHasBorderPanelControls( settings ) {\n\tconst controls = {\n\t\thasBorderColor: useHasBorderColorControl( settings ),\n\t\thasBorderRadius: useHasBorderRadiusControl( settings ),\n\t\thasBorderStyle: useHasBorderStyleControl( settings ),\n\t\thasBorderWidth: useHasBorderWidthControl( settings ),\n\t\thasShadow: useHasShadowControl( settings ),\n\t};\n\n\treturn controls;\n}\n\nfunction useHasBorderColorControl( settings ) {\n\treturn settings?.border?.color;\n}\n\nfunction useHasBorderRadiusControl( settings ) {\n\treturn settings?.border?.radius;\n}\n\nfunction useHasBorderStyleControl( settings ) {\n\treturn settings?.border?.style;\n}\n\nfunction useHasBorderWidthControl( settings ) {\n\treturn settings?.border?.width;\n}\n\nfunction useHasShadowControl( settings ) {\n\tconst shadows = useShadowPresets( settings );\n\treturn !! settings?.shadow && shadows.length > 0;\n}\n\nfunction BorderToolsPanel( {\n\tresetAllFilter,\n\tonChange,\n\tvalue,\n\tpanelId,\n\tchildren,\n\tlabel,\n} ) {\n\tconst dropdownMenuProps = useToolsPanelDropdownMenuProps();\n\tconst resetAll = () => {\n\t\tconst updatedValue = resetAllFilter( value );\n\t\tonChange( updatedValue );\n\t};\n\n\treturn (\n\t\t<ToolsPanel\n\t\t\tlabel={ label }\n\t\t\tresetAll={ resetAll }\n\t\t\tpanelId={ panelId }\n\t\t\tdropdownMenuProps={ dropdownMenuProps }\n\t\t>\n\t\t\t{ children }\n\t\t</ToolsPanel>\n\t);\n}\n\nconst DEFAULT_CONTROLS = {\n\tradius: true,\n\tcolor: true,\n\twidth: true,\n\tshadow: true,\n};\n\nexport default function BorderPanel( {\n\tas: Wrapper = BorderToolsPanel,\n\tvalue,\n\tonChange,\n\tinheritedValue = value,\n\tsettings,\n\tpanelId,\n\tname,\n\tdefaultControls = DEFAULT_CONTROLS,\n} ) {\n\tconst colors = useColorsPerOrigin( settings );\n\tconst areCustomSolidsEnabled = settings?.color?.custom;\n\tconst decodeValue = useCallback(\n\t\t( rawValue ) => getValueFromVariable( { settings }, '', rawValue ),\n\t\t[ settings ]\n\t);\n\tconst encodeColorValue = ( colorValue ) => {\n\t\tconst allColors = colors.flatMap(\n\t\t\t( { colors: originColors } ) => originColors\n\t\t);\n\t\tconst colorObject = allColors.find(\n\t\t\t( { color } ) => color === colorValue\n\t\t);\n\t\treturn colorObject\n\t\t\t? 'var:preset|color|' + colorObject.slug\n\t\t\t: colorValue;\n\t};\n\tconst border = useMemo( () => {\n\t\tif ( hasSplitBorders( inheritedValue?.border ) ) {\n\t\t\tconst borderValue = { ...inheritedValue?.border };\n\t\t\t[ 'top', 'right', 'bottom', 'left' ].forEach( ( side ) => {\n\t\t\t\tborderValue[ side ] = {\n\t\t\t\t\t...borderValue[ side ],\n\t\t\t\t\tcolor: decodeValue( borderValue[ side ]?.color ),\n\t\t\t\t};\n\t\t\t} );\n\t\t\treturn borderValue;\n\t\t}\n\t\treturn {\n\t\t\t...inheritedValue?.border,\n\t\t\tcolor: inheritedValue?.border?.color\n\t\t\t\t? decodeValue( inheritedValue?.border?.color )\n\t\t\t\t: undefined,\n\t\t};\n\t}, [ inheritedValue?.border, decodeValue ] );\n\tconst setBorder = ( newBorder ) =>\n\t\tonChange( { ...value, border: newBorder } );\n\tconst showBorderColor = useHasBorderColorControl( settings );\n\tconst showBorderStyle = useHasBorderStyleControl( settings );\n\tconst showBorderWidth = useHasBorderWidthControl( settings );\n\n\t// Border radius.\n\tconst showBorderRadius = useHasBorderRadiusControl( settings );\n\tconst borderRadiusValues = useMemo( () => {\n\t\tif ( typeof inheritedValue?.border?.radius !== 'object' ) {\n\t\t\treturn decodeValue( inheritedValue?.border?.radius );\n\t\t}\n\n\t\treturn {\n\t\t\ttopLeft: decodeValue( inheritedValue?.border?.radius?.topLeft ),\n\t\t\ttopRight: decodeValue( inheritedValue?.border?.radius?.topRight ),\n\t\t\tbottomLeft: decodeValue(\n\t\t\t\tinheritedValue?.border?.radius?.bottomLeft\n\t\t\t),\n\t\t\tbottomRight: decodeValue(\n\t\t\t\tinheritedValue?.border?.radius?.bottomRight\n\t\t\t),\n\t\t};\n\t}, [ inheritedValue?.border?.radius, decodeValue ] );\n\tconst setBorderRadius = ( newBorderRadius ) =>\n\t\tsetBorder( { ...border, radius: newBorderRadius } );\n\tconst hasBorderRadius = () => {\n\t\tconst borderValues = value?.border?.radius;\n\t\tif ( typeof borderValues === 'object' ) {\n\t\t\treturn Object.entries( borderValues ).some( Boolean );\n\t\t}\n\t\treturn !! borderValues;\n\t};\n\tconst hasShadowControl = useHasShadowControl( settings );\n\n\t// Shadow\n\tconst shadow = decodeValue( inheritedValue?.shadow );\n\tconst shadowPresets = settings?.shadow?.presets ?? {};\n\tconst mergedShadowPresets =\n\t\tshadowPresets.custom ??\n\t\tshadowPresets.theme ??\n\t\tshadowPresets.default ??\n\t\t[];\n\tconst setShadow = ( newValue ) => {\n\t\tconst slug = mergedShadowPresets?.find(\n\t\t\t( { shadow: shadowName } ) => shadowName === newValue\n\t\t)?.slug;\n\n\t\tonChange(\n\t\t\tsetImmutably(\n\t\t\t\tvalue,\n\t\t\t\t[ 'shadow' ],\n\t\t\t\tslug ? `var:preset|shadow|${ slug }` : newValue || undefined\n\t\t\t)\n\t\t);\n\t};\n\tconst hasShadow = () => !! value?.shadow;\n\tconst resetShadow = () => setShadow( undefined );\n\n\tconst resetBorder = () => {\n\t\tif ( hasBorderRadius() ) {\n\t\t\treturn setBorder( { radius: value?.border?.radius } );\n\t\t}\n\n\t\tsetBorder( undefined );\n\t};\n\n\tconst onBorderChange = ( newBorder ) => {\n\t\t// Ensure we have a visible border style when a border width or\n\t\t// color is being selected.\n\t\tconst updatedBorder = { ...newBorder };\n\n\t\tif ( hasSplitBorders( updatedBorder ) ) {\n\t\t\t[ 'top', 'right', 'bottom', 'left' ].forEach( ( side ) => {\n\t\t\t\tif ( updatedBorder[ side ] ) {\n\t\t\t\t\tupdatedBorder[ side ] = {\n\t\t\t\t\t\t...updatedBorder[ side ],\n\t\t\t\t\t\tcolor: encodeColorValue( updatedBorder[ side ]?.color ),\n\t\t\t\t\t};\n\t\t\t\t}\n\t\t\t} );\n\t\t} else if ( updatedBorder ) {\n\t\t\tupdatedBorder.color = encodeColorValue( updatedBorder.color );\n\t\t}\n\n\t\t// As radius is maintained separately to color, style, and width\n\t\t// maintain its value. Undefined values here will be cleaned when\n\t\t// global styles are saved.\n\t\tsetBorder( { radius: border?.radius, ...updatedBorder } );\n\t};\n\n\tconst resetAllFilter = useCallback( ( previousValue ) => {\n\t\treturn {\n\t\t\t...previousValue,\n\t\t\tborder: undefined,\n\t\t\tshadow: undefined,\n\t\t};\n\t}, [] );\n\n\tconst showBorderByDefault =\n\t\tdefaultControls?.color || defaultControls?.width;\n\n\tconst hasBorderControl =\n\t\tshowBorderColor ||\n\t\tshowBorderStyle ||\n\t\tshowBorderWidth ||\n\t\tshowBorderRadius;\n\n\tconst label = useBorderPanelLabel( {\n\t\tblockName: name,\n\t\thasShadowControl,\n\t\thasBorderControl,\n\t} );\n\n\treturn (\n\t\t<Wrapper\n\t\t\tresetAllFilter={ resetAllFilter }\n\t\t\tvalue={ value }\n\t\t\tonChange={ onChange }\n\t\t\tpanelId={ panelId }\n\t\t\tlabel={ label }\n\t\t>\n\t\t\t{ ( showBorderWidth || showBorderColor ) && (\n\t\t\t\t<ToolsPanelItem\n\t\t\t\t\thasValue={ () => isDefinedBorder( value?.border ) }\n\t\t\t\t\tlabel={ __( 'Border' ) }\n\t\t\t\t\tonDeselect={ () => resetBorder() }\n\t\t\t\t\tisShownByDefault={ showBorderByDefault }\n\t\t\t\t\tpanelId={ panelId }\n\t\t\t\t>\n\t\t\t\t\t<BorderBoxControl\n\t\t\t\t\t\tcolors={ colors }\n\t\t\t\t\t\tdisableCustomColors={ ! areCustomSolidsEnabled }\n\t\t\t\t\t\tenableAlpha\n\t\t\t\t\t\tenableStyle={ showBorderStyle }\n\t\t\t\t\t\tonChange={ onBorderChange }\n\t\t\t\t\t\tpopoverOffset={ 40 }\n\t\t\t\t\t\tpopoverPlacement=\"left-start\"\n\t\t\t\t\t\tvalue={ border }\n\t\t\t\t\t\t__experimentalIsRenderedInSidebar\n\t\t\t\t\t\thideLabelFromVision={ ! hasShadowControl }\n\t\t\t\t\t\tlabel={ __( 'Border' ) }\n\t\t\t\t\t/>\n\t\t\t\t</ToolsPanelItem>\n\t\t\t) }\n\t\t\t{ showBorderRadius && (\n\t\t\t\t<ToolsPanelItem\n\t\t\t\t\thasValue={ hasBorderRadius }\n\t\t\t\t\tlabel={ __( 'Radius' ) }\n\t\t\t\t\tonDeselect={ () => setBorderRadius( undefined ) }\n\t\t\t\t\tisShownByDefault={ defaultControls.radius }\n\t\t\t\t\tpanelId={ panelId }\n\t\t\t\t>\n\t\t\t\t\t<BorderRadiusControl\n\t\t\t\t\t\tpresets={ settings?.border?.radiusSizes }\n\t\t\t\t\t\tvalues={ borderRadiusValues }\n\t\t\t\t\t\tonChange={ ( newValue ) => {\n\t\t\t\t\t\t\tsetBorderRadius( newValue || undefined );\n\t\t\t\t\t\t} }\n\t\t\t\t\t/>\n\t\t\t\t</ToolsPanelItem>\n\t\t\t) }\n\t\t\t{ hasShadowControl && (\n\t\t\t\t<ToolsPanelItem\n\t\t\t\t\tlabel={ __( 'Shadow' ) }\n\t\t\t\t\thasValue={ hasShadow }\n\t\t\t\t\tonDeselect={ resetShadow }\n\t\t\t\t\tisShownByDefault={ defaultControls.shadow }\n\t\t\t\t\tpanelId={ panelId }\n\t\t\t\t>\n\t\t\t\t\t{ hasBorderControl ? (\n\t\t\t\t\t\t<BaseControl.VisualLabel as=\"legend\">\n\t\t\t\t\t\t\t{ __( 'Shadow' ) }\n\t\t\t\t\t\t</BaseControl.VisualLabel>\n\t\t\t\t\t) : null }\n\n\t\t\t\t\t<ShadowPopover\n\t\t\t\t\t\tshadow={ shadow }\n\t\t\t\t\t\tonShadowChange={ setShadow }\n\t\t\t\t\t\tsettings={ settings }\n\t\t\t\t\t/>\n\t\t\t\t</ToolsPanelItem>\n\t\t\t) }\n\t\t</Wrapper>\n\t);\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport {\n\tBorderBoxControl,\n\t__experimentalHasSplitBorders as hasSplitBorders,\n\t__experimentalIsDefinedBorder as isDefinedBorder,\n\t__experimentalToolsPanel as ToolsPanel,\n\tBaseControl,\n} from '@wordpress/components';\nimport { useCallback, useMemo } from '@wordpress/element';\nimport { __ } from '@wordpress/i18n';\nimport { getValueFromVariable } from '@wordpress/global-styles-engine';\n\n/**\n * Internal dependencies\n */\nimport BorderRadiusControl from '../border-radius-control';\nimport { useColorsPerOrigin } from './hooks';\nimport { useToolsPanelDropdownMenuProps } from './utils';\nimport { setImmutably } from '../../utils/object';\nimport { useBorderPanelLabel } from '../../hooks/border';\nimport { ShadowPopover, useShadowPresets } from './shadow-panel-components';\nimport {\n\tgetInheritanceProps,\n\tInheritanceToolsPanelItem,\n\tisGlobalStylesInheritanceEnabled,\n} from './inheritance';\n\nexport function useHasBorderPanel( settings ) {\n\tconst controls = Object.values( useHasBorderPanelControls( settings ) );\n\treturn controls.some( Boolean );\n}\n\nexport function useHasBorderPanelControls( settings ) {\n\tconst controls = {\n\t\thasBorderColor: useHasBorderColorControl( settings ),\n\t\thasBorderRadius: useHasBorderRadiusControl( settings ),\n\t\thasBorderStyle: useHasBorderStyleControl( settings ),\n\t\thasBorderWidth: useHasBorderWidthControl( settings ),\n\t\thasShadow: useHasShadowControl( settings ),\n\t};\n\n\treturn controls;\n}\n\nfunction useHasBorderColorControl( settings ) {\n\treturn settings?.border?.color;\n}\n\nfunction useHasBorderRadiusControl( settings ) {\n\treturn settings?.border?.radius;\n}\n\nfunction useHasBorderStyleControl( settings ) {\n\treturn settings?.border?.style;\n}\n\nfunction useHasBorderWidthControl( settings ) {\n\treturn settings?.border?.width;\n}\n\nfunction useHasShadowControl( settings ) {\n\tconst shadows = useShadowPresets( settings );\n\treturn !! settings?.shadow && shadows.length > 0;\n}\n\nfunction BorderToolsPanel( {\n\tresetAllFilter,\n\tonChange,\n\tvalue,\n\tpanelId,\n\tchildren,\n\tlabel,\n} ) {\n\tconst dropdownMenuProps = useToolsPanelDropdownMenuProps();\n\tconst resetAll = () => {\n\t\tconst updatedValue = resetAllFilter( value );\n\t\tonChange( updatedValue );\n\t};\n\n\treturn (\n\t\t<ToolsPanel\n\t\t\tlabel={ label }\n\t\t\tresetAll={ resetAll }\n\t\t\tpanelId={ panelId }\n\t\t\tdropdownMenuProps={ dropdownMenuProps }\n\t\t>\n\t\t\t{ children }\n\t\t</ToolsPanel>\n\t);\n}\n\nconst DEFAULT_CONTROLS = {\n\tradius: true,\n\tcolor: true,\n\twidth: true,\n\tshadow: true,\n};\n\nexport default function BorderPanel( {\n\tas: Wrapper = BorderToolsPanel,\n\tvalue,\n\tonChange,\n\tinheritedValue = value,\n\tsettings,\n\tpanelId,\n\tname,\n\tdefaultControls = DEFAULT_CONTROLS,\n\tshowInheritanceLabelIndicators = isGlobalStylesInheritanceEnabled(),\n} ) {\n\tconst colors = useColorsPerOrigin( settings );\n\tconst areCustomSolidsEnabled = settings?.color?.custom;\n\tconst decodeValue = useCallback(\n\t\t( rawValue ) => getValueFromVariable( { settings }, '', rawValue ),\n\t\t[ settings ]\n\t);\n\t// Always keep the layout className (e.g. `single-column`); only the\n\t// inheritance treatment is gated on `showInheritanceLabelIndicators`.\n\tconst inheritanceProps = ( isInherited, hasLocalOverride, className ) =>\n\t\tgetInheritanceProps(\n\t\t\tshowInheritanceLabelIndicators && isInherited,\n\t\t\tshowInheritanceLabelIndicators && hasLocalOverride,\n\t\t\tclassName\n\t\t);\n\tconst encodeColorValue = ( colorValue ) => {\n\t\tconst allColors = colors.flatMap(\n\t\t\t( { colors: originColors } ) => originColors\n\t\t);\n\t\tconst colorObject = allColors.find(\n\t\t\t( { color } ) => color === colorValue\n\t\t);\n\t\treturn colorObject\n\t\t\t? 'var:preset|color|' + colorObject.slug\n\t\t\t: colorValue;\n\t};\n\t// Decode a `border` sub-tree (handles split borders + flat shape).\n\tconst decodeBorder = useCallback(\n\t\t( source ) => {\n\t\t\tif ( ! source ) {\n\t\t\t\treturn undefined;\n\t\t\t}\n\t\t\tif ( hasSplitBorders( source ) ) {\n\t\t\t\tconst out = { ...source };\n\t\t\t\t[ 'top', 'right', 'bottom', 'left' ].forEach( ( side ) => {\n\t\t\t\t\tout[ side ] = {\n\t\t\t\t\t\t...out[ side ],\n\t\t\t\t\t\tcolor: decodeValue( out[ side ]?.color ),\n\t\t\t\t\t};\n\t\t\t\t} );\n\t\t\t\treturn out;\n\t\t\t}\n\t\t\treturn {\n\t\t\t\t...source,\n\t\t\t\tcolor: source.color ? decodeValue( source.color ) : undefined,\n\t\t\t};\n\t\t},\n\t\t[ decodeValue ]\n\t);\n\t// Local-then-inherited: prefer the user's locally-set border (whether\n\t// flat or split) when defined, otherwise fall back to the inherited\n\t// Global Styles border. The merge happens at the sub-tree root, not\n\t// at the leaf level — borders are commonly authored as a single\n\t// affordance in the inspector, so partial leaf merges would be\n\t// surprising.\n\tconst localBorder = useMemo(\n\t\t() => decodeBorder( value?.border ),\n\t\t[ value?.border, decodeBorder ]\n\t);\n\tconst inheritedBorder = useMemo(\n\t\t() => decodeBorder( inheritedValue?.border ),\n\t\t[ inheritedValue?.border, decodeBorder ]\n\t);\n\tconst isBorderPlaceholder =\n\t\t! isDefinedBorder( value?.border ) &&\n\t\t!! inheritedBorder &&\n\t\tisDefinedBorder( inheritedBorder );\n\tconst border = isBorderPlaceholder ? inheritedBorder : localBorder;\n\tconst setBorder = ( newBorder ) =>\n\t\tonChange( { ...value, border: newBorder } );\n\tconst showBorderColor = useHasBorderColorControl( settings );\n\tconst showBorderStyle = useHasBorderStyleControl( settings );\n\tconst showBorderWidth = useHasBorderWidthControl( settings );\n\n\t// Border radius. Display inherited values through the control's `values`\n\t// prop when local values are empty so UnitControl can parse the numeric\n\t// quantity and selected unit normally (e.g. `2.5em` -> `2.5` + `em`).\n\t// `hasBorderRadius` remains local-only, so displaying the inherited value\n\t// does not mark the ToolsPanel item as customised or commit on mount.\n\tconst showBorderRadius = useHasBorderRadiusControl( settings );\n\tconst localBorderRadius = useMemo( () => {\n\t\tif ( typeof value?.border?.radius !== 'object' ) {\n\t\t\treturn decodeValue( value?.border?.radius );\n\t\t}\n\t\treturn {\n\t\t\ttopLeft: decodeValue( value?.border?.radius?.topLeft ),\n\t\t\ttopRight: decodeValue( value?.border?.radius?.topRight ),\n\t\t\tbottomLeft: decodeValue( value?.border?.radius?.bottomLeft ),\n\t\t\tbottomRight: decodeValue( value?.border?.radius?.bottomRight ),\n\t\t};\n\t}, [ value?.border?.radius, decodeValue ] );\n\tconst inheritedBorderRadius = useMemo( () => {\n\t\tconst rawRadius = inheritedValue?.border?.radius;\n\t\tif ( typeof rawRadius !== 'object' ) {\n\t\t\treturn decodeValue( rawRadius );\n\t\t}\n\t\treturn {\n\t\t\ttopLeft: decodeValue( rawRadius?.topLeft ),\n\t\t\ttopRight: decodeValue( rawRadius?.topRight ),\n\t\t\tbottomLeft: decodeValue( rawRadius?.bottomLeft ),\n\t\t\tbottomRight: decodeValue( rawRadius?.bottomRight ),\n\t\t};\n\t}, [ inheritedValue?.border?.radius, decodeValue ] );\n\t// Spread the local border, not the merged display value, or setting a\n\t// radius bakes the inherited border into the local override. Mirror of\n\t// the guard in `onBorderChange`.\n\tconst setBorderRadius = ( newBorderRadius ) =>\n\t\tsetBorder( { ...value?.border, radius: newBorderRadius } );\n\tconst hasBorderRadius = () => {\n\t\tconst borderValues = value?.border?.radius;\n\t\tif ( typeof borderValues === 'object' ) {\n\t\t\treturn Object.entries( borderValues ).some( ( [ , v ] ) => !! v );\n\t\t}\n\t\treturn !! borderValues;\n\t};\n\tconst isBorderRadiusPlaceholder =\n\t\t! hasBorderRadius() &&\n\t\tinheritedBorderRadius !== undefined &&\n\t\tinheritedBorderRadius !== '';\n\t// Build an object value so unlinked-mode shows per-corner inherited\n\t// values. The control accepts either a string or an object; passing the\n\t// object form is correct in both modes (the control collapses to the\n\t// `all`/first corner in linked mode).\n\tconst borderRadius = useMemo( () => {\n\t\tif ( ! isBorderRadiusPlaceholder ) {\n\t\t\treturn localBorderRadius;\n\t\t}\n\t\tif ( typeof inheritedBorderRadius === 'string' ) {\n\t\t\treturn inheritedBorderRadius;\n\t\t}\n\t\tconst obj = inheritedBorderRadius;\n\t\tif ( ! obj ) {\n\t\t\treturn localBorderRadius;\n\t\t}\n\t\tconst all =\n\t\t\tobj.topLeft &&\n\t\t\tobj.topLeft === obj.topRight &&\n\t\t\tobj.topLeft === obj.bottomLeft &&\n\t\t\tobj.topLeft === obj.bottomRight\n\t\t\t\t? obj.topLeft\n\t\t\t\t: undefined;\n\t\treturn { all, ...obj };\n\t}, [\n\t\tisBorderRadiusPlaceholder,\n\t\tlocalBorderRadius,\n\t\tinheritedBorderRadius,\n\t] );\n\tconst hasShadowControl = useHasShadowControl( settings );\n\n\t// Shadow. At rest, the popover toggle button uses the placeholder\n\t// treatment, and the popover preset list pre-selects the inherited shadow.\n\t// The interceptor below recognises the user's \"accept inherited\" click as\n\t// an explicit commit, mirroring the ToggleGroup pattern in the typography\n\t// panel.\n\tconst localShadow = decodeValue( value?.shadow );\n\tconst inheritedShadow = decodeValue( inheritedValue?.shadow );\n\tconst isShadowPlaceholder =\n\t\tlocalShadow === undefined &&\n\t\tinheritedShadow !== undefined &&\n\t\tinheritedShadow !== '';\n\tconst shadow = isShadowPlaceholder ? inheritedShadow : localShadow;\n\tconst shadowPresets = settings?.shadow?.presets ?? {};\n\tconst mergedShadowPresets =\n\t\tshadowPresets.custom ??\n\t\tshadowPresets.theme ??\n\t\tshadowPresets.default ??\n\t\t[];\n\tconst setShadow = ( newValue ) => {\n\t\tconst slug = mergedShadowPresets?.find(\n\t\t\t( { shadow: shadowName } ) => shadowName === newValue\n\t\t)?.slug;\n\n\t\tonChange(\n\t\t\tsetImmutably(\n\t\t\t\tvalue,\n\t\t\t\t[ 'shadow' ],\n\t\t\t\tslug ? `var:preset|shadow|${ slug }` : newValue || undefined\n\t\t\t)\n\t\t);\n\t};\n\t// Display-without-commit interceptor for the shadow preset list. When the\n\t// user is at the at-rest preselect (local is undefined, inherited is the\n\t// active shadow), `ShadowPresets`' default toggle-off behaviour would\n\t// interpret the click on the highlighted preset as `undefined` (clear).\n\t// Re-route it to an explicit commit of the inherited value, so clicking\n\t// the visible preselected preset is the user's \"accept this inherited\n\t// value\" affordance.\n\tconst setShadowWithInheritedCommit = ( newValue ) => {\n\t\tif ( isShadowPlaceholder && newValue === undefined ) {\n\t\t\tsetShadow( inheritedShadow );\n\t\t\treturn;\n\t\t}\n\t\tsetShadow( newValue );\n\t};\n\tconst hasShadow = () => !! value?.shadow;\n\tconst resetShadow = () => setShadow( undefined );\n\t// A local override exists when the user has set a shadow that shadows an\n\t// inherited one. Only then does the toggle render the blue-dot reset\n\t// affordance (mirroring the color/gradient controls); a merely-inherited\n\t// value at rest shows no reset button.\n\tconst hasShadowLocalOverride =\n\t\tshowInheritanceLabelIndicators &&\n\t\thasShadow() &&\n\t\tinheritedShadow !== undefined;\n\n\tconst resetBorder = () => {\n\t\tif ( hasBorderRadius() ) {\n\t\t\treturn setBorder( { radius: value?.border?.radius } );\n\t\t}\n\n\t\tsetBorder( undefined );\n\t};\n\n\tconst onBorderChange = ( newBorder ) => {\n\t\t// Ensure we have a visible border style when a border width or\n\t\t// color is being selected.\n\t\tconst updatedBorder = { ...newBorder };\n\n\t\tif ( hasSplitBorders( updatedBorder ) ) {\n\t\t\t[ 'top', 'right', 'bottom', 'left' ].forEach( ( side ) => {\n\t\t\t\tif ( updatedBorder[ side ] ) {\n\t\t\t\t\tupdatedBorder[ side ] = {\n\t\t\t\t\t\t...updatedBorder[ side ],\n\t\t\t\t\t\tcolor: encodeColorValue( updatedBorder[ side ]?.color ),\n\t\t\t\t\t};\n\t\t\t\t}\n\t\t\t} );\n\t\t} else if ( updatedBorder ) {\n\t\t\tupdatedBorder.color = encodeColorValue( updatedBorder.color );\n\t\t}\n\n\t\t// As radius is maintained separately to color, style, and width\n\t\t// maintain its value. Read from `value` (local-only) rather than\n\t\t// `border` (the merged display value), otherwise an inherited\n\t\t// radius gets baked into the local override every time the\n\t\t// user touches color/style/width — which both pollutes the\n\t\t// stored attribute and causes the radius `ToolsPanelItem` to\n\t\t// flip into the `has-local-override-from-global-styles` state\n\t\t// even though the user never customised the radius. The\n\t\t// `radius` key must come after the spread so it wins over any\n\t\t// `radius` field forwarded by `BorderBoxControl`'s inner\n\t\t// `BorderControl`, which merges its incoming `value` with the\n\t\t// changed prop. Undefined values here will be cleaned when\n\t\t// global styles are saved.\n\t\tsetBorder( {\n\t\t\t...updatedBorder,\n\t\t\tradius: value?.border?.radius,\n\t\t} );\n\t};\n\n\tconst resetAllFilter = useCallback( ( previousValue ) => {\n\t\treturn {\n\t\t\t...previousValue,\n\t\t\tborder: undefined,\n\t\t\tshadow: undefined,\n\t\t};\n\t}, [] );\n\n\tconst showBorderByDefault =\n\t\tdefaultControls?.color || defaultControls?.width;\n\n\tconst hasBorderControl =\n\t\tshowBorderColor ||\n\t\tshowBorderStyle ||\n\t\tshowBorderWidth ||\n\t\tshowBorderRadius;\n\n\tconst label = useBorderPanelLabel( {\n\t\tblockName: name,\n\t\thasShadowControl,\n\t\thasBorderControl,\n\t} );\n\n\treturn (\n\t\t<Wrapper\n\t\t\tresetAllFilter={ resetAllFilter }\n\t\t\tvalue={ value }\n\t\t\tonChange={ onChange }\n\t\t\tpanelId={ panelId }\n\t\t\tlabel={ label }\n\t\t>\n\t\t\t{ ( showBorderWidth || showBorderColor ) && (\n\t\t\t\t<InheritanceToolsPanelItem\n\t\t\t\t\t{ ...inheritanceProps(\n\t\t\t\t\t\tisBorderPlaceholder,\n\t\t\t\t\t\tisDefinedBorder( value?.border ) &&\n\t\t\t\t\t\t\t!! inheritedBorder &&\n\t\t\t\t\t\t\tisDefinedBorder( inheritedBorder )\n\t\t\t\t\t) }\n\t\t\t\t\thasValue={ () => isDefinedBorder( value?.border ) }\n\t\t\t\t\tlabel={ __( 'Border' ) }\n\t\t\t\t\tonDeselect={ () => resetBorder() }\n\t\t\t\t\tisShownByDefault={ showBorderByDefault }\n\t\t\t\t\tpanelId={ panelId }\n\t\t\t\t>\n\t\t\t\t\t{ ( showInheritanceLabelIndicators ||\n\t\t\t\t\t\thasShadowControl ) && (\n\t\t\t\t\t\t// Render the visible label as `BaseControl.VisualLabel`\n\t\t\t\t\t\t// (which produces `.components-base-control__label`)\n\t\t\t\t\t\t// rather than passing `label` to `BorderBoxControl`,\n\t\t\t\t\t\t// whose internal `<StyledLabel>` carries no stable\n\t\t\t\t\t\t// className. The inheritance treatment and the\n\t\t\t\t\t\t// local-override reset affordance both target\n\t\t\t\t\t\t// `.components-base-control__label`, so the visible\n\t\t\t\t\t\t// \"Border\" label has to be a `BaseControl` label to\n\t\t\t\t\t\t// receive them.\n\t\t\t\t\t\t//\n\t\t\t\t\t\t// Render it whenever a Shadow control is also present so\n\t\t\t\t\t\t// the two controls stay disambiguated (mirrors the\n\t\t\t\t\t\t// Shadow label's `hasBorderControl` guard below, and\n\t\t\t\t\t\t// trunk's `hideLabelFromVision={ ! hasShadowControl }`),\n\t\t\t\t\t\t// even when inheritance indicators are off (e.g. in\n\t\t\t\t\t\t// Global Styles).\n\t\t\t\t\t\t<BaseControl.VisualLabel as=\"legend\">\n\t\t\t\t\t\t\t{ __( 'Border' ) }\n\t\t\t\t\t\t</BaseControl.VisualLabel>\n\t\t\t\t\t) }\n\t\t\t\t\t<BorderBoxControl\n\t\t\t\t\t\tcolors={ colors }\n\t\t\t\t\t\tdisableCustomColors={ ! areCustomSolidsEnabled }\n\t\t\t\t\t\tenableAlpha\n\t\t\t\t\t\tenableStyle={ showBorderStyle }\n\t\t\t\t\t\tonChange={ onBorderChange }\n\t\t\t\t\t\tpopoverOffset={ 40 }\n\t\t\t\t\t\tpopoverPlacement=\"left-start\"\n\t\t\t\t\t\tvalue={ border }\n\t\t\t\t\t\t__experimentalIsRenderedInSidebar\n\t\t\t\t\t/>\n\t\t\t\t</InheritanceToolsPanelItem>\n\t\t\t) }\n\t\t\t{ showBorderRadius && (\n\t\t\t\t<InheritanceToolsPanelItem\n\t\t\t\t\t{ ...inheritanceProps(\n\t\t\t\t\t\tisBorderRadiusPlaceholder,\n\t\t\t\t\t\thasBorderRadius() && inheritedBorderRadius !== undefined\n\t\t\t\t\t) }\n\t\t\t\t\thasValue={ hasBorderRadius }\n\t\t\t\t\tlabel={ __( 'Radius' ) }\n\t\t\t\t\thasInlineEndToggle\n\t\t\t\t\tonDeselect={ () => setBorderRadius( undefined ) }\n\t\t\t\t\tisShownByDefault={ defaultControls.radius }\n\t\t\t\t\tpanelId={ panelId }\n\t\t\t\t>\n\t\t\t\t\t<BorderRadiusControl\n\t\t\t\t\t\tpresets={ settings?.border?.radiusSizes }\n\t\t\t\t\t\tvalues={ borderRadius }\n\t\t\t\t\t\tonChange={ ( newValue ) => {\n\t\t\t\t\t\t\tsetBorderRadius( newValue || undefined );\n\t\t\t\t\t\t} }\n\t\t\t\t\t/>\n\t\t\t\t</InheritanceToolsPanelItem>\n\t\t\t) }\n\t\t\t{ hasShadowControl && (\n\t\t\t\t<InheritanceToolsPanelItem\n\t\t\t\t\t{ ...inheritanceProps(\n\t\t\t\t\t\tisShadowPlaceholder,\n\t\t\t\t\t\thasShadow() && inheritedShadow !== undefined\n\t\t\t\t\t) }\n\t\t\t\t\tlabel={ __( 'Shadow' ) }\n\t\t\t\t\thasValue={ hasShadow }\n\t\t\t\t\tonDeselect={ resetShadow }\n\t\t\t\t\tisShownByDefault={ defaultControls.shadow }\n\t\t\t\t\t// The shadow toggle renders its own reset affordance (blue\n\t\t\t\t\t// dot for a local override, default reset otherwise) inside\n\t\t\t\t\t// the control, mirroring the color/gradient controls, so the\n\t\t\t\t\t// panel item must not render a second sibling reset dot.\n\t\t\t\t\tshowLocalOverrideActionsInLabel={ false }\n\t\t\t\t\tpanelId={ panelId }\n\t\t\t\t>\n\t\t\t\t\t{ hasBorderControl ? (\n\t\t\t\t\t\t<BaseControl.VisualLabel as=\"legend\">\n\t\t\t\t\t\t\t{ __( 'Shadow' ) }\n\t\t\t\t\t\t</BaseControl.VisualLabel>\n\t\t\t\t\t) : null }\n\n\t\t\t\t\t<ShadowPopover\n\t\t\t\t\t\tshadow={ shadow }\n\t\t\t\t\t\tonShadowChange={ setShadowWithInheritedCommit }\n\t\t\t\t\t\tsettings={ settings }\n\t\t\t\t\t\thasLocalValue={ hasShadow() }\n\t\t\t\t\t\thasLocalOverride={ hasShadowLocalOverride }\n\t\t\t\t\t\tonReset={ resetShadow }\n\t\t\t\t\t/>\n\t\t\t\t</InheritanceToolsPanelItem>\n\t\t\t) }\n\t\t</Wrapper>\n\t);\n}\n"],
+  "mappings": ";AAGA;AAAA,EACC;AAAA,EACA,iCAAiC;AAAA,EACjC,iCAAiC;AAAA,EACjC,4BAA4B;AAAA,EAC5B;AAAA,OACM;AACP,SAAS,aAAa,eAAe;AACrC,SAAS,UAAU;AACnB,SAAS,4BAA4B;AAKrC,OAAO,yBAAyB;AAChC,SAAS,0BAA0B;AACnC,SAAS,sCAAsC;AAC/C,SAAS,oBAAoB;AAC7B,SAAS,2BAA2B;AACpC,SAAS,eAAe,wBAAwB;AAChD;AAAA,EACC;AAAA,EACA;AAAA,EACA;AAAA,OACM;AAuDL,cAsTE,YAtTF;AArDK,SAAS,kBAAmB,UAAW;AAC7C,QAAM,WAAW,OAAO,OAAQ,0BAA2B,QAAS,CAAE;AACtE,SAAO,SAAS,KAAM,OAAQ;AAC/B;AAEO,SAAS,0BAA2B,UAAW;AACrD,QAAM,WAAW;AAAA,IAChB,gBAAgB,yBAA0B,QAAS;AAAA,IACnD,iBAAiB,0BAA2B,QAAS;AAAA,IACrD,gBAAgB,yBAA0B,QAAS;AAAA,IACnD,gBAAgB,yBAA0B,QAAS;AAAA,IACnD,WAAW,oBAAqB,QAAS;AAAA,EAC1C;AAEA,SAAO;AACR;AAEA,SAAS,yBAA0B,UAAW;AAC7C,SAAO,UAAU,QAAQ;AAC1B;AAEA,SAAS,0BAA2B,UAAW;AAC9C,SAAO,UAAU,QAAQ;AAC1B;AAEA,SAAS,yBAA0B,UAAW;AAC7C,SAAO,UAAU,QAAQ;AAC1B;AAEA,SAAS,yBAA0B,UAAW;AAC7C,SAAO,UAAU,QAAQ;AAC1B;AAEA,SAAS,oBAAqB,UAAW;AACxC,QAAM,UAAU,iBAAkB,QAAS;AAC3C,SAAO,CAAC,CAAE,UAAU,UAAU,QAAQ,SAAS;AAChD;AAEA,SAAS,iBAAkB;AAAA,EAC1B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,GAAI;AACH,QAAM,oBAAoB,+BAA+B;AACzD,QAAM,WAAW,MAAM;AACtB,UAAM,eAAe,eAAgB,KAAM;AAC3C,aAAU,YAAa;AAAA,EACxB;AAEA,SACC;AAAA,IAAC;AAAA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MAEE;AAAA;AAAA,EACH;AAEF;AAEA,IAAM,mBAAmB;AAAA,EACxB,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,OAAO;AAAA,EACP,QAAQ;AACT;AAEe,SAAR,YAA8B;AAAA,EACpC,IAAI,UAAU;AAAA,EACd;AAAA,EACA;AAAA,EACA,iBAAiB;AAAA,EACjB;AAAA,EACA;AAAA,EACA;AAAA,EACA,kBAAkB;AAAA,EAClB,iCAAiC,iCAAiC;AACnE,GAAI;AACH,QAAM,SAAS,mBAAoB,QAAS;AAC5C,QAAM,yBAAyB,UAAU,OAAO;AAChD,QAAM,cAAc;AAAA,IACnB,CAAE,aAAc,qBAAsB,EAAE,SAAS,GAAG,IAAI,QAAS;AAAA,IACjE,CAAE,QAAS;AAAA,EACZ;AAGA,QAAM,mBAAmB,CAAE,aAAa,kBAAkB,cACzD;AAAA,IACC,kCAAkC;AAAA,IAClC,kCAAkC;AAAA,IAClC;AAAA,EACD;AACD,QAAM,mBAAmB,CAAE,eAAgB;AAC1C,UAAM,YAAY,OAAO;AAAA,MACxB,CAAE,EAAE,QAAQ,aAAa,MAAO;AAAA,IACjC;AACA,UAAM,cAAc,UAAU;AAAA,MAC7B,CAAE,EAAE,MAAM,MAAO,UAAU;AAAA,IAC5B;AACA,WAAO,cACJ,sBAAsB,YAAY,OAClC;AAAA,EACJ;AAEA,QAAM,eAAe;AAAA,IACpB,CAAE,WAAY;AACb,UAAK,CAAE,QAAS;AACf,eAAO;AAAA,MACR;AACA,UAAK,gBAAiB,MAAO,GAAI;AAChC,cAAM,MAAM,EAAE,GAAG,OAAO;AACxB,SAAE,OAAO,SAAS,UAAU,MAAO,EAAE,QAAS,CAAE,SAAU;AACzD,cAAK,IAAK,IAAI;AAAA,YACb,GAAG,IAAK,IAAK;AAAA,YACb,OAAO,YAAa,IAAK,IAAK,GAAG,KAAM;AAAA,UACxC;AAAA,QACD,CAAE;AACF,eAAO;AAAA,MACR;AACA,aAAO;AAAA,QACN,GAAG;AAAA,QACH,OAAO,OAAO,QAAQ,YAAa,OAAO,KAAM,IAAI;AAAA,MACrD;AAAA,IACD;AAAA,IACA,CAAE,WAAY;AAAA,EACf;AAOA,QAAM,cAAc;AAAA,IACnB,MAAM,aAAc,OAAO,MAAO;AAAA,IAClC,CAAE,OAAO,QAAQ,YAAa;AAAA,EAC/B;AACA,QAAM,kBAAkB;AAAA,IACvB,MAAM,aAAc,gBAAgB,MAAO;AAAA,IAC3C,CAAE,gBAAgB,QAAQ,YAAa;AAAA,EACxC;AACA,QAAM,sBACL,CAAE,gBAAiB,OAAO,MAAO,KACjC,CAAC,CAAE,mBACH,gBAAiB,eAAgB;AAClC,QAAM,SAAS,sBAAsB,kBAAkB;AACvD,QAAM,YAAY,CAAE,cACnB,SAAU,EAAE,GAAG,OAAO,QAAQ,UAAU,CAAE;AAC3C,QAAM,kBAAkB,yBAA0B,QAAS;AAC3D,QAAM,kBAAkB,yBAA0B,QAAS;AAC3D,QAAM,kBAAkB,yBAA0B,QAAS;AAO3D,QAAM,mBAAmB,0BAA2B,QAAS;AAC7D,QAAM,oBAAoB,QAAS,MAAM;AACxC,QAAK,OAAO,OAAO,QAAQ,WAAW,UAAW;AAChD,aAAO,YAAa,OAAO,QAAQ,MAAO;AAAA,IAC3C;AACA,WAAO;AAAA,MACN,SAAS,YAAa,OAAO,QAAQ,QAAQ,OAAQ;AAAA,MACrD,UAAU,YAAa,OAAO,QAAQ,QAAQ,QAAS;AAAA,MACvD,YAAY,YAAa,OAAO,QAAQ,QAAQ,UAAW;AAAA,MAC3D,aAAa,YAAa,OAAO,QAAQ,QAAQ,WAAY;AAAA,IAC9D;AAAA,EACD,GAAG,CAAE,OAAO,QAAQ,QAAQ,WAAY,CAAE;AAC1C,QAAM,wBAAwB,QAAS,MAAM;AAC5C,UAAM,YAAY,gBAAgB,QAAQ;AAC1C,QAAK,OAAO,cAAc,UAAW;AACpC,aAAO,YAAa,SAAU;AAAA,IAC/B;AACA,WAAO;AAAA,MACN,SAAS,YAAa,WAAW,OAAQ;AAAA,MACzC,UAAU,YAAa,WAAW,QAAS;AAAA,MAC3C,YAAY,YAAa,WAAW,UAAW;AAAA,MAC/C,aAAa,YAAa,WAAW,WAAY;AAAA,IAClD;AAAA,EACD,GAAG,CAAE,gBAAgB,QAAQ,QAAQ,WAAY,CAAE;AAInD,QAAM,kBAAkB,CAAE,oBACzB,UAAW,EAAE,GAAG,OAAO,QAAQ,QAAQ,gBAAgB,CAAE;AAC1D,QAAM,kBAAkB,MAAM;AAC7B,UAAM,eAAe,OAAO,QAAQ;AACpC,QAAK,OAAO,iBAAiB,UAAW;AACvC,aAAO,OAAO,QAAS,YAAa,EAAE,KAAM,CAAE,CAAE,EAAE,CAAE,MAAO,CAAC,CAAE,CAAE;AAAA,IACjE;AACA,WAAO,CAAC,CAAE;AAAA,EACX;AACA,QAAM,4BACL,CAAE,gBAAgB,KAClB,0BAA0B,UAC1B,0BAA0B;AAK3B,QAAM,eAAe,QAAS,MAAM;AACnC,QAAK,CAAE,2BAA4B;AAClC,aAAO;AAAA,IACR;AACA,QAAK,OAAO,0BAA0B,UAAW;AAChD,aAAO;AAAA,IACR;AACA,UAAM,MAAM;AACZ,QAAK,CAAE,KAAM;AACZ,aAAO;AAAA,IACR;AACA,UAAM,MACL,IAAI,WACJ,IAAI,YAAY,IAAI,YACpB,IAAI,YAAY,IAAI,cACpB,IAAI,YAAY,IAAI,cACjB,IAAI,UACJ;AACJ,WAAO,EAAE,KAAK,GAAG,IAAI;AAAA,EACtB,GAAG;AAAA,IACF;AAAA,IACA;AAAA,IACA;AAAA,EACD,CAAE;AACF,QAAM,mBAAmB,oBAAqB,QAAS;AAOvD,QAAM,cAAc,YAAa,OAAO,MAAO;AAC/C,QAAM,kBAAkB,YAAa,gBAAgB,MAAO;AAC5D,QAAM,sBACL,gBAAgB,UAChB,oBAAoB,UACpB,oBAAoB;AACrB,QAAM,SAAS,sBAAsB,kBAAkB;AACvD,QAAM,gBAAgB,UAAU,QAAQ,WAAW,CAAC;AACpD,QAAM,sBACL,cAAc,UACd,cAAc,SACd,cAAc,WACd,CAAC;AACF,QAAM,YAAY,CAAE,aAAc;AACjC,UAAM,OAAO,qBAAqB;AAAA,MACjC,CAAE,EAAE,QAAQ,WAAW,MAAO,eAAe;AAAA,IAC9C,GAAG;AAEH;AAAA,MACC;AAAA,QACC;AAAA,QACA,CAAE,QAAS;AAAA,QACX,OAAO,qBAAsB,IAAK,KAAK,YAAY;AAAA,MACpD;AAAA,IACD;AAAA,EACD;AAQA,QAAM,+BAA+B,CAAE,aAAc;AACpD,QAAK,uBAAuB,aAAa,QAAY;AACpD,gBAAW,eAAgB;AAC3B;AAAA,IACD;AACA,cAAW,QAAS;AAAA,EACrB;AACA,QAAM,YAAY,MAAM,CAAC,CAAE,OAAO;AAClC,QAAM,cAAc,MAAM,UAAW,MAAU;AAK/C,QAAM,yBACL,kCACA,UAAU,KACV,oBAAoB;AAErB,QAAM,cAAc,MAAM;AACzB,QAAK,gBAAgB,GAAI;AACxB,aAAO,UAAW,EAAE,QAAQ,OAAO,QAAQ,OAAO,CAAE;AAAA,IACrD;AAEA,cAAW,MAAU;AAAA,EACtB;AAEA,QAAM,iBAAiB,CAAE,cAAe;AAGvC,UAAM,gBAAgB,EAAE,GAAG,UAAU;AAErC,QAAK,gBAAiB,aAAc,GAAI;AACvC,OAAE,OAAO,SAAS,UAAU,MAAO,EAAE,QAAS,CAAE,SAAU;AACzD,YAAK,cAAe,IAAK,GAAI;AAC5B,wBAAe,IAAK,IAAI;AAAA,YACvB,GAAG,cAAe,IAAK;AAAA,YACvB,OAAO,iBAAkB,cAAe,IAAK,GAAG,KAAM;AAAA,UACvD;AAAA,QACD;AAAA,MACD,CAAE;AAAA,IACH,WAAY,eAAgB;AAC3B,oBAAc,QAAQ,iBAAkB,cAAc,KAAM;AAAA,IAC7D;AAeA,cAAW;AAAA,MACV,GAAG;AAAA,MACH,QAAQ,OAAO,QAAQ;AAAA,IACxB,CAAE;AAAA,EACH;AAEA,QAAM,iBAAiB,YAAa,CAAE,kBAAmB;AACxD,WAAO;AAAA,MACN,GAAG;AAAA,MACH,QAAQ;AAAA,MACR,QAAQ;AAAA,IACT;AAAA,EACD,GAAG,CAAC,CAAE;AAEN,QAAM,sBACL,iBAAiB,SAAS,iBAAiB;AAE5C,QAAM,mBACL,mBACA,mBACA,mBACA;AAED,QAAM,QAAQ,oBAAqB;AAAA,IAClC,WAAW;AAAA,IACX;AAAA,IACA;AAAA,EACD,CAAE;AAEF,SACC;AAAA,IAAC;AAAA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MAEI;AAAA,4BAAmB,oBACtB;AAAA,UAAC;AAAA;AAAA,YACE,GAAG;AAAA,cACJ;AAAA,cACA,gBAAiB,OAAO,MAAO,KAC9B,CAAC,CAAE,mBACH,gBAAiB,eAAgB;AAAA,YACnC;AAAA,YACA,UAAW,MAAM,gBAAiB,OAAO,MAAO;AAAA,YAChD,OAAQ,GAAI,QAAS;AAAA,YACrB,YAAa,MAAM,YAAY;AAAA,YAC/B,kBAAmB;AAAA,YACnB;AAAA,YAEI;AAAA,iDACH;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,cAiBA,oBAAC,YAAY,aAAZ,EAAwB,IAAG,UACzB,aAAI,QAAS,GAChB;AAAA,cAED;AAAA,gBAAC;AAAA;AAAA,kBACA;AAAA,kBACA,qBAAsB,CAAE;AAAA,kBACxB,aAAW;AAAA,kBACX,aAAc;AAAA,kBACd,UAAW;AAAA,kBACX,eAAgB;AAAA,kBAChB,kBAAiB;AAAA,kBACjB,OAAQ;AAAA,kBACR,mCAAiC;AAAA;AAAA,cAClC;AAAA;AAAA;AAAA,QACD;AAAA,QAEC,oBACD;AAAA,UAAC;AAAA;AAAA,YACE,GAAG;AAAA,cACJ;AAAA,cACA,gBAAgB,KAAK,0BAA0B;AAAA,YAChD;AAAA,YACA,UAAW;AAAA,YACX,OAAQ,GAAI,QAAS;AAAA,YACrB,oBAAkB;AAAA,YAClB,YAAa,MAAM,gBAAiB,MAAU;AAAA,YAC9C,kBAAmB,gBAAgB;AAAA,YACnC;AAAA,YAEA;AAAA,cAAC;AAAA;AAAA,gBACA,SAAU,UAAU,QAAQ;AAAA,gBAC5B,QAAS;AAAA,gBACT,UAAW,CAAE,aAAc;AAC1B,kCAAiB,YAAY,MAAU;AAAA,gBACxC;AAAA;AAAA,YACD;AAAA;AAAA,QACD;AAAA,QAEC,oBACD;AAAA,UAAC;AAAA;AAAA,YACE,GAAG;AAAA,cACJ;AAAA,cACA,UAAU,KAAK,oBAAoB;AAAA,YACpC;AAAA,YACA,OAAQ,GAAI,QAAS;AAAA,YACrB,UAAW;AAAA,YACX,YAAa;AAAA,YACb,kBAAmB,gBAAgB;AAAA,YAKnC,iCAAkC;AAAA,YAClC;AAAA,YAEE;AAAA,iCACD,oBAAC,YAAY,aAAZ,EAAwB,IAAG,UACzB,aAAI,QAAS,GAChB,IACG;AAAA,cAEJ;AAAA,gBAAC;AAAA;AAAA,kBACA;AAAA,kBACA,gBAAiB;AAAA,kBACjB;AAAA,kBACA,eAAgB,UAAU;AAAA,kBAC1B,kBAAmB;AAAA,kBACnB,SAAU;AAAA;AAAA,cACX;AAAA;AAAA;AAAA,QACD;AAAA;AAAA;AAAA,EAEF;AAEF;",
   "names": []
 }

package/build-module/components/global-styles/color-gradient-dropdown-item.mjs

@@ -1,7 +1,6 @@
 // packages/block-editor/src/components/global-styles/color-gradient-dropdown-item.js
 import clsx from "clsx";
 import {
-  __experimentalToolsPanelItem as ToolsPanelItem,
   __experimentalHStack as HStack,
   __experimentalZStack as ZStack,
   __experimentalDropdownContentWrapper as DropdownContentWrapper,
@@ -17,6 +16,12 @@ import { __ } from "@wordpress/i18n";
 import { reset as resetIcon, caution as cautionIcon } from "@wordpress/icons";
 import ColorGradientControl from "../colors-gradients/control.mjs";
 import { unlock } from "../../lock-unlock.mjs";
+import {
+  getInheritanceProps,
+  InheritanceResetButton,
+  InheritanceToolsPanelItem,
+  isGlobalStylesInheritanceEnabled
+} from "./inheritance/index.mjs";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 var { Tabs } = unlock(componentsPrivateApis);
 function DropdownContent({
@@ -25,9 +30,9 @@ function DropdownContent({
   contrastWarning
 }) {
   const { key: firstTabKey, ...firstTab } = tabs[0] ?? {};
-  const defaultTabId = tabs.find(
-    (tab) => tab.userValue !== void 0
-  )?.key;
+  const defaultTabId = (tabs.find((tab) => tab.userValue !== void 0) ?? tabs.find(
+    (tab) => tab.isPlaceholder || tab.inheritedValue !== void 0
+  ))?.key;
   return /* @__PURE__ */ jsx(DropdownContentWrapper, { paddingSize: "none", children: /* @__PURE__ */ jsxs("div", { className: "block-editor-panel-color-gradient-settings__dropdown-content", children: [
     tabs.length === 1 && /* @__PURE__ */ jsx(
       ColorGradientTab,
@@ -76,11 +81,22 @@ function ColorGradientTab({
   isGradient,
   inheritedValue,
   inheritedSlug,
+  userSlug,
   userValue,
   setValue,
+  isPlaceholder,
   colorGradientControlSettings,
   contrastWarning
 }) {
+  const displayed = userValue ?? inheritedValue;
+  const displayedSlug = userValue !== void 0 ? userSlug : inheritedSlug;
+  const onChange = (newValue, newSlug) => {
+    if (isPlaceholder && newValue === void 0) {
+      setValue(inheritedValue, inheritedSlug);
+      return;
+    }
+    setValue(newValue, newSlug);
+  };
   return /* @__PURE__ */ jsx(
     ColorGradientControl,
     {
@@ -88,12 +104,13 @@ function ColorGradientTab({
       showTitle: false,
       enableAlpha: true,
       __experimentalIsRenderedInSidebar: true,
-      colorValue: isGradient ? void 0 : inheritedValue,
-      colorSlug: isGradient ? void 0 : inheritedSlug,
-      gradientValue: isGradient ? inheritedValue : void 0,
-      onColorChange: isGradient ? void 0 : setValue,
-      onGradientChange: isGradient ? setValue : void 0,
-      clearable: inheritedValue === userValue,
+      colorValue: isGradient ? void 0 : displayed,
+      colorSlug: isGradient ? void 0 : displayedSlug,
+      gradientValue: isGradient ? displayed : void 0,
+      gradientSlug: isGradient ? displayedSlug : void 0,
+      onColorChange: isGradient ? void 0 : onChange,
+      onGradientChange: isGradient ? onChange : void 0,
+      clearable: userValue !== void 0,
       headingLevel: 3,
       noticeProps: !isGradient && contrastWarning ? {
         children: contrastWarning,
@@ -114,13 +131,20 @@ function ColorGradientDropdownItem({
   colorGradientControlSettings,
   panelId,
   contrastWarning,
-  className = "block-editor-tools-panel-color-gradient-settings__item"
+  className = "block-editor-tools-panel-color-gradient-settings__item",
+  isPlaceholder = false,
+  hasInheritedValue = false,
+  showInheritanceLabelIndicators = isGlobalStylesInheritanceEnabled()
 }) {
   const colorGradientDropdownButtonRef = useRef(void 0);
+  const itemClassName = clsx("block-editor-color-gradient-item", className);
+  const hasLocalOverride = showInheritanceLabelIndicators && hasValue() && hasInheritedValue;
+  const inheritanceProps = showInheritanceLabelIndicators ? getInheritanceProps(isPlaceholder, hasLocalOverride, itemClassName) : { className: itemClassName };
   return /* @__PURE__ */ jsx(
-    ToolsPanelItem,
+    InheritanceToolsPanelItem,
     {
-      className: clsx("block-editor-color-gradient-item", className),
+      ...inheritanceProps,
+      showLocalOverrideActionsInLabel: false,
       hasValue,
       label,
       onDeselect: resetValue,
@@ -152,7 +176,19 @@ function ColorGradientDropdownItem({
                   label
                 }
               ) }),
-              hasValue() && /* @__PURE__ */ jsx(
+              hasValue() && (hasLocalOverride ? /* @__PURE__ */ jsx(
+                InheritanceResetButton,
+                {
+                  className: "block-editor-panel-color-gradient-settings__reset",
+                  onResetToInherited: () => {
+                    resetValue();
+                    if (isOpen) {
+                      onToggle();
+                    }
+                    colorGradientDropdownButtonRef.current?.focus();
+                  }
+                }
+              ) : /* @__PURE__ */ jsx(
                 Button,
                 {
                   __next40pxDefaultSize: true,
@@ -168,7 +204,7 @@ function ColorGradientDropdownItem({
                     colorGradientDropdownButtonRef.current?.focus();
                   }
                 }
-              ),
+              )),
               contrastWarning && // An icon-only warning that stays visible while a
               // contrast warning is in effect. It is not a menu;
               // activating it opens the color picker popover where

package/build-module/components/global-styles/color-gradient-dropdown-item.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/global-styles/color-gradient-dropdown-item.js"],
-  "sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport {\n\t__experimentalToolsPanelItem as ToolsPanelItem,\n\t__experimentalHStack as HStack,\n\t__experimentalZStack as ZStack,\n\t__experimentalDropdownContentWrapper as DropdownContentWrapper,\n\tColorIndicator,\n\tFlex,\n\tFlexItem,\n\tDropdown,\n\tButton,\n\tprivateApis as componentsPrivateApis,\n} from '@wordpress/components';\nimport { useRef } from '@wordpress/element';\nimport { __ } from '@wordpress/i18n';\nimport { reset as resetIcon, caution as cautionIcon } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport ColorGradientControl from '../colors-gradients/control';\nimport { unlock } from '../../lock-unlock';\n\nconst { Tabs } = unlock( componentsPrivateApis );\n\n/**\n * @typedef {Object} DropdownContentProps\n * @property {Array}  tabs                         Tab configurations to render.\n * @property {Object} colorGradientControlSettings Settings passed to ColorGradientControl.\n * @property {string} [contrastWarning]            Contrast warning message for the color value.\n */\n\n/**\n * Renders the dropdown content containing the color/gradient picker tabs.\n *\n * @param {DropdownContentProps} props\n */\nfunction DropdownContent( {\n\ttabs,\n\tcolorGradientControlSettings,\n\tcontrastWarning,\n} ) {\n\tconst { key: firstTabKey, ...firstTab } = tabs[ 0 ] ?? {};\n\tconst defaultTabId = tabs.find(\n\t\t( tab ) => tab.userValue !== undefined\n\t)?.key;\n\treturn (\n\t\t<DropdownContentWrapper paddingSize=\"none\">\n\t\t\t<div className=\"block-editor-panel-color-gradient-settings__dropdown-content\">\n\t\t\t\t{ tabs.length === 1 && (\n\t\t\t\t\t<ColorGradientTab\n\t\t\t\t\t\tkey={ firstTabKey }\n\t\t\t\t\t\t{ ...firstTab }\n\t\t\t\t\t\tcolorGradientControlSettings={\n\t\t\t\t\t\t\tcolorGradientControlSettings\n\t\t\t\t\t\t}\n\t\t\t\t\t\tcontrastWarning={ contrastWarning }\n\t\t\t\t\t/>\n\t\t\t\t) }\n\t\t\t\t{ tabs.length > 1 && (\n\t\t\t\t\t<Tabs defaultTabId={ defaultTabId }>\n\t\t\t\t\t\t<Tabs.TabList>\n\t\t\t\t\t\t\t{ tabs.map( ( tab ) => (\n\t\t\t\t\t\t\t\t<Tabs.Tab key={ tab.key } tabId={ tab.key }>\n\t\t\t\t\t\t\t\t\t{ tab.label }\n\t\t\t\t\t\t\t\t</Tabs.Tab>\n\t\t\t\t\t\t\t) ) }\n\t\t\t\t\t\t</Tabs.TabList>\n\n\t\t\t\t\t\t{ tabs.map( ( tab ) => {\n\t\t\t\t\t\t\tconst { key: tabKey, ...restTabProps } = tab;\n\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t<Tabs.TabPanel\n\t\t\t\t\t\t\t\t\tkey={ tabKey }\n\t\t\t\t\t\t\t\t\ttabId={ tabKey }\n\t\t\t\t\t\t\t\t\tfocusable={ false }\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<ColorGradientTab\n\t\t\t\t\t\t\t\t\t\tkey={ tabKey }\n\t\t\t\t\t\t\t\t\t\t{ ...restTabProps }\n\t\t\t\t\t\t\t\t\t\tcolorGradientControlSettings={\n\t\t\t\t\t\t\t\t\t\t\tcolorGradientControlSettings\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\tcontrastWarning={ contrastWarning }\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t</Tabs.TabPanel>\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t} ) }\n\t\t\t\t\t</Tabs>\n\t\t\t\t) }\n\t\t\t</div>\n\t\t</DropdownContentWrapper>\n\t);\n}\n\nconst popoverProps = {\n\tplacement: 'left-start',\n\toffset: 36,\n\tshift: true,\n};\n\nconst LabeledColorIndicators = ( { indicators, label } ) => (\n\t<HStack justify=\"flex-start\">\n\t\t<ZStack isLayered={ false } offset={ -8 }>\n\t\t\t{ indicators.map( ( indicator, index ) => (\n\t\t\t\t<Flex key={ index } expanded={ false }>\n\t\t\t\t\t<ColorIndicator colorValue={ indicator } />\n\t\t\t\t</Flex>\n\t\t\t) ) }\n\t\t</ZStack>\n\t\t<FlexItem className=\"block-editor-panel-color-gradient-settings__color-name\">\n\t\t\t{ label }\n\t\t</FlexItem>\n\t</HStack>\n);\n\nfunction ColorGradientTab( {\n\tisGradient,\n\tinheritedValue,\n\tinheritedSlug,\n\tuserValue,\n\tsetValue,\n\tcolorGradientControlSettings,\n\tcontrastWarning,\n} ) {\n\treturn (\n\t\t<ColorGradientControl\n\t\t\t{ ...colorGradientControlSettings }\n\t\t\tshowTitle={ false }\n\t\t\tenableAlpha\n\t\t\t__experimentalIsRenderedInSidebar\n\t\t\tcolorValue={ isGradient ? undefined : inheritedValue }\n\t\t\tcolorSlug={ isGradient ? undefined : inheritedSlug }\n\t\t\tgradientValue={ isGradient ? inheritedValue : undefined }\n\t\t\tonColorChange={ isGradient ? undefined : setValue }\n\t\t\tonGradientChange={ isGradient ? setValue : undefined }\n\t\t\tclearable={ inheritedValue === userValue }\n\t\t\theadingLevel={ 3 }\n\t\t\tnoticeProps={\n\t\t\t\t! isGradient && contrastWarning\n\t\t\t\t\t? {\n\t\t\t\t\t\t\tchildren: contrastWarning,\n\t\t\t\t\t\t\tstatus: 'warning',\n\t\t\t\t\t\t\tspokenMessage: null,\n\t\t\t\t\t\t\tclassName:\n\t\t\t\t\t\t\t\t'block-editor-panel-color-gradient-settings__contrast-notice',\n\t\t\t\t\t  }\n\t\t\t\t\t: undefined\n\t\t\t}\n\t\t/>\n\t);\n}\n\n// Renders a ToolsPanelItem that opens a dropdown containing one or more\n// color/gradient pickers. Shared between the Color, Background, and\n// Typography panels for consistent color-style controls.\nexport default function ColorGradientDropdownItem( {\n\tlabel,\n\thasValue,\n\tresetValue,\n\tisShownByDefault,\n\tindicators,\n\ttabs,\n\tcolorGradientControlSettings,\n\tpanelId,\n\tcontrastWarning,\n\tclassName = 'block-editor-tools-panel-color-gradient-settings__item',\n} ) {\n\tconst colorGradientDropdownButtonRef = useRef( undefined );\n\treturn (\n\t\t<ToolsPanelItem\n\t\t\tclassName={ clsx( 'block-editor-color-gradient-item', className ) }\n\t\t\thasValue={ hasValue }\n\t\t\tlabel={ label }\n\t\t\tonDeselect={ resetValue }\n\t\t\tisShownByDefault={ isShownByDefault }\n\t\t\tpanelId={ panelId }\n\t\t>\n\t\t\t<Dropdown\n\t\t\t\tpopoverProps={ popoverProps }\n\t\t\t\tclassName=\"block-editor-tools-panel-color-gradient-settings__dropdown\"\n\t\t\t\trenderToggle={ ( { onToggle, isOpen } ) => {\n\t\t\t\t\tconst toggleProps = {\n\t\t\t\t\t\tonClick: onToggle,\n\t\t\t\t\t\tclassName: clsx(\n\t\t\t\t\t\t\t'block-editor-panel-color-gradient-settings__dropdown',\n\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t'is-open': isOpen,\n\t\t\t\t\t\t\t\t'has-contrast-warning': !! contrastWarning,\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t),\n\t\t\t\t\t\t'aria-expanded': isOpen,\n\t\t\t\t\t\tref: colorGradientDropdownButtonRef,\n\t\t\t\t\t};\n\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t<Button { ...toggleProps } __next40pxDefaultSize>\n\t\t\t\t\t\t\t\t<LabeledColorIndicators\n\t\t\t\t\t\t\t\t\tindicators={ indicators }\n\t\t\t\t\t\t\t\t\tlabel={ label }\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t{ hasValue() && (\n\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\t\t\t\tlabel={ __( 'Reset' ) }\n\t\t\t\t\t\t\t\t\tclassName=\"block-editor-panel-color-gradient-settings__reset\"\n\t\t\t\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\t\t\t\ticon={ resetIcon }\n\t\t\t\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t\t\t\tresetValue();\n\t\t\t\t\t\t\t\t\t\tif ( isOpen ) {\n\t\t\t\t\t\t\t\t\t\t\tonToggle();\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\tcolorGradientDropdownButtonRef.current?.focus();\n\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t{ contrastWarning && (\n\t\t\t\t\t\t\t\t// An icon-only warning that stays visible while a\n\t\t\t\t\t\t\t\t// contrast warning is in effect. It is not a menu;\n\t\t\t\t\t\t\t\t// activating it opens the color picker popover where\n\t\t\t\t\t\t\t\t// the full warning notice is shown, so the indicator\n\t\t\t\t\t\t\t\t// doubles as a shortcut to where the issue is fixed.\n\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\t\t\t\ticon={ cautionIcon }\n\t\t\t\t\t\t\t\t\tlabel={ __( 'Low contrast' ) }\n\t\t\t\t\t\t\t\t\tclassName=\"block-editor-panel-color-gradient-settings__contrast-warning\"\n\t\t\t\t\t\t\t\t\taria-expanded={ isOpen }\n\t\t\t\t\t\t\t\t\tonClick={ onToggle }\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t</>\n\t\t\t\t\t);\n\t\t\t\t} }\n\t\t\t\trenderContent={ () => (\n\t\t\t\t\t<DropdownContent\n\t\t\t\t\t\ttabs={ tabs }\n\t\t\t\t\t\tcolorGradientControlSettings={\n\t\t\t\t\t\t\tcolorGradientControlSettings\n\t\t\t\t\t\t}\n\t\t\t\t\t\tcontrastWarning={ contrastWarning }\n\t\t\t\t\t/>\n\t\t\t\t) }\n\t\t\t/>\n\t\t</ToolsPanelItem>\n\t);\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport {\n\t__experimentalHStack as HStack,\n\t__experimentalZStack as ZStack,\n\t__experimentalDropdownContentWrapper as DropdownContentWrapper,\n\tColorIndicator,\n\tFlex,\n\tFlexItem,\n\tDropdown,\n\tButton,\n\tprivateApis as componentsPrivateApis,\n} from '@wordpress/components';\nimport { useRef } from '@wordpress/element';\nimport { __ } from '@wordpress/i18n';\nimport { reset as resetIcon, caution as cautionIcon } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport ColorGradientControl from '../colors-gradients/control';\nimport { unlock } from '../../lock-unlock';\nimport {\n\tgetInheritanceProps,\n\tInheritanceResetButton,\n\tInheritanceToolsPanelItem,\n\tisGlobalStylesInheritanceEnabled,\n} from './inheritance';\n\nconst { Tabs } = unlock( componentsPrivateApis );\n\n/**\n * @typedef {Object} DropdownContentProps\n * @property {Array}  tabs                         Tab configurations to render.\n * @property {Object} colorGradientControlSettings Settings passed to ColorGradientControl.\n * @property {string} [contrastWarning]            Contrast warning message for the color value.\n */\n\n/**\n * Renders the dropdown content containing the color/gradient picker tabs.\n *\n * @param {DropdownContentProps} props\n */\nfunction DropdownContent( {\n\ttabs,\n\tcolorGradientControlSettings,\n\tcontrastWarning,\n} ) {\n\tconst { key: firstTabKey, ...firstTab } = tabs[ 0 ] ?? {};\n\tconst defaultTabId = (\n\t\ttabs.find( ( tab ) => tab.userValue !== undefined ) ??\n\t\ttabs.find(\n\t\t\t( tab ) => tab.isPlaceholder || tab.inheritedValue !== undefined\n\t\t)\n\t)?.key;\n\treturn (\n\t\t<DropdownContentWrapper paddingSize=\"none\">\n\t\t\t<div className=\"block-editor-panel-color-gradient-settings__dropdown-content\">\n\t\t\t\t{ tabs.length === 1 && (\n\t\t\t\t\t<ColorGradientTab\n\t\t\t\t\t\tkey={ firstTabKey }\n\t\t\t\t\t\t{ ...firstTab }\n\t\t\t\t\t\tcolorGradientControlSettings={\n\t\t\t\t\t\t\tcolorGradientControlSettings\n\t\t\t\t\t\t}\n\t\t\t\t\t\tcontrastWarning={ contrastWarning }\n\t\t\t\t\t/>\n\t\t\t\t) }\n\t\t\t\t{ tabs.length > 1 && (\n\t\t\t\t\t<Tabs defaultTabId={ defaultTabId }>\n\t\t\t\t\t\t<Tabs.TabList>\n\t\t\t\t\t\t\t{ tabs.map( ( tab ) => (\n\t\t\t\t\t\t\t\t<Tabs.Tab key={ tab.key } tabId={ tab.key }>\n\t\t\t\t\t\t\t\t\t{ tab.label }\n\t\t\t\t\t\t\t\t</Tabs.Tab>\n\t\t\t\t\t\t\t) ) }\n\t\t\t\t\t\t</Tabs.TabList>\n\n\t\t\t\t\t\t{ tabs.map( ( tab ) => {\n\t\t\t\t\t\t\tconst { key: tabKey, ...restTabProps } = tab;\n\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t<Tabs.TabPanel\n\t\t\t\t\t\t\t\t\tkey={ tabKey }\n\t\t\t\t\t\t\t\t\ttabId={ tabKey }\n\t\t\t\t\t\t\t\t\tfocusable={ false }\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<ColorGradientTab\n\t\t\t\t\t\t\t\t\t\tkey={ tabKey }\n\t\t\t\t\t\t\t\t\t\t{ ...restTabProps }\n\t\t\t\t\t\t\t\t\t\tcolorGradientControlSettings={\n\t\t\t\t\t\t\t\t\t\t\tcolorGradientControlSettings\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\tcontrastWarning={ contrastWarning }\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t</Tabs.TabPanel>\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t} ) }\n\t\t\t\t\t</Tabs>\n\t\t\t\t) }\n\t\t\t</div>\n\t\t</DropdownContentWrapper>\n\t);\n}\n\nconst popoverProps = {\n\tplacement: 'left-start',\n\toffset: 36,\n\tshift: true,\n};\n\nconst LabeledColorIndicators = ( { indicators, label } ) => (\n\t<HStack justify=\"flex-start\">\n\t\t<ZStack isLayered={ false } offset={ -8 }>\n\t\t\t{ indicators.map( ( indicator, index ) => (\n\t\t\t\t<Flex key={ index } expanded={ false }>\n\t\t\t\t\t<ColorIndicator colorValue={ indicator } />\n\t\t\t\t</Flex>\n\t\t\t) ) }\n\t\t</ZStack>\n\t\t<FlexItem className=\"block-editor-panel-color-gradient-settings__color-name\">\n\t\t\t{ label }\n\t\t</FlexItem>\n\t</HStack>\n);\n\nfunction ColorGradientTab( {\n\tisGradient,\n\tinheritedValue,\n\tinheritedSlug,\n\tuserSlug,\n\tuserValue,\n\tsetValue,\n\tisPlaceholder,\n\tcolorGradientControlSettings,\n\tcontrastWarning,\n} ) {\n\t// Display value: prefer the user's local value when set; otherwise fall\n\t// back to the inherited value so the at-rest preselection is visible\n\t// inside the picker.\n\tconst displayed = userValue ?? inheritedValue;\n\t// Slug of the displayed value: the block's own when it has one, otherwise\n\t// the inherited one. Slug matching keeps two same-hex presets apart; a\n\t// slug-less (custom) value falls back to hex matching.\n\tconst displayedSlug = userValue !== undefined ? userSlug : inheritedSlug;\n\t// Display-without-commit interceptor. `ColorPalette` and `GradientPicker`\n\t// fire `onChange( undefined )` when the user clicks the currently-selected\n\t// option. At rest (placeholder mode), that click is the user's \"accept\n\t// inherited\" gesture: the displayed value comes from `inheritedValue`, so\n\t// re-route the `undefined` payload to a commit of the inherited value\n\t// instead of the default \"clear local\" behaviour. Once a local value is\n\t// set, the same click correctly clears local back to at rest.\n\tconst onChange = ( newValue, newSlug ) => {\n\t\tif ( isPlaceholder && newValue === undefined ) {\n\t\t\tsetValue( inheritedValue, inheritedSlug );\n\t\t\treturn;\n\t\t}\n\t\tsetValue( newValue, newSlug );\n\t};\n\treturn (\n\t\t<ColorGradientControl\n\t\t\t{ ...colorGradientControlSettings }\n\t\t\tshowTitle={ false }\n\t\t\tenableAlpha\n\t\t\t__experimentalIsRenderedInSidebar\n\t\t\tcolorValue={ isGradient ? undefined : displayed }\n\t\t\tcolorSlug={ isGradient ? undefined : displayedSlug }\n\t\t\tgradientValue={ isGradient ? displayed : undefined }\n\t\t\tgradientSlug={ isGradient ? displayedSlug : undefined }\n\t\t\tonColorChange={ isGradient ? undefined : onChange }\n\t\t\tonGradientChange={ isGradient ? onChange : undefined }\n\t\t\t/*\n\t\t\t * The control is clearable whenever a local value is set, so the\n\t\t\t * user can always reset their own override back to the inherited\n\t\t\t * (placeholder) value. In placeholder mode (no local value) there\n\t\t\t * is nothing local to clear; clicking the active swatch accepts the\n\t\t\t * inherited value via the onChange interceptor above instead.\n\t\t\t */\n\t\t\tclearable={ userValue !== undefined }\n\t\t\theadingLevel={ 3 }\n\t\t\tnoticeProps={\n\t\t\t\t! isGradient && contrastWarning\n\t\t\t\t\t? {\n\t\t\t\t\t\t\tchildren: contrastWarning,\n\t\t\t\t\t\t\tstatus: 'warning',\n\t\t\t\t\t\t\tspokenMessage: null,\n\t\t\t\t\t\t\tclassName:\n\t\t\t\t\t\t\t\t'block-editor-panel-color-gradient-settings__contrast-notice',\n\t\t\t\t\t  }\n\t\t\t\t\t: undefined\n\t\t\t}\n\t\t/>\n\t);\n}\n\n// Renders a ToolsPanelItem that opens a dropdown containing one or more\n// color/gradient pickers. Shared between the Color, Background, and\n// Typography panels for consistent color-style controls.\nexport default function ColorGradientDropdownItem( {\n\tlabel,\n\thasValue,\n\tresetValue,\n\tisShownByDefault,\n\tindicators,\n\ttabs,\n\tcolorGradientControlSettings,\n\tpanelId,\n\tcontrastWarning,\n\tclassName = 'block-editor-tools-panel-color-gradient-settings__item',\n\tisPlaceholder = false,\n\thasInheritedValue = false,\n\tshowInheritanceLabelIndicators = isGlobalStylesInheritanceEnabled(),\n} ) {\n\tconst colorGradientDropdownButtonRef = useRef( undefined );\n\tconst itemClassName = clsx( 'block-editor-color-gradient-item', className );\n\t// A local override exists when the user has set a value that shadows an\n\t// inherited one — only then do we offer the reset-to-inherited / push\n\t// actions and the override label indicator.\n\tconst hasLocalOverride =\n\t\tshowInheritanceLabelIndicators && hasValue() && hasInheritedValue;\n\tconst inheritanceProps = showInheritanceLabelIndicators\n\t\t? getInheritanceProps( isPlaceholder, hasLocalOverride, itemClassName )\n\t\t: { className: itemClassName };\n\treturn (\n\t\t<InheritanceToolsPanelItem\n\t\t\t{ ...inheritanceProps }\n\t\t\tshowLocalOverrideActionsInLabel={ false }\n\t\t\thasValue={ hasValue }\n\t\t\tlabel={ label }\n\t\t\tonDeselect={ resetValue }\n\t\t\tisShownByDefault={ isShownByDefault }\n\t\t\tpanelId={ panelId }\n\t\t>\n\t\t\t<Dropdown\n\t\t\t\tpopoverProps={ popoverProps }\n\t\t\t\tclassName=\"block-editor-tools-panel-color-gradient-settings__dropdown\"\n\t\t\t\trenderToggle={ ( { onToggle, isOpen } ) => {\n\t\t\t\t\tconst toggleProps = {\n\t\t\t\t\t\tonClick: onToggle,\n\t\t\t\t\t\tclassName: clsx(\n\t\t\t\t\t\t\t'block-editor-panel-color-gradient-settings__dropdown',\n\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t'is-open': isOpen,\n\t\t\t\t\t\t\t\t'has-contrast-warning': !! contrastWarning,\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t),\n\t\t\t\t\t\t'aria-expanded': isOpen,\n\t\t\t\t\t\tref: colorGradientDropdownButtonRef,\n\t\t\t\t\t};\n\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t<Button { ...toggleProps } __next40pxDefaultSize>\n\t\t\t\t\t\t\t\t<LabeledColorIndicators\n\t\t\t\t\t\t\t\t\tindicators={ indicators }\n\t\t\t\t\t\t\t\t\tlabel={ label }\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t{ hasValue() &&\n\t\t\t\t\t\t\t\t( hasLocalOverride ? (\n\t\t\t\t\t\t\t\t\t<InheritanceResetButton\n\t\t\t\t\t\t\t\t\t\tclassName=\"block-editor-panel-color-gradient-settings__reset\"\n\t\t\t\t\t\t\t\t\t\tonResetToInherited={ () => {\n\t\t\t\t\t\t\t\t\t\t\tresetValue();\n\t\t\t\t\t\t\t\t\t\t\tif ( isOpen ) {\n\t\t\t\t\t\t\t\t\t\t\t\tonToggle();\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\tcolorGradientDropdownButtonRef.current?.focus();\n\t\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\t\t\t\t\tlabel={ __( 'Reset' ) }\n\t\t\t\t\t\t\t\t\t\tclassName=\"block-editor-panel-color-gradient-settings__reset\"\n\t\t\t\t\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\t\t\t\t\ticon={ resetIcon }\n\t\t\t\t\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t\t\t\t\tresetValue();\n\t\t\t\t\t\t\t\t\t\t\tif ( isOpen ) {\n\t\t\t\t\t\t\t\t\t\t\t\tonToggle();\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\tcolorGradientDropdownButtonRef.current?.focus();\n\t\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t) ) }\n\t\t\t\t\t\t\t{ contrastWarning && (\n\t\t\t\t\t\t\t\t// An icon-only warning that stays visible while a\n\t\t\t\t\t\t\t\t// contrast warning is in effect. It is not a menu;\n\t\t\t\t\t\t\t\t// activating it opens the color picker popover where\n\t\t\t\t\t\t\t\t// the full warning notice is shown, so the indicator\n\t\t\t\t\t\t\t\t// doubles as a shortcut to where the issue is fixed.\n\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\t\t\t\ticon={ cautionIcon }\n\t\t\t\t\t\t\t\t\tlabel={ __( 'Low contrast' ) }\n\t\t\t\t\t\t\t\t\tclassName=\"block-editor-panel-color-gradient-settings__contrast-warning\"\n\t\t\t\t\t\t\t\t\taria-expanded={ isOpen }\n\t\t\t\t\t\t\t\t\tonClick={ onToggle }\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t</>\n\t\t\t\t\t);\n\t\t\t\t} }\n\t\t\t\trenderContent={ () => (\n\t\t\t\t\t<DropdownContent\n\t\t\t\t\t\ttabs={ tabs }\n\t\t\t\t\t\tcolorGradientControlSettings={\n\t\t\t\t\t\t\tcolorGradientControlSettings\n\t\t\t\t\t\t}\n\t\t\t\t\t\tcontrastWarning={ contrastWarning }\n\t\t\t\t\t/>\n\t\t\t\t) }\n\t\t\t/>\n\t\t</InheritanceToolsPanelItem>\n\t);\n}\n"],
+  "mappings": "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",
   "names": []
 }

package/build-module/components/global-styles/color-panel.mjs

@@ -2,6 +2,7 @@
 import { __experimentalToolsPanel as ToolsPanel } from "@wordpress/components";
 import { useCallback, useMemo } from "@wordpress/element";
 import { __ } from "@wordpress/i18n";
+import { getCSSValueFromRawStyle } from "@wordpress/style-engine";
 import ColorGradientDropdownItem from "./color-gradient-dropdown-item.mjs";
 import {
   useColorsPerOrigin,
@@ -14,6 +15,7 @@ import {
   extractPresetSlug,
   encodeColorValueWithPalette
 } from "../../utils/color-values.mjs";
+import { isGlobalStylesInheritanceEnabled } from "./inheritance/index.mjs";
 import { jsx, jsxs } from "react/jsx-runtime";
 function useHasColorPanel(settings) {
   const hasLinkPanel = useHasLinkPanel(settings);
@@ -94,7 +96,8 @@ function ColorPanel({
   defaultControls = DEFAULT_CONTROLS,
   label,
   children,
-  contrastWarning
+  contrastWarning,
+  showInheritanceLabelIndicators = isGlobalStylesInheritanceEnabled()
 }) {
   const {
     colors,
@@ -107,8 +110,9 @@ function ColorPanel({
     decodeValue,
     encodeGradientValue
   } = useColorGradientSettings(settings);
+  const decodeInheritedColor = (rawValue) => getCSSValueFromRawStyle(decodeValue(rawValue));
   const showLinkPanel = useHasLinkPanel(settings);
-  const linkColor = decodeValue(
+  const linkColor = decodeInheritedColor(
     inheritedValue?.elements?.link?.color?.text
   );
   const userLinkColor = decodeValue(value?.elements?.link?.color?.text);
@@ -121,7 +125,7 @@ function ColorPanel({
       )
     );
   };
-  const hoverLinkColor = decodeValue(
+  const hoverLinkColor = decodeInheritedColor(
     inheritedValue?.elements?.link?.[":hover"]?.color?.text
   );
   const userHoverLinkColor = decodeValue(
@@ -237,7 +241,12 @@ function ColorPanel({
       hasValue: hasLink,
       resetValue: resetLink,
       isShownByDefault: defaultControls.link,
-      indicators: [linkColor, hoverLinkColor],
+      indicators: [
+        userLinkColor ?? linkColor,
+        userHoverLinkColor ?? hoverLinkColor
+      ],
+      isPlaceholder: userLinkColor === void 0 && userHoverLinkColor === void 0 && (linkColor !== void 0 || hoverLinkColor !== void 0),
+      hasInheritedValue: linkColor !== void 0 || hoverLinkColor !== void 0,
       contrastWarning,
       tabs: [
         {
@@ -248,8 +257,13 @@ function ColorPanel({
             inheritedValue?.elements?.link?.color?.text,
             "color"
           ),
+          userSlug: extractPresetSlug(
+            value?.elements?.link?.color?.text,
+            "color"
+          ),
           setValue: setLinkColor,
-          userValue: userLinkColor
+          userValue: userLinkColor,
+          isPlaceholder: userLinkColor === void 0 && linkColor !== void 0
         },
         {
           key: "hover",
@@ -259,8 +273,13 @@ function ColorPanel({
             inheritedValue?.elements?.link?.[":hover"]?.color?.text,
             "color"
           ),
+          userSlug: extractPresetSlug(
+            value?.elements?.link?.[":hover"]?.color?.text,
+            "color"
+          ),
           setValue: setHoverLinkColor,
-          userValue: userHoverLinkColor
+          userValue: userHoverLinkColor,
+          isPlaceholder: userHoverLinkColor === void 0 && hoverLinkColor !== void 0
         }
       ]
     }
@@ -269,13 +288,13 @@ function ColorPanel({
     if (!showPanel) {
       return;
     }
-    const elementBackgroundColor = decodeValue(
+    const elementBackgroundColor = decodeInheritedColor(
       inheritedValue?.elements?.[name]?.color?.background
     );
-    const elementGradient = decodeValue(
+    const elementGradient = decodeInheritedColor(
       inheritedValue?.elements?.[name]?.color?.gradient
     );
-    const elementTextColor = decodeValue(
+    const elementTextColor = decodeInheritedColor(
       inheritedValue?.elements?.[name]?.color?.text
     );
     const elementBackgroundUserColor = decodeValue(
@@ -324,16 +343,21 @@ function ColorPanel({
       newValue.elements[name].color.gradient = void 0;
       onChange(newValue);
     };
-    const setElementGradient = (newGradient) => {
+    const setElementGradient = (newGradient, newSlug) => {
       const newValue = setImmutably(
         value,
         ["elements", name, "color", "gradient"],
-        encodeGradientValue(newGradient)
+        encodeGradientValue(newGradient, newSlug)
       );
       newValue.elements[name].color.background = void 0;
       onChange(newValue);
     };
     const supportsBackground = name !== "caption";
+    const isElementTextPlaceholder = elementTextUserColor === void 0 && elementTextColor !== void 0;
+    const isElementBackgroundPlaceholder = elementBackgroundUserColor === void 0 && elementBackgroundColor !== void 0;
+    const isElementGradientPlaceholder = elementGradientUserColor === void 0 && elementGradient !== void 0;
+    const isElementPlaceholder = elementTextUserColor === void 0 && elementBackgroundUserColor === void 0 && elementGradientUserColor === void 0 && (elementTextColor !== void 0 || elementBackgroundColor !== void 0 || elementGradient !== void 0);
+    const hasElementInheritedValue = elementTextColor !== void 0 || elementBackgroundColor !== void 0 || elementGradient !== void 0;
     items.push({
       key: name,
       label: elementLabel,
@@ -341,9 +365,11 @@ function ColorPanel({
       resetValue: resetElement,
       isShownByDefault: defaultControls[name],
       indicators: supportsBackground ? [
-        elementTextColor,
-        elementGradient ?? elementBackgroundColor
-      ] : [elementTextColor],
+        elementTextUserColor ?? elementTextColor,
+        elementGradientUserColor ?? elementGradient ?? elementBackgroundUserColor ?? elementBackgroundColor
+      ] : [elementTextUserColor ?? elementTextColor],
+      isPlaceholder: isElementPlaceholder,
+      hasInheritedValue: hasElementInheritedValue,
       tabs: [
         hasSolidColors && {
           key: "text",
@@ -353,8 +379,13 @@ function ColorPanel({
             inheritedValue?.elements?.[name]?.color?.text,
             "color"
           ),
+          userSlug: extractPresetSlug(
+            value?.elements?.[name]?.color?.text,
+            "color"
+          ),
           setValue: setElementTextColor,
-          userValue: elementTextUserColor
+          userValue: elementTextUserColor,
+          isPlaceholder: isElementTextPlaceholder
         },
         hasSolidColors && supportsBackground && {
           key: "background",
@@ -364,16 +395,30 @@ function ColorPanel({
             inheritedValue?.elements?.[name]?.color?.background,
             "color"
           ),
+          userSlug: extractPresetSlug(
+            value?.elements?.[name]?.color?.background,
+            "color"
+          ),
           setValue: setElementBackgroundColor,
-          userValue: elementBackgroundUserColor
+          userValue: elementBackgroundUserColor,
+          isPlaceholder: isElementBackgroundPlaceholder
         },
         hasGradientColors && supportsBackground && {
           key: "gradient",
           label: __("Gradient"),
           inheritedValue: elementGradient,
+          inheritedSlug: extractPresetSlug(
+            inheritedValue?.elements?.[name]?.color?.gradient,
+            "gradient"
+          ),
+          userSlug: extractPresetSlug(
+            value?.elements?.[name]?.color?.gradient,
+            "gradient"
+          ),
           setValue: setElementGradient,
           userValue: elementGradientUserColor,
-          isGradient: true
+          isGradient: true,
+          isPlaceholder: isElementGradientPlaceholder
         }
       ].filter(Boolean)
     });
@@ -393,6 +438,7 @@ function ColorPanel({
             ColorGradientDropdownItem,
             {
               ...restItem,
+              showInheritanceLabelIndicators,
               colorGradientControlSettings: {
                 colors,
                 disableCustomColors: !areCustomSolidsEnabled,