@wordpress/block-editor 16.0.0 → 16.1.0

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

@@ -7,7 +7,6 @@ import clsx from 'clsx';
  * WordPress dependencies
  */
 import {
-	__experimentalToolsPanelItem as ToolsPanelItem,
 	__experimentalHStack as HStack,
 	__experimentalZStack as ZStack,
 	__experimentalDropdownContentWrapper as DropdownContentWrapper,
@@ -27,6 +26,12 @@ import { reset as resetIcon, caution as cautionIcon } from '@wordpress/icons';
  */
 import ColorGradientControl from '../colors-gradients/control';
 import { unlock } from '../../lock-unlock';
+import {
+	getInheritanceProps,
+	InheritanceResetButton,
+	InheritanceToolsPanelItem,
+	isGlobalStylesInheritanceEnabled,
+} from './inheritance';
 
 const { Tabs } = unlock( componentsPrivateApis );
 
@@ -48,8 +53,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 +133,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 +212,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 +261,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 +318,6 @@ export default function ColorGradientDropdownItem( {
 					/>
 				) }
 			/>
-		</ToolsPanelItem>
+		</InheritanceToolsPanelItem>
 	);
 }

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

@@ -4,6 +4,7 @@
 import { __experimentalToolsPanel as ToolsPanel } from '@wordpress/components';
 import { useCallback, useMemo } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
