diff --git a/src/wp-includes/block-supports/layout.php b/src/wp-includes/block-supports/layout.php index 613256ccd1e97..eff8e305247d9 100644 --- a/src/wp-includes/block-supports/layout.php +++ b/src/wp-includes/block-supports/layout.php @@ -207,7 +207,11 @@ function wp_get_layout_style( $selector, $layout, $has_block_gap_support = false ); if ( 'horizontal' === $layout_orientation ) { - $justify_content_options += array( 'space-between' => 'space-between' ); + $justify_content_options += array( 'space-between' => 'space-between' ); + $vertical_alignment_options += array( 'stretch' => 'stretch' ); + } else { + $justify_content_options += array( 'stretch' => 'stretch' ); + $vertical_alignment_options += array( 'space-between' => 'space-between' ); } if ( ! empty( $layout['flexWrap'] ) && 'nowrap' === $layout['flexWrap'] ) { @@ -276,6 +280,12 @@ function wp_get_layout_style( $selector, $layout, $has_block_gap_support = false 'declarations' => array( 'align-items' => 'flex-start' ), ); } + if ( ! empty( $layout['verticalAlignment'] ) && array_key_exists( $layout['verticalAlignment'], $vertical_alignment_options ) ) { + $layout_styles[] = array( + 'selector' => $selector, + 'declarations' => array( 'justify-content' => $vertical_alignment_options[ $layout['verticalAlignment'] ] ), + ); + } } } diff --git a/tests/phpunit/tests/block-supports/wpGetLayoutStyle.php b/tests/phpunit/tests/block-supports/wpGetLayoutStyle.php index 6ac4d05a96603..91f7df561d6e9 100644 --- a/tests/phpunit/tests/block-supports/wpGetLayoutStyle.php +++ b/tests/phpunit/tests/block-supports/wpGetLayoutStyle.php @@ -246,7 +246,7 @@ public function data_wp_get_layout_style() { 'verticalAlignment' => 'bottom', ), ), - 'expected_output' => '.wp-layout{flex-wrap:nowrap;flex-direction:column;align-items:flex-start;}', + 'expected_output' => '.wp-layout{flex-wrap:nowrap;flex-direction:column;align-items:flex-start;justify-content:flex-end;}', ), 'default layout with blockGap to verify converting gap value into valid CSS' => array( 'args' => array(