Enable text alignment to be set by viewport state

backport-changelog/7.1/12489.md

@@ -0,0 +1,3 @@
+https://github.com/WordPress/wordpress-develop/pull/12489
+
+* https://github.com/WordPress/gutenberg/pull/80037

lib/block-supports/states.php

@@ -344,18 +344,24 @@ function gutenberg_add_block_state_style_rule( &$css_rules, $state, $selector, $
 
 	$style = gutenberg_get_state_style_with_fallback_dimension_styles( $style );
 
-	$compiled = gutenberg_style_engine_get_styles(
+	$compiled     = gutenberg_style_engine_get_styles(
 		gutenberg_normalize_state_style_for_css_output( $style )
 	);
+	$declarations = $compiled['declarations'] ?? array();
+	$text_align   = $style['typography']['textAlign'] ?? null;
+	// Base text alignment is class-based, so state styles need a declaration.
+	if ( is_string( $text_align ) && '' !== trim( $text_align ) ) {
+		$declarations['text-align'] = $text_align;
+	}
 
-	if ( empty( $compiled['declarations'] ) ) {
+	if ( empty( $declarations ) ) {
 		return;
 	}
 
 	$css_rules[] = array(
 		'state'        => $state,
 		'selector'     => $selector,
-		'declarations' => $compiled['declarations'],
+		'declarations' => $declarations,
 	);
 	if ( ! empty( $rules_group ) ) {
 		$css_rules[ count( $css_rules ) - 1 ]['rules_group'] = $rules_group;

packages/block-editor/src/components/block-controls/groups.js

@@ -8,13 +8,15 @@ const BlockControlsBlock = createSlotFill( 'BlockControlsBlock' );
 const BlockControlsInline = createSlotFill( 'BlockFormatControls' );
 const BlockControlsOther = createSlotFill( 'BlockControlsOther' );
 const BlockControlsParent = createSlotFill( 'BlockControlsParent' );
+const BlockControlsStyleState = createSlotFill( 'BlockControlsStyleState' );
 
 const groups = {
 	default: BlockControlsDefault,
 	block: BlockControlsBlock,
 	inline: BlockControlsInline,
 	other: BlockControlsOther,
 	parent: BlockControlsParent,
+	'style-state': BlockControlsStyleState,
 };
 
 export default groups;

packages/block-editor/src/components/block-toolbar/index.js

@@ -79,6 +79,7 @@ export function PrivateBlockToolbar( {
 		showBlockVisibilityButton,
 		showSwitchSectionStyleButton,
 		areSelectedBlocksHiddenOnViewport,
+		showStyleStateSlot,
 		canEdit,
 	} = useSelect( ( select ) => {
 		const { canEditBlock } = select( blockEditorStore );
@@ -167,6 +168,7 @@ export function PrivateBlockToolbar( {
 			hasContentOnlyLocking: _hasTemplateLock,
 			showShuffleButton: _isZoomOut,
 			showSlots: ! _isZoomOut && ! _isEditingResponsiveStyleState,
+			showStyleStateSlot: ! _isZoomOut && _isEditingResponsiveStyleState,
 			showGroupButtons: ! _isZoomOut,
 			showLockButtons: ! _isZoomOut,
 			showBlockVisibilityButton: ! _isZoomOut,
@@ -269,31 +271,44 @@ export function PrivateBlockToolbar( {
 						<SwitchSectionStyle clientId={ blockClientIds[ 0 ] } />
 					) }
 				{ ! areSelectedBlocksHiddenOnViewport &&
-					shouldShowVisualToolbar &&
-					showSlots && (
+					shouldShowVisualToolbar && (
 						<>
 							{ ! isSectionContainer && (
+								<>
+									{ showSlots && (
+										<>
+											<BlockControls.Slot
+												group="parent"
+												className="block-editor-block-toolbar__slot"
+											/>
+											<BlockControls.Slot
+												group="block"
+												className="block-editor-block-toolbar__slot"
+											/>
+											<BlockControls.Slot className="block-editor-block-toolbar__slot" />
+											<BlockControls.Slot
+												group="inline"
+												className="block-editor-block-toolbar__slot"
+											/>
+										</>
+									) }
+									{ showStyleStateSlot && (
+										<BlockControls.Slot
+											group="style-state"
+											className="block-editor-block-toolbar__slot"
+										/>
+									) }
+								</>
+							) }
+							{ showSlots && (
 								<>
 									<BlockControls.Slot
-										group="parent"
-										className="block-editor-block-toolbar__slot"
-									/>
-									<BlockControls.Slot
-										group="block"
-										className="block-editor-block-toolbar__slot"
-									/>
-									<BlockControls.Slot className="block-editor-block-toolbar__slot" />
-									<BlockControls.Slot
-										group="inline"
+										group="other"
 										className="block-editor-block-toolbar__slot"
 									/>
+									<__unstableBlockToolbarLastItem.Slot />
 								</>
 							) }
-							<BlockControls.Slot
-								group="other"
-								className="block-editor-block-toolbar__slot"
-							/>
-							<__unstableBlockToolbarLastItem.Slot />
 						</>
 					) }
 				<BlockEditVisuallyButton clientIds={ blockClientIds } />

packages/block-editor/src/hooks/layout.js

@@ -301,29 +301,34 @@ function LayoutPanelPure( {
 	const settings = useBlockSettings( blockName );
 	// Block settings come from theme.json under settings.[blockName].
 	const { layout: layoutSettings } = settings;
-	const { themeSupportsLayout, activeBlockVariation, selectedState } =
-		useSelect(
-			( select ) => {
-				const blockEditorSelect = select( blockEditorStore );
-				const { getBlockAttributes, getSettings } = blockEditorSelect;
-				const { getSelectedBlockStyleState } =
-					unlock( blockEditorSelect );
-				return {
-					activeBlockVariation: select(
-						blocksStore
-					).getActiveBlockVariation(
-						blockName,
-						getBlockAttributes( clientId ) || {},
-						'block'
-					),
-					themeSupportsLayout: getSettings().supportsLayout,
-					selectedState:
-						getSelectedBlockStyleState?.( clientId ) ??
-						DEFAULT_BLOCK_STYLE_STATE,
-				};
-			},
-			[ blockName, clientId ]
-		);
+	const {
+		themeSupportsLayout,
+		activeBlockVariation,
+		selectedState,
+		isResponsiveEditing,
+	} = useSelect(
+		( select ) => {
+			const blockEditorSelect = select( blockEditorStore );
+			const { getBlockAttributes, getSettings } = blockEditorSelect;
+			const {
+				getSelectedBlockStyleState,
+				isResponsiveEditing: getIsResponsiveEditing,
+			} = unlock( blockEditorSelect );
+			return {
+				activeBlockVariation: select(
+					blocksStore
+				).getActiveBlockVariation(
+					blockName,
+					getBlockAttributes( clientId ) || {},
+					'block'
+				),
+				themeSupportsLayout: getSettings().supportsLayout,
+				selectedState: getSelectedBlockStyleState( clientId ),
+				isResponsiveEditing: getIsResponsiveEditing(),
+			};
+		},
+		[ blockName, clientId ]
+	);
 
 	const blockEditingMode = useBlockEditingMode();
 	const isViewportLayoutState =
@@ -573,6 +578,13 @@ function LayoutPanelPure( {
 					layout={ usedLayout }
 					onChange={ onChangeLayout }
 					layoutBlockSupport={ layoutBlockSupport }
+					controlsGroup={
+						isResponsiveEditing &&
+						hasViewportBlockStyleState( selectedState ) &&
+						! hasPseudoBlockStyleState( selectedState )
+							? 'style-state'
+							: 'block'
+					}
 					name={ blockName }
 					clientId={ clientId }
 				/>

packages/block-editor/src/hooks/style.js

@@ -15,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
@@ -201,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.
  *
@@ -224,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' );
 }

packages/block-editor/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(

packages/block-editor/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 );