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

Penscratch: Update editor styles #3285

Merged
merged 7 commits into from
Feb 22, 2021
Merged

Conversation

scruffian
Copy link
Member

Changes proposed in this Pull Request:

Updates editor styles so that they work with Gutenberg 9.9.

It would be better to just use the normal theme styles but the classes in Gutenberg don't match the front end :(

Related issue(s):

Part of #3280

@scruffian scruffian requested a review from a team February 16, 2021 16:33
@scruffian scruffian self-assigned this Feb 16, 2021
Copy link
Contributor

@jffng jffng left a comment

Choose a reason for hiding this comment

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

Same as #3284, works locally but cannot verify on wpcom.

@scruffian
Copy link
Member Author

I updated this to:

  • Reference the files with a local reference not a URL
  • Queue all CSS in the editor, not just the editor blocks
  • Add a rule to make the body of the editor white
  • Remove CSS selectors that aren't needed and update old ones to new ones...

@MaggieCabrera
Copy link
Contributor

Looks like the headings are not working on the editor:

Frontend Editor
Screenshot 2021-02-18 at 11 36 14 Screenshot 2021-02-18 at 11 36 10

@scruffian scruffian force-pushed the update/penscratch-editor-styles branch from 0912a97 to 8efa4c4 Compare February 18, 2021 11:28
@scruffian
Copy link
Member Author

I took a different approach with this. I have removed almost all editor styles, and just kept one for the body content.

This meant that the reset was leaking into the editor and breaking buttons. I have removed the reset from the main stylesheet and queued it separately in the front end.

.editor-default-block-appender textarea.editor-default-block-appender__content {
font-family: "Roboto Slab", Georgia, Times, serif;
body {
background: #fff;
Copy link
Contributor

Choose a reason for hiding this comment

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

It's kind of a shame that this line is needed just to override the default background color, otherwise we could get rid of this file entirely.

Copy link
Member Author

Choose a reason for hiding this comment

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

We could add a Gutenberg class to the CSS that targets the site content, but I don't want to start mixing editor CSS into the main file.

@jffng
Copy link
Contributor

jffng commented Feb 18, 2021

The fonts are loading correctly but I noticed some regressions and styles leaking into the editor UI:

Before This PR
Screen Shot 2021-02-18 at 11 28 04 AM Screen Shot 2021-02-18 at 11 29 16 AM

@scruffian scruffian force-pushed the update/penscratch-editor-styles branch from 8ec2f6f to 7868bf3 Compare February 18, 2021 17:22
@scruffian
Copy link
Member Author

Thanks for testing. I moved the form CSS into a separate file, which fixes the problems you found.

Copy link
Contributor

@MaggieCabrera MaggieCabrera left a comment

Choose a reason for hiding this comment

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

I think this is ready to ⛵

@scruffian scruffian merged commit 83fd3a7 into trunk Feb 22, 2021
@scruffian scruffian deleted the update/penscratch-editor-styles branch February 22, 2021 09:42
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants