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

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

@@ -8,9 +8,8 @@ import clsx from 'clsx';
  */
 import {
 	__experimentalToolsPanel as ToolsPanel,
-	__experimentalToolsPanelItem as ToolsPanelItem,
-	__experimentalHStack as HStack,
-	__experimentalZStack as ZStack,
+	__experimentalHStack as HStack, // eslint-disable-line @wordpress/use-recommended-components
+	__experimentalZStack as ZStack, // eslint-disable-line @wordpress/use-recommended-components
 	__experimentalDropdownContentWrapper as DropdownContentWrapper,
 	MenuGroup,
 	ColorIndicator,
@@ -31,6 +30,12 @@ import { getValueFromVariable } from '@wordpress/global-styles-engine';
  */
 import { useToolsPanelDropdownMenuProps } from './utils';
 import { setImmutably } from '../../utils/object';
+import {
+	getInheritanceProps,
+	InheritanceToolsPanelItem,
+	InheritanceResetButton,
+	isGlobalStylesInheritanceEnabled,
+} from './inheritance';
 
 const EMPTY_ARRAY = [];
 function useMultiOriginColorPresets(
@@ -114,12 +119,18 @@ const LabeledColorIndicator = ( { indicator, label } ) => (
 				) }
 			</Flex>
 		</ZStack>
-		<FlexItem title={ label }>{ label }</FlexItem>
+		<FlexItem
+			className="block-editor-panel-duotone-settings__label"
+			title={ label }
+		>
+			{ label }
+		</FlexItem>
 	</HStack>
 );
 
