@wordpress/block-editor 15.22.1 → 16.0.0

package/src/hooks/states.js

@@ -1,7 +1,8 @@
 /**
  * WordPress dependencies
  */
-import { getBlockType } from '@wordpress/blocks';
+import { useMemo } from '@wordpress/element';
+import { privateApis as globalStylesEnginePrivateApis } from '@wordpress/global-styles-engine';
 import { __ } from '@wordpress/i18n';
 
 /**
@@ -10,6 +11,10 @@ import { __ } from '@wordpress/i18n';
 import StateControl from '../components/global-styles/state-control';
 import StateControlBadges from '../components/global-styles/state-control-badges';
 import { useToolsPanelDropdownMenuProps } from '../components/global-styles/utils';
+import { useSettings } from '../components/use-settings';
+import { unlock } from '../lock-unlock';
+
+const { getViewportBreakpoints } = unlock( globalStylesEnginePrivateApis );
 
 export const PSEUDO_STATE_LABELS = {
 	':hover': __( 'Hover' ),
@@ -23,6 +28,22 @@ export const RESPONSIVE_STATE_LABELS = {
 	'@mobile': __( 'Mobile' ),
 };
 
+// Viewport states are selected globally via the editor's device preview.
+function getDeviceStateOptions( viewportSettings ) {
+	const breakpoints = getViewportBreakpoints( viewportSettings );
+
+	return Object.entries( RESPONSIVE_STATE_LABELS )
+		.filter(
+			( [ value ] ) =>
+				( value !== '@tablet' || breakpoints.tablet !== undefined ) &&
+				( value !== '@mobile' || breakpoints.mobile !== undefined )
+		)
+		.map( ( [ value, label ] ) => ( {
+			value,
+			label,
+		} ) );
+}
+
 // Keep in sync with WP_Theme_JSON_Gutenberg::VALID_BLOCK_PSEUDO_SELECTORS
 // and packages/global-styles-engine/src/core/render.tsx.
 export const VALID_BLOCK_PSEUDO_STATES = {
@@ -42,24 +63,13 @@ function getPseudoStateOptions( name ) {
 }
 
 const DEFAULT_STATE_VALUE = 'default';
-
-function getViewportStateOptions( name ) {
-	if ( ! getBlockType( name )?.attributes?.style ) {
-		return [];
-	}
-
-	return Object.entries( RESPONSIVE_STATE_LABELS ).map(
-		( [ value, label ] ) => ( {
-			value,
-			label,
-		} )
-	);
-}
+const EMPTY_STATE_OPTIONS = [];
 
 /**
- * Renders a style-state selector in the block card header.
- * Viewport states are shown for blocks with a style attribute, while
- * pseudo-states are shown for blocks with configured pseudo-state support.
+ * Renders a pseudo-state selector in the block card header.
+ *
+ * Viewport states are selected globally via the editor's device preview
+ * (Responsive editing), so only pseudo-states are exposed here.
  *
  * @param {Object}   props          Component props.
  * @param {string}   props.name     Block name.
@@ -68,21 +78,20 @@ function getViewportStateOptions( name ) {
  * @return {Element|null} State control component, or null if not applicable.
  */
 export function BlockStatesControl( { name, value, onChange } ) {
-	const viewportStateOptions = getViewportStateOptions( name );
-	const pseudoStateOptions = getPseudoStateOptions( name );
+	const pseudoStateOptions = useMemo(
+		() => getPseudoStateOptions( name ),
+		[ name ]
+	);
 	const dropdownMenuProps = useToolsPanelDropdownMenuProps();
 
-	if ( ! viewportStateOptions.length && ! pseudoStateOptions.length ) {
+	if ( ! pseudoStateOptions.length ) {
 		return null;
 	}
 
 	return (
 		<StateControl
-			viewportStates={ viewportStateOptions }
 			pseudoStates={ pseudoStateOptions }
-			viewportValue={ value?.viewport ?? DEFAULT_STATE_VALUE }
 			pseudoStateValue={ value?.pseudo ?? DEFAULT_STATE_VALUE }
-			onChangeViewport={ ( viewport ) => onChange( { viewport } ) }
 			onChangePseudoState={ ( pseudo ) => onChange( { pseudo } ) }
 			popoverProps={ dropdownMenuProps.popoverProps }
 			showText={ false }
@@ -90,17 +99,35 @@ export function BlockStatesControl( { name, value, onChange } ) {
 	);
 }
 
-export function BlockStateBadges( { name, value } ) {
-	const viewportStateOptions = getViewportStateOptions( name );
-	const pseudoStateOptions = getPseudoStateOptions( name );
+/**
+ * Renders badges for the active style states of a block.
+ *
+ * @param {Object}  props                     Component props.
+ * @param {string}  props.name                Block name.
+ * @param {Object}  props.value               Currently selected style-state value.
+ * @param {boolean} props.isResponsiveEditing Whether Responsive editing is enabled.
+ * @return {Element|null} Badges component, or null if there is nothing to show.
+ */
+export function BlockStateBadges( { name, value, isResponsiveEditing } ) {
+	const pseudoStateOptions = useMemo(
+		() => getPseudoStateOptions( name ),
+		[ name ]
+	);
+	const [ viewportSettings ] = useSettings( 'viewport' );
+	const deviceStateOptions = useMemo(
+		() => getDeviceStateOptions( viewportSettings ),
+		[ viewportSettings ]
+	);
 
-	if ( ! viewportStateOptions.length && ! pseudoStateOptions.length ) {
+	if ( ! pseudoStateOptions.length && ! isResponsiveEditing ) {
 		return null;
 	}
 
 	return (
 		<StateControlBadges
-			viewportStates={ viewportStateOptions }
+			viewportStates={
+				isResponsiveEditing ? deviceStateOptions : EMPTY_STATE_OPTIONS
+			}
 			pseudoStates={ pseudoStateOptions }
 			viewportValue={ value?.viewport ?? DEFAULT_STATE_VALUE }
 			pseudoStateValue={ value?.pseudo ?? DEFAULT_STATE_VALUE }

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 &&