Gutenboarding: upgraded design screenshots

[simison]

Changes proposed in this Pull Request

Re-ran the script to generate screenshots (while testing #43559).

To review, I recommend some tool such as Github desktop that shows image differences side-by-side. Sadly Github itself doesn't. :-(

Ah screw that, I'm just gonna screenshot all these:

Preview links, screenshots and notes for each design

See screenshots (these are outdated, see latest comments for fresh ones

Vesta

Bolded title (this is in many designs so I'm not gonna mention it again)

Balasana

Different spacing

Barnsbury

Underlined title, side-spacing gone.

Bowen

Underline

Coutoire

Doyle

Side margin issue.

Easley

Side margin issue.

Edison

Rivington

Rockfield

💥 prolly needs similar treatment to D45189-code

Stratford

Image showed up.

Cassel

Camdem

Reynolds

Overton

Brice

Alves

Mayland

Maywood

Leven

Gibbs

The two FSE demos we can probably ignore for now:

• Reynolds (FSE)
• Vesta (FSE)

Testing instructions

See designs step at /new

@ianstewart could you look these through and see if some of the changes are problems or is everything expected? I didn't have time to look into previews nor real sites yet if the problems are present in those too.

[matticbot]

Test live: https://calypso.live/?branch=gutenboarding/update-screenshots

[matticbot]

This PR does not affect the size of JS and CSS bundles shipped to the user's browser.

Generated by performance advisor bot at iscalypsofastyet.com.

[ianstewart]

could you look these through and see if some of the changes are problems or is everything expected?

Only the side-margin issues with Doyle and Easly and the giant hand of Rockfield are unexpected.

[ramonjd]

Only the side-margin issues with Doyle and Easly and the giant hand of Rockfield are unexpected.

I had to generate this one manually for #42354. I could not escape the giant hand. :(

I used this Chrome extension

[simison]

@ramonjd do you know what's going on with missing side margins in some templates? Is it a specific theme broken somehow? Cc @kjellr

[andrewserong]

@simison could the side margins be related to the recent Layout Grid version bump? (I haven't checked the changelog, but it just occurred to me because of the issue we had with enqueuing the CSS for the template/demo endpoint)

[simison]

could the side margins be related to the recent Layout Grid version bump?

@Automattic/tinker 👋 know about any changes that might've affected? We had this suspicion once before but found it to be issue in Gutenberg core instead.

cc @youknowriad any editor margin changes in core that might've broken things?

Edit: I tested that this happens also with Group block in full-width mode, so looks like it's a core issue.

Example breakage:

Not sure why it's only these two designs.

[jasmussen]

@simison could it be WordPress/gutenberg#23386 or WordPress/gutenberg#22213?

[simison]

@jasmussen .com runs Gutenberg 8.3 though — if I understand correct, those would affect only 8.4?

[jasmussen]

Indeed :|

Is that the Layout Grid block used in those screenshots, and does it appear related to that? We have some end-gutter paddings for that block which may have a bug, if it's layout-grid only.

[johngodley]

We do have a report of the outmost gutter being missing in the Layout Grid, but in the editor only, not the front end: Automattic/block-experiments#103

Edit: I tested that this happens also with Group block in full-width mode, so looks like it's a core issue.

I'm not sure of the timeline of this edit. Do we suspect the grid block still?

[johngodley]

In terms of changes to the grid block, the recent update was fairly minor and focussed on the editor only.

• Fix block inserter to show inside a grid column
• Fix vertical margin in editor so it better matches the display
• Fix CSS loading so it is only added when block is used
• Fix grid lines appearing when inner block is selected

[sirreal]

I recall similar issues recently and dug up these diffs that may be related:

• D42350-code
• D42335-code

[razvanpapadopol]

@johngodley I can confirm the side margin issue being discussed here is related to Automattic/block-experiments#103

After some investigation I see the following styles are not loaded inside the editor but are loaded on the frontend, as opposed to the comment at the top of the file:
https://github.com/Automattic/block-experiments/blob/master/blocks/layout-grid/style.scss#L16-L17

[simison]

@johngodley @jasmussen could you look into style-loading issue in the layout-grid block? Seems like something is going on there.

A few days ago we had to hot-fix this for the previews too (D45267-code) and in initial investigation it seemed like it would be previews-issue, but perhaps it's more wider problem?

Thanks for investigation @razvanpapadopol !

[johngodley]

@simison sure, it's being tracked in Automattic/block-experiments#103. It doesn't affect the front end.

[johngodley]

Noting that the style difference in the editor for the layout grid is now resolved.

[simison]

I regenerated screenshots so this now has latest, and I'm just excluding the "large hand" rockfield_rockfield_rockfield.jpg.

See screenshots

[ramonjd]

and I'm just excluding the "large hand"

THE HAND OF DOOM!

[ramonjd]

Yoda says TMLG!