@wordpress/block-editor 15.21.0 → 15.22.0

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();
+	} );
+} );

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

@@ -11,7 +11,6 @@ import {
 } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { useCallback, useMemo } from '@wordpress/element';
-import { getValueFromVariable } from '@wordpress/global-styles-engine';
 
 /**
  * Internal dependencies
@@ -25,8 +24,15 @@ import TextTransformControl from '../text-transform-control';
 import TextDecorationControl from '../text-decoration-control';
 import TextIndentControl from '../text-indent-control';
 import WritingModeControl from '../writing-mode-control';
+import ColorGradientDropdownItem from './color-gradient-dropdown-item';
+import { useHasTextPanel } from './color-panel';
+import { useColorGradientSettings } from './hooks';
 import { useToolsPanelDropdownMenuProps } from './utils';
 import { setImmutably } from '../../utils/object';
+import {
+	extractPresetSlug,
+	encodeColorValueWithPalette,
+} from '../../utils/color-values';
 import {
 	getMergedFontFamiliesAndFontFamilyFaces,
 	findNearestStyleAndWeight,
@@ -48,6 +54,7 @@ export function useHasTypographyPanel( settings ) {
 	const hasWritingMode = useHasWritingModeControl( settings );
 	const hasTextColumns = useHasTextColumnsControl( settings );
 	const hasFontSize = useHasFontSizeControl( settings );
+	const hasTextColor = useHasTextPanel( settings );
 
 	return (
 		hasFontFamily ||
@@ -60,7 +67,8 @@ export function useHasTypographyPanel( settings ) {
 		hasTextDecoration ||
 		hasTextIndent ||
 		hasWritingMode ||
-		hasTextColumns
+		hasTextColumns ||
+		hasTextColor
 	);
 }
 
@@ -143,7 +151,7 @@ function getMergedFontSizes( settings ) {
 	];
 }
 
-function TypographyToolsPanel( {
+export function TypographyToolsPanel( {
 	resetAllFilter,
 	onChange,
 	value,
@@ -161,6 +169,7 @@ function TypographyToolsPanel( {
 			label={ __( 'Typography' ) }
 			resetAll={ resetAll }
 			panelId={ panelId }
+			__experimentalFirstVisibleItemClass="first"
 			dropdownMenuProps={ dropdownMenuProps }
 		>
 			{ children }
@@ -169,6 +178,7 @@ function TypographyToolsPanel( {
 }
 
 const DEFAULT_CONTROLS = {
+	textColor: true,
 	fontFamily: true,
 	fontSize: true,
 	fontAppearance: true,
@@ -191,9 +201,47 @@ export default function TypographyPanel( {
 	panelId,
 	defaultControls = DEFAULT_CONTROLS,
 	isGlobalStyles = false,
+	contrastWarning,
 } ) {
-	const decodeValue = ( rawValue ) =>
-		getValueFromVariable( { settings }, '', rawValue );
+	const { colors, allColors, areCustomSolidsEnabled, decodeValue } =
+		useColorGradientSettings( settings );
+
+	// Text color. Writes to `color.text` (unchanged storage path). The
+	// control is rendered here instead of the Color panel because text
+	// color is a typographic concern.
+	const hasTextColorEnabled = useHasTextPanel( settings );
+	const textColor = decodeValue( inheritedValue?.color?.text );
+	const userTextColor = decodeValue( value?.color?.text );
+	const hasTextColorValue = () => !! value?.color?.text;
+	const setTextColor = ( newColor, newSlug ) => {
+		const encoded = encodeColorValueWithPalette(
+			allColors,
+			newColor,
+			newSlug
+		);
+		let changedObject = setImmutably( value, [ 'color', 'text' ], encoded );
+		// Keep an in-sync link color following the text color (e.g. a
+		// Button's link color tracks its text color). Compare raw encoded
+		// references (e.g. `var:preset|color|slug`), not decoded hex values.
+		// Two palette entries can share the same hex but carry different
+		// slugs (e.g. `var:preset|color|dark-background` and
+		// `var:preset|color|dark-text` both resolving to `#000`); comparing
+		// decoded values would conflate them and incorrectly force the link
+		// color to follow the text color even when the user deliberately
+		// chose a different palette slot.
+		if (
+			inheritedValue?.color?.text ===
+			inheritedValue?.elements?.link?.color?.text
+		) {
+			changedObject = setImmutably(
+				changedObject,
+				[ 'elements', 'link', 'color', 'text' ],
+				encoded
+			);
+		}
+		onChange( changedObject );
+	};
+	const resetTextColor = () => setTextColor( undefined );
 
 	// Font Family
 	const hasFontFamilyEnabled = useHasFontFamilyControl( settings );
@@ -490,12 +538,25 @@ export default function TypographyPanel( {
 	const hasTextAlign = () => !! value?.typography?.textAlign;
 	const resetTextAlign = () => setTextAlign( undefined );
 
-	const resetAllFilter = useCallback( ( previousValue ) => {
-		return {
-			...previousValue,
-			typography: {},
-		};
-	}, [] );
+	const resetAllFilter = useCallback(
+		( previousValue ) => {
+			if ( ! hasTextColorEnabled ) {
+				return {
+					...previousValue,
+					typography: {},
+				};
+			}
+			return {
+				...previousValue,
+				typography: {},
+				color: {
+					...previousValue?.color,
+					text: undefined,
+				},
+			};
+		},
+		[ hasTextColorEnabled ]
+	);
 
 	return (
 		<Wrapper
@@ -504,6 +565,34 @@ export default function TypographyPanel( {
 			onChange={ onChange }
 			panelId={ panelId }
 		>
+			{ hasTextColorEnabled && (
+				<ColorGradientDropdownItem
+					label={ __( 'Color' ) }
+					hasValue={ hasTextColorValue }
+					resetValue={ resetTextColor }
+					isShownByDefault={ defaultControls.textColor }
+					indicators={ [ textColor ] }
+					contrastWarning={ contrastWarning }
+					tabs={ [
+						{
+							key: 'text',
+							label: __( 'Color' ),
+							inheritedValue: textColor,
+							inheritedSlug: extractPresetSlug(
+								inheritedValue?.color?.text,
+								'color'
+							),
+							setValue: setTextColor,
+							userValue: userTextColor,
+						},
+					] }
+					colorGradientControlSettings={ {
+						colors,
+						disableCustomColors: ! areCustomSolidsEnabled,
+					} }
+					panelId={ panelId }
+				/>
+			) }
 			{ hasFontFamilyEnabled && (
 				<ToolsPanelItem
 					label={ __( 'Font' ) }

package/src/components/iframe/index.js

@@ -2,6 +2,7 @@
  * External dependencies
  */
 import clsx from 'clsx';
