Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

FSE: Fix editor frame styles after Gutenberg update. #37694

Merged
merged 1 commit into from
Nov 19, 2019

Conversation

noahtallen
Copy link
Member

With the latest Gutenberg updates, there have been some changes to the editor styles (#). Essentially, this means that Gutenberg dislikes our frame/margin around the border of the editor much more than it did previously. I have tried to work around that as much as I can in this PR. It's not perfect, but I think it's a big improvement. Mobile styles aren't quite perfect, but they aren't that great in Gutenberg either.

Changes proposed in this Pull Request

Breakpoint Before After
Desktop Screen Shot 2019-11-18 at 4 08 27 PM Screen Shot 2019-11-18 at 4 07 02 PM
Tablet Screen Shot 2019-11-18 at 4 08 38 PM Screen Shot 2019-11-18 at 4 07 16 PM
Smaller tablet Screen Shot 2019-11-18 at 4 08 47 PM Screen Shot 2019-11-18 at 4 07 32 PM
Mobile Screen Shot 2019-11-18 at 4 17 04 PM Screen Shot 2019-11-18 at 4 17 26 PM

Testing instructions

  1. Pull these changes (local environment is fine) and try different layouts in the page and template part editors.
  2. Try the changes at different breakpoints
  3. Verify that the styles look better than before.

If you have any tips for how to fix some of the mobile styling, please let me know 😬

Fixes #37686

@noahtallen noahtallen added [Pri] BLOCKER [Status] Needs Review The PR is ready for review. This also triggers e2e canary tests and wp-desktop tests automatically. [Goal] Full Site Editing labels Nov 19, 2019
@noahtallen noahtallen requested review from a team as code owners November 19, 2019 00:21
@noahtallen noahtallen self-assigned this Nov 19, 2019
@matticbot
Copy link
Contributor

@matticbot
Copy link
Contributor

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.

Copy link
Contributor

@Copons Copons left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This LGTM and works as expected.
I've also tested full-width blocks (such as Site Description) inside a Cover block in a Template Part, and they aren't truncated anymore.

I think this is also an improvement over the previous versions, in that it seems there are less magic numbers! 😄

@Copons Copons merged commit fec8a34 into master Nov 19, 2019
@Copons Copons deleted the fix/editor-frame-styles-fse branch November 19, 2019 16:22
@matticbot matticbot removed the [Status] Needs Review The PR is ready for review. This also triggers e2e canary tests and wp-desktop tests automatically. label Nov 19, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

FSE: Shawburn and Exford cover blocks extend past the editor border
3 participants