@wordpress/block-editor 15.23.0 → 16.0.0

package/src/hooks/style.js

@@ -4,7 +4,10 @@
 import { useMemo } from '@wordpress/element';
 import { addFilter } from '@wordpress/hooks';
 import { useSelect } from '@wordpress/data';
-import { mergeGlobalStyles } from '@wordpress/global-styles-engine';
+import {
+	mergeGlobalStyles,
+	privateApis as globalStylesEnginePrivateApis,
+} from '@wordpress/global-styles-engine';
 import {
 	getBlockSupport,
 	getBlockType,
@@ -12,7 +15,11 @@ import {
 	__EXPERIMENTAL_ELEMENTS as ELEMENTS,
 } from '@wordpress/blocks';
 import { useInstanceId } from '@wordpress/compose';
-import { getCSSRules, compileCSS } from '@wordpress/style-engine';
+import {
+	getCSSRules,
+	compileCSS,
+	getCSSValueFromRawStyle,
+} from '@wordpress/style-engine';
 
 /**
  * Internal dependencies
@@ -49,18 +56,14 @@ import { VALID_BLOCK_PSEUDO_STATES } from './states';
 import { buildScopedBlockSelector } from './state-utils';
 import { scopeSelector } from '../components/global-styles/utils';
 import { useBlockEditingMode } from '../components/block-editing-mode';
+import { useSettings } from '../components/use-settings';
 import { store as blockEditorStore } from '../store';
 import { globalStylesDataKey } from '../store/private-keys';
 import { unlock } from '../lock-unlock';
 
-const BORDER_SIDES = [ 'Top', 'Right', 'Bottom', 'Left' ];
+const { getResponsiveMediaQueries } = unlock( globalStylesEnginePrivateApis );
 
-// Keep in sync with WP_Theme_JSON_Gutenberg::RESPONSIVE_BREAKPOINTS and
-// packages/global-styles-engine/src/core/render.tsx.
-const RESPONSIVE_BREAKPOINTS = {
-	'@mobile': '@media (width <= 480px)',
-	'@tablet': '@media (480px < width <= 782px)',
-};
+const BORDER_SIDES = [ 'Top', 'Right', 'Bottom', 'Left' ];
 
 const styleSupportKeys = [
 	...TYPOGRAPHY_SUPPORT_KEYS,
@@ -202,6 +205,32 @@ function getStateFallbackDimensionStyles( stateStyles ) {
 	}
 }
 
+/**
+ * Returns CSS for text alignment in a block instance state style object.
+ *
+ * Text alignment is not generated by the style engine because base block
+ * alignment is serialized as a class name. State styles need a declaration
+ * instead so viewport and pseudo-state values can override the default class.
+ *
+ * @param {Object} stateStyles State style object.
+ * @param {string} selector    CSS selector for the generated style.
+ * @return {string|undefined} CSS string with the text alignment declaration.
+ */
+function getStateTextAlignCSS( stateStyles, selector ) {
+	const textAlign = stateStyles?.typography?.textAlign;
+
+	if ( typeof textAlign !== 'string' || ! textAlign ) {
+		return undefined;
+	}
+
+	const declaration = `text-align: ${ getCSSValueFromRawStyle(
+		textAlign
+	) } !important`;
+	return selector
+		? `${ selector } { ${ declaration }; }`
+		: `${ declaration };`;
+}
+
 /**
  * Generates CSS for a block instance state style object.
  *
@@ -225,12 +254,13 @@ export function getStateStylesCSS( stateStyles, selector ) {
 	const fallbackCSS = fallbackBorderStyles
 		? compileCSS( fallbackBorderStyles, { selector } )
 		: undefined;
+	const textAlignCSS = getStateTextAlignCSS( stateStyles, selector );
 	const backgroundResetCSS = getStateBackgroundResetCSS(
 		stateStyles,
 		selector
 	);
 
-	return [ importantCSS, fallbackCSS, backgroundResetCSS ]
+	return [ importantCSS, textAlignCSS, fallbackCSS, backgroundResetCSS ]
 		.filter( Boolean )
 		.join( '\n' );
 }
@@ -408,17 +438,25 @@ function getPseudoStateCSSRules( style, name, baseSelector ) {
  * pseudo-state styles. Generated rules are wrapped in the matching breakpoint
  * media query.
  *
- * @param {Object} style        Block style object containing responsive states.
- * @param {string} name         Block name.
- * @param {string} baseSelector Base selector used to scope generated CSS.
+ * @param {Object} style            Block style object containing responsive states.
+ * @param {string} name             Block name.
+ * @param {string} baseSelector     Base selector used to scope generated CSS.
+ * @param {Object} viewportSettings Viewport breakpoint settings.
  * @return {string[]} Generated CSS rule strings.
  */
-export function getResponsiveStateCSSRules( style, name, baseSelector ) {
+export function getResponsiveStateCSSRules(
+	style,
+	name,
+	baseSelector,
+	viewportSettings
+) {
 	const cssRules = [];
 	const validPseudoStates = VALID_BLOCK_PSEUDO_STATES[ name ] ?? [];
 	const nestedStateKeys = [ 'elements', ...validPseudoStates ];
+	const responsiveMediaQueries =
+		getResponsiveMediaQueries( viewportSettings );
 
-	Object.entries( RESPONSIVE_BREAKPOINTS ).forEach(
+	Object.entries( responsiveMediaQueries ).forEach(
 		( [ viewport, mediaQuery ] ) => {
 			const viewportStyles = getStyleForState( style, {
 				viewport,
@@ -970,6 +1008,7 @@ function useBlockProps( { name, style } ) {
 
 	const baseElementSelector = `.${ blockElementsContainerIdentifier }`;
 	const blockElementStyles = style?.elements;
+	const [ viewportSettings ] = useSettings( 'viewport' );
 
 	const styles = useMemo( () => {
 		const cssRules = [];
@@ -988,11 +1027,22 @@ function useBlockProps( { name, style } ) {
 		);
 
 		cssRules.push(
-			...getResponsiveStateCSSRules( style, name, baseElementSelector )
+			...getResponsiveStateCSSRules(
+				style,
+				name,
+				baseElementSelector,
+				viewportSettings
+			)
 		);
 
 		return cssRules.length > 0 ? cssRules.join( '' ) : undefined;
-	}, [ baseElementSelector, blockElementStyles, name, style ] );
+	}, [
+		baseElementSelector,
+		blockElementStyles,
+		name,
+		style,
+		viewportSettings,
+	] );
 
 	useStyleOverride( { css: styles } );
 

package/src/hooks/test/cross-origin-isolation.js

@@ -1,7 +1,3 @@
-/**
- * @jest-environment jsdom
- */
-
 describe( 'cross-origin-isolation', () => {
 	let originalCrossOriginIsolated;
 	let originalBody;

package/src/hooks/test/layout.js

@@ -1,7 +1,11 @@
 /**
  * Internal dependencies
  */
-import { getResetLayout, getResponsiveLayoutStyles } from '../layout';
+import {
+	getLayoutStateOverrides,
+	getResetLayout,
+	getResponsiveLayoutStyles,
+} from '../layout';
 
 describe( 'layout', () => {
 	describe( 'getResetLayout()', () => {
@@ -46,6 +50,28 @@ describe( 'layout', () => {
 		} );
 	} );
 
+	describe( 'getLayoutStateOverrides()', () => {
+		it( 'preserves explicit unsets for layout values inherited from the default state', () => {
+			expect(
+				getLayoutStateOverrides(
+					{ type: 'grid', columnCount: undefined },
+					{ type: 'grid', columnCount: 3 }
+				)
+			).toEqual( {
+				columnCount: null,
+			} );
+		} );
+
+		it( 'removes undefined layout values that are not inherited from the default state', () => {
+			expect(
+				getLayoutStateOverrides(
+					{ type: 'grid', columnCount: undefined },
+					{ type: 'grid' }
+				)
+			).toBeUndefined();
+		} );
+	} );
+
 	describe( 'getResponsiveLayoutStyles()', () => {
 		it( 'generates responsive block gap styles for flow layouts', () => {
 			expect(
@@ -135,6 +161,54 @@ describe( 'layout', () => {
 			);
 		} );
 
+		it( 'generates responsive auto grid columns when column count is unset', () => {
+			expect(
+				getResponsiveLayoutStyles( {
+					attributes: {
+						style: {
+							'@mobile': {
+								layout: {
+									columnCount: null,
+								},
+							},
+						},
+					},
+					blockName: 'core/group',
+					selector: '.wp-container-test',
+					layout: { type: 'grid', columnCount: 3 },
+					hasBlockGapSupport: true,
+				} )
+			).toBe(
+				'@media (width <= 480px){.wp-container-test { grid-template-columns: repeat(auto-fill, minmax(min(12rem, 100%), 1fr)); container-type: inline-size; }}'
+			);
+		} );
+
+		it( 'generates responsive constrained size resets when content width is unset', () => {
+			const result = getResponsiveLayoutStyles( {
+				attributes: {
+					style: {
+						'@mobile': {
+							layout: {
+								contentSize: null,
+							},
+						},
+					},
+				},
+				blockName: 'core/group',
+				selector: '.wp-container-test',
+				layout: { type: 'constrained', contentSize: '800px' },
+				hasBlockGapSupport: true,
+			} );
+
+			expect( result ).toContain( '@media (width <= 480px)' );
+			expect( result ).toContain(
+				'max-width: var(--wp--style--global--content-size, none);'
+			);
+			expect( result ).toContain(
+				'max-width: var(--wp--style--global--wide-size, none);'
+			);
+		} );
+
 		it( 'keeps responsive grid column overrides when block gap is also changed', () => {
 			expect(
 				getResponsiveLayoutStyles( {

package/src/hooks/test/style.js

@@ -300,6 +300,19 @@ describe( 'getStateStylesCSS', () => {
 			'.wp-block-test { height: 20rem !important; aspect-ratio: unset !important; }'
 		);
 	} );
+
+	it( 'adds important text alignment declarations for state styles', () => {
+		expect(
+			getStateStylesCSS(
+				{
+					typography: {
+						textAlign: 'center',
+					},
+				},
+				'.wp-block-test'
+			)
+		).toBe( '.wp-block-test { text-align: center !important; }' );
+	} );
 } );
 
 describe( 'getBlockStateStylesCSS', () => {
@@ -414,6 +427,22 @@ describe( 'getResponsiveStateCSSRules', () => {
 		] );
 	} );
 
+	it( 'generates media-query scoped text alignment styles for viewport states', () => {
+		expect(
+			getResponsiveStateCSSRules(
+				{
+					'@mobile': {
+						typography: { textAlign: 'right' },
+					},
+				},
+				'core/paragraph',
+				'.wp-elements-1'
+			)
+		).toEqual( [
+			'@media (width <= 480px){.wp-elements-1 { text-align: right !important; }}',
+		] );
+	} );
+
 	it( 'routes viewport styles through feature selectors', () => {
 		expect(
 			getResponsiveStateCSSRules(

package/src/hooks/test/text-align.js

@@ -10,7 +10,11 @@ import {
 /**
  * Internal dependencies
  */
-import { getValidTextAlignments, addAssignedTextAlign } from '../text-align';
+import {
+	getValidTextAlignments,
+	addAssignedTextAlign,
+	getTextAlignControlGroup,
+} from '../text-align';
 
 const noop = () => {};
 
@@ -62,6 +66,35 @@ describe( 'textAlign', () => {
 		} );
 	} );
 
+	describe( 'getTextAlignControlGroup()', () => {
+		it( 'uses the regular block slot by default', () => {
+			expect(
+				getTextAlignControlGroup( false, {
+					viewport: 'default',
+					pseudo: 'default',
+				} )
+			).toBe( 'block' );
+		} );
+
+		it( 'uses the regular block slot when responsive editing has no viewport state', () => {
+			expect(
+				getTextAlignControlGroup( true, {
+					viewport: 'default',
+					pseudo: 'default',
+				} )
+			).toBe( 'block' );
+		} );
+
+		it( 'uses the style-state slot when responsive editing has a viewport state', () => {
+			expect(
+				getTextAlignControlGroup( true, {
+					viewport: '@mobile',
+					pseudo: 'default',
+				} )
+			).toBe( 'style-state' );
+		} );
+	} );
+
 	describe( 'addAssignedTextAlign', () => {
 		it( 'should do nothing if block does not support text align', () => {
 			registerBlockType( 'core/foo', blockSettings );

package/src/hooks/text-align.js

@@ -9,6 +9,7 @@ import clsx from 'clsx';
 import { __ } from '@wordpress/i18n';
 import { getBlockSupport, hasBlockSupport } from '@wordpress/blocks';
 import { alignLeft, alignRight, alignCenter } from '@wordpress/icons';
+import { useSelect } from '@wordpress/data';
 
 /**
  * Internal dependencies
@@ -16,11 +17,14 @@ import { alignLeft, alignRight, alignCenter } from '@wordpress/icons';
 import { AlignmentControl, BlockControls } from '../components';
 import { useBlockEditingMode } from '../components/block-editing-mode';
 import {
-	cleanEmptyObject,
-	shouldSkipSerialization,
-	useBlockSettings,
-} from './utils';
+	getStyleForState,
+	hasViewportBlockStyleState,
+	setStyleForState,
+} from './block-style-state';
+import { shouldSkipSerialization, useBlockSettings } from './utils';
 import { TYPOGRAPHY_SUPPORT_KEY } from './typography';
+import { store as blockEditorStore } from '../store';
+import { unlock } from '../lock-unlock';
 
 export const TEXT_ALIGN_SUPPORT_KEY = 'typography.textAlign';
 
@@ -64,7 +68,14 @@ export function getValidTextAlignments( blockTextAlign ) {
 	return blockTextAlign === true ? VALID_TEXT_ALIGNMENTS : NO_TEXT_ALIGNMENTS;
 }
 
+export function getTextAlignControlGroup( isResponsiveEditing, selectedState ) {
+	return isResponsiveEditing && hasViewportBlockStyleState( selectedState )
+		? 'style-state'
+		: 'block';
+}
+
 function BlockEditTextAlignmentToolbarControlsPure( {
+	clientId,
 	style,
 	name: blockName,
 	setAttributes,
@@ -72,6 +83,19 @@ function BlockEditTextAlignmentToolbarControlsPure( {
 	const settings = useBlockSettings( blockName );
 	const hasTextAlignControl = settings?.typography?.textAlign;
 	const blockEditingMode = useBlockEditingMode();
+	const { selectedState, isResponsiveEditing } = useSelect(
+		( select ) => {
+			const {
+				getSelectedBlockStyleState,
+				isResponsiveEditing: getIsResponsiveEditing,
+			} = unlock( select( blockEditorStore ) );
+			return {
+				selectedState: getSelectedBlockStyleState( clientId ),
+				isResponsiveEditing: getIsResponsiveEditing(),
+			};
+		},
+		[ clientId ]
+	);
 
 	if ( ! hasTextAlignControl || blockEditingMode !== 'default' ) {
 		return null;
@@ -87,23 +111,30 @@ function BlockEditTextAlignmentToolbarControlsPure( {
 	const textAlignmentControls = TEXT_ALIGNMENT_OPTIONS.filter( ( control ) =>
 		validTextAlignments.includes( control.align )
 	);
+	const stateStyle = getStyleForState( style, selectedState );
+	const controlsGroup = getTextAlignControlGroup(
+		isResponsiveEditing,
+		selectedState
+	);
 
 	const onChange = ( newTextAlignValue ) => {
-		const newStyle = {
-			...style,
+		const newStateStyle = {
+			...stateStyle,
 			typography: {
-				...style?.typography,
+				...stateStyle?.typography,
 				textAlign: newTextAlignValue,
 			},
 		};
 
-		setAttributes( { style: cleanEmptyObject( newStyle ) } );
+		setAttributes( {
+			style: setStyleForState( style, selectedState, newStateStyle ),
+		} );
 	};
 
 	return (
-		<BlockControls group="block">
+		<BlockControls group={ controlsGroup }>
 			<AlignmentControl
-				value={ style?.typography?.textAlign }
+				value={ stateStyle?.typography?.textAlign }
 				onChange={ onChange }
 				alignmentControls={ textAlignmentControls }
 			/>

package/src/hooks/typography.js

@@ -214,7 +214,6 @@ export function TypographyPanel( {
 	// Link color failures are reported by the Elements panel, which owns the
 	// link color selection.
 	const enableContrastChecking =
-		! isStateSelected &&
 		! value?.color?.gradient &&
 		!! value?.color?.text &&
 		settings?.color?.text &&

package/src/layouts/constrained.js

@@ -30,6 +30,9 @@ import { BlockControls, JustifyContentControl } from '../components';
 import { cleanEmptyObject, shouldSkipSerialization } from '../hooks/utils';
 import { LAYOUT_DEFINITIONS } from './definitions';
 
+const GLOBAL_CONTENT_SIZE = 'var(--wp--style--global--content-size, none)';
+const GLOBAL_WIDE_SIZE = 'var(--wp--style--global--wide-size, none)';
+
 export default {
 	name: 'constrained',
 	label: __( 'Constrained' ),
@@ -112,24 +115,25 @@ export default {
 							panelId={ clientId }
 						>
 							<UnitControl
-								__next40pxDefaultSize
 								label={ __( 'Content width' ) }
 								labelPosition="top"
-								value={ contentSize || wideSize || '' }
+								value={
+									contentSize === null
+										? ''
+										: contentSize || wideSize || ''
+								}
 								onChange={ ( nextWidth ) => {
 									nextWidth =
 										0 > parseFloat( nextWidth )
 											? '0'
 											: nextWidth;
-									onChange(
-										cleanEmptyObject( {
-											...layout,
-											contentSize:
-												nextWidth !== ''
-													? nextWidth
-													: undefined,
-										} )
-									);
+									onChange( {
+										...layout,
+										contentSize:
+											nextWidth !== ''
+												? nextWidth
+												: undefined,
+									} );
 								} }
 								units={ units }
 								prefix={
@@ -146,24 +150,25 @@ export default {
 							panelId={ clientId }
 						>
 							<UnitControl
-								__next40pxDefaultSize
 								label={ __( 'Wide width' ) }
 								labelPosition="top"
-								value={ wideSize || contentSize || '' }
+								value={
+									wideSize === null
+										? ''
+										: wideSize || contentSize || ''
+								}
 								onChange={ ( nextWidth ) => {
 									nextWidth =
 										0 > parseFloat( nextWidth )
 											? '0'
 											: nextWidth;
-									onChange(
-										cleanEmptyObject( {
-											...layout,
-											wideSize:
-												nextWidth !== ''
-													? nextWidth
-													: undefined,
-										} )
-									);
+									onChange( {
+										...layout,
+										wideSize:
+											nextWidth !== ''
+												? nextWidth
+												: undefined,
+									} );
 								} }
 								units={ units }
 								prefix={
@@ -188,7 +193,6 @@ export default {
 						panelId={ clientId }
 					>
 						<ToggleGroupControl
-							__next40pxDefaultSize
 							label={ __( 'Justification' ) }
 							value={ justifyContent }
 							onChange={ onJustificationChange }
@@ -215,6 +219,7 @@ export default {
 		layout = {},
 		onChange,
 		layoutBlockSupport,
+		controlsGroup = 'block',
 	} ) {
 		const { allowJustification = true } = layoutBlockSupport;
 
@@ -222,7 +227,10 @@ export default {
 			return null;
 		}
 		return (
-			<BlockControls group="block" __experimentalShareWithChildBlocks>
+			<BlockControls
+				group={ controlsGroup }
+				__experimentalShareWithChildBlocks
+			>
 				<DefaultLayoutJustifyContentControl
 					layout={ layout }
 					onChange={ onChange }
@@ -273,12 +281,30 @@ export default {
 
 		const hasJustificationOverride =
 			hasViewportOverrides && hasViewportOverride( 'justifyContent' );
+		const hasContentSizeOverride =
+			hasViewportOverrides && hasViewportOverride( 'contentSize' );
+		const hasWideSizeOverride =
+			hasViewportOverrides && hasViewportOverride( 'wideSize' );
 		const shouldOutputConstrainedSizes =
 			! hasViewportOverrides ||
-			hasViewportOverride( 'contentSize' ) ||
-			hasViewportOverride( 'wideSize' );
+			hasContentSizeOverride ||
+			hasWideSizeOverride;
+		const isResettingConstrainedSizes =
+			hasViewportOverrides &&
+			( ( hasContentSizeOverride && ! contentSize ) ||
+				( hasWideSizeOverride && ! wideSize ) );
+		const contentMaxWidth =
+			contentSize ||
+			( wideSize && ! hasContentSizeOverride
+				? wideSize
+				: GLOBAL_CONTENT_SIZE );
+		const wideMaxWidth =
+			wideSize ||
+			( contentSize && ! hasWideSizeOverride
+				? contentSize
+				: GLOBAL_WIDE_SIZE );
 		const constrainedSizeDeclarations = [
-			`max-width: ${ contentSize ?? wideSize }`,
+			`max-width: ${ contentMaxWidth }`,
 		];
 		if ( ! hasViewportOverrides || hasJustificationOverride ) {
 			constrainedSizeDeclarations.push(
@@ -287,7 +313,8 @@ export default {
 			);
 		}
 		let output =
-			shouldOutputConstrainedSizes && ( !! contentSize || !! wideSize )
+			shouldOutputConstrainedSizes &&
+			( !! contentSize || !! wideSize || isResettingConstrainedSizes )
 				? `
 						${ appendSelectors(
 							selector,
@@ -296,7 +323,7 @@ export default {
 						${ constrainedSizeDeclarations.join( '; ' ) };
 					}
 					${ appendSelectors( selector, '> .alignwide' ) }  {
-						max-width: ${ wideSize ?? contentSize };
+						max-width: ${ wideMaxWidth };
 					}
 					${ appendSelectors( selector, '> .alignfull' ) } {
 						max-width: none;

package/src/layouts/flex.js

@@ -240,6 +240,7 @@ export default {
 		layout = {},
 		onChange,
 		layoutBlockSupport,
+		controlsGroup = 'block',
 	} ) {
 		const { allowVerticalAlignment = true, allowJustification = true } =
 			layoutBlockSupport;
@@ -249,7 +250,10 @@ export default {
 		}
 
 		return (
-			<BlockControls group="block" __experimentalShareWithChildBlocks>
+			<BlockControls
+				group={ controlsGroup }
+				__experimentalShareWithChildBlocks
+			>
 				{ allowJustification && (
 					<FlexLayoutJustifyContentControl
 						layout={ layout }
@@ -437,7 +441,6 @@ function FlexLayoutVerticalAlignmentControl( {
 
 	return (
 		<ToggleGroupControl
-			__next40pxDefaultSize
 			label={ __( 'Alignment' ) }
 			onChange={ onVerticalAlignmentChange }
 			value={ verticalAlignment }
@@ -524,7 +527,6 @@ function FlexLayoutJustifyContentControl( {
 
 	return (
 		<ToggleGroupControl
-			__next40pxDefaultSize
 			label={ __( 'Justification' ) }
 			value={ justifyContent }
 			onChange={ onJustificationChange }
@@ -568,7 +570,6 @@ function OrientationControl( { layout, onChange } ) {
 	} = layout;
 	return (
 		<ToggleGroupControl
-			__next40pxDefaultSize
 			className="block-editor-hooks__flex-layout-orientation-controls"
 			label={ __( 'Orientation' ) }
 			value={ orientation }