Skip to content

Conversation

@ryelle
Copy link
Contributor

@ryelle ryelle commented Aug 18, 2022

Fixes #513 — Any styles added via gutenberg_get_layout_style will be added to the global block-supports store in the style engine (definitely new in GB 13.9, possibly from WordPress/gutenberg#42880). The pattern previews used to need a workaround to support layout width (see #428), which was generating the styles injected via window.__editorStyles. This function now also has a side effect of adding that rule to the main site too, which is breaking the admin bar.

The fix added here is to use entry-content class on the preview & thumbnail container divs, so that the theme & default styles are correctly applied. Then we can remove the call to gutenberg_get_layout_style. Removing old workarounds 👍🏻

Props kafleg, dd32

Screenshots

Before After
list-before list-after
preview-before preview-after

This also adds the block spacing between the groups ^ which matches the editor UI, so I think that's overall a good thing.

How to test the changes in this Pull Request:

  1. View the front end, the admin bar should not appear centered
  2. Create or view some patterns with varying widths
  3. The default width should be 800px wide, wide should be 1000px wide, and full width should be edge-to-edge
  4. Block spacing matches the editor
  5. There should be no regressions in style

ryelle added 2 commits August 18, 2022 16:43
This is not necessary now that the preview wrapper divs have the `entry-content` class, the default styles will apply.
@ryelle ryelle added the [Component] Theme The frontend of the pattern directory, pattern lists UI label Aug 18, 2022
@ryelle ryelle self-assigned this Aug 18, 2022
@adamwoodnz
Copy link
Contributor

Didn't quite get finished with my review this week @ryelle

The admin bar LGTM but haven't tested with many patterns as my test data is a bit limited. Maybe @dd32 has a bit more context on the old workaround and can approve?

@ryelle
Copy link
Contributor Author

ryelle commented Aug 19, 2022

I'm going to merge this then, I haven't see any issues & would like to fix the admin bar.

@ryelle ryelle merged commit b17afd5 into trunk Aug 19, 2022
@ryelle ryelle deleted the fix/gutenberg-style-bleed branch August 19, 2022 14:22
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

[Component] Theme The frontend of the pattern directory, pattern lists UI

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Preview styles are affecting the admin bar

3 participants