Layout Grid: Inconsistent margins & paddings

[mrfoxtalbot]

I have noticed that the 3 column grid layout will create inconsistent margins for the middle block. This seems to be happening on Varia child themes (See Alves and Barnsbury, below):

This is also happening with TwentyTwenty, with the additional issue of uneven padding:

I initially noticed this on a self-hosted site but I was able to reproduce it on a simple site (Gutenberg 8.7.1)

Context 3224728-zen

[jasmussen]

Hello, thank you for the ticket!

I took a look just now, but I can't quite reproduce. Here's the markup I tested:

<!-- wp:jetpack/layout-grid {"column1DesktopSpan":4,"column1TabletSpan":4,"column1MobileSpan":4,"column2DesktopSpan":4,"column2TabletSpan":4,"column2MobileSpan":4,"column3DesktopSpan":4,"column3TabletSpan":8,"column3MobileSpan":4,"className":"column1-desktop-grid__span-4 column1-desktop-grid__row-1 column2-desktop-grid__span-4 column2-desktop-grid__start-5 column2-desktop-grid__row-1 column3-desktop-grid__span-4 column3-desktop-grid__start-9 column3-desktop-grid__row-1 column1-tablet-grid__span-4 column1-tablet-grid__row-1 column2-tablet-grid__span-4 column2-tablet-grid__start-5 column2-tablet-grid__row-1 column3-tablet-grid__span-8 column3-tablet-grid__row-2 column1-mobile-grid__span-4 column1-mobile-grid__row-1 column2-mobile-grid__span-4 column2-mobile-grid__row-2 column3-mobile-grid__span-4 column3-mobile-grid__row-3"} -->
<div class="wp-block-jetpack-layout-grid alignfull column1-desktop-grid__span-4 column1-desktop-grid__row-1 column2-desktop-grid__span-4 column2-desktop-grid__start-5 column2-desktop-grid__row-1 column3-desktop-grid__span-4 column3-desktop-grid__start-9 column3-desktop-grid__row-1 column1-tablet-grid__span-4 column1-tablet-grid__row-1 column2-tablet-grid__span-4 column2-tablet-grid__start-5 column2-tablet-grid__row-1 column3-tablet-grid__span-8 column3-tablet-grid__row-2 column1-mobile-grid__span-4 column1-mobile-grid__row-1 column2-mobile-grid__span-4 column2-mobile-grid__row-2 column3-mobile-grid__span-4 column3-mobile-grid__row-3"><!-- wp:jetpack/layout-grid-column {"backgroundColor":"secondary"} -->
<div class="wp-block-jetpack-layout-grid-column wp-block-jetpack-layout-grid__padding-none has-background has-secondary-background-color"><!-- wp:paragraph -->
<p>column 1</p>
<!-- /wp:paragraph --></div>
<!-- /wp:jetpack/layout-grid-column -->

<!-- wp:jetpack/layout-grid-column {"backgroundColor":"primary"} -->
<div class="wp-block-jetpack-layout-grid-column wp-block-jetpack-layout-grid__padding-none has-background has-primary-background-color"><!-- wp:paragraph -->
<p>column 2</p>
<!-- /wp:paragraph --></div>
<!-- /wp:jetpack/layout-grid-column -->

<!-- wp:jetpack/layout-grid-column {"backgroundColor":"accent"} -->
<div class="wp-block-jetpack-layout-grid-column wp-block-jetpack-layout-grid__padding-none has-background has-accent-background-color"><!-- wp:paragraph -->
<p>column 3</p>
<!-- /wp:paragraph --></div>
<!-- /wp:jetpack/layout-grid-column --></div>
<!-- /wp:jetpack/layout-grid -->

Can you provide additional steps to reproduce, or perhaps some markup I can debug? Here's what I see for the above in 2020:

[mrfoxtalbot]

Hi! Thank you for your reply @jasmussen

The original post can be seen here https://mrfoxtestingsite.wordpress.com/2020/08/14/layout-grid-margin-padding-issues/

This is the markup for the first example:

