vhad/wordpress-develop
1
0
Fork 0
mirror of https://github.com/gosticks/wordpress-develop.git synced 2026-06-28 14:20:15 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Editor: Fix spacing property generation in flow layout type.

Browse Source 
Fixes a bug of invalid CSS value when applying block spacing to a block as reported in [https://github.com/WordPress/gutenberg/issues/44435 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 [https://github.com/WordPress/wordpress-develop/pull/3324 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.

git-svn-id: https://develop.svn.wordpress.org/trunk@54311 602fd350-edb4-49c9-b593-d223f7449a82
This commit is contained in:
Tonya Mork
2022-09-26 14:56:41 +00:00
parent 599622ccc7
commit f8426c2192
2 changed files with 21 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
src/wp-includes/block-supports/layout.php
View File

@@ -56,6 +56,13 @@ function wp_get_layout_style( $selector, $layout, $has_block_gap_support = false
$gap_value = isset( $gap_value['top'] ) ? $gap_value['top'] : null;
}
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,
array(

14
tests/phpunit/tests/block-supports/wpGetLayoutStyle.php
View File

@@ -248,6 +248,20 @@ class Tests_Block_Supports_WpGetLayoutStyle extends WP_UnitTestCase {
),
'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;}',
),
);
}
}