+import { version as reactVersion } from 'react';
 
 /**
  * WordPress dependencies
@@ -102,6 +103,12 @@ function getIframeSrc( resolvedAssets ) {
 		return src;
 	}
 
+	let body = '';
+	if ( reactVersion.split( '.' )[ 0 ] === '18' ) {
+		body =
+			'<body><script>document.currentScript.parentElement.remove()</script></body>';
+	}
+
 	// Correct doctype is required to enable rendering in standards mode.
 	// Also preload the styles to avoid a flash of unstyled content.
 	const html = `<!doctype html>
@@ -125,9 +132,7 @@ function getIframeSrc( resolvedAssets ) {
 		${ resolvedAssets.styles ?? '' }
 		${ resolvedAssets.scripts ?? '' }
 	</head>
-	<body>
-		<script>document.currentScript.parentElement.remove()</script>
-	</body>
+	${ body }
 </html>`;
 
 	src = URL.createObjectURL( new Blob( [ html ], { type: 'text/html' } ) );

package/src/components/inner-blocks/use-inner-block-template-sync.js

@@ -91,7 +91,9 @@ export default function useInnerBlockTemplateSync(
 			);
 
 			if ( ! fastDeepEqual( nextBlocks, currentInnerBlocks ) ) {
-				__unstableMarkNextChangeAsNotPersistent();
+				__unstableMarkNextChangeAsNotPersistent( {
+					history: 'ignore',
+				} );
 				replaceInnerBlocks(
 					clientId,
 					nextBlocks,

package/src/components/inserter/hooks/use-patterns-state.js

@@ -142,7 +142,7 @@ const usePatternsState = (
 			createSuccessNotice(
 				sprintf(
 					/* translators: %s: block pattern title. */
-					__( 'Block pattern "%s" inserted.' ),
+					__( 'Pattern "%s" inserted.' ),
 					pattern.title
 				),
 				{