FSE Plugin: Collage-Gallery block pattern preview does not match what is actually rendered

[jeyip]

Steps to reproduce

• Navigate to my sites -> posts -> Add new post
• Open Gutenberg Inserter
• Click on Block Patterns Tab
• Review scaled block pattern previews

What I expected

The collage gallery block pattern preview looks like what is displayed in the Gutenberg editor.

What happened instead

The collage gallery preview displays a different layout than what is shown in the editor. (What is shown in the editor is the correct formatting)

Browser / OS version

• Chrome
• Firefox
• Safari

Screenshot / Video

Context / Source

This bug was identified while fixing block pattern preview scaling. It was determined that the issue we describe here was a unique enough to warrant a separate pull request. #43362

[jeyip]

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 the reset 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.

[github-actions]

This issue is stale because it has been 180 days with no activity. You can keep the issue open by adding a comment. If you do, please provide additional context and explain why you’d like it to remain open. You can also close the issue yourself — if you do, please add a brief explanation and apply one of relevant issue close labels.