Backport Fix spacing property generation in flow layout type

[tellthemachines]

Trac ticket: https://core.trac.wordpress.org/ticket/56467

Backports fix to block spacing from WordPress/gutenberg#44446

---

This Pull Request is for code review only. Please keep all other discussion in the Trac ticket. Do not merge this Pull Request. See GitHub Pull Requests for Code Review in the Core Handbook for more details.

[andrewserong]

Thanks for backporting this one @tellthemachines! This is working nicely in my local environment with the following test markup, and running TwentyTwentyTwo theme. Prior to this PR, the custom blockGap spacing for each of these columns is not rendered on the site frontend. With the PR, the CSS variable-based values are output correctly 👍

Test Columns markup

<!-- wp:columns -->
<div class="wp-block-columns"><!-- wp:column {"style":{"spacing":{"blockGap":"var:preset|spacing|20"}}} -->
<div class="wp-block-column"><!-- wp:paragraph -->
<p>A paragraph</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Another paragraph</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->

<!-- wp:column {"style":{"spacing":{"blockGap":"var:preset|spacing|80"}}} -->
<div class="wp-block-column"><!-- wp:paragraph -->
<p>A paragraph</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Another paragraph</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

LGTM!

[hellofromtonya]

Self-assigning for commit review and prep.

[hellofromtonya]

Test Report

Env:

• WordPress: current trunk
• Themes: TT2 and TT3
• Plugins: none activated
• Localhost: wp-env
• OS: macOS
• Browser: Firefox, Chrome, and Edge

Test Instructions:

• Step 1: Pull the latest trunk into your local testing environment.
• Step 2: Deactivate all plugins including Gutenberg.
• Step 3: Activate TT2 theme.
• Step 4: Add a new post and paste this code:

Test Columns markup

<!-- wp:group {"style":{"spacing":{"blockGap":"var:preset|spacing|70"}},"backgroundColor":"primary"} -->
<div class="wp-block-group has-primary-background-color has-background"><!-- wp:paragraph -->
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc tincidunt ex in eros ultrices hendrerit.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc tincidunt ex in eros ultrices hendrerit.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->

<!-- wp:columns -->
<div class="wp-block-columns"><!-- wp:column {"style":{"spacing":{"blockGap":"var:preset|spacing|60"}},"backgroundColor":"primary"} -->
<div class="wp-block-column has-primary-background-color has-background"><!-- wp:paragraph -->
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc tincidunt ex in eros ultrices hendrerit.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc tincidunt ex in eros ultrices hendrerit.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->

<!-- wp:column {"style":{"spacing":{"blockGap":"var:preset|spacing|80"}},"backgroundColor":"primary"} -->
<div class="wp-block-column has-primary-background-color has-background"><!-- wp:paragraph -->
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc tincidunt ex in eros ultrices hendrerit.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc tincidunt ex in eros ultrices hendrerit.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->

<!-- wp:column {"style":{"spacing":{"blockGap":"var:preset|spacing|30"}},"backgroundColor":"primary"} -->
<div class="wp-block-column has-primary-background-color has-background"><!-- wp:paragraph -->
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc tincidunt ex in eros ultrices hendrerit.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc tincidunt ex in eros ultrices hendrerit.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

• Step 5: View the post in the front end.
• Step 6: Look at the last paragraph's CSS (use your browser's DevTools). Notice the margin-block-start property.
  • Bug: Before applying the patch, the property's value is invalid and crossed out.
  • Expected: The property's value should be valid CSS and take precedence.
• Step 7: Apply the patch.
• Step 8: Refresh the post in the front-end.
• Step 9: Repeat Step 6. This time the CSS should be valid.
• Step 10: Repeat the above steps with TT3.

Results:

Summary:

• Confirmed the bug report of invalid CSS ✅ 🐞
• Confirmed the fix resolves the issue, ie renders valid CSS ✅

Using TT2:

The PHP Code's $gap_value:

• Before: 'var:preset|spacing|70'
• After: var(--wp--preset--spacing--70)

Before applying the patch

.wp-block-group.wp-container-7.wp-block-group.wp-container-7 > * + * {
  margin-block-start: var:preset|spacing|70;
  margin-block-end: 0;
}

After applying the patch

.wp-block-group.wp-container-7.wp-block-group.wp-container-7 > * + * {
  margin-block-start: var(--wp--preset--spacing--70);
  margin-block-end: 0;
}

Using TT3:

The PHP Code's $gap_value:

• Before: 'var:preset|spacing|70'
• After: var(--wp--preset--spacing--70)

Before applying the patch

.wp-block-group.wp-container-7.wp-block-group.wp-container-7 > * + * {
  margin-block-start: var:preset|spacing|70;
  margin-block-end: 0;
}

After applying the patch

.wp-block-group.wp-container-7.wp-block-group.wp-container-7 > * + * {
  margin-block-start: var(--wp--preset--spacing--70);
  margin-block-end: 0;
}

[hellofromtonya]

Confirmed: This PR does fix the reported bug WordPress/gutenberg#44435 ✅

However, there are no tests for this specific expectation. I'll add a dataset to this PR Done 0d6646b ✅

[hellofromtonya]

• Confirmed the bug exists prior to applying this code ✅
• Confirmed generates valid CSS with this code applied ✅
• Tests valid the bug (fail before apply the bugfix) and fix (pass after applying the bugfix) ✅

There 3 instances of the same gap value conversion code in this one function. These instances could be consolidated into a static function. However, as there was already 2 instances prior to this PR, refactoring is outside the scope of this PR. Will explore in a separate PR.

This PR is ready for commit. Prepping now.

[hellofromtonya]

Merged via changest https://core.trac.wordpress.org/changeset/54311. Thank you everyone for your contributions in identifying and resolving this issue 🎉