Modify Block Pattern Preview Viewport

[jeyip]

Changes proposed in this Pull Request

Fixes #42165. Increase viewport width of block pattern previews for better preview scaling

Screenshots

Before Example

After Example

Testing

Instructions

• Set up sandbox
  • simple site with block pattern preview updates
    1. Sandbox simple site
    2. Checkout this branch in wp-calypso repo
    3. Sync the local dev environment with cd apps/full-site-editing; yarn dev --sync More info in PCYsg-ly5-p2 #build-scripts
  • atomic site with block pattern preview updates
    1. Create ephemeral atomic site
    2. Checkout this branch in your local wp-calypso repo
    3. Sync full site editing plugin updates with atomic site. More info in PCYsg-ly5-p2 #atomic-testng
• Navigate to my sites -> posts -> Add new post
• Open Gutenberg Inserter
• Click on Block Patterns Tab
• Review scaled block pattern previews

Requirements

• Editor loads without white screen of death
  • With the Gutenberg plugin enabled and the FSE plugin enabled.
  • With the Gutenberg plugin disabled and the FSE plugin enabled.
• All block pattern previews are scaled properly
  • On atomic sites
  • On simple sites

Browsers

• Firefox
• Safari
• Chrome
• Edge

[matticbot]

Test live: https://calypso.live/?branch=update/block-pattern-preview-scaling

