@wordpress/block-editor 15.19.1-next.v.202605131006.0 → 15.20.0

package/src/hooks/test/style.js

@@ -1,7 +1,19 @@
+/**
+ * WordPress dependencies
+ */
+import { registerBlockType, unregisterBlockType } from '@wordpress/blocks';
+
 /**
  * Internal dependencies
  */
-import _style, { getInlineStyles, omitStyle } from '../style';
+import _style, {
+	getCanvasStateStyleValue,
+	getBlockStateStylesCSS,
+	getInlineStyles,
+	getResponsiveStateCSSRules,
+	getStateStylesCSS,
+	omitStyle,
+} from '../style';
 
 describe( 'getInlineStyles', () => {
 	it( 'should return an empty object when called with undefined', () => {
@@ -116,6 +128,294 @@ describe( 'getInlineStyles', () => {
 	} );
 } );
 
+describe( 'getStateStylesCSS', () => {
+	it( 'adds fallback border style without important', () => {
+		expect(
+			getStateStylesCSS(
+				{
+					border: {
+						color: '#000000',
+						width: '2px',
+					},
+				},
+				'.wp-block-test:hover'
+			)
+		).toBe(
+			'.wp-block-test:hover { border-color: #000000 !important; border-width: 2px !important; }\n.wp-block-test:hover { border-style: solid; }'
+		);
+	} );
+
+	it( 'adds important to authored border style', () => {
+		expect(
+			getStateStylesCSS(
+				{
+					border: {
+						style: 'solid',
+					},
+				},
+				'.wp-block-test:hover'
+			)
+		).toBe( '.wp-block-test:hover { border-style: solid !important; }' );
+	} );
+
+	it( 'adds important to authored side border style', () => {
+		expect(
+			getStateStylesCSS(
+				{
+					border: {
+						top: {
+							style: 'dashed',
+						},
+					},
+				},
+				'.wp-block-test:hover'
+			)
+		).toBe(
+			'.wp-block-test:hover { border-top-style: dashed !important; }'
+		);
+	} );
+
+	it( 'adds fallback side border style without important', () => {
+		expect(
+			getStateStylesCSS(
+				{
+					border: {
+						top: {
+							width: '2px',
+						},
+					},
+				},
+				'.wp-block-test:hover'
+			)
+		).toBe(
+			'.wp-block-test:hover { border-top-width: 2px !important; }\n.wp-block-test:hover { border-top-style: solid; }'
+		);
+	} );
+
+	it( 'adds important to side border color', () => {
+		expect(
+			getStateStylesCSS(
+				{
+					border: {
+						top: {
+							color: '#0000ff',
+						},
+					},
+				},
+				'.wp-block-test:hover'
+			)
+		).toBe(
+			'.wp-block-test:hover { border-top-color: #0000ff !important; }\n.wp-block-test:hover { border-top-style: solid; }'
+		);
+	} );
+} );
+
+describe( 'getBlockStateStylesCSS', () => {
+	beforeEach( () => {
+		registerBlockType( 'test/state-button', {
+			apiVersion: 3,
+			title: 'State Button',
+			category: 'text',
+			attributes: {},
+			edit: () => null,
+			save: () => null,
+			selectors: {
+				root: '.wp-block-button .wp-block-button__link',
+				dimensions: {
+					root: '.wp-block-button',
+					width: '.wp-block-button',
+				},
+			},
+		} );
+	} );
+
+	afterEach( () => {
+		unregisterBlockType( 'test/state-button' );
+	} );
+
+	it( 'routes state styles through feature selectors', () => {
+		expect(
+			getBlockStateStylesCSS(
+				{
+					color: { background: '#ff00d0' },
+					dimensions: { width: '50%' },
+				},
+				{
+					name: 'test/state-button',
+					baseSelector: '.wp-elements-abc123',
+					state: ':hover',
+				}
+			)
+		).toBe(
+			'.wp-elements-abc123 .wp-block-button__link:hover { background-color: #ff00d0 !important; }\n.wp-elements-abc123:hover { width: 50% !important; }'
+		);
+	} );
+
+	it( 'routes canvas preview styles through feature selectors without the pseudo state', () => {
+		expect(
+			getBlockStateStylesCSS(
+				{
+					color: { background: '#ff00d0' },
+					dimensions: { width: '50%' },
+				},
+				{
+					name: 'test/state-button',
+					baseSelector: '[data-block="client-id"]',
+				}
+			)
+		).toBe(
+			'[data-block="client-id"] .wp-block-button__link { background-color: #ff00d0 !important; }\n[data-block="client-id"] { width: 50% !important; }'
+		);
+	} );
+} );
+
+describe( 'getResponsiveStateCSSRules', () => {
+	beforeEach( () => {
+		registerBlockType( 'test/state-button', {
+			apiVersion: 3,
+			title: 'State Button',
+			category: 'text',
+			attributes: {},
+			edit: () => null,
+			save: () => null,
+			selectors: {
+				root: '.wp-block-button .wp-block-button__link',
+				dimensions: {
+					root: '.wp-block-button',
+					width: '.wp-block-button',
+				},
+			},
+		} );
+	} );
+
+	afterEach( () => {
+		unregisterBlockType( 'test/state-button' );
+	} );
+
+	it( 'generates media-query scoped root styles for viewport states', () => {
+		expect(
+			getResponsiveStateCSSRules(
+				{
+					mobile: {
+						color: { text: 'red' },
+					},
+				},
+				'core/paragraph',
+				'.wp-elements-1'
+			)
+		).toEqual( [
+			'@media (width <= 480px){.wp-elements-1 { color: red !important; }}',
+		] );
+	} );
+
+	it( 'routes viewport styles through feature selectors', () => {
+		expect(
+			getResponsiveStateCSSRules(
+				{
+					mobile: {
+						color: { background: '#ff00d0' },
+						dimensions: { width: '50%' },
+					},
+				},
+				'test/state-button',
+				'.wp-elements-1'
+			)
+		).toEqual( [
+			'@media (width <= 480px){.wp-elements-1 .wp-block-button__link { background-color: #ff00d0 !important; }\n.wp-elements-1 { width: 50% !important; }}',
+		] );
+	} );
+
+	it( 'generates media-query scoped pseudo styles for viewport states', () => {
+		expect(
+			getResponsiveStateCSSRules(
+				{
+					mobile: {
+						':hover': {
+							color: { background: 'black' },
+						},
+					},
+				},
+				'core/button',
+				'.wp-elements-1'
+			)
+		).toEqual( [
+			'@media (width <= 480px){.wp-elements-1:hover { background-color: black !important; }}',
+		] );
+	} );
+
+	it( 'generates media-query scoped element styles for viewport states', () => {
+		expect(
+			getResponsiveStateCSSRules(
+				{
+					mobile: {
+						elements: {
+							link: {
+								color: { text: 'blue' },
+							},
+						},
+					},
+				},
+				'core/paragraph',
+				'.wp-elements-1'
+			)
+		).toEqual( [
+			'@media (width <= 480px){.wp-elements-1 a:where(:not(.wp-element-button)) { color: blue; }}',
+		] );
+	} );
+} );
+
+describe( 'getCanvasStateStyleValue', () => {
+	it( 'returns the selected pseudo state value without a viewport state', () => {
+		expect(
+			getCanvasStateStyleValue(
+				{
+					':hover': {
+						color: { text: 'red' },
+					},
+				},
+				{ viewport: 'default', pseudo: ':hover' }
+			)
+		).toEqual( {
+			color: { text: 'red' },
+		} );
+	} );
+
+	it( 'falls back to default viewport pseudo styles for responsive pseudo states', () => {
+		expect(
+			getCanvasStateStyleValue(
+				{
+					':hover': {
+						color: { text: 'red' },
+					},
+				},
+				{ viewport: 'mobile', pseudo: ':hover' }
+			)
+		).toEqual( {
+			color: { text: 'red' },
+		} );
+	} );
+
+	it( 'merges responsive pseudo styles over default viewport pseudo styles', () => {
+		expect(
+			getCanvasStateStyleValue(
+				{
+					':hover': {
+						color: { background: 'blue', text: 'red' },
+					},
+					mobile: {
+						':hover': {
+							color: { text: 'yellow' },
+						},
+					},
+				},
+				{ viewport: 'mobile', pseudo: ':hover' }
+			)
+		).toEqual( {
+			color: { background: 'blue', text: 'yellow' },
+		} );
+	} );
+} );
+
 describe( 'addSaveProps', () => {
 	const blockSettings = {
 		save: () => <div className="default" />,

package/src/hooks/typography.js

@@ -21,6 +21,12 @@ import { TEXT_ALIGN_SUPPORT_KEY } from './text-align';
 import { FIT_TEXT_SUPPORT_KEY } from './fit-text';
 import { cleanEmptyObject } from './utils';
 import { store as blockEditorStore } from '../store';
+import {
+	getStyleForState,
+	isDefaultBlockStyleState,
+	setStyleForState,
+	useBlockStyleState,
+} from './block-style-state';
 
 function omit( object, keys ) {
 	return Object.fromEntries(
@@ -117,6 +123,7 @@ function TypographyInspectorControl( { children, resetAllFilter } ) {
 }
 
 export function TypographyPanel( { clientId, name, setAttributes, settings } ) {
+	const selectedState = useBlockStyleState();
 	const isEnabled = useHasTypographyPanel( settings );
 
 	const { style, fontFamily, fontSize, fitText } = useSelect(
@@ -140,23 +147,35 @@ export function TypographyPanel( { clientId, name, setAttributes, settings } ) {
 		},
 		[ clientId, isEnabled ]
 	);
-	const value = useMemo(
-		() => attributesToStyle( { style, fontFamily, fontSize } ),
-		[ style, fontSize, fontFamily ]
-	);
 
-	const onChange = ( newStyle ) => {
-		const newAttributes = styleToAttributes( newStyle );
+	const isStateSelected = ! isDefaultBlockStyleState( selectedState );
 
-		// If setting a font size and fitText is currently enabled, disable it
-		const hasFontSize =
-			newAttributes.fontSize || newAttributes.style?.typography?.fontSize;
-		if ( hasFontSize && fitText ) {
-			newAttributes.fitText = undefined;
+	const value = useMemo( () => {
+		if ( isStateSelected ) {
+			return getStyleForState( style, selectedState );
 		}
-
-		setAttributes( newAttributes );
-	};
+		return attributesToStyle( { style, fontFamily, fontSize } );
+	}, [ isStateSelected, selectedState, style, fontSize, fontFamily ] );
+
+	const onChange = isStateSelected
+		? ( newStyle ) => {
+				setAttributes( {
+					style: setStyleForState( style, selectedState, newStyle ),
+				} );
+		  }
+		: ( newStyle ) => {
+				const newAttributes = styleToAttributes( newStyle );
+
+				// If setting a font size and fitText is currently enabled, disable it.
+				const hasFontSize =
+					newAttributes.fontSize ||
+					newAttributes.style?.typography?.fontSize;
+				if ( hasFontSize && fitText ) {
+					newAttributes.fitText = undefined;
+				}
+
+				setAttributes( newAttributes );
+		  };
 
 	if ( ! isEnabled ) {
 		return null;