@wordpress/block-editor 17.1.0 → 17.2.1-next.v.202609171837.0

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

@@ -1,23 +1,12 @@
-import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
 import { renderHook } from '@testing-library/react';
 import { useSelect } from '@wordpress/data';
 import { useResolvedStyle } from '../inherited-value-context';
 import { globalStylesDataKey } from '../../../store/private-keys';
 
-// Coverage for `useResolvedStyle` with the `gutenberg-global-styles-inheritance-ui`
-// experiment off, which is what WordPress Core gets. Deleted rather than set to
-// `false`, because an experiment that was never turned on leaves the global
-// unset, and `undefined` is the value that fires a receiving component's own
-// default parameter. Setting `false` here would test a state that does not
-// occur.
-beforeEach( () => {
-	delete window.__experimentalGlobalStylesInheritanceUI;
-} );
-
-afterEach( () => {
-	delete window.__experimentalGlobalStylesInheritanceUI;
-} );
-
+// Coverage for `useResolvedStyle` with the inheritance indicator experiment
+// off, which is what WordPress Core gets. The cascade resolves either way: the
+// experiment gates the label treatment and the reset dot, not the values.
 // Only `useSelect` is called by the hook. The other four are needed at import
 // time by the store modules this file pulls in transitively.
 vi.mock( import( '@wordpress/data' ), () => ( {
@@ -48,15 +37,14 @@ vi.mock( import( '../../../hooks/block-style-variation' ), () => ( {
 	},
 } ) );
 
-describe( 'useResolvedStyle — experiment off', () => {
+describe( 'useResolvedStyle with the indicator experiment off', () => {
 	beforeEach( () => {
 		useSelect.mockReset();
 		useSelect.mockImplementation( ( mapSelect ) =>
 			mapSelect( () => ( {
 				getSettings: () => ( {
-					// Root, block and element layers that the plugin path
-					// would resolve into a non-empty value for `core/heading`.
-					// The core path must ignore all of them.
+					// Root, block and element layers, all three of
+					// which must reach the resolved value.
 					[ globalStylesDataKey ]: {
 						typography: { lineHeight: '1.6' },
 						blocks: {
@@ -73,16 +61,19 @@ describe( 'useResolvedStyle — experiment off', () => {
 		);
 	} );
 
-	// The hook must return undefined rather than an empty object. An empty
-	// object would still be passed down as `inheritedValue`, whereas undefined
-	// lets each panel apply its `inheritedValue = value` default. That default
-	// is what keeps core showing locally-set values only.
-	it( 'resolves nothing, so panels fall back to their `inheritedValue = value` default', () => {
+	it( 'resolves the root, block and element layers', () => {
 		const { result } = renderHook( () =>
 			useResolvedStyle( 'core/heading', 'is-style-fancy' )
 		);
 
-		expect( result.current.value ).toBeUndefined();
-		expect( result.current.sources ).toBeUndefined();
+		expect( result.current.value ).toEqual( {
+			typography: { lineHeight: '1.6', fontSize: '24px' },
+			// The `h2` layer applies to this level-2 Heading, so its color
+			// both flattens onto the block and stays available as the
+			// element passthrough.
+			color: { text: '#111111' },
+			elements: { h2: { color: { text: '#111111' } } },
+		} );
+		expect( result.current.sources ).toBeDefined();
 	} );
 } );

package/src/components/global-styles/test/{typography-panel-core.jsdom.test.jsx → typography-panel-core.browser.test.jsx}

@@ -1,10 +1,9 @@
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
-import { render, screen } from '@testing-library/react';
-import { click, render as renderAriakit } from '@ariakit/test/react';
+import { userEvent } from 'vitest/browser';
+import { screen } from '@testing-library/react';
+import { render } from 'vitest-browser-react';
 import TypographyPanel from '../typography-panel';
 
-globalThis.wpVitest.mockMatchMedia();
-
 // Coverage for `TypographyPanel` with the `gutenberg-global-styles-inheritance-ui`
 // experiment off, which is what WordPress Core gets. Deleted rather than set to
 // `false`, because an experiment that was never turned on leaves the global
@@ -26,8 +25,8 @@ const baseSettings = {
 	},
 };
 
-// Two presets with distinct slugs and distinct hex values, enough to drive the
-// text color dropdown.
+// Three presets with distinct slugs and distinct hex values, enough to drive the
+// text color dropdown and to tell "left alone" apart from "synced".
 const PALETTE_SETTINGS = {
 	color: {
 		text: true,
@@ -38,13 +37,14 @@ const PALETTE_SETTINGS = {
 			theme: [
 				{ color: '#0000ff', name: 'Blue', slug: 'blue' },
 				{ color: '#ff0000', name: 'Red', slug: 'red' },
+				{ color: '#00ff00', name: 'Green', slug: 'green' },
 			],
 		},
 	},
 };
 
-function renderPanel( props ) {
-	return render(
+async function renderPanel( props ) {
+	return await render(
 		<TypographyPanel
 			value={ {} }
 			settings={ baseSettings }
@@ -62,12 +62,12 @@ const getItem = ( name ) => {
 	return control.closest( '.components-tools-panel-item' );
 };
 
-describe( 'TypographyPanel — experiment off', () => {
+describe( 'TypographyPanel with the indicator experiment off', () => {
 	// `showInheritanceLabelIndicators` defaults to the experiment flag, so a
 	// caller that passes no prop gets no inheritance treatment. The layout
 	// className must still come through.
-	it( 'applies no inherited treatment by default, even when an inherited value is present', () => {
-		renderPanel( {
+	it( 'applies no inherited treatment by default, even when an inherited value is present', async () => {
+		await renderPanel( {
 			value: {},
 			inheritedValue: { typography: { lineHeight: '1.5' } },
 		} );
@@ -79,8 +79,8 @@ describe( 'TypographyPanel — experiment off', () => {
 		);
 	} );
 
-	it( 'renders no reset dot by default when a local value shadows an inherited one', () => {
-		renderPanel( {
+	it( 'renders no reset dot by default when a local value shadows an inherited one', async () => {
+		await renderPanel( {
 			value: { typography: { lineHeight: '2' } },
 			inheritedValue: { typography: { lineHeight: '1.5' } },
 		} );
@@ -96,7 +96,7 @@ describe( 'TypographyPanel — experiment off', () => {
 	} );
 
 	it( 'renders the default color reset button by default when a local color shadows an inherited one', async () => {
-		await renderAriakit(
+		await render(
 			<TypographyPanel
 				value={ { color: { text: 'var:preset|color|blue' } } }
 				inheritedValue={ { color: { text: 'var:preset|color|red' } } }
@@ -115,12 +115,39 @@ describe( 'TypographyPanel — experiment off', () => {
 			screen.getByRole( 'button', { name: /^reset$/i } )
 		).toBeInTheDocument();
 	} );
+
+	// The point of the change: the value reaches the control for everyone,
+	// while every part of the indicator treatment stays behind the experiment.
+	it( 'shows the inherited value on the control and no inheritance treatment', async () => {
+		await renderPanel( {
+			value: {},
+			inheritedValue: { typography: { lineHeight: '1.5' } },
+			showInheritanceLabelIndicators: false,
+		} );
+
+		expect(
+			screen.getByRole( 'spinbutton', { name: /line height/i } )
+		).toHaveValue( 1.5 );
+
+		const lineHeightItem = getItem( /line height/i );
+		expect( lineHeightItem ).not.toHaveClass(
+			'is-inherited-from-global-styles'
+		);
+		expect( lineHeightItem ).not.toHaveClass(
+			'has-local-override-from-global-styles'
+		);
+		expect(
+			screen.queryByRole( 'button', {
+				name: 'Reset to inherited value',
+			} )
+		).not.toBeInTheDocument();
+	} );
 } );
 
-describe( 'TypographyPanel — experiment off, setTextColor link sync', () => {
+describe( 'TypographyPanel setTextColor link sync', () => {
 	async function pickRed( value, inheritedValue ) {
 		const onChange = vi.fn();
-		await renderAriakit(
+		await render(
 			<TypographyPanel
 				value={ value }
 				inheritedValue={ inheritedValue }
@@ -129,52 +156,70 @@ describe( 'TypographyPanel — experiment off, setTextColor link sync', () => {
 				onChange={ onChange }
 			/>
 		);
-		await click(
+		await userEvent.click(
 			screen.getByRole( 'button', { name: /Color/, expanded: false } )
 		);
 		// `findAllByRole` waits for the Popover/portal content to appear.
 		const swatches = await screen.findAllByRole( 'option' );
 		// swatch[0] = 'Blue', swatch[1] = 'Red'
-		await click( swatches[ 1 ] );
+		await userEvent.click( swatches[ 1 ] );
 		return onChange.mock.calls[ 0 ][ 0 ];
 	}
 
-	it( 'leaves an unset link color alone when a text color is already set', async () => {
-		// With the experiment on this falls back to the inherited link color
-		// and syncs. Off, it compares the inherited text and link colors
-		// directly, which on this path is the block's own pair, so a link
-		// color that was never set does not start tracking.
+	const BLUE = 'var:preset|color|blue';
+	const RED = 'var:preset|color|red';
+	const GREEN = 'var:preset|color|green';
+
+	it( 'starts a link color tracking when nothing is set', async () => {
+		const result = await pickRed( {} );
+
+		expect( result?.color?.text ).toBe( RED );
+		expect( result?.elements?.link?.color?.text ).toBe( RED );
+	} );
+
+	it( 'starts a link color tracking when only a text color is set', async () => {
+		const result = await pickRed( { color: { text: BLUE } } );
+
+		expect( result?.color?.text ).toBe( RED );
+		expect( result?.elements?.link?.color?.text ).toBe( RED );
+	} );
+
+	// The local branch of `shouldSyncLinkColor`, which the pre-inheritance
+	// comparison could not express: it only ever looked at `inheritedValue`.
+	it( 'keeps a local link color tracking while it matches the text color', async () => {
 		const result = await pickRed( {
-			color: { text: 'var:preset|color|blue' },
+			color: { text: BLUE },
+			elements: { link: { color: { text: BLUE } } },
 		} );
 
-		expect( result?.color?.text ).toBe( 'var:preset|color|red' );
-		expect( result?.elements?.link?.color?.text ).toBeUndefined();
+		expect( result?.color?.text ).toBe( RED );
+		expect( result?.elements?.link?.color?.text ).toBe( RED );
 	} );
 
-	it( 'starts a link color tracking when neither is set', async () => {
-		// Both sides are undefined, so they compare as matching and the link
-		// color starts following the text color.
-		const result = await pickRed( {} );
+	it( 'leaves a link color alone once it differs from the text color', async () => {
+		// Green is neither the outgoing text color nor the incoming one, so a
+		// green link surviving proves it was left untouched rather than synced.
+		const result = await pickRed( {
+			color: { text: BLUE },
+			elements: { link: { color: { text: GREEN } } },
+		} );
 
-		expect( result?.color?.text ).toBe( 'var:preset|color|red' );
-		expect( result?.elements?.link?.color?.text ).toBe(
-			'var:preset|color|red'
-		);
+		expect( result?.color?.text ).toBe( RED );
+		expect( result?.elements?.link?.color?.text ).toBe( GREEN );
 	} );
 
 	// In Global Styles `value` is the user config and `inheritedValue` the
-	// merged one. Comparing `value` would find undefined on both sides.
-	it( 'reads the merged config, not the user config, in Global Styles', async () => {
+	// merged one, so an unset local link color defers to the merged pair.
+	it( 'defers to the inherited pair when no local link color is set', async () => {
 		const result = await pickRed(
 			{},
 			{
-				color: { text: 'var:preset|color|blue' },
-				elements: { link: { color: { text: 'var:preset|color|red' } } },
+				color: { text: BLUE },
+				elements: { link: { color: { text: RED } } },
 			}
 		);
 
-		expect( result?.color?.text ).toBe( 'var:preset|color|red' );
+		expect( result?.color?.text ).toBe( RED );
 		// The theme's text and link colors differ, so the link does not track.
 		expect( result?.elements?.link?.color?.text ).toBeUndefined();
 	} );