[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.

[matticbot]

Caution: This PR affects files in the FSE Plugin on WordPress.com
Please ensure your changes work on WordPress.com before merging.

D45031-code has been created so you can easily test it on your sandbox. See this FieldGuide page about developing in the FSE Plugin for more info: PCYsg-ly5-p2

[jeyip]

Let me know if the testing instructions need more clarification.

[Addison-Stavlo]

Nice! I think pattern designers need to definitely start adding a viewportWidth value that makes sense for the specific pattern (they probably all shouldn't be the same value).

Taking a quick look at some of the core patterns viewport width settings:

• A handful seem to be set at 500
• A couple set at 1000
• A bunch are still undefined

It looks like the default for undefined is 700:
https://github.com/WordPress/gutenberg/blob/9c256e3ae8bb715a9a863e7081df479acde71666/packages/block-editor/src/components/block-preview/index.js#L22

Since all of these were previously undefined, we have jumped from 700 to 1280. 1280 may be unfittingly wide to view some of the smaller scoped patterns. (The largest I saw in the core list was 1000, but that doesn't mean 1280 couldn't be a practical value for some patterns.)

We may want to set these values differently on an individual basis, but will probably need some collaboration with design to figure out which values make sense for which patterns. 🤔 Maybe if we go with supporting 3 sizes (500, 700, 1000) for general cases, dividing the current list up into those groups shouldn't bee too bad to figure out?

[jeyip]

@Addison-Stavlo

I think pattern designers need to definitely start adding a viewportWidth value that makes sense for the specific pattern (they probably all shouldn't be the same value).

We may want to set these values differently on an individual basis, but will probably need some collaboration with design to figure out which values make sense for which patterns.

Great observations. I totally agree 👍

@iamtakashi had suggested trying 1280 with all patterns, but I expect those numbers to change as well.

[iamtakashi]

@jeyip Thanks for working on this! The patterns look much better in the preview now.

There have been new patterns added and shipped with FSE 1.10.0. Can you also do the same thing for those patterns?

I've tested with a Simple site in the 4 browsers mentioned above. And it mostly looked good.

The only thing that I've noticed was the collage-gallery didn't seem different from before this change. And it looks different from how it should look with 1280 viewport. Any guess why?

[jeyip]

There have been new patterns added and shipped with FSE 1.10.0. Can you also do the same thing for those patterns?

I'm on it!

The only thing that I've noticed was the collage-gallery didn't seem different from before this change. And it looks different from how it should look with 1280 viewport.

I'll take a look at the HTML markup used for the preview. @iamtakashi Would you mind sending a screenshot of collage-gallery to confirm what it should look like at 1280?

[ianstewart]

a screenshot of collage-gallery to confirm what it should look like at 1280?

[Addison-Stavlo]

And it looks different from how it should look with 1280 viewport. Any guess why?

I was poking around for a bit regarding this and I am a bit confused as to why this might be as well. Just looking at how other patterns change with viewportWidth it seems like these coblocks galleries have very little change in the preview between 700 and 3000 (maybe something to do with them in general?). Or maybe this has something to do with how the bullet points for the list items are interacting with other spacing in the previews.

I notice these bullet points to the left of the images in the editor (but not on the reference @ianstewart provided above):

If these are not intended, maybe they could be the culprit for the unintended spacing in the preview? 🤔

[jeyip]

Good observations @Addison-Stavlo. I'll keep the bullet points in mind as I revisit this PR. I actually thought this issue might also be semi-related. It looks like some block pattern preview styling isn't being applied properly

[jeyip]

It looks like this issue might have already existed in production, prior to these updates. Here's a screenshot of my editor in a personal blog with the latest version of Gutenberg and the full site editing plugin

[Addison-Stavlo]

It looks like this issue might have already existed in production, prior to these updates.

It definitely existed previously. I think the expectation was that expanding the viewportWidth to 1280 would fix this issue. Oddly, it has not for some other reasons.

---

Everything else seems to look/behave well. It sounds like everything else looks good to folks, so I think we can move forward here.

How about we create another issue for the mis-behaving pattern and add it to the board?

[jeyip]

How about we create another issue for the mis-behaving pattern and add it to the board?

That sounds good idea to me. This specific issue with the collage block warrants a lot more discussion, but I agree that it shouldn't block this PR.

It definitely existed previously. I think the expectation was that expanding the viewportWidth to 1280 would fix this issue. Oddly, it has not for some other reasons

I see! That makes sense. Thanks for clarifying @Addison-Stavlo

After some digging, I determined that the cause is a missing box-sizing property. The style is inherited by elements in the editor but not by elements in the block inserter. I verified the cause by adding box-sizing as an inline style for block pattern previews (see GIF) Once included, the preview matches the rendered output.

Here's a link to the actual styles:
gutenberg/packages/edit-post/src/style.scss:61
gutenberg/packages/base-styles/_mixins.scss:397

Some remaining questions I have that can be addressed when we create a new issue:

1. My intuition says that global styles for previews and editor content should be as similar as possible. Was applying box-sizing styles to the editor and not the inserter deliberate?
2. Who would be the best person to consult about making changes to these global styles?

The alternative is to add box-sizing as an inline style to block pattern previews. That, however, seems susceptible to problems in the future if CSS styles continue to diverge.

[jeyip]

@ianstewart @iamtakashi

Let me know if there are any concerns. Otherwise, I'll go with Addison's suggestion, merge these changes tomorrow, and create a separate issue for the collage block.

[iamtakashi]

@jeyip @Addison-Stavlo Thank you both for looking into the issue with the preview with the collage gallery block.

Yes, I agree. It makes sense to tackle the issue separately and merge these changes!

[iamtakashi]

I also agree that the preview and the editor should be as close as possible. Maybe, it'd be best to report & contribute a change in Gutenberg plugin repo unless this is a dotcom specific issue?

[Addison-Stavlo]

My intuition says that global styles for previews and editor content should be as similar as possible. Was applying box-sizing styles to the editor and not the inserter deliberate?
Who would be the best person to consult about making changes to these global styles?

Im assuming its not deliberate that the inserter previews are missing the box-sizing style, but maybe there is more history there I am unaware of. I wonder if @youknowriad or @nosolosw may have more insight here (or know of someone who might?), but we should probably open an issue in core regarding the lack of style parity (#43362 (comment)) between previews and editor.

A side note for clarity / future info - the term 'global styles' is often used to refer to a user facing system to apply font types, sizes, etc. globally across a users website. But I think its clear that we aren't currently talking about that here. 😄

[jeyip]

Waiting for the Calypso queue to clear up before merging

[jeyip]

I created a separate issue in core Gutenberg for the collage-gallery block WordPress/gutenberg#23434