Layout grid appears to be missing need column start

[jasmussen]

Not entirely sure whether this is a recent change to browsers or a regression in the plugin, but by default inserting a layout grid at the moment does this for me:

What happens there is that column 2 is first, and column 1 is after that. Column 1 appears to be missing a CSS class to indicate its starting index to be layout rail 0, that class being column1-grid__start-1. If I add that class, it works:

There may be some JS smartness involved, causing the breakage:

This behavior is the same for me regardless of WordPress, plugin, or browser version.

[johngodley]

I'm not sure I understand the problem, and it's quite hard to see what is happening in a fast moving gif. The block is behaving as expected for me:

The columns appear in the correct order for me. I don't think the first column has ever output the start class if it is in the first position.

[johngodley]

This is on wp.com:

[jasmussen]

I don't think the first column has ever output the start class if it is in the first position.

😭
I don't understand why I'm seeing it! It's totally consistent for me. Have you tried latest master gutenberg?

[johngodley]

Using 9.2 locally, and 9.1 on WP.com. Does it happen on WP.com? Do you have some kind of RTL setting enabled?

[johngodley]

What theme are you using?

[jasmussen]

I was given access to https://wordpress.com/page/freeplantest.wordpress.com/5 from #152 and there it works 🤯

When I try the block-experiments plugin on my local docker install of Gutenberg (9.1 in this particular branch), same content, I see this:

That's the same chrome, this content:

<!-- wp:group {"align":"full"} -->
<div class="wp-block-group alignfull"><div class="wp-block-group__inner-container"><!-- wp:jetpack/layout-grid {"gutterSize":"huge","column1DesktopSpan":12,"column1TabletSpan":8,"column1MobileSpan":4,"column2DesktopOffset":4,"className":"column1-desktop-grid__span-12 column1-desktop-grid__row-1 column1-tablet-grid__span-8 column1-tablet-grid__row-1 column1-mobile-grid__span-4 column1-mobile-grid__row-1"} -->
<div class="wp-block-jetpack-layout-grid alignfull column1-desktop-grid__span-12 column1-desktop-grid__row-1 column1-tablet-grid__span-8 column1-tablet-grid__row-1 column1-mobile-grid__span-4 column1-mobile-grid__row-1 wp-block-jetpack-layout-gutter__huge"><!-- wp:jetpack/layout-grid-column -->
<div class="wp-block-jetpack-layout-grid-column wp-block-jetpack-layout-grid__padding-none"><!-- wp:cover {"url":"https://freeplantest.files.wordpress.com/2020/09/sebastian-pichler-baqh53vqutc-unsplash.jpg","id":60,"hasParallax":true,"dimRatio":70,"className":"a8c-background"} -->
<div class="wp-block-cover has-background-dim-70 has-background-dim has-parallax a8c-background" style="background-image:url(https://freeplantest.files.wordpress.com/2020/09/sebastian-pichler-baqh53vqutc-unsplash.jpg)"><div class="wp-block-cover__inner-container"><!-- wp:heading {"align":"center","level":1,"className":"a8c-section-title"} -->
<h1 class="has-text-align-center a8c-section-title"><em>Doyle &amp; Doyle</em></h1>
<!-- /wp:heading -->

<!-- wp:paragraph {"align":"center","className":"a8c-section-subtitle"} -->
<p class="has-text-align-center a8c-section-subtitle">Attorneys at law</p>
<!-- /wp:paragraph --></div></div>
<!-- /wp:cover -->

<!-- wp:media-text {"mediaPosition":"right","mediaId":61,"mediaType":"image","isStackedOnMobile":false,"className":"is-stacked-on-mobile a8c-section","style":{"color":{"background":"#fff3e4"}}} -->
<div class="wp-block-media-text alignwide has-media-on-the-right is-stacked-on-mobile a8c-section has-background" style="background-color:#fff3e4"><figure class="wp-block-media-text__media"><img src="https://freeplantest.files.wordpress.com/2020/09/christian-lunde-gf8xg0a0xdy-unsplash.jpg?w=682" alt="" class="wp-image-61 size-full"/></figure><div class="wp-block-media-text__content"><!-- wp:heading {"className":"a8c-section-title"} -->
<h2 class="a8c-section-title"><em>About us</em></h2>
<!-- /wp:heading -->