<!-- wp:jetpack/layout-grid {"column1DesktopSpan":4,"column1TabletSpan":4,"column1MobileSpan":4,"column2DesktopSpan":4,"column2TabletSpan":4,"column2MobileSpan":4,"column3DesktopSpan":4,"column3TabletSpan":8,"column3MobileSpan":4,"className":"column1-desktop-grid__span-4 column1-desktop-grid__row-1 column2-desktop-grid__span-4 column2-desktop-grid__start-5 column2-desktop-grid__row-1 column3-desktop-grid__span-4 column3-desktop-grid__start-9 column3-desktop-grid__row-1 column1-tablet-grid__span-4 column1-tablet-grid__row-1 column2-tablet-grid__span-4 column2-tablet-grid__start-5 column2-tablet-grid__row-1 column3-tablet-grid__span-8 column3-tablet-grid__row-2 column1-mobile-grid__span-4 column1-mobile-grid__row-1 column2-mobile-grid__span-4 column2-mobile-grid__row-2 column3-mobile-grid__span-4 column3-mobile-grid__row-3"} -->
<div class="wp-block-jetpack-layout-grid alignfull column1-desktop-grid__span-4 column1-desktop-grid__row-1 column2-desktop-grid__span-4 column2-desktop-grid__start-5 column2-desktop-grid__row-1 column3-desktop-grid__span-4 column3-desktop-grid__start-9 column3-desktop-grid__row-1 column1-tablet-grid__span-4 column1-tablet-grid__row-1 column2-tablet-grid__span-4 column2-tablet-grid__start-5 column2-tablet-grid__row-1 column3-tablet-grid__span-8 column3-tablet-grid__row-2 column1-mobile-grid__span-4 column1-mobile-grid__row-1 column2-mobile-grid__span-4 column2-mobile-grid__row-2 column3-mobile-grid__span-4 column3-mobile-grid__row-3"><!-- wp:jetpack/layout-grid-column {"backgroundColor":"secondary"} -->
<div class="wp-block-jetpack-layout-grid-column wp-block-jetpack-layout-grid__padding-none has-background has-secondary-background-color"><!-- wp:paragraph -->
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:jetpack/layout-grid-column -->

<!-- wp:jetpack/layout-grid-column {"backgroundColor":"primary"} -->
<div class="wp-block-jetpack-layout-grid-column wp-block-jetpack-layout-grid__padding-none has-background has-primary-background-color"><!-- wp:paragraph -->
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat nhttps://d.pr/i/2SjAfWon proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:jetpack/layout-grid-column -->

<!-- wp:jetpack/layout-grid-column {"customBackgroundColor":"#ecc32f"} -->
<div class="wp-block-jetpack-layout-grid-column wp-block-jetpack-layout-grid__padding-none" style="background-color:#ecc32f"><!-- wp:paragraph -->
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:jetpack/layout-grid-column --></div>
<!-- /wp:jetpack/layout-grid -->

And this would be the markup for the second example (the one that led me to noticing the issue):

<!-- wp:cover {"url":"https://sillywalksydney.com/wp-content/uploads/2020/06/afe55697-67ac-4f4b-87aa-b5f981150f79-e1592526722541.jpg","id":66,"dimRatio":70,"overlayColor":"background","align":"full","className":"is-style-default"} -->
<div class="wp-block-cover alignfull has-background-dim-70 has-background-background-color has-background-dim is-style-default" style="background-image:url(https://sillywalksydney.com/wp-content/uploads/2020/06/afe55697-67ac-4f4b-87aa-b5f981150f79-e1592526722541.jpg)"><div class="wp-block-cover__inner-container"><!-- wp:spacer {"height":96} -->
<div style="height:96px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->

<!-- wp:jetpack/layout-grid {"addGutterEnds":false,"column1DesktopSpan":4,"column1TabletSpan":4,"column1MobileSpan":4,"column2DesktopSpan":4,"column2TabletSpan":4,"column2MobileSpan":4,"column3DesktopSpan":4,"column3TabletSpan":8,"column3MobileSpan":4,"className":"column1-desktop-grid__span-4 column1-desktop-grid__row-1 column2-desktop-grid__span-4 column2-desktop-grid__start-5 column2-desktop-grid__row-1 column3-desktop-grid__span-4 column3-desktop-grid__start-9 column3-desktop-grid__row-1 column1-tablet-grid__span-4 column1-tablet-grid__row-1 column2-tablet-grid__span-4 column2-tablet-grid__start-5 column2-tablet-grid__row-1 column3-tablet-grid__span-8 column3-tablet-grid__row-2 column1-mobile-grid__span-4 column1-mobile-grid__row-1 column2-mobile-grid__span-4 column2-mobile-grid__row-2 column3-mobile-grid__span-4 column3-mobile-grid__row-3"} -->
<div class="wp-block-jetpack-layout-grid alignfull column1-desktop-grid__span-4 column1-desktop-grid__row-1 column2-desktop-grid__span-4 column2-desktop-grid__start-5 column2-desktop-grid__row-1 column3-desktop-grid__span-4 column3-desktop-grid__start-9 column3-desktop-grid__row-1 column1-tablet-grid__span-4 column1-tablet-grid__row-1 column2-tablet-grid__span-4 column2-tablet-grid__start-5 column2-tablet-grid__row-1 column3-tablet-grid__span-8 column3-tablet-grid__row-2 column1-mobile-grid__span-4 column1-mobile-grid__row-1 column2-mobile-grid__span-4 column2-mobile-grid__row-2 column3-mobile-grid__span-4 column3-mobile-grid__row-3 wp-block-jetpack-layout-gutter__nowrap"><!-- wp:jetpack/layout-grid-column {"backgroundColor":"primary"} -->
<div class="wp-block-jetpack-layout-grid-column wp-block-jetpack-layout-grid__padding-none has-background has-primary-background-color"><!-- wp:heading {"align":"center","style":{"typography":{"fontSize":75}}} -->
<h2 class="has-text-align-center" style="font-size:75px"><strong>3</strong></h2>
<!-- /wp:heading -->

