@wordpress/block-editor 16.1.0 → 17.0.0

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

@@ -1,6 +1,3 @@
-/**
- * WordPress dependencies
- */
 import {
 	BorderBoxControl,
 	__experimentalHasSplitBorders as hasSplitBorders,
@@ -11,10 +8,6 @@ import {
 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';
@@ -105,7 +98,6 @@ export default function BorderPanel( {
 	inheritedValue = value,
 	settings,
 	panelId,
-	name,
 	defaultControls = DEFAULT_CONTROLS,
 	showInheritanceLabelIndicators = isGlobalStylesInheritanceEnabled(),
 } ) {
@@ -269,14 +261,18 @@ export default function BorderPanel( {
 		inheritedShadow !== undefined &&
 		inheritedShadow !== '';
 	const shadow = isShadowPlaceholder ? inheritedShadow : localShadow;
-	const shadowPresets = settings?.shadow?.presets ?? {};
-	const mergedShadowPresets =
-		shadowPresets.custom ??
-		shadowPresets.theme ??
-		shadowPresets.default ??
-		[];
+	// The presets the popover offers, from every origin. A preset the user
+	// picked has to be stored as a reference to its CSS variable rather than as
+	// the value it resolves to today, otherwise it stops tracking later edits
+	// to the preset. Reading the same list the popover renders is what keeps
+	// the two in step.
+	const shadowPresets = useShadowPresets( settings );
 	const setShadow = ( newValue ) => {
-		const slug = mergedShadowPresets?.find(
+		// The list runs default, theme, custom, so searching backwards picks
+		// the most specific origin when more than one defines the same shadow
+		// value — a newly added custom preset starts out identical to the
+		// `natural` default one, and it is the custom slug the user means.
+		const slug = shadowPresets.findLast(
 			( { shadow: shadowName } ) => shadowName === newValue
 		)?.slug;
 
@@ -376,7 +372,6 @@ export default function BorderPanel( {
 		showBorderRadius;
 
 	const label = useBorderPanelLabel( {
-		blockName: name,
 		hasShadowControl,
 		hasBorderControl,
 	} );

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

@@ -1,11 +1,4 @@
-/**
- * External dependencies
- */
 import clsx from 'clsx';
-
-/**
- * WordPress dependencies
- */
 import {
 	__experimentalHStack as HStack,
 	__experimentalZStack as ZStack,
@@ -20,10 +13,6 @@ 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 {

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

@@ -1,14 +1,7 @@
-/**
- * WordPress dependencies
- */
 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
- */
 import ColorGradientDropdownItem from './color-gradient-dropdown-item';
 import {
 	useColorsPerOrigin,
@@ -149,6 +142,7 @@ export default function ColorPanel( {
 	label,
 	children,
 	contrastWarning,
+	additionalElements,
 	showInheritanceLabelIndicators = isGlobalStylesInheritanceEnabled(),
 } ) {
 	const {
@@ -266,8 +260,19 @@ export default function ColorPanel( {
 				label: __( 'H6' ),
 				showPanel: showHeadingPanel,
 			},
+			...( additionalElements?.map( ( element ) => ( {
+				...element,
+				showPanel: hasSolidColors || hasGradientColors,
+			} ) ) ?? [] ),
 		],
-		[ showCaptionPanel, showButtonPanel, showHeadingPanel ]
+		[
+			additionalElements,
+			hasGradientColors,
+			hasSolidColors,
+			showCaptionPanel,
+			showButtonPanel,
+			showHeadingPanel,
+		]
 	);
 
 	const resetAllFilter = useCallback(

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

@@ -1,10 +1,3 @@
-/**
- * External dependencies
- */
-
-/**
- * WordPress dependencies
- */
 import { __ } from '@wordpress/i18n';
 import {
 	__experimentalToolsPanel as ToolsPanel,
@@ -17,10 +10,6 @@ import {
 import { Icon, alignNone, stretchWide } from '@wordpress/icons';
 import { useCallback, useState } from '@wordpress/element';
 import { getValueFromVariable } from '@wordpress/global-styles-engine';
-
-/**
- * Internal dependencies
- */
 import { useToolsPanelDropdownMenuProps } from './utils';
 import SpacingSizesControl from '../spacing-sizes-control';
 import DimensionControl from '../dimension-control';
@@ -358,6 +347,7 @@ export default function DimensionsPanel( {
 	// Special case because the layout controls are not part of the dimensions panel
 	// in global styles but not in block inspector.
 	includeLayoutControls = false,
+	allowAxialBlockGap = true,
 	styleState = DEFAULT_BLOCK_STYLE_STATE,
 	showInheritanceLabelIndicators = isGlobalStylesInheritanceEnabled(),
 } ) {
@@ -567,9 +557,19 @@ export default function DimensionsPanel( {
 		? settings?.spacing?.blockGap
 		: settings?.spacing?.blockGap?.sides;
 	const isAxialGap =
-		gapSides && gapSides.some( ( side ) => AXIAL_SIDES.includes( side ) );
+		allowAxialBlockGap &&
+		gapSides &&
+		gapSides.some( ( side ) => AXIAL_SIDES.includes( side ) );
 	const localGapRaw = decodeValue( value?.spacing?.blockGap );
 	const inheritedGapRaw = decodeValue( inheritedValue?.spacing?.blockGap );
+	const localGapForSingleInput =
+		! isAxialGap && typeof localGapRaw === 'object'
+			? localGapRaw?.top
+			: localGapRaw;
+	const inheritedGapForSingleInput =
+		! isAxialGap && typeof inheritedGapRaw === 'object'
+			? inheritedGapRaw?.top
+			: inheritedGapRaw;
 	// Merge local-then-inherited so SpacingSizesControl's chip slider and
 	// the axial-gap BoxControl reflect the local value when set and fall
 	// back to the inherited value at rest.
@@ -583,8 +583,8 @@ export default function DimensionsPanel( {
 	// at-rest cue for those.
 	const isGapPlaceholder =
 		! hasValue( value?.spacing?.blockGap ) &&
-		typeof inheritedGapRaw === 'string' &&
-		inheritedGapRaw !== '';
+		typeof inheritedGapForSingleInput === 'string' &&
+		inheritedGapForSingleInput !== '';
 	const setGapValue = ( newGapValue ) => {
 		onChange(
 			setImmutably( value, [ 'spacing', 'blockGap' ], newGapValue )
@@ -1004,16 +1004,17 @@ export default function DimensionsPanel( {
 								min={ 0 }
 								onChange={ setGapValue }
 								units={ units }
-								value={ localGapRaw ?? undefined }
+								value={ localGapForSingleInput ?? undefined }
 								placeholder={
 									isGapPlaceholder
-										? inheritedGapRaw
+										? inheritedGapForSingleInput
 										: undefined
 								}
 							/>
 						) ) }
 					{ showSpacingPresetsControl && (
 						<SpacingSizesControl
+							key={ isAxialGap ? 'axial-gap' : 'single-gap' }
 							label={ __( 'Block spacing' ) }
 							min={ 0 }
 							onChange={ setGapValues }

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

@@ -1,11 +1,4 @@
-/**
- * External dependencies
- */
 import clsx from 'clsx';
-
-/**
- * WordPress dependencies
- */
 import {
 	__experimentalToolsPanel as ToolsPanel,
 	__experimentalHStack as HStack, // eslint-disable-line @wordpress/use-recommended-components
@@ -24,11 +17,10 @@ import { __, _x } from '@wordpress/i18n';
 import { useCallback, useMemo, useRef } from '@wordpress/element';
 import { reset as resetIcon } from '@wordpress/icons';
 import { getValueFromVariable } from '@wordpress/global-styles-engine';
-
-/**
- * Internal dependencies
- */
-import { useToolsPanelDropdownMenuProps } from './utils';
+import {
+	useToolsPanelDropdownMenuProps,
+	getDuotoneSlugFromPreset,
+} from './utils';
 import { setImmutably } from '../../utils/object';
 import {
 	getInheritanceProps,
@@ -213,14 +205,24 @@ export default function FiltersPanel( {
 	const localDuotone = decodeValue( value?.filter?.duotone );
 	const inheritedDuotone = decodeValue( inheritedValue?.filter?.duotone );
 	const duotone = localDuotone ?? inheritedDuotone;
+	// Read from the raw value, since decoding resolves a preset reference to
+	// its colors and two presets can hold the same pair.
+	const localDuotoneSlug = getDuotoneSlugFromPreset( value?.filter?.duotone );
+	const inheritedDuotoneSlug = getDuotoneSlugFromPreset(
+		inheritedValue?.filter?.duotone
+	);
+	const duotoneSlug =
+		localDuotone !== undefined ? localDuotoneSlug : inheritedDuotoneSlug;
 	const isDuotonePlaceholder =
 		localDuotone === undefined && inheritedDuotone !== undefined;
-	const setDuotone = ( newValue ) => {
-		const duotonePreset = duotonePalette.find( ( { colors } ) => {
-			return colors === newValue;
-		} );
-		const duotoneValue = duotonePreset
-			? `var:preset|duotone|${ duotonePreset.slug }`
+	const setDuotone = ( newValue, slug ) => {
+		// A slug identifies the picked preset exactly. Falling back to a value
+		// match cannot tell two presets holding the same colors apart.
+		const presetSlug =
+			slug ??
+			duotonePalette.find( ( { colors } ) => colors === newValue )?.slug;
+		const duotoneValue = presetSlug
+			? `var:preset|duotone|${ presetSlug }`
 			: newValue;
 		onChange(
 			setImmutably( value, [ 'filter', 'duotone' ], duotoneValue )
@@ -228,16 +230,16 @@ export default function FiltersPanel( {
 	};
 	// Commit the inherited value when the user clicks the active preset
 	// while the picker is showing inherited duotone at rest.
-	const setDuotoneWithInheritedCommit = ( newValue ) => {
+	const setDuotoneWithInheritedCommit = ( newValue, index, slug ) => {
 		if (
 			newValue === undefined &&
 			isDuotonePlaceholder &&
 			inheritedDuotone !== undefined
 		) {
-			setDuotone( inheritedDuotone );
+			setDuotone( inheritedDuotone, inheritedDuotoneSlug );
 			return;
 		}
-		setDuotone( newValue );
+		setDuotone( newValue, slug );
 	};
 	const hasDuotone = () => !! value?.filter?.duotone;
 	const resetDuotone = () => setDuotone( undefined );
@@ -303,6 +305,7 @@ export default function FiltersPanel( {
 										disableCustomColors
 										disableCustomDuotone
 										value={ duotone }
+										selectedSlug={ duotoneSlug }
 										onChange={
 											setDuotoneWithInheritedCommit
 										}

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

@@ -1,15 +1,8 @@
-/**
- * WordPress dependencies
- */
 import { useMemo } from '@wordpress/element';
 import { useSelect } from '@wordpress/data';
 import { store as blocksStore } from '@wordpress/blocks';
 import { _x } from '@wordpress/i18n';
 import { getValueFromVariable } from '@wordpress/global-styles-engine';
-
-/**
- * Internal dependencies
- */
 import { unlock } from '../../lock-unlock';
 
 /**

package/src/components/global-styles/image-settings-panel.js

@@ -1,16 +1,9 @@
-/**
- * WordPress dependencies
- */
 import {
 	__experimentalToolsPanel as ToolsPanel,
 	__experimentalToolsPanelItem as ToolsPanelItem,
 	ToggleControl,
 } from '@wordpress/components';
 import { __, _x } from '@wordpress/i18n';
-
-/**
- * Internal dependencies
- */
 import { useToolsPanelDropdownMenuProps } from './utils';
 
 export function useHasImageSettingsPanel( name, value, inheritedValue ) {

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

@@ -1,11 +1,4 @@
-/**
- * External dependencies
- */
 import clsx from 'clsx';
-
-/**
- * WordPress dependencies
- */
 import {
 	Button,
 	Icon as WCIcon,

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

@@ -1,17 +1,6 @@
-/**
- * External dependencies
- */
 import { render, screen } from '@testing-library/react';
 import { click } from '@ariakit/test';
-
-/**
- * WordPress dependencies
- */
 import { __experimentalToolsPanel as ToolsPanel } from '@wordpress/components';
-
-/**
- * Internal dependencies
- */
 import {
 	getInheritanceProps,
 	InheritanceResetButton,

package/src/components/global-styles/inherited-value-context.js

@@ -1,14 +1,7 @@
-/**
- * WordPress dependencies
- */
 import { useContext, useMemo } from '@wordpress/element';
 import { useSelect } from '@wordpress/data';
 import { store as blocksStore } from '@wordpress/blocks';
 import { privateApis as globalStylesEnginePrivateApis } from '@wordpress/global-styles-engine';
-
-/**
- * Internal dependencies
- */
 import { store as blockEditorStore } from '../../store';
 import {
 	globalStylesDataKey,

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

@@ -1,6 +1,3 @@
-/**
- * WordPress dependencies
- */
 import { __ } from '@wordpress/i18n';
 import {
 	__experimentalVStack as VStack,
@@ -14,17 +11,8 @@ import {
 } from '@wordpress/components';
 import { useMemo, useRef } from '@wordpress/element';
 import { shadow as shadowIcon, Icon, check, reset } from '@wordpress/icons';
-
-/**
- * External dependencies
- */
 import clsx from 'clsx';
-
 import { Tooltip } from '@wordpress/ui';
-
-/**
- * Internal dependencies
- */
 import { InheritanceResetButton } from './inheritance';
 
 /**
@@ -37,13 +25,27 @@ const EMPTY_ARRAY = [];
 
 export function ShadowPopoverContainer( { shadow, onShadowChange, settings } ) {
 	const shadows = useShadowPresets( settings );
+	const presets = useMemo( () => {
+		if ( ! shadows.length ) {
+			return shadows;
+		}
+		// The entry that clears the shadow is a display-only affordance with no
+		// counterpart in `theme.json`. It is added here rather than in
+		// `useShadowPresets` so that callers mapping a value back to a preset
+		// never mistake it for one and persist a reference to a CSS variable
+		// that is never output.
+		return [
+			{ name: __( 'Unset' ), slug: 'unset', shadow: 'none' },
+			...shadows,
+		];
+	}, [ shadows ] );
 
 	return (
 		<div className="block-editor-global-styles__shadow-popover-container">
 			<VStack spacing={ 4 }>
 				<Heading level={ 5 }>{ __( 'Drop shadow' ) }</Heading>
 				<ShadowPresets
-					presets={ shadows }
+					presets={ presets }
 					activeShadow={ shadow }
 					onSelect={ onShadowChange }
 				/>
@@ -221,6 +223,18 @@ function renderShadowToggle( shadow, onShadowChange, resetConfig ) {
 	};
 }
 
+/**
+ * Returns the available shadow presets, from every origin, in the order they
+ * are presented to the user.
+ *
+ * This is the single source of truth for which presets exist: it backs both the
+ * popover's preset list and the mapping of a chosen shadow back to the preset
+ * it came from, so what is shown and what is stored cannot drift apart.
+ *
+ * @param {Object} settings Theme.json settings for the current context.
+ *
+ * @return {Array} The shadow presets.
+ */
 export function useShadowPresets( settings ) {
 	return useMemo( () => {
 		if ( ! settings?.shadow ) {
@@ -233,21 +247,22 @@ export function useShadowPresets( settings ) {
 			theme: themeShadows,
 			custom: customShadows,
 		} = settings?.shadow?.presets ?? {};
-		const unsetShadow = {
-			name: __( 'Unset' ),
-			slug: 'unset',
-			shadow: 'none',
-		};
 
-		const shadowPresets = [
+		const allPresets = [
 			...( ( defaultPresetsEnabled && defaultShadows ) || EMPTY_ARRAY ),
 			...( themeShadows || EMPTY_ARRAY ),
 			...( customShadows || EMPTY_ARRAY ),
 		];
-		if ( shadowPresets.length ) {
-			shadowPresets.unshift( unsetShadow );
-		}
 
-		return shadowPresets;
+		// More than one origin can define the same slug, but only the most
+		// specific definition is output as a CSS variable. Keeping the ones it
+		// overrides would offer swatches that apply a different shadow than
+		// the one they show.
+		return allPresets.filter(
+			( preset, index ) =>
+				allPresets.findLastIndex(
+					( { slug } ) => slug === preset.slug
+				) === index
+		);
 	}, [ settings ] );
 }

package/src/components/global-styles/state-control-badges.js

@@ -1,13 +1,6 @@
-/**
- * WordPress dependencies
- */
 import { privateApis as componentsPrivateApis } from '@wordpress/components';
 import { __, sprintf } from '@wordpress/i18n';
 import { Stack, Tooltip, VisuallyHidden } from '@wordpress/ui';
-
-/**
- * Internal dependencies
- */
 import { unlock } from '../../lock-unlock';
 
 const { Badge: WCBadge } = unlock( componentsPrivateApis );

package/src/components/global-styles/state-control.js

@@ -1,6 +1,3 @@
-/**
- * WordPress dependencies
- */
 import { __, sprintf } from '@wordpress/i18n';
 import { check, chevronDown, moreVertical } from '@wordpress/icons';
 import { DropdownMenu, MenuGroup, MenuItem } from '@wordpress/components';

package/src/components/global-styles/test/background-panel.js

@@ -1,13 +1,5 @@
-/**
- * External dependencies
- */
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-
-/**
- * Internal dependencies
- */
-
 import BackgroundPanel, {
 	hasBackgroundImageValue,
 	hasBackgroundGradientValue,