Block Gap: supplying a variable does not work in the view

[jffng]

Description

If I supply a CSS variable value to the blockGap attribute for a block that supports gap, it is not respected in the view. It does in the editor.

Step-by-step reproduction instructions

1. Using Twenty Twenty-Two, add the following markup containing a navigation and group (row) block using a CSS variable for blockGap:

<!-- wp:navigation {"ref":160,"style":{"spacing":{"blockGap":"var(\u002d\u002dwp\u002d\u002dcustom\u002d\u002dspacing\u002d\u002dsmall)"}}} /-->

<!-- wp:group {"style":{"spacing":{"blockGap":"var(\u002d\u002dwp\u002d\u002dcustom\u002d\u002dspacing\u002d\u002dsmall)"}},"layout":{"type":"flex","allowOrientation":false}} -->
<div class="wp-block-group"><!-- wp:paragraph -->
<p>First item in the row</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Second item in the row</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->

2. Check the editor, verify the variable values are respected:

3. Check the front-end, verify it falls back to the default blockGap value:

Screenshots, screen recording, code snippet

No response

Environment info

• WP 5.9.2, Gutenberg trunk

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

Yes

[mikachan]

I've spent some time looking at this, and I think I can see where the difference sits between how the editor handles the blockGap value and how it's output by layout based blocks.

In lib/block-supports/layout.php, we're using the following regex to reject certain blockGap values: '%[\\\(&=}]|/\*%' (here). This means that any CSS variable is disallowed (correctly, I think, from the changes in #37360!)

However, the above is only applied on the front end. In the editor, it looks like the blockGap values are applied using FlexLayoutStyle in packages/block-editor/src/layouts/flex.js (here), which doesn't filter the value at all.

To make this consistent, and assuming we don't want to allow CSS variables for blockGap, perhaps we should apply the same filter rule to the editor as well, within FlexLayoutStyle?

[github-actions]

Hi,
This issue has gone 180 days without any activity. This means it is time for a check-in to make sure it is still relevant. If you are still experiencing this issue with the latest versions, you can help the project by responding to confirm the problem and by providing any updated reproduction steps.
Thanks for helping out.

[andrewserong]

Support for using CSS variables for the blockGap value in block attributes was introduced across #43296 and #43466, via the form var:preset|spacing|20 which will be output on the site frontend in the form var(--wp--preset--spacing--20). For example, here's the markup for a Group block as edited in trunk by using the default spacing presets:

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

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

I believe that resolves the issue described here, so I'll close this out. Thanks for reporting!