<!-- wp:paragraph {"align":"center"} -->
<p class="has-text-align-center">Walkers</p>
<!-- /wp:paragraph --></div>
<!-- /wp:jetpack/layout-grid-column -->

<!-- wp:jetpack/layout-grid-column {"customBackgroundColor":"#e9c616"} -->
<div class="wp-block-jetpack-layout-grid-column wp-block-jetpack-layout-grid__padding-none" style="background-color:#e9c616"><!-- wp:heading {"align":"center","className":"yellowcolum","style":{"typography":{"fontSize":75},"color":{"text":"#0b0b0b"}}} -->
<h2 class="has-text-align-center yellowcolum has-text-color" style="font-size:75px;color:#0b0b0b"><strong>250</strong></h2>
<!-- /wp:heading -->

<!-- wp:paragraph {"align":"center","style":{"color":{"text":"#121212"}}} -->
<p class="has-text-align-center has-text-color" style="color:#121212">Kilometres<br></p>
<!-- /wp:paragraph --></div>
<!-- /wp:jetpack/layout-grid-column -->

<!-- wp:jetpack/layout-grid-column {"backgroundColor":"primary"} -->
<div class="wp-block-jetpack-layout-grid-column wp-block-jetpack-layout-grid__padding-none has-background has-primary-background-color"><!-- wp:heading {"align":"center","style":{"typography":{"fontSize":75}}} -->
<h2 class="has-text-align-center" style="font-size:75px"><strong>$650</strong></h2>
<!-- /wp:heading -->

<!-- wp:paragraph {"align":"center"} -->
<p class="has-text-align-center">Raised</p>
<!-- /wp:paragraph --></div>
<!-- /wp:jetpack/layout-grid-column --></div>
<!-- /wp:jetpack/layout-grid -->

<!-- wp:spacer {"height":96} -->
<div style="height:96px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->

<!-- wp:buttons {"align":"center"} -->
<div class="wp-block-buttons aligncenter"><!-- wp:button -->
<div class="wp-block-button"><a class="wp-block-button__link" href="https://sillywalksydney.com/register/" rel="https://sillywalksydney.com/register/">Register</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons --></div></div>
<!-- /wp:cover -->

Thanks again!

[jasmussen]

Thank you! I'll take a look this Monday and see if I can fix it.

[jasmussen]

Many apologies for taking so long to look at this, it's been a busy few weeks!

I managed to reproduce this with your instructions:

Turns out there are two things happening here.

First, if a custom color is used to color the background of a column, a missing CSS class means it won't cover the background as it should By custom color I mean the "custom color" button here:

This will be fixed by #141

Secondly, there was a regression of #113, which caused colored column backgrounds to have a gap after them, starting from the left. Specifically, column background colors are drawn using negative margins. That makes the column wider than 100%, but the max-width: 100%; breaks that and causes a gap. CC: @aaronrobertshaw

I will try a PR for the 2nd one now.

[jasmussen]

Once #141 is fixed and #142 is merged, this ticket is fixed. Thanks for the report.

[mrfoxtalbot]

Brilliant! Thanks so much for the quick reply & fix!

[jasmussen]

Reopening, as this is only partially fixed. We still need #141. @johngodley do you have bandwidth to look at that one?

[johngodley]

#141 is fixed. Is there anything else we need or should I release?

[jasmussen]

I can't think of anything at the moment, and these should be fairly safe. Thanks John!

[yafash]

I installed the plugin I would love to hear how I get to the plugin settings

[jasmussen]

Hello @yafash. If you installed the Layout Grid block, settings should be available in the right sidebar in the block editor: just insert the layout grid block and select it first. Hope that helps.