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

package/src/hooks/test/block-style-state.js

@@ -0,0 +1,270 @@
+/**
+ * Internal dependencies
+ */
+import {
+	getStyleForState,
+	scopeResetAllFilterToState,
+	setStyleForState,
+} from '../block-style-state';
+
+describe( 'getStyleForState', () => {
+	it( 'returns the root style for the default state', () => {
+		const style = { color: { text: '#000000' } };
+
+		expect(
+			getStyleForState( style, {
+				viewport: 'default',
+				pseudo: 'default',
+			} )
+		).toBe( style );
+	} );
+
+	it( 'returns the selected pseudo state style', () => {
+		const style = {
+			color: { text: '#000000' },
+			':hover': { color: { text: '#ff0000' } },
+		};
+
+		expect(
+			getStyleForState( style, {
+				viewport: 'default',
+				pseudo: ':hover',
+			} )
+		).toEqual( {
+			color: { text: '#ff0000' },
+		} );
+	} );
+
+	it( 'returns the selected viewport state style', () => {
+		const style = {
+			color: { text: '#000000' },
+			mobile: { color: { text: '#ff0000' } },
+		};
+
+		expect(
+			getStyleForState( style, {
+				viewport: 'mobile',
+				pseudo: 'default',
+			} )
+		).toEqual( {
+			color: { text: '#ff0000' },
+		} );
+	} );
+
+	it( 'returns the selected viewport pseudo state style', () => {
+		const style = {
+			mobile: {
+				':hover': { color: { text: '#ff0000' } },
+			},
+		};
+
+		expect(
+			getStyleForState( style, {
+				viewport: 'mobile',
+				pseudo: ':hover',
+			} )
+		).toEqual( {
+			color: { text: '#ff0000' },
+		} );
+	} );
+} );
+
+describe( 'setStyleForState', () => {
+	it( 'replaces the root style for the default state', () => {
+		expect(
+			setStyleForState(
+				{ color: { text: '#000000' } },
+				{ viewport: 'default', pseudo: 'default' },
+				{
+					typography: { fontSize: '32px' },
+				}
+			)
+		).toEqual( {
+			typography: { fontSize: '32px' },
+		} );
+	} );
+
+	it( 'updates only the selected pseudo state style', () => {
+		expect(
+			setStyleForState(
+				{
+					color: { text: '#000000' },
+					':hover': { color: { text: '#ff0000' } },
+				},
+				{ viewport: 'default', pseudo: ':hover' },
+				{ typography: { fontSize: '32px' } }
+			)
+		).toEqual( {
+			color: { text: '#000000' },
+			':hover': { typography: { fontSize: '32px' } },
+		} );
+	} );
+
+	it( 'updates only the selected viewport state style', () => {
+		expect(
+			setStyleForState(
+				{
+					color: { text: '#000000' },
+					mobile: { color: { text: '#ff0000' } },
+				},
+				{ viewport: 'mobile', pseudo: 'default' },
+				{ typography: { fontSize: '32px' } }
+			)
+		).toEqual( {
+			color: { text: '#000000' },
+			mobile: { typography: { fontSize: '32px' } },
+		} );
+	} );
+
+	it( 'updates only the selected viewport pseudo state style', () => {
+		expect(
+			setStyleForState(
+				{
+					color: { text: '#000000' },
+					mobile: {
+						color: { text: '#ff0000' },
+						':hover': { color: { text: '#00ff00' } },
+					},
+				},
+				{ viewport: 'mobile', pseudo: ':hover' },
+				{ typography: { fontSize: '32px' } }
+			)
+		).toEqual( {
+			color: { text: '#000000' },
+			mobile: {
+				color: { text: '#ff0000' },
+				':hover': { typography: { fontSize: '32px' } },
+			},
+		} );
+	} );
+
+	it( 'removes the selected state key when the new state style is empty', () => {
+		expect(
+			setStyleForState(
+				{
+					color: { text: '#000000' },
+					':hover': { color: { text: '#ff0000' } },
+				},
+				{ viewport: 'default', pseudo: ':hover' },
+				{ color: { text: undefined } }
+			)
+		).toEqual( {
+			color: { text: '#000000' },
+		} );
+	} );
+} );
+
+describe( 'scopeResetAllFilterToState', () => {
+	it( 'passes only the selected state style to the reset filter', () => {
+		const innerReset = jest.fn( ( attributes ) => ( {
+			...attributes,
+			style: {
+				...attributes.style,
+				color: undefined,
+			},
+			textColor: undefined,
+		} ) );
+		const attributes = {
+			style: {
+				color: { text: '#000000' },
+				':hover': {
+					color: { text: '#ff0000' },
+					typography: { fontSize: '32px' },
+				},
+				':focus': { color: { text: '#0000ff' } },
+			},
+		};
+
+		const result = scopeResetAllFilterToState(
+			{ viewport: 'default', pseudo: ':hover' },
+			innerReset
+		)( attributes );
+
+		expect( innerReset ).toHaveBeenCalledWith( {
+			style: attributes.style[ ':hover' ],
+		} );
+		expect( result ).toEqual( {
+			style: {
+				color: { text: '#000000' },
+				':hover': {
+					typography: { fontSize: '32px' },
+				},
+				':focus': { color: { text: '#0000ff' } },
+			},
+		} );
+	} );
+
+	it( 'removes the state key when the scoped reset leaves it empty', () => {
+		const innerReset = () => ( { style: undefined } );
+		const attributes = {
+			style: {
+				color: { text: '#000000' },
+				':hover': { color: { text: '#ff0000' } },
+			},
+		};
+
+		const result = scopeResetAllFilterToState(
+			{ viewport: 'default', pseudo: ':hover' },
+			innerReset
+		)( attributes );
+
+		expect( result ).toEqual( {
+			style: {
+				color: { text: '#000000' },
+			},
+		} );
+	} );
+
+	it( 'calls the reset filter with an empty style when no state styles exist', () => {
+		const innerReset = jest.fn( ( attributes ) => attributes );
+		const attributes = {
+			style: { color: { text: '#000000' } },
+		};
+
+		scopeResetAllFilterToState(
+			{ viewport: 'default', pseudo: ':hover' },
+			innerReset
+		)( attributes );
+
+		expect( innerReset ).toHaveBeenCalledWith( { style: {} } );
+	} );
+
+	it( 'passes only the selected viewport pseudo state style to the reset filter', () => {
+		const innerReset = jest.fn( () => ( { style: undefined } ) );
+		const attributes = {
+			style: {
+				color: { text: '#000000' },
+				mobile: {
+					color: { text: '#ff0000' },
+					':hover': { color: { text: '#00ff00' } },
+				},
+			},
+		};
+
+		const result = scopeResetAllFilterToState(
+			{ viewport: 'mobile', pseudo: ':hover' },
+			innerReset
+		)( attributes );
+
+		expect( innerReset ).toHaveBeenCalledWith( {
+			style: attributes.style.mobile[ ':hover' ],
+		} );
+		expect( result ).toEqual( {
+			style: {
+				color: { text: '#000000' },
+				mobile: { color: { text: '#ff0000' } },
+			},
+		} );
+	} );
+
+	it( 'returns the original reset filter for the default state', () => {
+		const innerReset = () => ( { style: undefined } );
+
+		expect(
+			scopeResetAllFilterToState(
+				{ viewport: 'default', pseudo: 'default' },
+				innerReset
+			)
+		).toBe( innerReset );
+	} );
+} );

