diff --git a/src/wp-includes/block-supports/layout.php b/src/wp-includes/block-supports/layout.php index deef7ae61e495..a77bcf2f5bde1 100644 --- a/src/wp-includes/block-supports/layout.php +++ b/src/wp-includes/block-supports/layout.php @@ -792,6 +792,17 @@ function wp_get_layout_style( $selector, $layout, $has_block_gap_support = false $flex_vertical_alignment = $layout_for_styles['verticalAlignment'] ?? null; if ( 'horizontal' === $layout_orientation ) { + /* + * `row` is the flex default, so the base layout never declares it. A viewport + * override that switches a vertical base layout to horizontal has to declare + * it explicitly, otherwise the base `flex-direction: column` keeps applying. + */ + if ( null !== $viewport_overrides && $has_viewport_property_override( 'orientation' ) ) { + $layout_styles[] = array( + 'selector' => $selector, + 'declarations' => array( 'flex-direction' => 'row' ), + ); + } /* * Add this style only if is not empty for backwards compatibility, * since we intend to convert blocks that had flex layout implemented diff --git a/tests/phpunit/tests/block-supports/layout.php b/tests/phpunit/tests/block-supports/layout.php index 5e8ab83041a29..9157145f21bd0 100644 --- a/tests/phpunit/tests/block-supports/layout.php +++ b/tests/phpunit/tests/block-supports/layout.php @@ -1233,6 +1233,67 @@ public function test_wp_get_layout_style_with_non_string_flex_alignment() { $this->assertIsString( $layout_styles, 'Flex layout should not fatal when alignment values are not strings.' ); } + /** + * Tests that a viewport override switching a vertical flex layout to horizontal + * outputs an explicit `flex-direction: row`, so the base `flex-direction: column` + * no longer applies on that viewport. + * + * @covers ::wp_get_layout_style + */ + public function test_wp_get_layout_style_outputs_flex_direction_row_for_horizontal_viewport_override() { + $layout_styles = wp_get_layout_style( + '.wp-layout', + array( + 'type' => 'flex', + 'orientation' => 'vertical', + 'flexWrap' => 'nowrap', + 'justifyContent' => 'center', + ), + false, + null, + false, + '0.5em', + null, + array( + 'viewport_overrides' => array( + 'orientation' => 'horizontal', + 'justifyContent' => 'left', + ), + ) + ); + + $this->assertSame( '.wp-layout{flex-direction:row;justify-content:flex-start;}', $layout_styles ); + } + + /** + * Tests that a viewport override which does not change a horizontal orientation + * keeps relying on the flex default and does not output `flex-direction`. + * + * @covers ::wp_get_layout_style + */ + public function test_wp_get_layout_style_keeps_flex_direction_implicit_without_orientation_override() { + $layout_styles = wp_get_layout_style( + '.wp-layout', + array( + 'type' => 'flex', + 'orientation' => 'horizontal', + 'justifyContent' => 'left', + ), + false, + null, + false, + '0.5em', + null, + array( + 'viewport_overrides' => array( + 'justifyContent' => 'right', + ), + ) + ); + + $this->assertSame( '.wp-layout{justify-content:flex-end;}', $layout_styles ); + } + /** * Tests that a responsive grid child with a non-string parent minimumColumnWidth * does not cause a fatal error in the explode() call.