Layout grid: margin issues

[simison]

We've observed some breakage in production (running Gutenberg 7.8) with some homepage templates using layout grid block.

Note how it's cutting out from left side:

Looks like there are two, possibly related issues:

• when selecting the layout grid, it jumps to have different margins than when it's unselected
• when inside "full width" group block (as opposed to "wide width"), the layout grid leaks outside the canvas

Demonstration: https://cloudup.com/cj0vtSLUung

@andrewserong was wondering if it's related to the lighter Group block DOM introduced in WordPress/gutenberg#20586

Testing

• Start at https://wpcalypso.wordpress.com/new
• Pick e.g. Vesta template
• When landing at the editor of your new site, observe breakage

Convo p1587608359048500-slack-gutenboarding

cc @iamtakashi @ianstewart @johnHackworth

[simison]

Looks like this is broken for some production page templates as well: https://cloudup.com/c4otZaFbEHF

[jasmussen]

This should be fixed by #71. We were holding off on creating a new build in part due to wanting to wrap up a few additional things:

• Grid Block: Multiselect for blocks inside stopped working #70

• Grid Block: Move device indication to toolbar #72

• Layout grid: look at classes added when adjusting columns #65

• Layout Grid: front.css appears at the bottom of the HTML doc. #64

But given circumstances, we could fasttrack an interim release.

This issue should be present in the editor only, correct?

[simison]

This issue should be present in the editor only, correct?

Yup! Seems to affect editor and not frontend but I've done only one test with one theme:

[jasmussen]

Cool thanks for verifying. That does strongly imply that #71 fixes it (purpose of the PR), and that releasing a new version should address this.

[simison]

Excellent! :-) Is there any way I could test this already now?

[johngodley]

Do you have a post I can look at? I tried https://wpcalypso.wordpress.com/new but there's nothing to press on the page.

[jasmussen]

Excellent! :-) Is there any way I could test this already now?

The way I test this is to check out and activate this block experiments repo in a local wp-env. Here's a GIF of the current status:

Edit, to clarify — prior to the G2 design, there was "side-UI", mover controls and borders to the left and right of even a full-wide block.

When the layout grid is full-wide which it defaults, to, that means there were cases where you wouldn't be able to access those side controls, or that they would create a horizontal scrollbar. This was previously solved by the block through "scaling down" the fullwide block on click. But this scaling broke in recent updates. The new update does not require any scaling down, so should be resilient to changing of classnames in future updates.

[simison]

so should be resilient to changing of classnames in future updates.

This is sooo much appreciated. 👍 We often need to track down and fix a lot of stuff that breaks on .com Gutenberg upgrades when relying on core's CSS classes which are far from considered stable API.

[jasmussen]

Hi, thanks for the ticket. We found out that the issue happens on the layout grid block when running Gutenberg 7.8.1, and that this issue is fixed in 7.9.1. We still need to put out a new version of the plugin to improve the flow overall, but layout grid was not the cause here, so closing for the time being!

[alshakero]

To repro, use this post HTML:

<!-- wp:group -->
<div class="wp-block-group"><div class="wp-block-group__inner-container"><!-- wp:jetpack/layout-grid {"align":"","column1DesktopSpan":6,"column1TabletSpan":4,"column1MobileSpan":4,"column2DesktopSpan":6,"column2TabletSpan":4,"column2MobileSpan":4,"className":"column1-desktop-grid__span-6 column1-desktop-grid__row-1 column2-desktop-grid__span-6 column2-desktop-grid__start-7 column2-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 column1-mobile-grid__span-4 column1-mobile-grid__row-1 column2-mobile-grid__span-4 column2-mobile-grid__row-2"} -->
<div class="wp-block-jetpack-layout-grid column1-desktop-grid__span-6 column1-desktop-grid__row-1 column2-desktop-grid__span-6 column2-desktop-grid__start-7 column2-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 column1-mobile-grid__span-4 column1-mobile-grid__row-1 column2-mobile-grid__span-4 column2-mobile-grid__row-2"><!-- wp:jetpack/layout-grid-column -->
<div class="wp-block-jetpack-layout-grid-column wp-block-jetpack-layout-grid__padding-none"><!-- wp:image {"align":"full","id":448,"sizeSlug":"large"} -->
<figure class="wp-block-image alignfull size-large"><img src="https://simplepaymemts2m7cn2m7.files.wordpress.com/2018/12/pexels-photo-290538.jpeg?w=750" alt="" class="wp-image-448"/><figcaption>Photo by Pixabay on <a href="https://www.pexels.com/photo/beautiful-california-cloud-clouds-290538/" rel="nofollow">Pexels.com</a></figcaption></figure>
<!-- /wp:image --></div>
<!-- /wp:jetpack/layout-grid-column -->

<!-- wp:jetpack/layout-grid-column -->
<div class="wp-block-jetpack-layout-grid-column wp-block-jetpack-layout-grid__padding-none"><!-- wp:image {"align":"full","id":447,"sizeSlug":"large"} -->
<figure class="wp-block-image alignfull size-large"><img src="https://simplepaymemts2m7cn2m7.files.wordpress.com/2018/12/pexels-photo-457937.jpeg?w=750" alt="" class="wp-image-447"/><figcaption>Photo by Nextvoyage on <a href="https://www.pexels.com/photo/architecture-buildings-canada-city-457937/" rel="nofollow">Pexels.com</a></figcaption></figure>
<!-- /wp:image --></div>
<!-- /wp:jetpack/layout-grid-column --></div>
<!-- /wp:jetpack/layout-grid --></div></div>
<!-- /wp:group -->

<!-- wp:paragraph -->
<p></p>
<!-- /wp:paragraph -->

[johngodley]

Following up here that the problem wasn't specific to the layout grid, but is a problem with Gutenberg 7.8.1 and any full-width block that is inside a full width group.

For example:

<!-- wp:group {"align":"full"} -->
<div class="wp-block-group alignfull"><div class="wp-block-group__inner-container"><!-- wp:image {"align":"full"} -->
<figure class="wp-block-image alignfull"><img alt=""/></figure>
<!-- /wp:image -->