@wordpress/block-editor 15.21.1 → 15.22.0

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

@@ -32,7 +32,6 @@ import { setImmutably } from '../../utils/object';
 import {
 	DEFAULT_BLOCK_STYLE_STATE,
 	hasPseudoBlockStyleState,
-	isDefaultBlockStyleState,
 	hasViewportBlockStyleState,
 } from '../../hooks/block-style-state';
 
@@ -95,7 +94,7 @@ function hasWidth( settings ) {
 
 function hasAspectRatio( settings, styleState = DEFAULT_BLOCK_STYLE_STATE ) {
 	return (
-		isDefaultBlockStyleState( styleState ) &&
+		! hasPseudoBlockStyleState( styleState ) &&
 		settings?.dimensions?.aspectRatio
 	);
 }
@@ -603,7 +602,6 @@ export default function DimensionsPanel( {
 				>
 					{ ! showSpacingPresetsControl && (
 						<BoxControl
-							__next40pxDefaultSize
 							values={ paddingValues }
 							onChange={ setPaddingValues }
 							label={ __( 'Padding' ) }
@@ -646,7 +644,6 @@ export default function DimensionsPanel( {
 				>
 					{ ! showSpacingPresetsControl && (
 						<BoxControl
-							__next40pxDefaultSize
 							values={ marginValues }
 							onChange={ setMarginValues }
 							inputProps={ {
@@ -702,7 +699,6 @@ export default function DimensionsPanel( {
 					{ ! showSpacingPresetsControl &&
 						( isAxialGap ? (
 							<BoxControl
-								__next40pxDefaultSize
 								label={ __( 'Block spacing' ) }
 								min={ 0 }
 								onChange={ setGapValues }

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

@@ -5,6 +5,7 @@ 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
@@ -306,3 +307,47 @@ export function useGradientsPerOrigin( settings ) {
 		shouldDisplayDefaultGradients,
 	] );
 }
+
+/**
+ * Derives the color/gradient palette data and encode/decode helpers shared by
+ * the Color, Background, and Typography style panels, so the common preamble
+ * is defined once rather than repeated in each panel.
+ *
+ * @param {Object} settings Style settings object.
+ *
+ * @return {Object} Shared color/gradient palette data and helpers.
+ */
+export function useColorGradientSettings( settings ) {
+	const colors = useColorsPerOrigin( settings );
+	const gradients = useGradientsPerOrigin( settings );
+	const areCustomSolidsEnabled = settings?.color?.custom;
+	const areCustomGradientsEnabled = settings?.color?.customGradient;
+	const allColors = useMemo(
+		() => colors.flatMap( ( { colors: originColors } ) => originColors ),
+		[ colors ]
+	);
+	const decodeValue = ( rawValue ) =>
+		getValueFromVariable( { settings }, '', rawValue );
+	const encodeGradientValue = ( gradientValue ) => {
+		const allGradients = gradients.flatMap(
+			( { gradients: originGradients } ) => originGradients
+		);
+		const gradientObject = allGradients.find(
+			( { gradient } ) => gradient === gradientValue
+		);
+		return gradientObject
+			? 'var:preset|gradient|' + gradientObject.slug
+			: gradientValue;
+	};
+	return {
+		colors,
+		gradients,
+		allColors,
+		areCustomSolidsEnabled,
+		areCustomGradientsEnabled,
+		hasSolidColors: colors.length > 0 || areCustomSolidsEnabled,
+		hasGradientColors: gradients.length > 0 || areCustomGradientsEnabled,
+		decodeValue,
+		encodeGradientValue,
+	};
+}

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

@@ -20,7 +20,6 @@ import { shadow as shadowIcon, Icon, check, reset } from '@wordpress/icons';
  */
 import clsx from 'clsx';
 
-// eslint-disable-next-line @wordpress/use-recommended-components -- `Tooltip` is not yet on the recommended `@wordpress/ui` allow-list; landing as a migration step ahead of the wider rollout.
 import { Tooltip } from '@wordpress/ui';
 
 /**

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

@@ -5,6 +5,8 @@
 import {
 	hasBackgroundImageValue,
 	hasBackgroundGradientValue,
+	hasBackgroundColorValue,
+	hasLegacyColorGradientValue,
 } from '../background-panel';
 
 describe( 'hasBackgroundImageValue', () => {
@@ -80,3 +82,57 @@ describe( 'hasBackgroundGradientValue', () => {
 		expect( hasBackgroundGradientValue( undefined ) ).toBe( false );
 	} );
 } );
+
+describe( 'hasBackgroundColorValue', () => {
+	it( 'should return `true` when a background color string is set', () => {
+		expect(
+			hasBackgroundColorValue( { color: { background: '#ff0000' } } )
+		).toBe( true );
+	} );
+
+	it( 'should return `true` for a preset slug reference', () => {
+		expect(
+			hasBackgroundColorValue( {
+				color: { background: 'var:preset|color|vivid-red' },
+			} )
+		).toBe( true );
+	} );
+
+	it( 'should return `false` when background color is undefined', () => {
+		expect( hasBackgroundColorValue( { color: {} } ) ).toBe( false );
+	} );
+
+	it( 'should return `false` when color is undefined', () => {
+		expect( hasBackgroundColorValue( {} ) ).toBe( false );
+	} );
+
+	it( 'should return `false` when style is undefined', () => {
+		expect( hasBackgroundColorValue( undefined ) ).toBe( false );
+	} );
+} );
+
+describe( 'hasLegacyColorGradientValue', () => {
+	it( 'should return `true` when a legacy color.gradient string is set', () => {
+		expect(
+			hasLegacyColorGradientValue( {
+				color: { gradient: 'linear-gradient(135deg, red, blue)' },
+			} )
+		).toBe( true );
+	} );
+
+	it( 'should return `false` when color.gradient is undefined', () => {
+		expect( hasLegacyColorGradientValue( { color: {} } ) ).toBe( false );
+	} );
+
+	it( 'should return `false` when style is undefined', () => {
+		expect( hasLegacyColorGradientValue( undefined ) ).toBe( false );
+	} );
+
+	it( 'should not be confused by background.gradient', () => {
+		expect(
+			hasLegacyColorGradientValue( {
+				background: { gradient: 'linear-gradient(red, blue)' },
+			} )
+		).toBe( false );
+	} );
+} );

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

@@ -1,135 +1,189 @@
 /**
  * External dependencies
  */
-import { screen } from '@testing-library/react';
-import { click, render } from '@ariakit/test/react';
+import { renderHook } from '@testing-library/react';
 
 /**
  * Internal dependencies
  */
-import ColorPanel from '../color-panel';
-
-// ---------------------------------------------------------------------------
-// Shared fixtures
-// ---------------------------------------------------------------------------
-
-// Two palette entries that share the same decoded hex value (#000) but carry
-// distinct slugs. This mirrors the duplicate-color scenario that motivated
-// the slug-based selection work.
-const DUPLICATE_PALETTE_SETTINGS = {
+import {
+	useHasColorPanel,
+	useHasTextPanel,
+	useHasBackgroundColorPanel,
+	useHasLinkPanel,
+	useHasHeadingPanel,
+	useHasButtonPanel,
+	useHasCaptionPanel,
+} from '../color-panel';
+
+const settingsWithColors = ( overrides = {} ) => ( {
 	color: {
-		text: true,
-		link: false, // keep the panel simple so button queries are unambiguous
-		background: false,
-		custom: false,
-		customGradient: false,
-		defaultPalette: false,
 		palette: {
-			theme: [
-				{
-					color: '#000',
-					name: 'Dark Background',
-					slug: 'dark-background',
-				},
-				{ color: '#000', name: 'Dark Text', slug: 'dark-text' },
-			],
+			theme: [ { slug: 'red', color: '#ff0000', name: 'Red' } ],
 		},
+		...overrides,
 	},
-};
-
-// ---------------------------------------------------------------------------
-// ColorPanel — setTextColor behaviour (render tests)
-// ---------------------------------------------------------------------------
-
-describe( 'ColorPanel — setTextColor', () => {
-	// Helper: open the Text-color dropdown and return the rendered swatches.
-	async function openTextDropdown() {
-		await click(
-			screen.getByRole( 'button', { name: /Text/, expanded: false } )
-		);
-		// `findAllByRole` waits for the Popover/portal content to appear.
-		return screen.findAllByRole( 'option' );
-	}
-
-	it( 'encodes a slug-selected color as var:preset|color|<slug> rather than falling back to a hex-value lookup', async () => {
-		const onChange = jest.fn();
-
-		await render(
-			<ColorPanel
-				value={ {} }
-				inheritedValue={ {} }
-				settings={ DUPLICATE_PALETTE_SETTINGS }
-				panelId="test"
-				onChange={ onChange }
-			/>
-		);
-
-		const swatches = await openTextDropdown();
-		// swatch[0] = 'dark-background', swatch[1] = 'dark-text'
-		await click( swatches[ 1 ] );
-
-		expect( onChange ).toHaveBeenCalledTimes( 1 );
-		const result = onChange.mock.calls[ 0 ][ 0 ];
-		// The slug must be encoded directly: not looked up by hex value.
-		expect( result?.color?.text ).toBe( 'var:preset|color|dark-text' );
-	} );
-
-	it( 'syncs the link color when text and link share the same raw preset reference', async () => {
-		const onChange = jest.fn();
-		const sharedRef = 'var:preset|color|dark-background';
-
-		await render(
-			<ColorPanel
-				value={ {} }
-				inheritedValue={ {
-					color: { text: sharedRef },
-					elements: { link: { color: { text: sharedRef } } },
-				} }
-				settings={ DUPLICATE_PALETTE_SETTINGS }
-				panelId="test"
-				onChange={ onChange }
-			/>
-		);
-
-		const swatches = await openTextDropdown();
-		await click( swatches[ 1 ] );
-
-		const result = onChange.mock.calls[ 0 ][ 0 ];
-		expect( result?.color?.text ).toBe( 'var:preset|color|dark-text' );
-		// Link must be kept in sync because text and link shared the same ref.
-		expect( result?.elements?.link?.color?.text ).toBe(
-			'var:preset|color|dark-text'
-		);
-	} );
-
-	it( 'does NOT sync the link color when text and link have different raw refs, even if their decoded hex values match', async () => {
-		const onChange = jest.fn();
-
-		await render(
-			<ColorPanel
-				value={ {} }
-				inheritedValue={ {
-					// Both resolve to #000, but they are different preset references.
-					color: { text: 'var:preset|color|dark-background' },
-					elements: {
-						link: {
-							color: { text: 'var:preset|color|dark-text' },
-						},
+} );
+
+describe( 'useHasColorPanel', () => {
+	// After moving top-level text color to TypographyPanel and top-level
+	// background color to BackgroundPanel, the Color panel only aggregates
+	// link and element controls (heading, button, caption).
+	it( 'should be false when only text color is enabled', () => {
+		const { result } = renderHook( () =>
+			useHasColorPanel( settingsWithColors( { text: true } ) )
+		);
+		expect( result.current ).toBeFalsy();
+	} );
+
+	it( 'should be false when only background color is enabled', () => {
+		const { result } = renderHook( () =>
+			useHasColorPanel( settingsWithColors( { background: true } ) )
+		);
+		expect( result.current ).toBeFalsy();
+	} );
+
+	it( 'should be false when both text and background are enabled but no element controls are', () => {
+		const { result } = renderHook( () =>
+			useHasColorPanel(
+				settingsWithColors( { text: true, background: true } )
+			)
+		);
+		expect( result.current ).toBeFalsy();
+	} );
+
+	it( 'should be true when link color is enabled', () => {
+		const { result } = renderHook( () =>
+			useHasColorPanel( settingsWithColors( { link: true } ) )
+		);
+		expect( result.current ).toBeTruthy();
+	} );
+
+	it( 'should be true when heading element is enabled', () => {
+		const { result } = renderHook( () =>
+			useHasColorPanel( settingsWithColors( { heading: true } ) )
+		);
+		expect( result.current ).toBeTruthy();
+	} );
+
+	it( 'should be true when button element is enabled', () => {
+		const { result } = renderHook( () =>
+			useHasColorPanel( settingsWithColors( { button: true } ) )
+		);
+		expect( result.current ).toBeTruthy();
+	} );
+
+	it( 'should be true when caption element is enabled', () => {
+		const { result } = renderHook( () =>
+			useHasColorPanel( settingsWithColors( { caption: true } ) )
+		);
+		expect( result.current ).toBeTruthy();
+	} );
+
+	it( 'should be false when no color controls are enabled', () => {
+		const { result } = renderHook( () => useHasColorPanel( {} ) );
+		expect( result.current ).toBeFalsy();
+	} );
+} );
+
+describe( 'useHasTextPanel', () => {
+	// Still exported for TypographyPanel to consume as its text color gate.
+	it( 'should be true when text color is enabled and colors exist', () => {
+		const { result } = renderHook( () =>
+			useHasTextPanel( settingsWithColors( { text: true } ) )
+		);
+		expect( result.current ).toBeTruthy();
+	} );
+
+	it( 'should be true when text color is enabled with custom colors support', () => {
+		const { result } = renderHook( () =>
+			useHasTextPanel( { color: { text: true, custom: true } } )
+		);
+		expect( result.current ).toBeTruthy();
+	} );
+
+	it( 'should be false when text color is disabled', () => {
+		const { result } = renderHook( () =>
+			useHasTextPanel( settingsWithColors( { text: false } ) )
+		);
+		expect( result.current ).toBeFalsy();
+	} );
+
+	it( 'should be false when no colors or custom support exist', () => {
+		const { result } = renderHook( () =>
+			useHasTextPanel( { color: { text: true } } )
+		);
+		expect( result.current ).toBeFalsy();
+	} );
+} );
+
+describe( 'useHasBackgroundColorPanel', () => {
+	// Still exported for BackgroundPanel to consume as its background color gate.
+	it( 'should be true when background is enabled and colors exist', () => {
+		const { result } = renderHook( () =>
+			useHasBackgroundColorPanel(
+				settingsWithColors( { background: true } )
+			)
+		);
+		expect( result.current ).toBeTruthy();
+	} );
+
+	it( 'should be true when only gradients are available', () => {
+		const { result } = renderHook( () =>
+			useHasBackgroundColorPanel( {
+				color: {
+					background: true,
+					gradients: {
+						theme: [
+							{
+								slug: 'cyan',
+								gradient: 'linear-gradient(cyan, blue)',
+								name: 'Cyan',
+							},
+						],
 					},
-				} }
-				settings={ DUPLICATE_PALETTE_SETTINGS }
-				panelId="test"
-				onChange={ onChange }
-			/>
+				},
+			} )
+		);
+		expect( result.current ).toBeTruthy();
+	} );
+
+	it( 'should be false when background color is disabled', () => {
+		const { result } = renderHook( () =>
+			useHasBackgroundColorPanel(
+				settingsWithColors( { background: false } )
+			)
 		);
+		expect( result.current ).toBeFalsy();
+	} );
+} );
 
-		const swatches = await openTextDropdown();
-		await click( swatches[ 1 ] );
+describe( 'element color hooks', () => {
+	it( 'useHasLinkPanel is truthy when link is enabled with colors', () => {
+		const { result } = renderHook( () =>
+			useHasLinkPanel( settingsWithColors( { link: true } ) )
+		);
+		expect( result.current ).toBeTruthy();
+	} );
 
-		const result = onChange.mock.calls[ 0 ][ 0 ];
-		expect( result?.color?.text ).toBe( 'var:preset|color|dark-text' );
-		// Link must NOT be updated: raw-ref identity is what matters,
-		// not decoded-value equality.
-		expect( result?.elements?.link?.color?.text ).toBeUndefined();
+	it( 'useHasHeadingPanel is truthy when heading is enabled with colors', () => {
+		const { result } = renderHook( () =>
+			useHasHeadingPanel( settingsWithColors( { heading: true } ) )
+		);
+		expect( result.current ).toBeTruthy();
+	} );
+
+	it( 'useHasButtonPanel is truthy when button is enabled with colors', () => {
+		const { result } = renderHook( () =>
+			useHasButtonPanel( settingsWithColors( { button: true } ) )
+		);
+		expect( result.current ).toBeTruthy();
+	} );
+
+	it( 'useHasCaptionPanel is truthy when caption is enabled with colors', () => {
+		const { result } = renderHook( () =>
+			useHasCaptionPanel( settingsWithColors( { caption: true } ) )
+		);
+		expect( result.current ).toBeTruthy();
 	} );
 } );

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

@@ -0,0 +1,167 @@
+/**
+ * External dependencies
+ */
+import { renderHook, screen } from '@testing-library/react';
+import { click, render } from '@ariakit/test/react';
+
+/**
+ * Internal dependencies
+ */
+import TypographyPanel, { useHasTypographyPanel } from '../typography-panel';
+
+const settingsWithColors = ( overrides = {} ) => ( {
+	color: {
+		palette: {
+			theme: [ { slug: 'red', color: '#ff0000', name: 'Red' } ],
+		},
+		...overrides,
+	},
+} );
+
+describe( 'useHasTypographyPanel', () => {
+	// After moving top-level text color into TypographyPanel, text color
+	// alone should be enough to open the panel.
+	it( 'should be true when only text color is enabled', () => {
+		const { result } = renderHook( () =>
+			useHasTypographyPanel( settingsWithColors( { text: true } ) )
+		);
+		expect( result.current ).toBeTruthy();
+	} );
+
+	it( 'should be true when only font family is enabled', () => {
+		const { result } = renderHook( () =>
+			useHasTypographyPanel( {
+				typography: {
+					fontFamilies: {
+						theme: [ { slug: 'sans', fontFamily: 'sans-serif' } ],
+					},
+				},
+			} )
+		);
+		expect( result.current ).toBeTruthy();
+	} );
+
+	it( 'should be true when only line height is enabled', () => {
+		const { result } = renderHook( () =>
+			useHasTypographyPanel( { typography: { lineHeight: true } } )
+		);
+		expect( result.current ).toBeTruthy();
+	} );
+
+	it( 'should be false when no typography or text color controls are enabled', () => {
+		const { result } = renderHook( () => useHasTypographyPanel( {} ) );
+		expect( result.current ).toBeFalsy();
+	} );
+
+	it( 'should be false when text color is enabled but no colors or custom support exist', () => {
+		const { result } = renderHook( () =>
+			useHasTypographyPanel( { color: { text: true } } )
+		);
+		expect( result.current ).toBeFalsy();
+	} );
+
+	it( 'should be true when text color is enabled with custom colors support', () => {
+		const { result } = renderHook( () =>
+			useHasTypographyPanel( { color: { text: true, custom: true } } )
+		);
+		expect( result.current ).toBeTruthy();
+	} );
+} );
+
+// ---------------------------------------------------------------------------
+// TypographyPanel — setTextColor link-sync behaviour (render tests)
+// ---------------------------------------------------------------------------
+
+// Setting the text color should keep an in-sync link color following it (e.g.
+// a Button's link color tracks its text color). The two palette entries below
+// share the same decoded hex value (#000) but carry distinct slugs, ensuring
+// the sync keys off the raw preset reference rather than the decoded hex.
+const DUPLICATE_PALETTE_SETTINGS = {
+	color: {
+		text: true,
+		custom: false,
+		customGradient: false,
+		defaultPalette: false,
+		palette: {
+			theme: [
+				{
+					color: '#000',
+					name: 'Dark Background',
+					slug: 'dark-background',
+				},
+				{ color: '#000', name: 'Dark Text', slug: 'dark-text' },
+			],
+		},
+	},
+};
+
+describe( 'TypographyPanel — setTextColor link sync', () => {
+	// Helper: open the text Color dropdown and return the rendered swatches.
+	async function openTextColorDropdown() {
+		await click(
+			screen.getByRole( 'button', { name: /Color/, expanded: false } )
+		);
+		// `findAllByRole` waits for the Popover/portal content to appear.
+		return screen.findAllByRole( 'option' );
+	}
+
+	it( 'syncs the link color when text and link share the same raw preset reference', async () => {
+		const onChange = jest.fn();
+		const sharedRef = 'var:preset|color|dark-background';
+
+		await render(
+			<TypographyPanel
+				value={ {} }
+				inheritedValue={ {
+					color: { text: sharedRef },
+					elements: { link: { color: { text: sharedRef } } },
+				} }
+				settings={ DUPLICATE_PALETTE_SETTINGS }
+				panelId="test"
+				onChange={ onChange }
+			/>
+		);
+
+		const swatches = await openTextColorDropdown();
+		// swatch[0] = 'dark-background', swatch[1] = 'dark-text'
+		await click( swatches[ 1 ] );
+
+		const result = onChange.mock.calls[ 0 ][ 0 ];
+		expect( result?.color?.text ).toBe( 'var:preset|color|dark-text' );
+		// Link must follow because text and link shared the same ref.
+		expect( result?.elements?.link?.color?.text ).toBe(
+			'var:preset|color|dark-text'
+		);
+	} );
+
+	it( 'does NOT sync the link color when text and link have different raw refs, even if their decoded hex values match', async () => {
+		const onChange = jest.fn();
+
+		await render(
+			<TypographyPanel
+				value={ {} }
+				inheritedValue={ {
+					// Both resolve to #000, but they are different preset references.
+					color: { text: 'var:preset|color|dark-background' },
+					elements: {
+						link: {
+							color: { text: 'var:preset|color|dark-text' },
+						},
+					},
+				} }
+				settings={ DUPLICATE_PALETTE_SETTINGS }
+				panelId="test"
+				onChange={ onChange }
+			/>
+		);
+
+		const swatches = await openTextColorDropdown();
+		await click( swatches[ 1 ] );
+
+		const result = onChange.mock.calls[ 0 ][ 0 ];
+		expect( result?.color?.text ).toBe( 'var:preset|color|dark-text' );
+		// Link must NOT be updated: raw-ref identity is what matters,
+		// not decoded-value equality.
+		expect( result?.elements?.link?.color?.text ).toBeUndefined();
+	} );
+} );