-const renderToggle = ( duotone, resetDuotone ) =>
+const renderToggle = ( duotone, resetConfig ) =>
 	function Toggle( { onToggle, isOpen } ) {
+		const { hasLocalValue, hasLocalOverride, onReset } = resetConfig;
 		const duotoneButtonRef = useRef( undefined );
 
 		const toggleProps = {
@@ -132,17 +143,13 @@ const renderToggle = ( duotone, resetDuotone ) =>
 			ref: duotoneButtonRef,
 		};
 
-		const removeButtonProps = {
-			onClick: () => {
-				if ( isOpen ) {
-					onToggle();
-				}
-				resetDuotone();
-				// Return focus to parent button.
-				duotoneButtonRef.current?.focus();
-			},
-			className: 'block-editor-panel-duotone-settings__reset',
-			label: __( 'Reset' ),
+		const handleReset = () => {
+			if ( isOpen ) {
+				onToggle();
+			}
+			onReset();
+			// Return focus to parent button.
+			duotoneButtonRef.current?.focus();
 		};
 
 		return (
@@ -153,13 +160,21 @@ const renderToggle = ( duotone, resetDuotone ) =>
 						label={ __( 'Duotone' ) }
 					/>
 				</Button>
-				{ duotone && (
-					<Button
-						size="small"
-						icon={ resetIcon }
-						{ ...removeButtonProps }
-					/>
-				) }
+				{ hasLocalValue &&
+					( hasLocalOverride ? (
+						<InheritanceResetButton
+							className="block-editor-panel-duotone-settings__reset"
+							onResetToInherited={ handleReset }
+						/>
+					) : (
+						<Button
+							size="small"
+							icon={ resetIcon }
+							label={ __( 'Reset' ) }
+							className="block-editor-panel-duotone-settings__reset"
+							onClick={ handleReset }
+						/>
+					) ) }
 			</>
 		);
 	};
@@ -172,9 +187,18 @@ export default function FiltersPanel( {
 	settings,
 	panelId,
 	defaultControls = DEFAULT_CONTROLS,
+	showInheritanceLabelIndicators = isGlobalStylesInheritanceEnabled(),
 } ) {
 	const decodeValue = ( rawValue ) =>
 		getValueFromVariable( { settings }, '', rawValue );
+	// 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
+		);
 
 	// Duotone
 	const hasDuotoneEnabled = useHasDuotoneControl( settings );
@@ -186,7 +210,11 @@ export default function FiltersPanel( {
 		presetSetting: 'palette',
 		defaultSetting: 'defaultPalette',
 	} );
-	const duotone = decodeValue( inheritedValue?.filter?.duotone );
+	const localDuotone = decodeValue( value?.filter?.duotone );
+	const inheritedDuotone = decodeValue( inheritedValue?.filter?.duotone );
+	const duotone = localDuotone ?? inheritedDuotone;
+	const isDuotonePlaceholder =
+		localDuotone === undefined && inheritedDuotone !== undefined;
 	const setDuotone = ( newValue ) => {
 		const duotonePreset = duotonePalette.find( ( { colors } ) => {
 			return colors === newValue;
@@ -198,8 +226,26 @@ export default function FiltersPanel( {
 			setImmutably( value, [ 'filter', 'duotone' ], duotoneValue )
 		);
 	};
+	// Commit the inherited value when the user clicks the active preset
+	// while the picker is showing inherited duotone at rest.
+	const setDuotoneWithInheritedCommit = ( newValue ) => {
+		if (
+			newValue === undefined &&
+			isDuotonePlaceholder &&
+			inheritedDuotone !== undefined
+		) {
+			setDuotone( inheritedDuotone );
+			return;
+		}
+		setDuotone( newValue );
+	};
 	const hasDuotone = () => !! value?.filter?.duotone;
 	const resetDuotone = () => setDuotone( undefined );
+	// Only a local value shadowing an inherited one shows the blue-dot reset.
+	const hasDuotoneLocalOverride =
+		showInheritanceLabelIndicators &&
+		hasDuotone() &&
+		inheritedDuotone !== undefined;
 
 	const resetAllFilter = useCallback( ( previousValue ) => {
 		return {
@@ -219,17 +265,29 @@ export default function FiltersPanel( {
 			panelId={ panelId }
 		>
 			{ hasDuotoneEnabled && (
-				<ToolsPanelItem
+				<InheritanceToolsPanelItem
+					{ ...inheritanceProps(
+						isDuotonePlaceholder,
+						localDuotone !== undefined &&
+							inheritedDuotone !== undefined
+					) }
 					label={ __( 'Duotone' ) }
 					hasValue={ hasDuotone }
 					onDeselect={ resetDuotone }
 					isShownByDefault={ defaultControls.duotone }
+					// Toggle renders its own reset dot, so the item must not
+					// add a second.
+					showLocalOverrideActionsInLabel={ false }
 					panelId={ panelId }
 				>
 					<Dropdown
 						popoverProps={ popoverProps }
 						className="block-editor-global-styles-filters-panel__dropdown"
-						renderToggle={ renderToggle( duotone, resetDuotone ) }
+						renderToggle={ renderToggle( duotone, {
+							hasLocalValue: hasDuotone(),
+							hasLocalOverride: hasDuotoneLocalOverride,
+							onReset: resetDuotone,
+						} ) }
 						renderContent={ () => (
 							<DropdownContentWrapper paddingSize="small">
 								<MenuGroup label={ __( 'Duotone' ) }>
@@ -245,13 +303,15 @@ export default function FiltersPanel( {
 										disableCustomColors
 										disableCustomDuotone
 										value={ duotone }
-										onChange={ setDuotone }
+										onChange={
+											setDuotoneWithInheritedCommit
+										}
 									/>
 								</MenuGroup>
 							</DropdownContentWrapper>
 						) }
 					/>
-				</ToolsPanelItem>
+				</InheritanceToolsPanelItem>
 			) }
 		</Wrapper>
 	);

package/src/components/global-styles/hooks.js

@@ -328,7 +328,14 @@ export function useColorGradientSettings( settings ) {
 	);
 	const decodeValue = ( rawValue ) =>
 		getValueFromVariable( { settings }, '', rawValue );
-	const encodeGradientValue = ( gradientValue ) => {
+	// When a slug is provided it is used directly: two presets can share the
+	// same gradient string, and matching by string alone would collapse them
+	// onto whichever entry appears first. Without a slug, fall back to
+	// matching the gradient string against the presets.
+	const encodeGradientValue = ( gradientValue, slug ) => {
+		if ( slug ) {
+			return 'var:preset|gradient|' + slug;
+		}
 		const allGradients = gradients.flatMap(
 			( { gradients: originGradients } ) => originGradients
 		);

package/src/components/global-styles/inheritance/index.js

@@ -0,0 +1,204 @@
+/**
+ * External dependencies
+ */
+import clsx from 'clsx';
+
+/**
+ * WordPress dependencies
+ */
+import {
+	Button,
+	Icon as WCIcon,
+	__experimentalToolsPanelItem as ToolsPanelItem,
+} from '@wordpress/components';
+import { reset as resetIcon } from '@wordpress/icons';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Whether the inspector surfaces inherited Global Styles values.
+ *
+ * Behind the `gutenberg-global-styles-inheritance-ui` Gutenberg experiment,
+ * so the treatment is off unless someone opts in on the Experiments screen.
+ * With it off, the panels show locally-set values alone.
+ *
+ * Evaluated per call rather than once at module scope, so tests can toggle
+ * the experiment and so a later move to a store-backed setting only has to
+ * change this one place. Always returns a boolean: callers pass the result
+ * down as a prop, and `undefined` would trigger a receiving component's own
+ * default parameter.
+ *
+ * @return {boolean} Whether the inherited-value treatment is enabled.
+ */
+export const isGlobalStylesInheritanceEnabled = () =>
+	!! window.__experimentalGlobalStylesInheritanceUI;
+
+/**
+ * Returns props to spread onto a wrapping `<InheritanceToolsPanelItem>`
+ * so its descendant label picks up the inherited-from-Global-Styles
+ * visual treatment.
+ *
+ * When `isInherited` is true without a local override, the descendant
+ * label text receives the inherited-from-Global-Styles treatment
+ * (dotted underline). No dot is shown.
+ *
+ * When `hasLocalOverride` is true, a small reset dot is rendered as a
+ * sibling of the control exposing a "Reset to inherited value" action.
+ *
+ * The two states are mutually exclusive at the source. If both are passed,
+ * only the local-override class is returned.
+ *
+ * Returned object shape allows direct spread:
+ *
+ *     <InheritanceToolsPanelItem
+ *         { ...getInheritanceProps( isInherited, hasLocalOverride ) }
+ *         label={ __( 'Line height' ) }
+ *         …
+ *     >
+ *
+ * @param {boolean}             isInherited      Control is inheriting at rest.
+ * @param {boolean}             hasLocalOverride Local override is set AND
+ *                                               there is an inherited value
+ *                                               being overridden.
+ * @param {string|Array|Object} [baseClassName]  Optional className(s) to fold
+ *                                               into the returned `className`.
+ *
+ * @return {{ className?: string, isInherited: boolean, hasLocalOverride: boolean }} Props for the wrapping
+ *                                  `InheritanceToolsPanelItem`.
+ */
+export function getInheritanceProps(
+	isInherited,
+	hasLocalOverride,
+	baseClassName
+) {
+	const inheritedOnly = !! isInherited && ! hasLocalOverride;
+	const className = clsx( baseClassName, {
+		'is-inherited-from-global-styles': inheritedOnly,
+		'has-local-override-from-global-styles': !! hasLocalOverride,
+	} );
+	return {
+		...( className ? { className } : {} ),
+		isInherited: inheritedOnly,
+		hasLocalOverride: !! hasLocalOverride,
+	};
+}
+
+/**
+ * Renders the small always-visible reset button shown next to a control
+ * that holds a local override of an inherited Global Styles value. Used by
+ * `<InheritanceToolsPanelItem>` and the color/gradient controls.
+ *
+ * At rest the button shows a blue dot signalling the local override. On
+ * hover/focus the dot morphs into the `reset` (dash) icon and the button
+ * exposes a "Reset to inherited value" tooltip. Activating it clears the
+ * override so the control falls back to its inherited value — the same
+ * action the `ToolsPanel` menu performs via `onDeselect`.
+ *
+ * @param {Object}   props
+ * @param {Function} props.onResetToInherited Reset handler.
+ * @param {string}   [props.className]        Optional className for the button.
+ *
+ * @return {Element} The reset button.
+ */
+export function InheritanceResetButton( { onResetToInherited, className } ) {
+	return (
+		// Intentionally small (14×14) circular control; exempt from the
+		// 40px default-size enforcement rule.
+		// eslint-disable-next-line @wordpress/components-no-missing-40px-size-prop
+		<Button
+			__next40pxDefaultSize={ false }
+			label={ __( 'Reset to inherited value' ) }
+			// The button has children (the dot + reset icon), so the tooltip
+			// is not shown automatically; opt in explicitly.
+			showTooltip
+			className={ clsx(
+				'has-local-override-from-global-styles__reset',
+				className
+			) }
+			onClick={ ( event ) => {
+				// Prevent the click from reaching any wrapping
+				// `<label htmlFor>` association, which would otherwise
+				// focus/activate the inner control.
+				event.preventDefault();
+				event.stopPropagation();
+				onResetToInherited?.();
+			} }
+		>
+			<span
+				aria-hidden="true"
+				className="has-local-override-from-global-styles__dot"
+			/>
+			<WCIcon
+				className="has-local-override-from-global-styles__reset-icon"
+				icon={ resetIcon }
+			/>
+		</Button>
+	);
+}
+
+/**
+ * A `ToolsPanelItem` that reflects whether its control's value is inherited
+ * from Global Styles or locally overridden. The two states are mutually
+ * exclusive.
+ *
+ * - Inherited: the control label receives the inherited-from-Global-Styles
+ *   treatment (dotted underline) via the `is-inherited-from-global-styles`
+ *   class applied through `getInheritanceProps`. No dot is shown.
+ * - Local override: a reset dot is rendered as a plain sibling of the control
+ *   at the item's inline-end — never nested in the label — exposing the same
+ *   one-click reset the `ToolsPanel` options menu performs via `onDeselect`.
+ *
+ * Controls that render their own reset control next to a custom toggle (color,
+ * background image) pass `showLocalOverrideActionsInLabel={ false }` so the
+ * item does not render a second reset dot.
+ *
+ * @param {Object}                    props
+ * @param {?string}                   props.className                         Item className.
+ * @param {boolean}                   props.isInherited                       Value is inherited at rest. Accepted so the `getInheritanceProps` spread does not leak onto the underlying `ToolsPanelItem`; the inherited treatment is applied via `className`.
+ * @param {boolean}                   props.hasLocalOverride                  Local override is set.
+ * @param {import('react').ReactNode} props.label                             Control label.
+ * @param {?Function}                 props.onDeselect                        Reset handler.
+ * @param {boolean}                   [props.showLocalOverrideActionsInLabel] Render the reset dot here (default true).
+ * @param {boolean}                   [props.hasInlineEndToggle]              The control renders a 24x24 toggle (linked/unlink, units switch) at its inline-end; offset the reset dot to sit just to its inline-start (default false).
+ * @param {import('react').ReactNode} props.children                          The control.
+ *
+ * @return {Element} The panel item.
+ */
+export function InheritanceToolsPanelItem( {
+	className,
+	// Destructured (and unused) so the `getInheritanceProps` spread does not
+	// leak `isInherited` onto the underlying `ToolsPanelItem`. The inherited
+	// treatment is applied purely via `className`
+	// (`is-inherited-from-global-styles`).
+	isInherited,
+	hasLocalOverride,
+	label,
+	onDeselect,
+	showLocalOverrideActionsInLabel = true,
+	hasInlineEndToggle = false,
+	children,
+	...rest
+} ) {
+	const showResetAffordance =
+		hasLocalOverride && showLocalOverrideActionsInLabel;
+
+	return (
+		<ToolsPanelItem
+			className={ className }
+			label={ label }
+			onDeselect={ onDeselect }
+			{ ...rest }
+		>
+			{ children }
+			{ showResetAffordance && (
+				<div
+					className={ clsx( 'global-styles-inheritance-affordance', {
+						'global-styles-inheritance-affordance--offset-toggle':
+							hasInlineEndToggle,
+					} ) }
+				>
+					<InheritanceResetButton onResetToInherited={ onDeselect } />
+				</div>
+			) }
+		</ToolsPanelItem>
+	);
+}

package/src/components/global-styles/inheritance/style.scss

@@ -0,0 +1,184 @@
+@use "@wordpress/base-styles/variables" as *;
+
+// Inherited Global Styles values — visual treatment for inspector control
+// labels.
+//
+// `.is-inherited-from-global-styles` marks controls displaying inherited
+// values: the label gets a dotted underline.
+// `.has-local-override-from-global-styles` marks controls that locally override
+// inherited values: a blue reset dot is rendered as a sibling at the item's
+// inline-end. The states are mutually exclusive.
+.is-inherited-from-global-styles {
+	// `.components-base-control__label` covers most controls (ToggleGroup,
+	// selects, the visible `<span>` label some controls render). Controls
+	// built on a bare `UnitControl`/`NumberControl` (Line height, Letter
+	// spacing, Columns, and unit-based dimension inputs) instead expose their
+	// visible label as `.components-input-control__label`, so it must be
+	// targeted too or those controls silently miss the inherited treatment.
+	.components-base-control__label,
+	.components-input-control__label {
+		text-decoration-line: underline;
+		text-decoration-style: dotted;
+		text-decoration-thickness: 1px;
+		text-underline-offset: 0.2em;
+	}
+
+	// These labels sit in truncated flex containers where an underline is
+	// clipped by `overflow: hidden`; a dotted bottom border stays visible.
+	.block-editor-panel-color-gradient-settings__color-name,
+	.block-editor-global-styles-background-panel__inspector-media-replace-title,
+	.block-editor-panel-duotone-settings__label {
+		border-bottom: 1px dotted currentColor;
+	}
+}
+
+// Local-override reset dot — a sibling of the control positioned at the item's
+// inline-end.
+.has-local-override-from-global-styles {
+	position: relative;
+}
+
+.global-styles-inheritance-affordance {
+	position: absolute;
+	inset-block-start: 0;
+	inset-inline-end: 0;
+	z-index: 1;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	pointer-events: none;
+
+	// Match the label line height so the shorter (14px) reset dot centers on
+	// the 16px label rather than pinning to its top.
+	height: $grid-unit-20;
+
+	// Controls that render a 24px toggle at the item's inline-end (linked/
+	// unlink, units switch): shift the dot one toggle width plus an 8px gap
+	// toward the inline-start so it sits just to the left of that toggle and
+	// the two never overlap.
+	&--offset-toggle {
+		inset-inline-end: calc(24px + 8px);
+	}
+
+	.has-local-override-from-global-styles__reset {
+		pointer-events: auto;
+		// The affordance wrapper handles placement; drop the inline margin the
+		// shared rule adds for the in-label (color/background) context.
+		margin-inline-start: 0 !important;
+	}
+}
+
+// Local-override reset button. At rest it shows the blue dot signalling a local
+// override; on hover/focus the dot is swapped for the `reset` (dash) icon and a
+// "Reset to inherited value" tooltip.
+.has-local-override-from-global-styles__reset {
+	display: inline-flex !important;
+	align-items: center;
+	justify-content: center;
+	vertical-align: middle;
+	position: relative;
+	margin-inline-start: 6px;
+
+	// Override the default IconButton chrome so the trigger appears as a
+	// tight inline circle that never shifts the sibling label text.
+	min-width: 14px !important;
+	width: 14px !important;
+	height: 14px !important;
+	padding: 0 !important;
+	border-radius: 50% !important;
+	background: transparent !important;
+	box-shadow: none !important;
+	overflow: hidden;
+
+	// `<Button>` does not preserve text-transform overrides from its parent
+	// label. Belt-and-braces: ensure the trigger never inherits an uppercase
+	// transform from a label that happens to use one.
+	text-transform: none;
+	letter-spacing: normal;
+
+	// Some `<label>` rules style descendant text/buttons (legacy
+	// pre-existing CSS). Reset to the design-system pointer token.
+	cursor: var(--wpds-cursor-control);
+
+	&:hover,
+	&:focus {
+		background: transparent !important;
+
+		.has-local-override-from-global-styles__dot {
+			display: none;
+		}
+
+		.has-local-override-from-global-styles__reset-icon {
+			display: block;
+		}
+	}
+
+	&:focus-visible {
+		// Inset focus ring so it doesn't push other text around.
+		outline: 1.5px solid var(--wp-admin-theme-color, #007cba);
+		outline-offset: 1px;
+	}
+
+	// Color/gradient control context: the button is positioned by
+	// `block-editor-panel-color-gradient-settings__reset` (absolute,
+	// hover-revealed) as a sibling of the toggle. The shared rule above sets
+	// `position: relative`; re-assert `position: absolute` here (this compound
+	// selector wins on specificity) to sit in the reset slot.
+	&.block-editor-panel-color-gradient-settings__reset {
+		position: absolute;
+		justify-content: center;
+		top: 50%;
+		transform: translateY(-50%);
+		margin-block: 0;
+		margin-inline-start: 0;
+		opacity: 1;
+	}
+
+	// Shadow control context: the blue-dot override reset reuses the shadow
+	// remove-button slot, which is absolutely positioned and hover-revealed
+	// (`opacity: 0`). The override dot must stay visible, so re-assert
+	// placement and force `opacity: 1` (this compound selector wins on
+	// specificity).
+	&.block-editor-global-styles__shadow-editor__remove-button {
+		position: absolute;
+		justify-content: center;
+		inset-inline-end: 8px;
+		top: 50%;
+		transform: translateY(-50%);
+		margin-block: 0;
+		margin-inline-start: 0;
+		opacity: 1;
+	}
+
+	// Reuses the hover-revealed remove-button slot; keep the override dot
+	// placed and always visible.
+	&.block-editor-panel-duotone-settings__reset {
+		position: absolute;
+		justify-content: center;
+		inset-inline-end: 8px;
+		top: 50%;
+		transform: translateY(-50%);
+		margin-block: 0;
+		margin-inline-start: 0;
+		opacity: 1;
+	}
+}
+
+.has-local-override-from-global-styles__dot {
+	display: block;
+	width: 8px;
+	height: 8px;
+	background-color: var(--wp-admin-theme-color, #007cba);
+	border-radius: 50%;
+}
+
+// The dash icon revealed on hover/focus, centered over the dot's slot and
+// clipped to the circular button bounds so the box size stays stable.
+.has-local-override-from-global-styles__reset-icon {
+	display: none;
+	position: absolute;
+	top: 50%;
+	left: 50%;
+	transform: translate(-50%, -50%);
+	color: var(--wp-admin-theme-color, #007cba);
+}