Editor: Add missing controls to flex layouts in wp_get_layout_style().

Adds missing controls to flex layouts in `wp_get_layout_style()` for justify-content and vertical alignment options.

References:
* [https://github.com/WordPress/gutenberg/pull/47134 Gutenberg PR 47134].

Follow-up to [54274].

Props isabel_brison, andrewserong, jameskoster, joen, onemaggie , ndiego.
Fixes #57602.

git-svn-id: https://develop.svn.wordpress.org/trunk@55201 602fd350-edb4-49c9-b593-d223f7449a82
This commit is contained in:
Tonya Mork
2023-02-03 00:34:59 +00:00
parent 8ff5899348
commit 67c8bf8e0d
2 changed files with 12 additions and 2 deletions

View File

@@ -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'] ] ),
);
}
}
}

View File

@@ -246,7 +246,7 @@ class Tests_Block_Supports_WpGetLayoutStyle extends WP_UnitTestCase {
'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(