Changeset 54311

Timestamp:

09/26/2022 02:56:41 PM (4 years ago)

Author:

hellofromTonya

Message:

Editor: Fix spacing property generation in flow layout type.

Fixes a bug of invalid CSS value when applying block spacing to a block as reported in ​Gutenberg issue 44435.

Adds logic to convert preset values (i.e. $gap_value) into valid CSS custom properties for the flow ('default') layout type. See the original fix in ​Gutenberg PR 3324.

Also adds a test dataset that fails before the bugfix and passes after the bugix.

Follow-up to [54274].

Props ndiego, isabel_brison, ramonopoly, andrewserong, hellofromTonya.
See #56467.

Location:

trunk

Files:

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

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

@@ -57 +57 @@
                         }
                         if ( null !== $gap_value && ! $should_skip_gap_serialization ) {
+                                // Get spacing CSS variable from preset value if provided.
+                                if ( is_string( $gap_value ) && str_contains( $gap_value, 'var:preset|spacing|' ) ) {
+                                        $index_to_splice = strrpos( $gap_value, '|' ) + 1;
+                                        $slug            = _wp_to_kebab_case( substr( $gap_value, $index_to_splice ) );
+                                        $gap_value       = "var(--wp--preset--spacing--$slug)";
+                                }
+
                                 array_push(
                                         $layout_styles,

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

@@ -249 +249 @@
                                 'expected_output' => '.wp-layout{flex-wrap:nowrap;flex-direction:column;align-items:flex-start;}',
                         ),
+                        'default layout with blockGap to verify converting gap value into valid CSS' => array(
+                                'args'            => array(
+                                        'selector'              => '.wp-block-group.wp-container-6',
+                                        'layout'                => array(
+                                                'type' => 'default',
+                                        ),
+                                        'has_block_gap_support' => true,
+                                        'gap_value'             => 'var:preset|spacing|70',
+                                        'block_spacing'         => array(
+                                                'blockGap' => 'var(--wp--preset--spacing--70)',
+                                        ),
+                                ),
+                                'expected_output' => '.wp-block-group.wp-container-6 > *{margin-block-start:0;margin-block-end:0;}.wp-block-group.wp-container-6.wp-block-group.wp-container-6 > * + *{margin-block-start:var(--wp--preset--spacing--70);margin-block-end:0;}',
+                        ),
                 );
         }