Block Supports: Output flex-direction row when a viewport override switches a vertical flex layout to horizontal.

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

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.