Group Blocks on Dyad 2 have padding issues.

[KirkwallDay]

trafficstars

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;
}