Changeset 55201

Timestamp:

02/03/2023 12:34:59 AM (2 years ago)

Author:

hellofromTonya

Message:

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:

• ​Gutenberg PR 47134.

Follow-up to [54274].

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

Location:

trunk

Files:

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

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

@@ -208 +208 @@
 
         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' );
         }
 
@@ -275 +279 @@
                     'selector'     => $selector,
                     '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'] ] ),
                 );
             }

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

@@ -247 +247 @@
                     ),
                 ),
-                '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(