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

Gutenberg Plugin 11.0.0 - Editor changing line-height and color, not WordPress's default #31211

Closed
cngodles opened this issue Apr 26, 2021 · 4 comments
Labels
CSS Styling Related to editor and front end styles, CSS-specific issues.

Comments

@cngodles
Copy link

cngodles commented Apr 26, 2021

Description

The Block Editor font has had its line-height and color altered from its default. There appear to be modifications in reset.css that affect the editing experience only when the plugin is enabled. This is affecting at the very least the Paragraph, the List, and perhaps the Header block.

reset.css seems to be effecting the color

image

And the line-height.

image

I originally reported this in #30046 with the primary callout being the displayed font. That appears to have been corrected, however since the line-height and color are still an issue, I am opening up this separate issue.

When I deactivate the plugin, the fonts show correctly.

Here are Chrome's computed values for the paragraph block. The enabled plugin (top) vs the disabled plugin (bottom).

image

Step-by-step reproduction instructions

  1. Update/Enable Gutenberg Plugin 10 (10.4.1)
  2. Open the WordPress Gutenberg editor for any page or post.

Expected behavior

The values for line-height and color should be the same as the WordPress 5.7.1 experience, without the Gutenberg plugin installed and enabled.

Actual behavior

Fonts are appearing using the default system serif font.

WordPress information

  • WordPress version: 5.7.2
  • Gutenberg version: 10.6.2
  • Are all plugins except Gutenberg deactivated? No.
  • Are you using a default theme (e.g. Twenty Twenty-One)? No. Using the Dollah Theme.

Device information

  • Device: Desktop
  • Operating system: Windows 10
  • Browser: Chrome Latest. Version 92.0.4515.107 (Official Build) (64-bit)
@paaljoachim paaljoachim added the CSS Styling Related to editor and front end styles, CSS-specific issues. label May 6, 2021
@cngodles cngodles changed the title Gutenberg Plugin 10.4.1 - Editor changing line-height and color, not WordPress's default Gutenberg Plugin 10.6.1 - Editor changing line-height and color, not WordPress's default May 20, 2021
@cngodles
Copy link
Author

Retested in 10.6.2, the issue still exists.

@cngodles cngodles changed the title Gutenberg Plugin 10.6.1 - Editor changing line-height and color, not WordPress's default Gutenberg Plugin 10.6.2 - Editor changing line-height and color, not WordPress's default May 20, 2021
@skorasaurus
Copy link
Member

still exists in 11.

@cngodles cngodles changed the title Gutenberg Plugin 10.6.2 - Editor changing line-height and color, not WordPress's default Gutenberg Plugin 11.0.0 - Editor changing line-height and color, not WordPress's default Jul 12, 2021
@cngodles
Copy link
Author

cngodles commented Aug 4, 2021

I'm going to say that this has made it into WordPress 5.8. I am running into this on two very different installs. One has the template I originally described, the other is a custom template that makes no use of any sort of special font formatting.

This issue now occurs without the plugin enabled. It's a highly critical degradation of the intended Gutenberg editing experience.

line-height

I am getting this line-height, which I think takes away from the WordPress editing experience the most.

image

The original editor-style line-height was the 28.8px style, which I felt was the heart of the default Gutenberg editing experience.

color

Also the color. It has been set to rgb(0,0,0), whereas the original experience was rgb(30,30,30).

image

@cngodles
Copy link
Author

This is fixed by #34439. The problem still exists in the core, but it looks like a solution is coming with 5.9.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
CSS Styling Related to editor and front end styles, CSS-specific issues.
Projects
None yet
Development

No branches or pull requests

3 participants