Bug with Gutenberg editor font size

Oh, phew, it’s not just me! I had been cleaning up plugins and thought I’d been overzealous. Looking forward to advice.

Admins and theme’s devs : any reaction pls ?

I’m happy to share a couple of screenshots if anyone can tell me how to post them. This bug makes editing quite difficult, if not impossible, especially if there are columns in the page. OceanWP has been a good theme for us but not workable if it’s not fixed.

Hello,

We’re really sorry to hear about the issues and would be more than happy to check and also address everything.

Kindly share all steps to replicate, and you can also share screenshots from google drive or some other service, that I can send to our developers.

Thank you all for your time and help in advance

Steps :
1. Log in into WordPress with admin rights
2. Update WPOcean to 2.0.4
3. Open any page or article written
4. Editor opens

Symptoms :
All fonts into the editor space are 180% bigger, which makes the editor unusable

Details :
1. When looking at the editor source code, find this at line 513:
<style id="ocean-gutenberg-style>; /* OceanWP Gutenberg Style */.block-editor .editor-styles-wrapper, .block-editor .editor-styles-wrapper .block-editor-block-list__layout{font-family:Miriam Libre;<strong>font-size:180%</strong>;color:#4054b2;}
2. Modifying those “180%” into console modify the editor’s font size

• This reply was modified 3 years, 7 months ago by reboltof.
• This reply was modified 3 years, 7 months ago by reboltof.

Reboltof, thank you for that workaround which I had not thought of.

Abhishek, I have the same set of steps as Reboltof. You just open up the editor for pages or posts and it’s huge. Fortunately this doesn’t affect the published page.

Mary

Oh, and it’s only the editing section that’s huge. The sidebar and header of the edit screen are normal.

Here are screenshots:

User-facing page https://drive.google.com/file/d/1MgNmO6oUl1ERFScPZ-FHFPoBeb0upOBy/view?usp=sharing
Edit-mode page https://drive.google.com/file/d/1-M43ay0lcrJFLA2RFXvMF3-lAcHTU9ZJ/view?usp=sharing

Hello

@reboltof Thank you so much for sharing the steps, no one else reports such an issue. Followed the above steps and we’re unable to replicate it. All fonts on the backend should inherit the frontend styling, including the size.

We never use percentage for our stylesheets, checked all theme codes now, and nowhere was this added.
The stylesheet for the backend can be checked here: https://github.com/oceanwp/oceanwp/blob/master/assets/css/gutenberg/gutenberg-editor.css

There are no % values, let alone 180% values

kindly go to Appearance > Customize > typography, and check the settings for Body and headings.
Are there any custom codes perhaps added or third-party plugins?

@mollyavalon sorry but the shared images asking for access so unable to check it. Kindly update permission on files because we’re unable to view those
or share the snapshots here. https://imgbb.com/

• This reply was modified 3 years, 7 months ago by Abhishek.

Here are the screenshots. https://ibb.co/4TQdRbq
https://ibb.co/Bj7Hxjk

And here’s the style declaration in the head content. Note that the font sizes are in em, not percentages, and it’s not the same as the github style sheet.

<style id="ocean-gutenberg-style"> /* OceanWP Gutenberg Style */.block-editor .editor-styles-wrapper, .block-editor .editor-styles-wrapper .block-editor-block-list__layout{font-family:Sintony;font-weight:400;font-size:1.5em;color:#3f3f3f;}.block-editor .editor-styles-wrapper .block-editor-block-list__layout h1, .block-editor .editor-styles-wrapper .block-editor-block-list__layout h2, .block-editor .editor-styles-wrapper .block-editor-block-list__layout h3, .block-editor .editor-styles-wrapper .block-editor-block-list__layout h4, .block-editor .editor-styles-wrapper .block-editor-block-list__layout h5, .block-editor .editor-styles-wrapper .block-editor-block-list__layout h6{font-family:Sintony;}.block-editor .editor-styles-wrapper .block-editor-block-list__layout h1, .block-editor .editor-styles-wrapper .block-editor-block-list__layout h1 a{font-size:2em;}.block-editor .editor-styles-wrapper .block-editor-block-list__layout h2, .block-editor .editor-styles-wrapper .block-editor-block-list__layout h2 a{font-size:1.75em;}.block-editor .editor-styles-wrapper .block-editor-block-list__layout h3, .block-editor .editor-styles-wrapper .block-editor-block-list__layout h3 a{font-size:1.6em;}.block-editor .editor-styles-wrapper .block-editor-block-list__layout h4, .block-editor .editor-styles-wrapper .block-editor-block-list__layout h4 a{font-weight:700;font-size:1.5em;}.editor-styles-wrapper .block-editor-block-list__layout a{color:#9dc400;}.editor-styles-wrapper .block-editor-block-list__layout a:hover{color:#0b7cac;}.editor-post-title__block .editor-post-title__input{color:#333333;}</style>

Thanks Abhishek. I was able to retrieve the 180% in Appearance > Customize > typography as told. Setting it to 120% could solve the situation. It’s just it appeared with the last OceanWP update, because this “180%” setting was existing for years, without breaking the layout.

OK, I took out all my custom font sizes in Appearance -> Customize -> Typography, which didn’t make any difference to the user view, and it’s fixed. Thank you!

Hello @mollyavalon and @reboltof Really glad to hear that issue has been fixed for both of you. ??

If you are experiencing any other please let us know.

Hello, @abhikr781. I’ve been having the exact same problem.

My 1.8em setting at Appearance > Customize > Typography > Body > Font Size is being applied to the Gutenberg editor, making text huge and blocks unusable.

Most of the blocks are impossible to use as words are broken and columns overflow out of the editing area.

Leaving that field blank everything gets back to normal, but that also affects (negatively) the public side of the website, making text smaller than it used to be.

In this case, Gutenberg text is even bigger than the one shown by @mollyavalon.

Help, please?