Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
jffng opened this issue Mar 18, 2022 · 3 comments
Closed

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

jffng opened this issue Mar 18, 2022 · 3 comments
Labels
Customization Issues related to Phase 2: Customization efforts Needs Testing Needs further testing to be confirmed.

Comments

@jffng
Copy link
Contributor

jffng commented Mar 18, 2022

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 -->
  1. Check the editor, verify the variable values are respected:

Screen Shot 2022-03-18 at 11 03 55 AM

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

Screen Shot 2022-03-18 at 11 03 16 AM

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 mikachan added the Customization Issues related to Phase 2: Customization efforts label Mar 25, 2022
@mikachan
Copy link
Member

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
Copy link

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.

@github-actions github-actions bot added the Needs Testing Needs further testing to be confirmed. label Sep 27, 2022
@andrewserong
Copy link
Contributor

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!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Customization Issues related to Phase 2: Customization efforts Needs Testing Needs further testing to be confirmed.
Projects
None yet
Development

No branches or pull requests

3 participants