package/src/hooks/test/layout.js

@@ -0,0 +1,185 @@
+/**
+ * Internal dependencies
+ */
+import { getResetLayout, getResponsiveLayoutStyles } from '../layout';
+
+describe( 'layout', () => {
+	describe( 'getResetLayout()', () => {
+		it( 'should reset to variation layout defaults', () => {
+			const layout = getResetLayout(
+				{ default: { type: 'flex' } },
+				{
+					attributes: {
+						layout: {
+							type: 'grid',
+							columnCount: 3,
+						},
+					},
+				}
+			);
+
+			expect( layout ).toEqual( {
+				type: 'grid',
+				columnCount: 3,
+			} );
+		} );
+
+		it( 'should fall back to the block support layout defaults', () => {
+			const layout = getResetLayout(
+				{
+					default: {
+						type: 'flex',
+						flexWrap: 'nowrap',
+					},
+				},
+				undefined
+			);
+
+			expect( layout ).toEqual( {
+				type: 'flex',
+				flexWrap: 'nowrap',
+			} );
+		} );
+
+		it( 'should return undefined when there is no layout config', () => {
+			expect( getResetLayout() ).toBeUndefined();
+		} );
+	} );
+
+	describe( 'getResponsiveLayoutStyles()', () => {
+		it( 'generates responsive block gap styles for flow layouts', () => {
+			expect(
+				getResponsiveLayoutStyles( {
+					attributes: {
+						style: {
+							mobile: {
+								spacing: {
+									blockGap: '12px',
+								},
+							},
+						},
+					},
+					blockName: 'core/group',
+					selector: '.wp-container-test',
+					layout: { type: 'default' },
+					hasBlockGapSupport: true,
+				} )
+			).toBe(
+				'@media (width <= 480px){.wp-container-test > :first-child { margin-block-start: 0; }.wp-container-test > :last-child { margin-block-end: 0; }.wp-container-test > * { margin-block-start: 12px; margin-block-end: 0; }}'
+			);
+		} );
+
+		it( 'generates responsive block gap styles for flex layouts', () => {
+			expect(
+				getResponsiveLayoutStyles( {
+					attributes: {
+						style: {
+							mobile: {
+								spacing: {
+									blockGap: '12px',
+								},
+							},
+						},
+					},
+					blockName: 'core/group',
+					selector: '.wp-container-test',
+					layout: { type: 'flex' },
+					hasBlockGapSupport: true,
+				} )
+			).toBe(
+				'@media (width <= 480px){.wp-container-test { gap: 12px; }}'
+			);
+		} );
+
+		it( 'generates responsive layout styles for viewport layout overrides', () => {
+			expect(
+				getResponsiveLayoutStyles( {
+					attributes: {
+						style: {
+							mobile: {
+								layout: {
+									minimumColumnWidth: '8rem',
+								},
+							},
+						},
+					},
+					blockName: 'core/group',
+					selector: '.wp-container-test',
+					layout: { type: 'grid' },
+					hasBlockGapSupport: true,
+				} )
+			).toBe(
+				'@media (width <= 480px){.wp-container-test { grid-template-columns: repeat(auto-fill, minmax(min(8rem, 100%), 1fr)); }}'
+			);
+		} );
+
+		it( 'generates responsive layout styles for grid column overrides', () => {
+			expect(
+				getResponsiveLayoutStyles( {
+					attributes: {
+						style: {
+							mobile: {
+								layout: {
+									columnCount: 3,
+								},
+							},
+						},
+					},
+					blockName: 'core/group',
+					selector: '.wp-container-test',
+					layout: { type: 'grid' },
+					hasBlockGapSupport: true,
+				} )
+			).toBe(
+				'@media (width <= 480px){.wp-container-test { grid-template-columns: repeat(3, minmax(0, 1fr)); }}'
+			);
+		} );
+
+		it( 'keeps responsive grid column overrides when block gap is also changed', () => {
+			expect(
+				getResponsiveLayoutStyles( {
+					attributes: {
+						style: {
+							mobile: {
+								layout: {
+									columnCount: 3,
+								},
+								spacing: {
+									blockGap: '12px',
+								},
+							},
+						},
+					},
+					blockName: 'core/group',
+					selector: '.wp-container-test',
+					layout: { type: 'grid' },
+					hasBlockGapSupport: true,
+				} )
+			).toBe(
+				'@media (width <= 480px){.wp-container-test { grid-template-columns: repeat(3, minmax(0, 1fr)); }.wp-container-test { gap: 12px; }}'
+			);
+		} );
+
+		it( 'does not repeat unchanged grid layout declarations for responsive block gap styles', () => {
+			expect(
+				getResponsiveLayoutStyles( {
+					attributes: {
+						style: {
+							tablet: {
+								spacing: {
+									blockGap: '12px',
+								},
+							},
+						},
+					},
+					blockName: 'core/group',
+					selector: '.wp-container-test',
+					layout: { type: 'grid', minimumColumnWidth: '12rem' },
+					hasBlockGapSupport: true,
+				} )
+			).toBe(
+				'@media (480px < width <= 782px){.wp-container-test { gap: 12px; }}'
+			);
+		} );
+	} );
+} );

