Changeset 62702

Timestamp:

07/13/2026 05:39:32 AM (2 months ago)

Author:

isabel_brison

Message:

Editor: enable text alignment for viewport states.

Updates states support to process text align values so block instances can set viewport-specific text align.

Props isabel_brison, andrewserong.
Fixes #65615.

Location:

trunk

Files:

• src/wp-includes/block-supports/states.php (modified) (2 diffs)
• tests/phpunit/tests/block-supports/states.php (modified) (1 diff)

trunk/src/wp-includes/block-supports/states.php

@@ -363 +363 @@
         }
 
-        $compiled = wp_style_engine_get_styles(
+        $compiled     = wp_style_engine_get_styles(
                 wp_normalize_state_style_for_css_output( $style )
         );
-
-        if ( empty( $compiled['declarations'] ) ) {
+        $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( $declarations ) ) {
                 return;
         }
@@ -374 +380 @@
                 'state'        => $state,
                 'selector'     => $selector,
-                'declarations' => $compiled['declarations'],
+                'declarations' => $declarations,
         );
         if ( ! empty( $rules_group ) ) {

trunk/tests/phpunit/tests/block-supports/states.php

@@ -961 +961 @@
                 $this->assertStringContainsString(
                         '@media (width <= 480px){.' . $matches[0] . '{color:#ff0000 !important;}}',
+                        $actual_stylesheet
+                );
+        }
+
+        /**
+         * Tests that responsive text alignment generates media-query scoped CSS.
+         *
+         * @covers ::wp_render_block_states_support
+         *
+         * @ticket 65615
+         */
+        public function test_responsive_text_alignment_generates_media_query_scoped_css() {
+                $this->ensure_block_registered( 'core/paragraph' );
+
+                $block_content = '<p class="wp-block-paragraph has-text-align-left">Hello</p>';
+                $block         = array(
+                        'blockName' => 'core/paragraph',
+                        'attrs'     => array(
+                                'style' => array(
+                                        'typography' => array(
+                                                'textAlign' => 'left',
+                                        ),
+                                        '@mobile'    => array(
+                                                'typography' => array(
+                                                        'textAlign' => 'right',
+                                                ),
+                                        ),
+                                ),
+                        ),
+                );
+
+                $actual = wp_render_block_states_support( $block_content, $block );
+
+                $this->assertMatchesRegularExpression(
+                        '/^<p class="wp-block-paragraph has-text-align-left (wp-states-[a-f0-9]{8})">Hello<\/p>$/',
+                        $actual
+                );
+                preg_match( '/wp-states-[a-f0-9]{8}/', $actual, $matches );
+                $actual_stylesheet = wp_style_engine_get_stylesheet_from_context( 'block-supports', array( 'prettify' => false ) );
+
+                $this->assertStringContainsString(
+                        '@media (width <= 480px){.' . $matches[0] . '{text-align:right !important;}}',
                         $actual_stylesheet
                 );