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 spacing' term is unclear - could be clearer to indicate it effects spacing between blocks inside element. #37768

Open
uniquesolution opened this issue Jan 7, 2022 · 4 comments
Labels
[Feature] Layout Layout block support, its UI controls, and style output. [Type] Enhancement A suggestion for improvement.

Comments

@uniquesolution
Copy link

Description

Block spacing setting for group block is not working in block editor in wordpress 5.9 RC1 version

When we provide a value in block spacing field of settings panel of a group block, it should follow that gap value and put top margin accordingly, but instead its not adding any css inline or through class, instead its using the default value of "blockGap" provided in the theme.json file.

It should overwrite the theme.json value and use the value we provide in "Block spacing" field.

Step-by-step reproduction instructions

  1. In a page add a group block, then add another group block through insert after. You can also give different background color to each group to differential it from each other
  2. Now check the page in frontend you will see a gap between the two group, the group gap is defined by the css generated by wordpress, that we define in theme.json using "blockGap" value, for example .wp-container-61d7f03e905db > * + * { margin-top: var( --wp--style--block-gap ); margin-bottom: 0; }
  3. Now in the sidebar settings panel of the second group block, put the value 0 for "Block spacing" field, see this screenshot for example https://prnt.sc/26b0h0k
  4. Now again look in frontend, the margin-top value should be now 0, but it still remain the same, because nothing overwriting css is being added. I have created a sample page to understand what kind of issue we get due to this problem https://uniquesweb.co.in/betatguten/testing-gap/, you can see in the grid I created using groups, and after first box, every box is getting a bit lower and are not aligned to each other.

Screenshots, screen recording, code snippet

No response

Environment info

Wordpress version 5.9 RC1, with default theme twenty twenty two.

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

@karmatosed karmatosed added the Needs Testing Needs further testing to be confirmed. label Jan 7, 2022
@carolinan carolinan added the [Block] Group Affects the Group Block label Jan 9, 2022
@andrewserong
Copy link
Contributor

Thanks for opening up this issue @uniquesolution! The block spacing control is designed to control the spacing of the blocks within the group block rather than the space or margin surrounding the group block (margin support has been discussed previously in #37105 and #37344). In #37360 @youknowriad merged a fix for an outstanding issue raised in #36521 where adjusting the block spacing/gap did also affect the block's margin, which had unintended side effects.

In the link in https://uniquesweb.co.in/betatguten/testing-gap/ it looks like there's some other column-like styling at play there that's outside of the styling provided by Gutenberg? The group block currently uses the default layout that expects children to be stacked vertically, so that could be part of the reason for the styling conflict there.

If you need to override the margins for all children to be 0, one way to do it could be to wrap all of your group blocks in another group block and then set the spacing to 0. In the following screengrab, here's a quick demo of how the feature appears to be working currently for me on trunk:

Kapture.2022-01-11.at.16.24.09.mp4

Notes:

  • Setting block spacing for a group block to any value has no effect on the space surrounding the block
  • Setting block spacing adjusts the spacing between blocks that are children of the group block
  • If we wrap all of our group blocks in another group block and then select the parent, we can adjust the spacing between all of the group blocks

Please let me know if I've missed anything in the scenario you've described!

@carolinan
Copy link
Contributor

For the group block, I don't think that it is clear from the text label "block spacing" that this setting is for inner blocks,
compared to the buttons block where you already have an inner placeholder button.

@uniquesolution
Copy link
Author

Yes @carolinan , you are right, the correct word should be "Inner block spacing" I think. In this particular case of group block.

@andrewserong
Copy link
Contributor

"Inner block spacing" is an interesting idea. I'm also wondering if some of the dimension controls could benefit from an (i) icon / hover or help text to explain their usage in an unobtrusive way 🤔. Just linking another issue where consistent dimension controls across blocks is being discussed / tracked: #28356

@skorasaurus skorasaurus removed the Needs Testing Needs further testing to be confirmed. label Jul 5, 2022
@jordesign jordesign changed the title Block spacing setting is not working for group block 'Block spacing' term is unclear - could be clearer to indicate it effects spacing between blocks inside element. Sep 14, 2023
@jordesign jordesign added [Type] Enhancement A suggestion for improvement. [Feature] Layout Layout block support, its UI controls, and style output. and removed [Block] Group Affects the Group Block labels Sep 14, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Feature] Layout Layout block support, its UI controls, and style output. [Type] Enhancement A suggestion for improvement.
Projects
None yet
Development

No branches or pull requests

6 participants