@wordpress/block-editor 16.0.1-next.v.202607070741.0 → 16.1.0

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

@@ -2,7 +2,8 @@
  * WordPress dependencies
  */
 import { privateApis as componentsPrivateApis } from '@wordpress/components';
-import { Stack } from '@wordpress/ui';
+import { __, sprintf } from '@wordpress/i18n';
+import { Stack, Tooltip, VisuallyHidden } from '@wordpress/ui';
 
 /**
  * Internal dependencies
@@ -30,6 +31,11 @@ export default function StateControlBadges( {
 		activeStates.push( {
 			key: `viewport-${ selectedViewport.value }`,
 			label: selectedViewport.label,
+			tooltipText: sprintf(
+				/* translators: %s: viewport name, e.g. "Tablet". */
+				__( 'Style changes apply to the %s viewport.' ),
+				selectedViewport.label
+			),
 		} );
 	}
 
@@ -37,6 +43,11 @@ export default function StateControlBadges( {
 		activeStates.push( {
 			key: `pseudo-${ selectedPseudoState.value }`,
 			label: selectedPseudoState.label,
+			tooltipText: sprintf(
+				/* translators: %s: pseudo state name, e.g. "Hover". */
+				__( 'Style changes apply to the %s state.' ),
+				selectedPseudoState.label
+			),
 		} );
 	}
 
@@ -48,11 +59,39 @@ export default function StateControlBadges( {
 			gap="xs"
 			wrap="wrap"
 		>
-			{ activeStates.map( ( state ) => (
-				<WCBadge key={ state.key } intent="info">
-					{ state.label }
-				</WCBadge>
-			) ) }
+			{ activeStates.map( ( state ) => {
+				const badge = (
+					<WCBadge
+						key={ state.key }
+						className="block-editor-global-styles-state-control__badge"
+						intent="info"
+					>
+						{ state.label }
+						{ !! state.tooltipText && (
+							<VisuallyHidden render={ <span /> }>
+								{ state.tooltipText }
+							</VisuallyHidden>
+						) }
+					</WCBadge>
+				);
+
+				if ( ! state.tooltipText ) {
+					return badge;
+				}
+
+				return (
+					<Tooltip.Root key={ state.key }>
+						<Tooltip.Trigger
+							render={
+								<span className="block-editor-global-styles-state-control__badge-tooltip-trigger">
+									{ badge }
+								</span>
+							}
+						/>
+						<Tooltip.Popup>{ state.tooltipText }</Tooltip.Popup>
+					</Tooltip.Root>
+				);
+			} ) }
 		</Stack>
 	);
 }

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

@@ -86,8 +86,8 @@ export default function StateControl( {
 		: __( 'Default' );
 	const icon = showText ? chevronDown : moreVertical;
 	const toggleProps = showText
-		? { size: 'compact', variant: 'tertiary', iconPosition: 'right' }
-		: { size: 'compact', variant: 'tertiary' };
+		? { size: 'compact', iconPosition: 'right' }
+		: { size: 'small' };
 
 	return (
 		<Stack

package/src/components/global-styles/style.scss

@@ -32,6 +32,11 @@
 	min-height: $grid-unit-30;
 }
 
+.block-editor-global-styles-state-control__badge-tooltip-trigger {
+	display: inline-flex;
+	max-width: 100%;
+}
+
 .block-editor-global-styles-filters-panel__dropdown,
 .block-editor-global-styles__shadow-dropdown {
 	display: block;

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

@@ -1,14 +1,31 @@
+/**
+ * External dependencies
+ */
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
 /**
  * Internal dependencies
  */
 
-import {
+import BackgroundPanel, {
 	hasBackgroundImageValue,
 	hasBackgroundGradientValue,
 	hasBackgroundColorValue,
 	hasLegacyColorGradientValue,
 } from '../background-panel';
 
+// The inheritance treatment sits behind the
+// `gutenberg-global-styles-inheritance-ui` experiment. Turn it on so these
+// tests exercise the inheriting path.
+beforeEach( () => {
+	window.__experimentalGlobalStylesInheritanceUI = true;
+} );
+
+afterEach( () => {
+	delete window.__experimentalGlobalStylesInheritanceUI;
+} );
+
 describe( 'hasBackgroundImageValue', () => {
 	it( 'should return `true` when id and url exist', () => {
 		expect(
@@ -83,6 +100,326 @@ describe( 'hasBackgroundGradientValue', () => {
 	} );
 } );
 
+/**
+ * Tests for the inherited Global Styles treatment in `BackgroundPanel`.
+ *
+ * Override state is asserted through the accessible "Reset to inherited
+ * value" button.
+ *
+ * Slot inventory:
+ *
+ * - Background image: renders `BackgroundImageControl`. Exposes an
+ *   accessible reset button only when size/position/repeat settings are
+ *   enabled.
+ *
+ * - Background gradient: renders `ColorPanelDropdown` (re-used from
+ *   `color-panel.js`). The inner `Dropdown` indicator shows the inherited
+ *   gradient at-rest, and the `ColorPanelTab.onChange` interceptor commits
+ *   the inherited value when the user clicks the active swatch.
+ *
+ * Inner sub-controls (size / repeat / attachment / focal point) only need
+ * to preserve display-without-commit behaviour.
+ */
+
+const baseSettings = {
+	background: {
+		backgroundImage: true,
+		backgroundSize: true,
+		gradient: true,
+	},
+	color: {
+		gradients: {
+			theme: [
+				{
+					name: 'Purple',
+					slug: 'purple-blue',
+					gradient:
+						'linear-gradient(135deg, rgb(74, 0, 224) 0%, rgb(142, 45, 226) 100%)',
+				},
+			],
+		},
+	},
+};
+
+describe( 'BackgroundPanel — duplicate gradient preset slug identity', () => {
+	const SHARED_GRADIENT =
+		'linear-gradient(135deg, rgb(74, 0, 224) 0%, rgb(142, 45, 226) 100%)';
+	const duplicateGradientSettings = {
+		background: {
+			gradient: true,
+		},
+		color: {
+			gradients: {
+				theme: [
+					{
+						name: 'Dark background',
+						slug: 'dup-background',
+						gradient: SHARED_GRADIENT,
+					},
+					{
+						name: 'Dark text',
+						slug: 'dup-text',
+						gradient: SHARED_GRADIENT,
+					},
+				],
+			},
+		},
+	};
+
+	async function openGradientDropdown( user ) {
+		await user.click( screen.getByRole( 'button', { name: /Gradient/ } ) );
+		return screen.findAllByRole( 'option' );
+	}
+
+	it( 'commits the inherited preset slug when accepting the preselected inherited gradient', async () => {
+		const user = userEvent.setup();
+		const onChange = jest.fn();
+
+		render(
+			<BackgroundPanel
+				value={ {} }
+				inheritedValue={ {
+					background: { gradient: 'var:preset|gradient|dup-text' },
+				} }
+				settings={ duplicateGradientSettings }
+				onChange={ onChange }
+				panelId="test-panel"
+			/>
+		);
+
+		const swatches = await openGradientDropdown( user );
+		// swatch[1] ('Dark text') is the preselected inherited option;
+		// activating it is the "accept inherited value" gesture. The commit
+		// must carry the inherited slug, not re-encode the shared gradient
+		// string to whichever duplicate appears first.
+		await user.click( swatches[ 1 ] );
+
+		const result = onChange.mock.calls[ 0 ][ 0 ];
+		expect( result?.background?.gradient ).toBe(
+			'var:preset|gradient|dup-text'
+		);
+	} );
+
+	it( 'marks only the local preset as selected when another preset shares its gradient', async () => {
+		const user = userEvent.setup();
+
+		render(
+			<BackgroundPanel
+				value={ {
+					background: { gradient: 'var:preset|gradient|dup-text' },
+				} }
+				inheritedValue={ {} }
+				settings={ duplicateGradientSettings }
+				onChange={ jest.fn() }
+				panelId="test-panel"
+			/>
+		);
+
+		// swatch[0] = 'Dark background', swatch[1] = 'Dark text'. Selection
+		// must follow the stored slug; matching by gradient string would
+		// mark both.
+		const swatches = await openGradientDropdown( user );
+		expect( swatches[ 1 ] ).toHaveAttribute( 'aria-selected', 'true' );
+		expect( swatches[ 0 ] ).toHaveAttribute( 'aria-selected', 'false' );
+	} );
+} );
+
+describe( 'BackgroundPanel — inherited Global Styles label treatment', () => {
+	describe( 'Background gradient slot', () => {
+		it( 'applies the local-override className when a local gradient is set', () => {
+			const inheritedValue = {
+				background: {
+					gradient:
+						'linear-gradient(135deg, rgb(74, 0, 224) 0%, rgb(142, 45, 226) 100%)',
+				},
+			};
+			const value = {
+				background: {
+					gradient:
+						'linear-gradient(135deg, rgb(255, 0, 0) 0%, rgb(0, 0, 255) 100%)',
+				},
+			};
+
+			render(
+				<BackgroundPanel
+					value={ value }
+					inheritedValue={ inheritedValue }
+					settings={ baseSettings }
+					onChange={ () => {} }
+					panelId="test-panel"
+				/>
+			);
+
+			expect(
+				screen.getAllByRole( 'button', {
+					name: /reset to inherited value/i,
+				} ).length
+			).toBeGreaterThanOrEqual( 1 );
+		} );
+
+		it( 'does not commit on mount when at-rest (display-without-commit)', () => {
+			const inheritedValue = {
+				background: {
+					gradient:
+						'linear-gradient(135deg, rgb(74, 0, 224) 0%, rgb(142, 45, 226) 100%)',
+				},
+			};
+			const onChange = jest.fn();
+
+			render(
+				<BackgroundPanel
+					value={ {} }
+					inheritedValue={ inheritedValue }
+					settings={ baseSettings }
+					onChange={ onChange }
+					panelId="test-panel"
+				/>
+			);
+
+			expect( onChange ).not.toHaveBeenCalled();
+		} );
+	} );
+
+	describe( 'Background image slot', () => {
+		it( 'exposes an accessible reset-to-inherited button when size/position/repeat settings are enabled', () => {
+			const inheritedValue = {
+				background: {
+					backgroundImage: {
+						id: 1,
+						url: 'http://example.com/inherited.jpg',
+					},
+				},
+			};
+			const value = {
+				background: {
+					backgroundImage: {
+						id: 2,
+						url: 'http://example.com/local.jpg',
+					},
+				},
+			};
+
+			render(
+				<BackgroundPanel
+					value={ value }
+					inheritedValue={ inheritedValue }
+					settings={ {
+						background: {
+							backgroundImage: true,
+							backgroundSize: true,
+						},
+					} }
+					onChange={ () => {} }
+					panelId="test-panel"
+				/>
+			);
+
+			expect(
+				screen.getByRole( 'button', {
+					name: /reset to inherited value/i,
+				} )
+			).toBeInTheDocument();
+		} );
+
+		it( 'does not commit on mount when at-rest (display-without-commit)', () => {
+			const inheritedValue = {
+				background: {
+					backgroundImage: {
+						id: 1,
+						url: 'http://example.com/inherited.jpg',
+					},
+				},
+			};
+			const onChange = jest.fn();
+
+			render(
+				<BackgroundPanel
+					value={ {} }
+					inheritedValue={ inheritedValue }
+					settings={ baseSettings }
+					onChange={ onChange }
+					panelId="test-panel"
+				/>
+			);
+
+			expect( onChange ).not.toHaveBeenCalled();
+		} );
+	} );
+
+	describe( 'Background image inner sub-controls (display-without-commit only)', () => {
+		// The panel-level inheritance class hook on the outer
+		// ToolsPanelItem is sufficient. The inner sub-controls only need
+		// to preserve display-without-commit behavior.
+		it( 'does not commit on mount or popover open when at-rest (display-without-commit, sub-controls)', async () => {
+			const user = userEvent.setup();
+
+			const inheritedValue = {
+				background: {
+					backgroundImage: {
+						id: 1,
+						url: 'http://example.com/inherited.jpg',
+					},
+					backgroundSize: 'cover',
+					backgroundRepeat: 'no-repeat',
+					backgroundAttachment: 'fixed',
+					backgroundPosition: '25% 75%',
+				},
+			};
+			const value = {
+				background: {
+					backgroundImage: {
+						id: 2,
+						url: 'http://example.com/local.jpg',
+					},
+				},
+			};
+			const onChange = jest.fn();
+
+			render(
+				<BackgroundPanel
+					value={ value }
+					inheritedValue={ inheritedValue }
+					settings={ baseSettings }
+					onChange={ onChange }
+					panelId="test-panel"
+				/>
+			);
+
+			expect( onChange ).not.toHaveBeenCalled();
+
+			// Opening the popover renders the inner sub-controls;
+			// none of their value-prop reads must result in a
+			// commit (display-without-commit invariant).
+			const toggle = screen.getByRole( 'button', {
+				name: /background size, position and repeat options/i,
+			} );
+			await user.click( toggle );
+
+			expect( onChange ).not.toHaveBeenCalled();
+		} );
+	} );
+
+	describe( 'shape regression', () => {
+		it( 'returns null when no controls are enabled', () => {
+			const { container } = render(
+				<BackgroundPanel
+					value={ {} }
+					inheritedValue={ {} }
+					settings={ {
+						background: {
+							backgroundImage: false,
+							gradient: false,
+						},
+					} }
+					onChange={ () => {} }
+					panelId="test-panel"
+				/>
+			);
+			expect( container ).toBeEmptyDOMElement();
+		} );
+	} );
+} );
+
 describe( 'hasBackgroundColorValue', () => {
 	it( 'should return `true` when a background color string is set', () => {
 		expect(