<!-- wp:paragraph {"className":"a8c-section-text"} -->
<p class="a8c-section-text">At Doyle &amp; Doyle we are committed to providing the highest level of service and best possible outcomes for our clients. We take the time to develop a close relationship and understand each client's unique legal needs. We pride ourselves on prompt, clear, and efficient communication. We're always striving to deliver creative, practical solutions to our client's legal issues.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>We have over 20 years of experience in providing exceptional legal services to individuals and small businesses offering a range of services in the areas of personal injury law, international business law, divorce law, criminal defense, and immigration.</p>
<!-- /wp:paragraph --></div></div>
<!-- /wp:media-text -->

<!-- wp:cover {"url":"https://freeplantest.files.wordpress.com/2020/09/bill-oxford-oxghu60nwxu-unsplash.jpg","id":62,"dimRatio":70,"className":"a8c-section"} -->
<div class="wp-block-cover has-background-dim-70 has-background-dim a8c-section" style="background-image:url(https://freeplantest.files.wordpress.com/2020/09/bill-oxford-oxghu60nwxu-unsplash.jpg)"><div class="wp-block-cover__inner-container"><!-- wp:heading {"align":"center","className":"a8c-section-long-title"} -->
<h2 class="has-text-align-center a8c-section-long-title"><em>Schedule a free consultation</em></h2>
<!-- /wp:heading -->

<!-- wp:buttons {"align":"center"} -->
<div class="wp-block-buttons aligncenter"><!-- wp:button {"backgroundColor":"secondary","align":"center","className":"a8c-section-link-text"} -->
<div class="wp-block-button aligncenter a8c-section-link-text"><a class="wp-block-button__link has-secondary-background-color has-background">Contact us</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons --></div></div>
<!-- /wp:cover -->

<!-- wp:group {"className":"a8c-section-group","style":{"color":{"background":"#fff3e4"}}} -->
<div class="wp-block-group a8c-section-group has-background" style="background-color:#fff3e4"><div class="wp-block-group__inner-container"><!-- wp:spacer {"height":64} -->
<div style="height:64px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->

<!-- wp:heading {"align":"center","className":"a8c-section-title"} -->
<h2 class="has-text-align-center a8c-section-title"><em>Services</em></h2>
<!-- /wp:heading -->

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

<!-- 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 -->
<div class="wp-block-jetpack-layout-grid-column wp-block-jetpack-layout-grid__padding-none"><!-- wp:heading {"level":4,"className":"a8c-section-column-title"} -->
<h4 class="a8c-section-column-title"><em>Personal Injuries</em></h4>
<!-- /wp:heading -->

<!-- wp:paragraph {"className":"a8c-section-column-text"} -->
<p class="a8c-section-column-text">At Doyle &amp; Doyle we have a friendly and approachable team of injury lawyers, who will guide you through the process of making a personal injury compensation claim resulting from all sorts of circumstances.</p>
<!-- /wp:paragraph --></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:heading {"level":4,"className":"a8c-section-column-title"} -->
<h4 class="a8c-section-column-title"><em>Immigration Law</em></h4>
<!-- /wp:heading -->

<!-- wp:paragraph {"className":"a8c-section-column-text"} -->
<p class="a8c-section-column-text">We represents individuals, families, and businesses who require guidance through the complexities of immigration law. We assist with all types of visa applications. </p>
<!-- /wp:paragraph --></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:heading {"level":4,"className":"a8c-section-column-title"} -->
<h4 class="a8c-section-column-title"><em>Criminal Defence</em></h4>
<!-- /wp:heading -->

<!-- wp:paragraph {"className":"a8c-section-column-text"} -->
<p class="a8c-section-column-text">Our expertise is in all areas of Criminal Law. We provide our clients with expert legal counsel and quality representation in every situation.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:jetpack/layout-grid-column --></div>
<!-- /wp:jetpack/layout-grid -->

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

<!-- wp:buttons {"align":"center"} -->
<div class="wp-block-buttons aligncenter"><!-- wp:button {"backgroundColor":"secondary","textColor":"background"} -->
<div class="wp-block-button"><a class="wp-block-button__link has-background-color has-secondary-background-color has-text-color has-background">Learn more</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons --></div></div>
<!-- /wp:group -->

