Group Blocks on Dyad 2 have padding issues.

[KirkwallDay]

Quick summary

The group block will have padding on some elements preventing content from aligning correctly inside the block. This is easiest to see with a group block and center-aligned column blocks inside of it.

Steps to reproduce

1. Have a site with the Dyad 2 theme activated.
2. Create a group block with a columns block inside of it. Add some test content.
3. Set the columns to show content center-aligned vertically.
4. In the editor it will look fine.
5. Preview the page in a new tab to see the live site view.

Here is the code of the group block I used:

<!-- wp:group {"backgroundColor":"light-gray-blue"} -->
<div class="wp-block-group has-light-gray-blue-background-color has-background"><!-- wp:columns -->
<div class="wp-block-columns"><!-- wp:column {"verticalAlignment":"center"} -->
<div class="wp-block-column is-vertically-aligned-center"><!-- wp:heading -->
<h2>test</h2>
<!-- /wp:heading --></div>
<!-- /wp:column -->

<!-- wp:column {"verticalAlignment":"center"} -->
<div class="wp-block-column is-vertically-aligned-center"><!-- wp:paragraph -->
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent eget porta diam. Aenean pharetra, tellus eu fermentum pulvinar, lectus est dignissim quam, vitae tempus nibh ipsum eget ante. Interdum et malesuada fames ac ante ipsum primis in faucibus. Curabitur vitae mollis mauris. In maximus venenatis facilisis. Sed non porta velit, id auctor tellus. Vestibulum id libero maximus, finibus leo ut, facilisis massa. Cras in placerat ante, nec congue dui.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column --></div>
<!-- /wp:columns --></div>
<!-- /wp:group -->

What you expected to happen

The blocks should look like they do in the editor.

What actually happened

Instead, there is padding added to the bottom of the block.

Editor view:

Live View:

The space with the red rectangle shows the extra padding added by the theme.

Hemingway Re-written live view:

Less pronounced but still there.

Twenty Twenty-One live view:

Looks good here.

Context

• [ ] 5405228-zen

Platform (Simple, Atomic, or both?)

Simple, Atomic

Theme-specific issue?

Dyad 2, Hemingway Re-written

Browser, operating system and other notes

No response

Reproducibility

Consistent

Severity

Some (< 50%)

Available workarounds?

Yes, easy to implement

Workaround details

CSS can fix the issue, it seems to vary from theme to theme.

On Dyad 2, set a no-padding custom class to the block and add this code:

.no-padding {
padding-top: 1.25em !important;
padding-bottom: 0 !important;
}

On Hemingway Re-written it's caused by the paragraph block having added padding. Set the same no-padding class to the group block and then use this code:

.no-padding p {
    margin-bottom: 0;
}

[github-actions[bot]]

Support References

This comment is automatically generated. Please do not edit it.

• [ ] 5405228-zen

[devNigel]

I tried to reproduce this issue and I noticed that the Group block has a setting to remove the top and bottom padding which worked on Editor view but had no effect on the live page. Was able to confirm with multiple themes like Dyad 2, 2020.

I think that issue is also related to this.

[supernovia]

The blocks should look like they do in the editor.

@KirkwallDay would you happen to have a handy screenshot of that?

[renata-franco]

📌 SCRUBBING

• Tested on Simple ✅
• Tested on AT ✅
• Tested on Self-hosted ✅
• Replicable on Core - Yes

---

📌 FINDINGS/SCREENSHOTS/VIDEO

I was able to replicate this issue on Simple and AT sites, as well as self-hosted.

AT site, Simple site, and Self-Hosted site:

Editor Look
Preview on Desktop

Created my own Group Blocks with two Columns and also three Columns inside. I tested with other blocks outside of the Group Block.

Checked with the following non-FSE themes and it's not replicable: Rowling, Mayland, Ryu. Could not replicate this using Hemingway Rewritten, which actually looks like this:

Regarding this comment I do not see this option for the Group Block on my end, not sure why. @devNigel Can you let me know if this is available for a particular reason on your end?

Here is what I see:

---

📌 ACTIONS

• Marked as Triaged for Quality Squad review

[devNigel]

@renata-franco Do you have CoBlocks active? Based on this thread, it looks like it is a feature from CoBlocks.

[renata-franco]

@renata-franco Do you have CoBlocks active? Based on this thread, it looks like it is a feature from CoBlocks.

No, I do not have CoBlocks on any of the sites. We stopped having that plugin as default a while ago. Can you try deactivating it on the site where you took the screenshot to see if the option still appears?

[peterschimke]

@alaczek is this something your team can look at?

[alaczek]

Dyad 2 is a classic theme with minimal Gutenberg support, and I think the extra padding when a group block has background is some sort of default style that gets applied if the theme doesn't supply it's own.

Not sure if this is feasible here, but avoiding the group block and adding background directly to the columns block helps somewhat:

Background added to columns block (there's still an uneven gap because of bottom padding on paragraph block, but it's smaller):

Background added to parent group block:

Given it's a classic theme, and quite old, we're unlikely to make changes to it at this stage.