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

package/src/components/global-styles/border-panel.js

@@ -1,27 +1,24 @@
-/**
- * WordPress dependencies
- */
 import {
 	BorderBoxControl,
 	__experimentalHasSplitBorders as hasSplitBorders,
 	__experimentalIsDefinedBorder as isDefinedBorder,
 	__experimentalToolsPanel as ToolsPanel,
-	__experimentalToolsPanelItem as ToolsPanelItem,
 	BaseControl,
 } from '@wordpress/components';
 import { useCallback, useMemo } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import { getValueFromVariable } from '@wordpress/global-styles-engine';
-
-/**
- * Internal dependencies
- */
 import BorderRadiusControl from '../border-radius-control';
 import { useColorsPerOrigin } from './hooks';
 import { useToolsPanelDropdownMenuProps } from './utils';
 import { setImmutably } from '../../utils/object';
 import { useBorderPanelLabel } from '../../hooks/border';
 import { ShadowPopover, useShadowPresets } from './shadow-panel-components';
+import {
+	getInheritanceProps,
+	InheritanceToolsPanelItem,
+	isGlobalStylesInheritanceEnabled,
+} from './inheritance';
 
 export function useHasBorderPanel( settings ) {
 	const controls = Object.values( useHasBorderPanelControls( settings ) );
@@ -103,6 +100,7 @@ export default function BorderPanel( {
 	panelId,
 	name,
 	defaultControls = DEFAULT_CONTROLS,
+	showInheritanceLabelIndicators = isGlobalStylesInheritanceEnabled(),
 } ) {
 	const colors = useColorsPerOrigin( settings );
 	const areCustomSolidsEnabled = settings?.color?.custom;
@@ -110,6 +108,14 @@ export default function BorderPanel( {
 		( rawValue ) => getValueFromVariable( { settings }, '', rawValue ),
 		[ settings ]
 	);
+	// Always keep the layout className (e.g. `single-column`); only the
+	// inheritance treatment is gated on `showInheritanceLabelIndicators`.
+	const inheritanceProps = ( isInherited, hasLocalOverride, className ) =>
+		getInheritanceProps(
+			showInheritanceLabelIndicators && isInherited,
+			showInheritanceLabelIndicators && hasLocalOverride,
+			className
+		);
 	const encodeColorValue = ( colorValue ) => {
 		const allColors = colors.flatMap(
 			( { colors: originColors } ) => originColors
@@ -121,61 +127,141 @@ export default function BorderPanel( {
 			? 'var:preset|color|' + colorObject.slug
 			: colorValue;
 	};
-	const border = useMemo( () => {
-		if ( hasSplitBorders( inheritedValue?.border ) ) {
-			const borderValue = { ...inheritedValue?.border };
-			[ 'top', 'right', 'bottom', 'left' ].forEach( ( side ) => {
-				borderValue[ side ] = {
-					...borderValue[ side ],
-					color: decodeValue( borderValue[ side ]?.color ),
-				};
-			} );
-			return borderValue;
-		}
-		return {
-			...inheritedValue?.border,
-			color: inheritedValue?.border?.color
-				? decodeValue( inheritedValue?.border?.color )
-				: undefined,
-		};
-	}, [ inheritedValue?.border, decodeValue ] );
+	// Decode a `border` sub-tree (handles split borders + flat shape).
+	const decodeBorder = useCallback(
+		( source ) => {
+			if ( ! source ) {
+				return undefined;
+			}
+			if ( hasSplitBorders( source ) ) {
+				const out = { ...source };
+				[ 'top', 'right', 'bottom', 'left' ].forEach( ( side ) => {
+					out[ side ] = {
+						...out[ side ],
+						color: decodeValue( out[ side ]?.color ),
+					};
+				} );
+				return out;
+			}
+			return {
+				...source,
+				color: source.color ? decodeValue( source.color ) : undefined,
+			};
+		},
+		[ decodeValue ]
+	);
+	// Local-then-inherited: prefer the user's locally-set border (whether
+	// flat or split) when defined, otherwise fall back to the inherited
+	// Global Styles border. The merge happens at the sub-tree root, not
+	// at the leaf level — borders are commonly authored as a single
+	// affordance in the inspector, so partial leaf merges would be
+	// surprising.
+	const localBorder = useMemo(
+		() => decodeBorder( value?.border ),
+		[ value?.border, decodeBorder ]
+	);
+	const inheritedBorder = useMemo(
+		() => decodeBorder( inheritedValue?.border ),
+		[ inheritedValue?.border, decodeBorder ]
+	);
+	const isBorderPlaceholder =
+		! isDefinedBorder( value?.border ) &&
+		!! inheritedBorder &&
+		isDefinedBorder( inheritedBorder );
+	const border = isBorderPlaceholder ? inheritedBorder : localBorder;
 	const setBorder = ( newBorder ) =>
 		onChange( { ...value, border: newBorder } );
 	const showBorderColor = useHasBorderColorControl( settings );
 	const showBorderStyle = useHasBorderStyleControl( settings );
 	const showBorderWidth = useHasBorderWidthControl( settings );
 
-	// Border radius.
+	// Border radius. Display inherited values through the control's `values`
+	// prop when local values are empty so UnitControl can parse the numeric
+	// quantity and selected unit normally (e.g. `2.5em` -> `2.5` + `em`).
+	// `hasBorderRadius` remains local-only, so displaying the inherited value
+	// does not mark the ToolsPanel item as customised or commit on mount.
 	const showBorderRadius = useHasBorderRadiusControl( settings );
-	const borderRadiusValues = useMemo( () => {
-		if ( typeof inheritedValue?.border?.radius !== 'object' ) {
-			return decodeValue( inheritedValue?.border?.radius );
+	const localBorderRadius = useMemo( () => {
+		if ( typeof value?.border?.radius !== 'object' ) {
+			return decodeValue( value?.border?.radius );
+		}
+		return {
+			topLeft: decodeValue( value?.border?.radius?.topLeft ),
+			topRight: decodeValue( value?.border?.radius?.topRight ),
+			bottomLeft: decodeValue( value?.border?.radius?.bottomLeft ),
+			bottomRight: decodeValue( value?.border?.radius?.bottomRight ),
+		};
+	}, [ value?.border?.radius, decodeValue ] );
+	const inheritedBorderRadius = useMemo( () => {
+		const rawRadius = inheritedValue?.border?.radius;
+		if ( typeof rawRadius !== 'object' ) {
+			return decodeValue( rawRadius );
 		}
-
 		return {
-			topLeft: decodeValue( inheritedValue?.border?.radius?.topLeft ),
-			topRight: decodeValue( inheritedValue?.border?.radius?.topRight ),
-			bottomLeft: decodeValue(
-				inheritedValue?.border?.radius?.bottomLeft
-			),
-			bottomRight: decodeValue(
-				inheritedValue?.border?.radius?.bottomRight
-			),
+			topLeft: decodeValue( rawRadius?.topLeft ),
+			topRight: decodeValue( rawRadius?.topRight ),
+			bottomLeft: decodeValue( rawRadius?.bottomLeft ),
+			bottomRight: decodeValue( rawRadius?.bottomRight ),
 		};
 	}, [ inheritedValue?.border?.radius, decodeValue ] );
+	// Spread the local border, not the merged display value, or setting a
+	// radius bakes the inherited border into the local override. Mirror of
+	// the guard in `onBorderChange`.
 	const setBorderRadius = ( newBorderRadius ) =>
-		setBorder( { ...border, radius: newBorderRadius } );
+		setBorder( { ...value?.border, radius: newBorderRadius } );
 	const hasBorderRadius = () => {
 		const borderValues = value?.border?.radius;
 		if ( typeof borderValues === 'object' ) {
-			return Object.entries( borderValues ).some( Boolean );
+			return Object.entries( borderValues ).some( ( [ , v ] ) => !! v );
 		}
 		return !! borderValues;
 	};
+	const isBorderRadiusPlaceholder =
+		! hasBorderRadius() &&
+		inheritedBorderRadius !== undefined &&
+		inheritedBorderRadius !== '';
+	// Build an object value so unlinked-mode shows per-corner inherited
+	// values. The control accepts either a string or an object; passing the
+	// object form is correct in both modes (the control collapses to the
+	// `all`/first corner in linked mode).
+	const borderRadius = useMemo( () => {
+		if ( ! isBorderRadiusPlaceholder ) {
+			return localBorderRadius;
+		}
+		if ( typeof inheritedBorderRadius === 'string' ) {
+			return inheritedBorderRadius;
+		}
+		const obj = inheritedBorderRadius;
+		if ( ! obj ) {
+			return localBorderRadius;
+		}
+		const all =
+			obj.topLeft &&
+			obj.topLeft === obj.topRight &&
+			obj.topLeft === obj.bottomLeft &&
+			obj.topLeft === obj.bottomRight
+				? obj.topLeft
+				: undefined;
+		return { all, ...obj };
+	}, [
+		isBorderRadiusPlaceholder,
+		localBorderRadius,
+		inheritedBorderRadius,
+	] );
 	const hasShadowControl = useHasShadowControl( settings );
 
-	// Shadow
-	const shadow = decodeValue( inheritedValue?.shadow );
+	// Shadow. At rest, the popover toggle button uses the placeholder
+	// treatment, and the popover preset list pre-selects the inherited shadow.
+	// The interceptor below recognises the user's "accept inherited" click as
+	// an explicit commit, mirroring the ToggleGroup pattern in the typography
+	// panel.
+	const localShadow = decodeValue( value?.shadow );
+	const inheritedShadow = decodeValue( inheritedValue?.shadow );
+	const isShadowPlaceholder =
+		localShadow === undefined &&
+		inheritedShadow !== undefined &&
+		inheritedShadow !== '';
+	const shadow = isShadowPlaceholder ? inheritedShadow : localShadow;
 	const shadowPresets = settings?.shadow?.presets ?? {};
 	const mergedShadowPresets =
 		shadowPresets.custom ??
@@ -195,8 +281,30 @@ export default function BorderPanel( {
 			)
 		);
 	};
+	// Display-without-commit interceptor for the shadow preset list. When the
+	// user is at the at-rest preselect (local is undefined, inherited is the
+	// active shadow), `ShadowPresets`' default toggle-off behaviour would
+	// interpret the click on the highlighted preset as `undefined` (clear).
+	// Re-route it to an explicit commit of the inherited value, so clicking
+	// the visible preselected preset is the user's "accept this inherited
+	// value" affordance.
+	const setShadowWithInheritedCommit = ( newValue ) => {
+		if ( isShadowPlaceholder && newValue === undefined ) {
+			setShadow( inheritedShadow );
+			return;
+		}
+		setShadow( newValue );
+	};
 	const hasShadow = () => !! value?.shadow;
 	const resetShadow = () => setShadow( undefined );
+	// A local override exists when the user has set a shadow that shadows an
+	// inherited one. Only then does the toggle render the blue-dot reset
+	// affordance (mirroring the color/gradient controls); a merely-inherited
+	// value at rest shows no reset button.
+	const hasShadowLocalOverride =
+		showInheritanceLabelIndicators &&
+		hasShadow() &&
+		inheritedShadow !== undefined;
 
 	const resetBorder = () => {
 		if ( hasBorderRadius() ) {
@@ -225,9 +333,22 @@ export default function BorderPanel( {
 		}
 
 		// As radius is maintained separately to color, style, and width
-		// maintain its value. Undefined values here will be cleaned when
+		// maintain its value. Read from `value` (local-only) rather than
+		// `border` (the merged display value), otherwise an inherited
+		// radius gets baked into the local override every time the
+		// user touches color/style/width — which both pollutes the
+		// stored attribute and causes the radius `ToolsPanelItem` to
+		// flip into the `has-local-override-from-global-styles` state
+		// even though the user never customised the radius. The
+		// `radius` key must come after the spread so it wins over any
+		// `radius` field forwarded by `BorderBoxControl`'s inner
+		// `BorderControl`, which merges its incoming `value` with the
+		// changed prop. Undefined values here will be cleaned when
 		// global styles are saved.
-		setBorder( { radius: border?.radius, ...updatedBorder } );
+		setBorder( {
+			...updatedBorder,
+			radius: value?.border?.radius,
+		} );
 	};
 
 	const resetAllFilter = useCallback( ( previousValue ) => {
@@ -262,13 +383,41 @@ export default function BorderPanel( {
 			label={ label }
 		>
 			{ ( showBorderWidth || showBorderColor ) && (
-				<ToolsPanelItem
+				<InheritanceToolsPanelItem
+					{ ...inheritanceProps(
+						isBorderPlaceholder,
+						isDefinedBorder( value?.border ) &&
+							!! inheritedBorder &&
+							isDefinedBorder( inheritedBorder )
+					) }
 					hasValue={ () => isDefinedBorder( value?.border ) }
 					label={ __( 'Border' ) }
 					onDeselect={ () => resetBorder() }
 					isShownByDefault={ showBorderByDefault }
 					panelId={ panelId }
 				>
+					{ ( showInheritanceLabelIndicators ||
+						hasShadowControl ) && (
+						// Render the visible label as `BaseControl.VisualLabel`
+						// (which produces `.components-base-control__label`)
+						// rather than passing `label` to `BorderBoxControl`,
+						// whose internal `<StyledLabel>` carries no stable
+						// className. The inheritance treatment and the
+						// local-override reset affordance both target
+						// `.components-base-control__label`, so the visible
+						// "Border" label has to be a `BaseControl` label to
+						// receive them.
+						//
+						// Render it whenever a Shadow control is also present so
+						// the two controls stay disambiguated (mirrors the
+						// Shadow label's `hasBorderControl` guard below, and
+						// trunk's `hideLabelFromVision={ ! hasShadowControl }`),
+						// even when inheritance indicators are off (e.g. in
+						// Global Styles).
+						<BaseControl.VisualLabel as="legend">
+							{ __( 'Border' ) }
+						</BaseControl.VisualLabel>
+					) }
 					<BorderBoxControl
 						colors={ colors }
 						disableCustomColors={ ! areCustomSolidsEnabled }
@@ -279,34 +428,46 @@ export default function BorderPanel( {
 						popoverPlacement="left-start"
 						value={ border }
 						__experimentalIsRenderedInSidebar
-						hideLabelFromVision={ ! hasShadowControl }
-						label={ __( 'Border' ) }
 					/>
-				</ToolsPanelItem>
+				</InheritanceToolsPanelItem>
 			) }
 			{ showBorderRadius && (
-				<ToolsPanelItem
+				<InheritanceToolsPanelItem
+					{ ...inheritanceProps(
+						isBorderRadiusPlaceholder,
+						hasBorderRadius() && inheritedBorderRadius !== undefined
+					) }
 					hasValue={ hasBorderRadius }
 					label={ __( 'Radius' ) }
+					hasInlineEndToggle
 					onDeselect={ () => setBorderRadius( undefined ) }
 					isShownByDefault={ defaultControls.radius }
 					panelId={ panelId }
 				>
 					<BorderRadiusControl
 						presets={ settings?.border?.radiusSizes }
-						values={ borderRadiusValues }
+						values={ borderRadius }
 						onChange={ ( newValue ) => {
 							setBorderRadius( newValue || undefined );
 						} }
 					/>
-				</ToolsPanelItem>
+				</InheritanceToolsPanelItem>
 			) }
 			{ hasShadowControl && (
-				<ToolsPanelItem
+				<InheritanceToolsPanelItem
+					{ ...inheritanceProps(
+						isShadowPlaceholder,
+						hasShadow() && inheritedShadow !== undefined
+					) }
 					label={ __( 'Shadow' ) }
 					hasValue={ hasShadow }
 					onDeselect={ resetShadow }
 					isShownByDefault={ defaultControls.shadow }
+					// The shadow toggle renders its own reset affordance (blue
+					// dot for a local override, default reset otherwise) inside
+					// the control, mirroring the color/gradient controls, so the
+					// panel item must not render a second sibling reset dot.
+					showLocalOverrideActionsInLabel={ false }
 					panelId={ panelId }
 				>
 					{ hasBorderControl ? (
@@ -317,10 +478,13 @@ export default function BorderPanel( {
 
 					<ShadowPopover
 						shadow={ shadow }
-						onShadowChange={ setShadow }
+						onShadowChange={ setShadowWithInheritedCommit }
 						settings={ settings }
+						hasLocalValue={ hasShadow() }
+						hasLocalOverride={ hasShadowLocalOverride }
+						onReset={ resetShadow }
 					/>
-				</ToolsPanelItem>
+				</InheritanceToolsPanelItem>
 			) }
 		</Wrapper>
 	);

package/src/components/global-styles/color-gradient-dropdown-item.js

@@ -1,13 +1,5 @@
-/**
- * External dependencies
- */
 import clsx from 'clsx';
-
-/**
- * WordPress dependencies
- */
 import {
-	__experimentalToolsPanelItem as ToolsPanelItem,
 	__experimentalHStack as HStack,
 	__experimentalZStack as ZStack,
 	__experimentalDropdownContentWrapper as DropdownContentWrapper,
@@ -21,12 +13,14 @@ import {
 import { useRef } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import { reset as resetIcon, caution as cautionIcon } from '@wordpress/icons';
-
-/**
- * Internal dependencies
- */
 import ColorGradientControl from '../colors-gradients/control';
 import { unlock } from '../../lock-unlock';
+import {
+	getInheritanceProps,
+	InheritanceResetButton,
+	InheritanceToolsPanelItem,
+	isGlobalStylesInheritanceEnabled,
+} from './inheritance';
 
 const { Tabs } = unlock( componentsPrivateApis );
 
@@ -48,8 +42,11 @@ function DropdownContent( {
 	contrastWarning,
 } ) {
 	const { key: firstTabKey, ...firstTab } = tabs[ 0 ] ?? {};
-	const defaultTabId = tabs.find(
-		( tab ) => tab.userValue !== undefined
+	const defaultTabId = (
+		tabs.find( ( tab ) => tab.userValue !== undefined ) ??
+		tabs.find(
+			( tab ) => tab.isPlaceholder || tab.inheritedValue !== undefined
+		)
 	)?.key;
 	return (
 		<DropdownContentWrapper paddingSize="none">
@@ -125,23 +122,55 @@ function ColorGradientTab( {
 	isGradient,
 	inheritedValue,
 	inheritedSlug,
+	userSlug,
 	userValue,
 	setValue,
+	isPlaceholder,
 	colorGradientControlSettings,
 	contrastWarning,
 } ) {
+	// Display value: prefer the user's local value when set; otherwise fall
+	// back to the inherited value so the at-rest preselection is visible
+	// inside the picker.
+	const displayed = userValue ?? inheritedValue;
+	// Slug of the displayed value: the block's own when it has one, otherwise
+	// the inherited one. Slug matching keeps two same-hex presets apart; a
+	// slug-less (custom) value falls back to hex matching.
+	const displayedSlug = userValue !== undefined ? userSlug : inheritedSlug;
+	// Display-without-commit interceptor. `ColorPalette` and `GradientPicker`
+	// fire `onChange( undefined )` when the user clicks the currently-selected
+	// option. At rest (placeholder mode), that click is the user's "accept
+	// inherited" gesture: the displayed value comes from `inheritedValue`, so
+	// re-route the `undefined` payload to a commit of the inherited value
+	// instead of the default "clear local" behaviour. Once a local value is
+	// set, the same click correctly clears local back to at rest.
+	const onChange = ( newValue, newSlug ) => {
+		if ( isPlaceholder && newValue === undefined ) {
+			setValue( inheritedValue, inheritedSlug );
+			return;
+		}
+		setValue( newValue, newSlug );
+	};
 	return (
 		<ColorGradientControl
 			{ ...colorGradientControlSettings }
 			showTitle={ false }
 			enableAlpha
 			__experimentalIsRenderedInSidebar
-			colorValue={ isGradient ? undefined : inheritedValue }
-			colorSlug={ isGradient ? undefined : inheritedSlug }
-			gradientValue={ isGradient ? inheritedValue : undefined }
-			onColorChange={ isGradient ? undefined : setValue }
-			onGradientChange={ isGradient ? setValue : undefined }
-			clearable={ inheritedValue === userValue }
+			colorValue={ isGradient ? undefined : displayed }
+			colorSlug={ isGradient ? undefined : displayedSlug }
+			gradientValue={ isGradient ? displayed : undefined }
+			gradientSlug={ isGradient ? displayedSlug : undefined }
+			onColorChange={ isGradient ? undefined : onChange }
+			onGradientChange={ isGradient ? onChange : undefined }
+			/*
+			 * The control is clearable whenever a local value is set, so the
+			 * user can always reset their own override back to the inherited
+			 * (placeholder) value. In placeholder mode (no local value) there
+			 * is nothing local to clear; clicking the active swatch accepts the
+			 * inherited value via the onChange interceptor above instead.
+			 */
+			clearable={ userValue !== undefined }
 			headingLevel={ 3 }
 			noticeProps={
 				! isGradient && contrastWarning
@@ -172,11 +201,24 @@ export default function ColorGradientDropdownItem( {
 	panelId,
 	contrastWarning,
 	className = 'block-editor-tools-panel-color-gradient-settings__item',
+	isPlaceholder = false,
+	hasInheritedValue = false,
+	showInheritanceLabelIndicators = isGlobalStylesInheritanceEnabled(),
 } ) {
 	const colorGradientDropdownButtonRef = useRef( undefined );
+	const itemClassName = clsx( 'block-editor-color-gradient-item', className );
+	// A local override exists when the user has set a value that shadows an
+	// inherited one — only then do we offer the reset-to-inherited / push
+	// actions and the override label indicator.
+	const hasLocalOverride =
+		showInheritanceLabelIndicators && hasValue() && hasInheritedValue;
+	const inheritanceProps = showInheritanceLabelIndicators
+		? getInheritanceProps( isPlaceholder, hasLocalOverride, itemClassName )
+		: { className: itemClassName };
 	return (
-		<ToolsPanelItem
-			className={ clsx( 'block-editor-color-gradient-item', className ) }
+		<InheritanceToolsPanelItem
+			{ ...inheritanceProps }
+			showLocalOverrideActionsInLabel={ false }
 			hasValue={ hasValue }
 			label={ label }
 			onDeselect={ resetValue }
@@ -208,22 +250,34 @@ export default function ColorGradientDropdownItem( {
 									label={ label }
 								/>
 							</Button>
-							{ hasValue() && (
-								<Button
-									__next40pxDefaultSize
-									label={ __( 'Reset' ) }
-									className="block-editor-panel-color-gradient-settings__reset"
-									size="small"
-									icon={ resetIcon }
-									onClick={ () => {
-										resetValue();
-										if ( isOpen ) {
-											onToggle();
-										}
-										colorGradientDropdownButtonRef.current?.focus();
-									} }
-								/>
-							) }
+							{ hasValue() &&
+								( hasLocalOverride ? (
+									<InheritanceResetButton
+										className="block-editor-panel-color-gradient-settings__reset"
+										onResetToInherited={ () => {
+											resetValue();
+											if ( isOpen ) {
+												onToggle();
+											}
+											colorGradientDropdownButtonRef.current?.focus();
+										} }
+									/>
+								) : (
+									<Button
+										__next40pxDefaultSize
+										label={ __( 'Reset' ) }
+										className="block-editor-panel-color-gradient-settings__reset"
+										size="small"
+										icon={ resetIcon }
+										onClick={ () => {
+											resetValue();
+											if ( isOpen ) {
+												onToggle();
+											}
+											colorGradientDropdownButtonRef.current?.focus();
+										} }
+									/>
+								) ) }
 							{ contrastWarning && (
 								// An icon-only warning that stays visible while a
 								// contrast warning is in effect. It is not a menu;
@@ -253,6 +307,6 @@ export default function ColorGradientDropdownItem( {
 					/>
 				) }
 			/>
-		</ToolsPanelItem>
+		</InheritanceToolsPanelItem>
 	);
 }