@wordpress/block-editor 15.21.1 → 15.22.0

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

@@ -38,12 +38,12 @@ describe( 'getStyleForState', () => {
 	it( 'returns the selected viewport state style', () => {
 		const style = {
 			color: { text: '#000000' },
-			mobile: { color: { text: '#ff0000' } },
+			'@mobile': { color: { text: '#ff0000' } },
 		};
 
 		expect(
 			getStyleForState( style, {
-				viewport: 'mobile',
+				viewport: '@mobile',
 				pseudo: 'default',
 			} )
 		).toEqual( {
@@ -53,14 +53,14 @@ describe( 'getStyleForState', () => {
 
 	it( 'returns the selected viewport pseudo state style', () => {
 		const style = {
-			mobile: {
+			'@mobile': {
 				':hover': { color: { text: '#ff0000' } },
 			},
 		};
 
 		expect(
 			getStyleForState( style, {
-				viewport: 'mobile',
+				viewport: '@mobile',
 				pseudo: ':hover',
 			} )
 		).toEqual( {
@@ -105,14 +105,14 @@ describe( 'setStyleForState', () => {
 			setStyleForState(
 				{
 					color: { text: '#000000' },
-					mobile: { color: { text: '#ff0000' } },
+					'@mobile': { color: { text: '#ff0000' } },
 				},
-				{ viewport: 'mobile', pseudo: 'default' },
+				{ viewport: '@mobile', pseudo: 'default' },
 				{ typography: { fontSize: '32px' } }
 			)
 		).toEqual( {
 			color: { text: '#000000' },
-			mobile: { typography: { fontSize: '32px' } },
+			'@mobile': { typography: { fontSize: '32px' } },
 		} );
 	} );
 
@@ -121,17 +121,17 @@ describe( 'setStyleForState', () => {
 			setStyleForState(
 				{
 					color: { text: '#000000' },
-					mobile: {
+					'@mobile': {
 						color: { text: '#ff0000' },
 						':hover': { color: { text: '#00ff00' } },
 					},
 				},
-				{ viewport: 'mobile', pseudo: ':hover' },
+				{ viewport: '@mobile', pseudo: ':hover' },
 				{ typography: { fontSize: '32px' } }
 			)
 		).toEqual( {
 			color: { text: '#000000' },
-			mobile: {
+			'@mobile': {
 				color: { text: '#ff0000' },
 				':hover': { typography: { fontSize: '32px' } },
 			},
@@ -234,7 +234,7 @@ describe( 'scopeResetAllFilterToState', () => {
 		const attributes = {
 			style: {
 				color: { text: '#000000' },
-				mobile: {
+				'@mobile': {
 					color: { text: '#ff0000' },
 					':hover': { color: { text: '#00ff00' } },
 				},
@@ -242,17 +242,17 @@ describe( 'scopeResetAllFilterToState', () => {
 		};
 
 		const result = scopeResetAllFilterToState(
-			{ viewport: 'mobile', pseudo: ':hover' },
+			{ viewport: '@mobile', pseudo: ':hover' },
 			innerReset
 		)( attributes );
 
 		expect( innerReset ).toHaveBeenCalledWith( {
-			style: attributes.style.mobile[ ':hover' ],
+			style: attributes.style[ '@mobile' ][ ':hover' ],
 		} );
 		expect( result ).toEqual( {
 			style: {
 				color: { text: '#000000' },
-				mobile: { color: { text: '#ff0000' } },
+				'@mobile': { color: { text: '#ff0000' } },
 			},
 		} );
 	} );

package/src/hooks/test/dimensions.js

@@ -1,6 +1,16 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	getBlockType,
+	registerBlockType,
+	unregisterBlockType,
+} from '@wordpress/blocks';
+
 /**
  * Internal dependencies
  */
+import dimensions from '../dimensions';
 import { getDimensionsClassesAndStyles } from '../use-dimensions-props';
 
 describe( 'getDimensionsClassesAndStyles', () => {
@@ -126,3 +136,64 @@ describe( 'getDimensionsClassesAndStyles', () => {
 		} );
 	} );
 } );
+
+describe( 'useBlockProps', () => {
+	const blockName = 'test/dimensions-with-aspect-ratio';
+
+	afterEach( () => {
+		if ( getBlockType( blockName ) ) {
+			unregisterBlockType( blockName );
+		}
+	} );
+
+	const registerDimensionsBlock = () =>
+		registerBlockType( blockName, {
+			apiVersion: 3,
+			title: 'Dimensions with aspect ratio',
+			category: 'text',
+			supports: {
+				dimensions: {
+					aspectRatio: true,
+				},
+			},
+		} );
+
+	it( 'unsets height styles when aspect ratio is explicit', () => {
+		registerDimensionsBlock();
+
+		expect(
+			dimensions.useBlockProps( {
+				name: blockName,
+				style: {
+					dimensions: {
+						aspectRatio: '16/9',
+					},
+				},
+			} )
+		).toEqual( {
+			className: 'has-aspect-ratio',
+			style: {
+				minHeight: 'unset',
+				height: 'unset',
+			},
+		} );
+	} );
+
+	it( 'does not unset height styles when aspect ratio is the default', () => {
+		registerDimensionsBlock();
+
+		expect(
+			dimensions.useBlockProps( {
+				name: blockName,
+				style: {
+					dimensions: {
+						aspectRatio: 'auto',
+					},
+				},
+			} )
+		).toEqual( {
+			className: '',
+			style: {},
+		} );
+	} );
+} );

package/src/hooks/test/layout-child.js

@@ -0,0 +1,165 @@
+/**
+ * Internal dependencies
+ */
+import { getChildLayoutStyleRules } from '../layout-child';
+
+describe( 'layout child', () => {
+	describe( 'getChildLayoutStyleRules()', () => {
+		it( 'preserves legacy fixed sizing as shrinkable max width', () => {
+			expect(
+				getChildLayoutStyleRules( {
+					selector: '.wp-container-content-test',
+					layout: {
+						selfStretch: 'fixed',
+						flexSize: '320px',
+					},
+				} )
+			).toEqual( [
+				{
+					selector: '.wp-container-content-test',
+					declarations: {
+						'flex-basis': '320px',
+						'box-sizing': 'border-box',
+					},
+				},
+			] );
+		} );
+
+		it( 'adds flex-shrink for fixedNoShrink sizing', () => {
+			expect(
+				getChildLayoutStyleRules( {
+					selector: '.wp-container-content-test',
+					layout: {
+						selfStretch: 'fixedNoShrink',
+						flexSize: '320px',
+					},
+				} )
+			).toEqual( [
+				{
+					selector: '.wp-container-content-test',
+					declarations: {
+						'flex-basis': '320px',
+						'flex-shrink': '0',
+						'box-sizing': 'border-box',
+					},
+				},
+			] );
+		} );
+
+		it( 'allows viewport overrides to switch fixedNoShrink to max', () => {
+			expect(
+				getChildLayoutStyleRules( {
+					selector: '.wp-container-content-test',
+					layout: {
+						selfStretch: 'fixedNoShrink',
+						flexSize: '320px',
+					},
+					viewportOverrides: {
+						selfStretch: 'fixed',
+					},
+				} )
+			).toEqual( [
+				{
+					selector: '.wp-container-content-test',
+					declarations: {
+						'flex-basis': '320px',
+						'flex-shrink': 'unset',
+						'box-sizing': 'border-box',
+					},
+				},
+			] );
+		} );
+
+		it( 'allows viewport overrides to switch fixedNoShrink to fit', () => {
+			expect(
+				getChildLayoutStyleRules( {
+					selector: '.wp-container-content-test',
+					layout: {
+						selfStretch: 'fixedNoShrink',
+						flexSize: '320px',
+					},
+					viewportOverrides: {
+						selfStretch: 'fit',
+					},
+				} )
+			).toEqual( [
+				{
+					selector: '.wp-container-content-test',
+					declarations: {
+						'flex-basis': 'unset',
+						'flex-shrink': 'unset',
+					},
+				},
+			] );
+		} );
+
+		it( 'allows viewport overrides to switch fixed to fit', () => {
+			expect(
+				getChildLayoutStyleRules( {
+					selector: '.wp-container-content-test',
+					layout: {
+						selfStretch: 'fixed',
+						flexSize: '320px',
+					},
+					viewportOverrides: {
+						selfStretch: 'fit',
+					},
+				} )
+			).toEqual( [
+				{
+					selector: '.wp-container-content-test',
+					declarations: {
+						'flex-basis': 'unset',
+					},
+				},
+			] );
+		} );
+
+		it( 'allows viewport overrides to switch fixedNoShrink to grow', () => {
+			expect(
+				getChildLayoutStyleRules( {
+					selector: '.wp-container-content-test',
+					layout: {
+						selfStretch: 'fixedNoShrink',
+						flexSize: '320px',
+					},
+					viewportOverrides: {
+						selfStretch: 'fill',
+					},
+				} )
+			).toEqual( [
+				{
+					selector: '.wp-container-content-test',
+					declarations: {
+						'flex-basis': 'unset',
+						'flex-shrink': 'unset',
+						'flex-grow': '1',
+					},
+				},
+			] );
+		} );
+
+		it( 'allows viewport overrides to switch fixed to grow', () => {
+			expect(
+				getChildLayoutStyleRules( {
+					selector: '.wp-container-content-test',
+					layout: {
+						selfStretch: 'fixed',
+						flexSize: '320px',
+					},
+					viewportOverrides: {
+						selfStretch: 'fill',
+					},
+				} )
+			).toEqual( [
+				{
+					selector: '.wp-container-content-test',
+					declarations: {
+						'flex-basis': 'unset',
+						'flex-grow': '1',
+					},
+				},
+			] );
+		} );
+	} );
+} );

package/src/hooks/test/layout.js

@@ -52,7 +52,7 @@ describe( 'layout', () => {
 				getResponsiveLayoutStyles( {
 					attributes: {
 						style: {
-							mobile: {
+							'@mobile': {
 								spacing: {
 									blockGap: '12px',
 								},
@@ -74,7 +74,7 @@ describe( 'layout', () => {
 				getResponsiveLayoutStyles( {
 					attributes: {
 						style: {
-							mobile: {
+							'@mobile': {
 								spacing: {
 									blockGap: '12px',
 								},
@@ -96,7 +96,7 @@ describe( 'layout', () => {
 				getResponsiveLayoutStyles( {
 					attributes: {
 						style: {
-							mobile: {
+							'@mobile': {
 								layout: {
 									minimumColumnWidth: '8rem',
 								},
@@ -118,7 +118,7 @@ describe( 'layout', () => {
 				getResponsiveLayoutStyles( {
 					attributes: {
 						style: {
-							mobile: {
+							'@mobile': {
 								layout: {
 									columnCount: 3,
 								},
@@ -140,7 +140,7 @@ describe( 'layout', () => {
 				getResponsiveLayoutStyles( {
 					attributes: {
 						style: {
-							mobile: {
+							'@mobile': {
 								layout: {
 									columnCount: 3,
 								},
@@ -165,7 +165,7 @@ describe( 'layout', () => {
 				getResponsiveLayoutStyles( {
 					attributes: {
 						style: {
-							tablet: {
+							'@tablet': {
 								spacing: {
 									blockGap: '12px',
 								},

package/src/hooks/test/style.js

@@ -208,6 +208,98 @@ describe( 'getStateStylesCSS', () => {
 			'.wp-block-test:hover { border-top-color: #0000ff !important; }\n.wp-block-test:hover { border-top-style: solid; }'
 		);
 	} );
+
+	it( 'adds background-image reset when state sets solid background-color', () => {
+		expect(
+			getStateStylesCSS(
+				{
+					color: {
+						background: '#ff0000',
+					},
+				},
+				'.wp-block-test:hover'
+			)
+		).toBe(
+			'.wp-block-test:hover { background-color: #ff0000 !important; }\n.wp-block-test:hover { background-image: unset !important; }'
+		);
+	} );
+
+	it( 'does not add background-image reset when state also sets a legacy gradient', () => {
+		expect(
+			getStateStylesCSS(
+				{
+					color: {
+						background: '#ff0000',
+						gradient: 'linear-gradient(135deg, #ff0000, #0000ff)',
+					},
+				},
+				'.wp-block-test:hover'
+			)
+		).toBe(
+			'.wp-block-test:hover { background: linear-gradient(135deg, #ff0000, #0000ff) !important; background-color: #ff0000 !important; }'
+		);
+	} );
+
+	it( 'does not add background-image reset when state also sets a modern gradient', () => {
+		expect(
+			getStateStylesCSS(
+				{
+					color: {
+						background: '#ff0000',
+					},
+					background: {
+						gradient: 'linear-gradient(135deg, #ff0000, #0000ff)',
+					},
+				},
+				'.wp-block-test:hover'
+			)
+		).toBe(
+			'.wp-block-test:hover { background-color: #ff0000 !important; background-image: linear-gradient(135deg, #ff0000, #0000ff) !important; }'
+		);
+	} );
+
+	it( 'adds important fallback dimensions when aspect ratio is set', () => {
+		expect(
+			getStateStylesCSS(
+				{
+					dimensions: {
+						aspectRatio: '16/9',
+					},
+				},
+				'.wp-block-test'
+			)
+		).toBe(
+			'.wp-block-test { height: unset !important; min-height: unset !important; aspect-ratio: 16/9 !important; }'
+		);
+	} );
+
+	it( 'does not add fallback dimensions when aspect ratio is the default', () => {
+		expect(
+			getStateStylesCSS(
+				{
+					dimensions: {
+						aspectRatio: 'auto',
+					},
+				},
+				'.wp-block-test'
+			)
+		).toBe( '.wp-block-test { aspect-ratio: auto !important; }' );
+	} );
+
+	it( 'adds important fallback aspect ratio when height is set', () => {
+		expect(
+			getStateStylesCSS(
+				{
+					dimensions: {
+						height: '20rem',
+					},
+				},
+				'.wp-block-test'
+			)
+		).toBe(
+			'.wp-block-test { height: 20rem !important; aspect-ratio: unset !important; }'
+		);
+	} );
 } );
 
 describe( 'getBlockStateStylesCSS', () => {
@@ -247,7 +339,7 @@ describe( 'getBlockStateStylesCSS', () => {
 				}
 			)
 		).toBe(
-			'.wp-elements-abc123 .wp-block-button__link:hover { background-color: #ff00d0 !important; }\n.wp-elements-abc123:hover { width: 50% !important; }'
+			'.wp-elements-abc123 .wp-block-button__link:hover { background-color: #ff00d0 !important; }\n.wp-elements-abc123 .wp-block-button__link:hover { background-image: unset !important; }\n.wp-elements-abc123:hover { width: 50% !important; }'
 		);
 	} );
 
@@ -264,7 +356,7 @@ describe( 'getBlockStateStylesCSS', () => {
 				}
 			)
 		).toBe(
-			'[data-block="client-id"] .wp-block-button__link { background-color: #ff00d0 !important; }\n[data-block="client-id"] { width: 50% !important; }'
+			'[data-block="client-id"] .wp-block-button__link { background-color: #ff00d0 !important; }\n[data-block="client-id"] .wp-block-button__link { background-image: unset !important; }\n[data-block="client-id"] { width: 50% !important; }'
 		);
 	} );
 } );
@@ -286,17 +378,31 @@ describe( 'getResponsiveStateCSSRules', () => {
 				},
 			},
 		} );
+
+		registerBlockType( 'test/state-image', {
+			apiVersion: 3,
+			title: 'State Image',
+			category: 'media',
+			attributes: {},
+			edit: () => null,
+			save: () => null,
+			selectors: {
+				root: '.wp-block-test-state-image',
+				dimensions: '.wp-block-test-state-image img',
+			},
+		} );
 	} );
 
 	afterEach( () => {
 		unregisterBlockType( 'test/state-button' );
+		unregisterBlockType( 'test/state-image' );
 	} );
 
 	it( 'generates media-query scoped root styles for viewport states', () => {
 		expect(
 			getResponsiveStateCSSRules(
 				{
-					mobile: {
+					'@mobile': {
 						color: { text: 'red' },
 					},
 				},
@@ -312,7 +418,7 @@ describe( 'getResponsiveStateCSSRules', () => {
 		expect(
 			getResponsiveStateCSSRules(
 				{
-					mobile: {
+					'@mobile': {
 						color: { background: '#ff00d0' },
 						dimensions: { width: '50%' },
 					},
@@ -321,7 +427,23 @@ describe( 'getResponsiveStateCSSRules', () => {
 				'.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; }}',
+			'@media (width <= 480px){.wp-elements-1 .wp-block-button__link { background-color: #ff00d0 !important; }\n.wp-elements-1 .wp-block-button__link { background-image: unset !important; }\n.wp-elements-1 { width: 50% !important; }}',
+		] );
+	} );
+
+	it( 'outputs explicit fill object fit for viewport states', () => {
+		expect(
+			getResponsiveStateCSSRules(
+				{
+					'@mobile': {
+						dimensions: { objectFit: 'fill' },
+					},
+				},
+				'test/state-image',
+				'.wp-elements-1'
+			)
+		).toEqual( [
+			'@media (width <= 480px){.wp-elements-1 img { object-fit: fill !important; }}',
 		] );
 	} );
 
@@ -329,7 +451,7 @@ describe( 'getResponsiveStateCSSRules', () => {
 		expect(
 			getResponsiveStateCSSRules(
 				{
-					mobile: {
+					'@mobile': {
 						':hover': {
 							color: { background: 'black' },
 						},
@@ -339,7 +461,7 @@ describe( 'getResponsiveStateCSSRules', () => {
 				'.wp-elements-1'
 			)
 		).toEqual( [
-			'@media (width <= 480px){.wp-elements-1:hover { background-color: black !important; }}',
+			'@media (width <= 480px){.wp-elements-1:hover { background-color: black !important; }\n.wp-elements-1:hover { background-image: unset !important; }}',
 		] );
 	} );
 
@@ -347,7 +469,7 @@ describe( 'getResponsiveStateCSSRules', () => {
 		expect(
 			getResponsiveStateCSSRules(
 				{
-					mobile: {
+					'@mobile': {
 						elements: {
 							link: {
 								color: { text: 'blue' },
@@ -388,7 +510,7 @@ describe( 'getCanvasStateStyleValue', () => {
 						color: { text: 'red' },
 					},
 				},
-				{ viewport: 'mobile', pseudo: ':hover' }
+				{ viewport: '@mobile', pseudo: ':hover' }
 			)
 		).toEqual( {
 			color: { text: 'red' },
@@ -402,13 +524,13 @@ describe( 'getCanvasStateStyleValue', () => {
 					':hover': {
 						color: { background: 'blue', text: 'red' },
 					},
-					mobile: {
+					'@mobile': {
 						':hover': {
 							color: { text: 'yellow' },
 						},
 					},
 				},
-				{ viewport: 'mobile', pseudo: ':hover' }
+				{ viewport: '@mobile', pseudo: ':hover' }
 			)
 		).toEqual( {
 			color: { background: 'blue', text: 'yellow' },