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

Add block gap support for group blocks #37459

Merged
merged 1 commit into from
Dec 20, 2021
Merged

Conversation

youknowriad
Copy link
Contributor

While working on a block theme, I noticed that I needed to tweak the block gap for specific sections or "rows" in different places. This would have been possible simply using the block gap support.

This PR enables the block gap support for a group block. It works properly but at the moment it also highlights a conceptual bug in block gap which is being worked on in #37360: Basically when you apply a gap to a column or to a parent container, that same gap is being applied to all its children (including nested containers).

Testing instructions

  • Try the block gap control for both group and row blocks.

@youknowriad youknowriad added [Feature] Blocks Overall functionality of blocks Customization Issues related to Phase 2: Customization efforts [Type] Feature New feature to highlight in changelogs. labels Dec 16, 2021
@youknowriad youknowriad requested review from glendaviesnz, andrewserong and a team December 16, 2021 13:01
@youknowriad youknowriad self-assigned this Dec 16, 2021
@jasmussen
Copy link
Contributor

Tests well for me. Before:
Screenshot 2021-12-16 at 14 09 40

After:

Screenshot 2021-12-16 at 14 09 36

Conceptually, paddig and gap (block spacing) work well together. I've no concerns with this one.

@ndiego
Copy link
Member

ndiego commented Dec 16, 2021

This is brilliant and was going to add this PR myself. Definitely would love to see this in 5.9. Now what about margin support for groups? 😂 (I know, I know...)

Copy link
Contributor

@andrewserong andrewserong left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for adding this one in @youknowriad! This is testing nicely for me, too, for both the Group and Row blocks. I did notice while sliding the Block spacing control that the inserter icon flickers, which doesn't happen when dragging the padding control. Not a blocker for this PR, but it'd be good for us to look into that separately.

Kapture.2021-12-17.at.10.31.06.mp4

I'm impressed at how powerful having a block spacing control is for adjusting the space between blocks. Because we can select multiple blocks and easily group them via the contextual menu in the block toolbar, this means that it's possible to use group blocks and spacing as a workaround for the absence of a margin control. @ndiego I'm just curious if that helps with the concerns you've raised surrounding block margins? (e.g. group two adjacent paragraph blocks and adjust block spacing to effectively replicate an individual block's margin controls).

@ndiego
Copy link
Member

ndiego commented Dec 17, 2021

@ndiego I'm just curious if that helps with the concerns you've raised surrounding block margins? (e.g. group two adjacent paragraph blocks and adjust block spacing to effectively replicate an individual block's margin controls).

@andrewserong this definitely goes a long way towards that and I 100% endorse this PR. If I group two paragraphs and set the block spacing to 0 on the group, the margin on the paragraphs will go to 0. Perfect!

However, there will still be margin-top set on the wrapped group block due to blockGap set higher up the tree. Now we know there is a bug around this #36521, but theoretically the group block should get that margin-top. I know I am in the weeds here and this really only pertains to Editor "power users", but it's something to think about. There are plenty of workarounds though. I am currently using this fun block style 😉
image

@MaggieCabrera
Copy link
Contributor

My thumbs up on this one too, it's important to have this

@youknowriad youknowriad merged commit 9872a70 into trunk Dec 20, 2021
@youknowriad youknowriad deleted the add/block-gap-support-group branch December 20, 2021 08:31
@youknowriad youknowriad added the Backport to WP 6.7 Beta/RC Pull request that needs to be backported to the WordPress major release that's currently in beta label Dec 20, 2021
@github-actions github-actions bot added this to the Gutenberg 12.3 milestone Dec 20, 2021
@youknowriad
Copy link
Contributor Author

This is a small feature but I'm adding the backport label as the 2022 theme is relying implicitly on this and if we land #37360 it will break the implicit usage in 2022 without the current PR.

@tellthemachines tellthemachines removed the Backport to WP 6.7 Beta/RC Pull request that needs to be backported to the WordPress major release that's currently in beta label Dec 21, 2021
@ndiego ndiego linked an issue Feb 9, 2022 that may be closed by this pull request
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 [Feature] Blocks Overall functionality of blocks [Type] Feature New feature to highlight in changelogs.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

7 participants