<!-- wp:cover {"url":"https://freeplantest.files.wordpress.com/2020/09/alvaro-serrano-hjwkmkehbco-unsplash.jpg","id":63,"dimRatio":70,"className":"a8c-testimonials"} -->
<div class="wp-block-cover has-background-dim-70 has-background-dim a8c-testimonials" style="background-image:url(https://freeplantest.files.wordpress.com/2020/09/alvaro-serrano-hjwkmkehbco-unsplash.jpg)"><div class="wp-block-cover__inner-container"><!-- wp:spacer {"height":64} -->
<div style="height:64px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->

<!-- wp:heading {"align":"center","className":"a8c-testimonials-title"} -->
<h2 class="has-text-align-center a8c-testimonials-title"><em>Testimonials</em></h2>
<!-- /wp:heading -->

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

<!-- wp:jetpack/layout-grid {"gutterSize":"huge","column1DesktopSpan":5,"column1DesktopOffset":1,"column1TabletSpan":4,"column1MobileSpan":4,"column2DesktopSpan":5,"column2TabletSpan":4,"column2MobileSpan":4,"column3DesktopOffset":3,"className":"column1-desktop-grid__span-5 column1-desktop-grid__start-2 column1-desktop-grid__row-1 column2-desktop-grid__span-5 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 alignfull column1-desktop-grid__span-5 column1-desktop-grid__start-2 column1-desktop-grid__row-1 column2-desktop-grid__span-5 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-block-jetpack-layout-gutter__huge"><!-- wp:jetpack/layout-grid-column -->
<div class="wp-block-jetpack-layout-grid-column wp-block-jetpack-layout-grid__padding-none"><!-- wp:paragraph {"className":"a8c-testimonials-text"} -->
<p class="a8c-testimonials-text">I cannot begin to express my thanks and gratitude to you for the great result you achieved in my case.&nbsp;I felt safe and understood. The professionalism, care, and consideration for my needs has been superb. I will be recommending you to every person I know looking for legal help in the future!</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"className":"a8c-testimonials-author"} -->
<p class="a8c-testimonials-author"><em>— Kristin Smith</em></p>
<!-- /wp:paragraph --></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:paragraph {"className":"a8c-testimonials-text"} -->
<p class="a8c-testimonials-text">I was extremely happy with the way my case was handled and the result achieved. Throughout the process everyone at Doyle &amp; Doyle was professional, polite, and friendly.&nbsp;I could not have asked for anyone better to represent and support me.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"className":"a8c-testimonials-author"} -->
<p class="a8c-testimonials-author"><em>— Sean Murphy</em></p>
<!-- /wp:paragraph --></div>
<!-- /wp:jetpack/layout-grid-column --></div>
<!-- /wp:jetpack/layout-grid -->

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

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

<!-- wp:group {"backgroundColor":"foreground-dark"} -->
<div class="wp-block-group has-foreground-dark-background-color has-background"><div class="wp-block-group__inner-container"><!-- wp:spacer {"height":64} -->
<div style="height:64px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->

<!-- wp:heading {"align":"center","className":"a8c-section-title"} -->
<h2 class="has-text-align-center a8c-section-title"><em>Contact</em></h2>
<!-- /wp:heading -->

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

<!-- wp:paragraph {"align":"center"} -->
<p class="has-text-align-center"><a href="mailto:mail@example.com">mail@example.com</a><br>+1 123 456 789</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"align":"center"} -->
<p class="has-text-align-center">99 Wythe Avenue<br>Brooklyn, NY 11249</p>
<!-- /wp:paragraph -->

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

<!-- wp:spacer {"height":64} -->
<div style="height:64px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer --></div></div>
<!-- /wp:group --></div>
<!-- /wp:jetpack/layout-grid-column --></div>
<!-- /wp:jetpack/layout-grid -->

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

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

And it's the same in Firefox, Safari, Chrome.

I don't have any RTL settings enabled, this is stock docker/gutenberg master.

[jasmussen]

Alright, it appears that there was something my own custom WordPress theme caused in terms of interference, because it works fine when I use TwentyNineteen or TwentyTwenty. Closing this one for now, but will add a comment if I figure out which part of my theme broke it.

[jasmussen]

Yep, this one is definitely my fault. I had some debugging CSS left in my theme code:

.wp-block {
	grid-column-start: content-start;
	grid-column-end: content-end;
}

@media only screen and ( max-width: 480px ) {
	.wp-block {
		grid-column-start: full-start;
		grid-column-end: full-end;
	}
}