+import { getCSSValueFromRawStyle } from '@wordpress/style-engine';
 
 /**
  * Internal dependencies
@@ -20,6 +21,7 @@ import {
 	extractPresetSlug,
 	encodeColorValueWithPalette,
 } from '../../utils/color-values';
+import { isGlobalStylesInheritanceEnabled } from './inheritance';
 
 // Despite the "ColorPanel" name, this gates only the element-level color
 // controls (link, heading, button, caption, h1–h6) — surfaced as the
@@ -147,6 +149,7 @@ export default function ColorPanel( {
 	label,
 	children,
 	contrastWarning,
+	showInheritanceLabelIndicators = isGlobalStylesInheritanceEnabled(),
 } ) {
 	const {
 		colors,
@@ -160,9 +163,15 @@ export default function ColorPanel( {
 		encodeGradientValue,
 	} = useColorGradientSettings( settings );
 
+	// When an inherited preset isn't in the panel's palette, `decodeValue`
+	// returns the raw `var:preset|…` token rather than a paintable colour.
+	// Fall back to its CSS custom property so the swatch still renders.
+	const decodeInheritedColor = ( rawValue ) =>
+		getCSSValueFromRawStyle( decodeValue( rawValue ) );
+
 	// Links
 	const showLinkPanel = useHasLinkPanel( settings );
-	const linkColor = decodeValue(
+	const linkColor = decodeInheritedColor(
 		inheritedValue?.elements?.link?.color?.text
 	);
 	const userLinkColor = decodeValue( value?.elements?.link?.color?.text );
@@ -175,7 +184,7 @@ export default function ColorPanel( {
 			)
 		);
 	};
-	const hoverLinkColor = decodeValue(
+	const hoverLinkColor = decodeInheritedColor(
 		inheritedValue?.elements?.link?.[ ':hover' ]?.color?.text
 	);
 	const userHoverLinkColor = decodeValue(
@@ -296,7 +305,16 @@ export default function ColorPanel( {
 			hasValue: hasLink,
 			resetValue: resetLink,
 			isShownByDefault: defaultControls.link,
-			indicators: [ linkColor, hoverLinkColor ],
+			indicators: [
+				userLinkColor ?? linkColor,
+				userHoverLinkColor ?? hoverLinkColor,
+			],
+			isPlaceholder:
+				userLinkColor === undefined &&
+				userHoverLinkColor === undefined &&
+				( linkColor !== undefined || hoverLinkColor !== undefined ),
+			hasInheritedValue:
+				linkColor !== undefined || hoverLinkColor !== undefined,
 			contrastWarning,
 			tabs: [
 				{
@@ -307,8 +325,14 @@ export default function ColorPanel( {
 						inheritedValue?.elements?.link?.color?.text,
 						'color'
 					),
+					userSlug: extractPresetSlug(
+						value?.elements?.link?.color?.text,
+						'color'
+					),
 					setValue: setLinkColor,
 					userValue: userLinkColor,
+					isPlaceholder:
+						userLinkColor === undefined && linkColor !== undefined,
 				},
 				{
 					key: 'hover',
@@ -319,8 +343,15 @@ export default function ColorPanel( {
 							?.text,
 						'color'
 					),
+					userSlug: extractPresetSlug(
+						value?.elements?.link?.[ ':hover' ]?.color?.text,
+						'color'
+					),
 					setValue: setHoverLinkColor,
 					userValue: userHoverLinkColor,
+					isPlaceholder:
+						userHoverLinkColor === undefined &&
+						hoverLinkColor !== undefined,
 				},
 			],
 		},
@@ -331,13 +362,13 @@ export default function ColorPanel( {
 			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(
@@ -392,11 +423,11 @@ export default function ColorPanel( {
 			newValue.elements[ name ].color.gradient = undefined;
 			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 = undefined;
 			onChange( newValue );
@@ -405,6 +436,29 @@ export default function ColorPanel( {
 		// as there isn't yet a way to set padding for the element.
 		const supportsBackground = name !== 'caption';
 
+		// Per-tab placeholder flags. The item-level placeholder is active when
+		// there is no local color on any axis and at least one inherited color.
+		const isElementTextPlaceholder =
+			elementTextUserColor === undefined &&
+			elementTextColor !== undefined;
+		const isElementBackgroundPlaceholder =
+			elementBackgroundUserColor === undefined &&
+			elementBackgroundColor !== undefined;
+		const isElementGradientPlaceholder =
+			elementGradientUserColor === undefined &&
+			elementGradient !== undefined;
+		const isElementPlaceholder =
+			elementTextUserColor === undefined &&
+			elementBackgroundUserColor === undefined &&
+			elementGradientUserColor === undefined &&
+			( elementTextColor !== undefined ||
+				elementBackgroundColor !== undefined ||
+				elementGradient !== undefined );
+		const hasElementInheritedValue =
+			elementTextColor !== undefined ||
+			elementBackgroundColor !== undefined ||
+			elementGradient !== undefined;
+
 		items.push( {
 			key: name,
 			label: elementLabel,
@@ -413,10 +467,15 @@ export default function ColorPanel( {
 			isShownByDefault: defaultControls[ name ],
 			indicators: supportsBackground
 				? [
-						elementTextColor,
-						elementGradient ?? elementBackgroundColor,
+						elementTextUserColor ?? elementTextColor,
+						elementGradientUserColor ??
+							elementGradient ??
+							elementBackgroundUserColor ??
+							elementBackgroundColor,
 				  ]
-				: [ elementTextColor ],
+				: [ elementTextUserColor ?? elementTextColor ],
+			isPlaceholder: isElementPlaceholder,
+			hasInheritedValue: hasElementInheritedValue,
 			tabs: [
 				hasSolidColors && {
 					key: 'text',
@@ -426,8 +485,13 @@ export default function ColorPanel( {
 						inheritedValue?.elements?.[ name ]?.color?.text,
 						'color'
 					),
+					userSlug: extractPresetSlug(
+						value?.elements?.[ name ]?.color?.text,
+						'color'
+					),
 					setValue: setElementTextColor,
 					userValue: elementTextUserColor,
+					isPlaceholder: isElementTextPlaceholder,
 				},
 				hasSolidColors &&
 					supportsBackground && {
@@ -439,17 +503,31 @@ export default function ColorPanel( {
 								?.background,
 							'color'
 						),
+						userSlug: extractPresetSlug(
+							value?.elements?.[ name ]?.color?.background,
+							'color'
+						),
 						setValue: setElementBackgroundColor,
 						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,
+						isPlaceholder: isElementGradientPlaceholder,
 					},
 			].filter( Boolean ),
 		} );
@@ -469,6 +547,9 @@ export default function ColorPanel( {
 					<ColorGradientDropdownItem
 						key={ key }
 						{ ...restItem }
+						showInheritanceLabelIndicators={
+							showInheritanceLabelIndicators
+						}
 						colorGradientControlSettings={ {
 							colors,
 							disableCustomColors: ! areCustomSolidsEnabled,