package/src/hooks/test/state-utils.js

@@ -0,0 +1,193 @@
+/**
+ * WordPress dependencies
+ */
+import { registerBlockType, unregisterBlockType } from '@wordpress/blocks';
+
+/**
+ * Internal dependencies
+ */
+import {
+	getRelativeRootSelector,
+	buildScopedBlockSelector,
+	buildRootStyleStateSelector,
+	buildPseudoStyleStateSelector,
+} from '../state-utils';
+
+describe( 'getRelativeRootSelector', () => {
+	it( 'returns the descendant part of a space-combinator selector', () => {
+		expect(
+			getRelativeRootSelector( '.wp-block-button .wp-block-button__link' )
+		).toBe( '.wp-block-button__link' );
+	} );
+
+	it( 'preserves explicit child combinators', () => {
+		expect( getRelativeRootSelector( '.wp-block-foo > .inner' ) ).toBe(
+			'> .inner'
+		);
+	} );
+
+	it( 'preserves multi-level descendants', () => {
+		expect( getRelativeRootSelector( '.wp-block-foo .bar .baz' ) ).toBe(
+			'.bar .baz'
+		);
+	} );
+
+	it( 'returns null for a single-class selector', () => {
+		expect( getRelativeRootSelector( '.wp-block-foo' ) ).toBeNull();
+	} );
+} );
+
+describe( 'buildScopedBlockSelector', () => {
+	const BASE = '.wp-elements-abc123';
+
+	it( 'scopes a suffix to the descendant element from a block selector', () => {
+		expect(
+			buildScopedBlockSelector(
+				BASE,
+				'.wp-block-button .wp-block-button__link',
+				':hover'
+			)
+		).toBe( `${ BASE } .wp-block-button__link:hover` );
+	} );
+
+	it( 'preserves modifier classes on the first compound selector', () => {
+		expect(
+			buildScopedBlockSelector(
+				BASE,
+				'.wp-block-search.wp-block-search__button-outside .wp-block-search__input',
+				':hover'
+			)
+		).toBe(
+			`${ BASE }.wp-block-search__button-outside .wp-block-search__input:hover`
+		);
+	} );
+
+	it( 'preserves child combinators without surrounding spaces', () => {
+		expect(
+			buildScopedBlockSelector( BASE, '.wp-block-foo>.inner', ':hover' )
+		).toBe( `${ BASE }>.inner:hover` );
+	} );
+
+	it( 'splits selector lists without splitting selector-function arguments', () => {
+		expect(
+			buildScopedBlockSelector(
+				BASE,
+				'.wp-block-example:not(.foo, .bar) .inner, .wp-block-example .fallback',
+				':hover'
+			)
+		).toBe(
+			`${ BASE }:not(.foo, .bar) .inner:hover, ${ BASE } .fallback:hover`
+		);
+	} );
+
+	it( 'works for :focus and :active states', () => {
+		expect(
+			buildScopedBlockSelector(
+				BASE,
+				'.wp-block-button .wp-block-button__link',
+				':focus'
+			)
+		).toBe( `${ BASE } .wp-block-button__link:focus` );
+		expect(
+			buildScopedBlockSelector(
+				BASE,
+				'.wp-block-button .wp-block-button__link',
+				':active'
+			)
+		).toBe( `${ BASE } .wp-block-button__link:active` );
+	} );
+
+	it( 'falls back to appending the suffix to the base selector when there is no descendant', () => {
+		expect(
+			buildScopedBlockSelector( BASE, '.wp-block-button', ':hover' )
+		).toBe( `${ BASE }:hover` );
+	} );
+
+	it( 'falls back to appending the suffix to the base selector when the block selector is missing', () => {
+		expect( buildScopedBlockSelector( BASE, undefined, ':hover' ) ).toBe(
+			`${ BASE }:hover`
+		);
+	} );
+
+	it( 'does not split selector lists on commas inside pseudo-class arguments', () => {
+		expect(
+			buildScopedBlockSelector(
+				BASE,
+				'.wp-block-navigation :is(.current-menu-item, .current-menu-ancestor)',
+				':hover'
+			)
+		).toBe(
+			`${ BASE } :is(.current-menu-item, .current-menu-ancestor):hover`
+		);
+	} );
+} );
+
+describe( 'state selector builders', () => {
+	const BASE = '.wp-elements-abc123';
+
+	beforeEach( () => {
+		registerBlockType( 'test/button', {
+			apiVersion: 3,
+			title: 'Button',
+			category: 'text',
+			attributes: {},
+			edit: () => null,
+			save: () => null,
+			selectors: {
+				root: '.wp-block-button .wp-block-button__link',
+			},
+		} );
+		registerBlockType( 'test/plain', {
+			apiVersion: 3,
+			title: 'Plain',
+			category: 'text',
+			attributes: {},
+			edit: () => null,
+			save: () => null,
+		} );
+	} );
+
+	afterEach( () => {
+		unregisterBlockType( 'test/button' );
+		unregisterBlockType( 'test/plain' );
+	} );
+
+	it( 'scopes root state styles to the descendant element from selectors.root', () => {
+		expect( buildRootStyleStateSelector( BASE, 'test/button' ) ).toBe(
+			`${ BASE } .wp-block-button__link`
+		);
+	} );
+
+	it( 'falls back to the base selector when block has no selectors.root', () => {
+		expect( buildRootStyleStateSelector( BASE, 'test/plain' ) ).toBe(
+			BASE
+		);
+	} );
+
+	it( 'scopes pseudo states to the descendant element from selectors.root', () => {
+		expect(
+			buildPseudoStyleStateSelector( BASE, 'test/button', ':hover' )
+		).toBe( `${ BASE } .wp-block-button__link:hover` );
+	} );
+
+	it( 'works for :focus and :active states', () => {
+		expect(
+			buildPseudoStyleStateSelector( BASE, 'test/button', ':focus' )
+		).toBe( `${ BASE } .wp-block-button__link:focus` );
+		expect(
+			buildPseudoStyleStateSelector( BASE, 'test/button', ':active' )
+		).toBe( `${ BASE } .wp-block-button__link:active` );
+	} );
+
+	it( 'falls back to appending state to the base selector when block has no selectors.root', () => {
+		expect(
+			buildPseudoStyleStateSelector( BASE, 'test/plain', ':hover' )
+		).toBe( `${ BASE }:hover` );
+	} );
+
+	it( 'falls back to appending state to the base selector for an unknown block name', () => {
+		expect(
+			buildPseudoStyleStateSelector( BASE, 'test/unknown', ':hover' )
+		).toBe( `${ BASE }:hover` );
+	} );
+} );