Bug with Gutenberg editor font size

Hello @idearius

Tried checking on local but unable to replicate the issue.
Kindly share the snapshot, page URL and steps to replicate the issue.

I had the same issue with the Gutenberg editor: the font-sizes in the editor got larger and larger, making it impossible to do any writing on blog posts.

I don’t know the exact cause of this, other than it has to do with Gutenberg apply CSS from OceanWP’s settings in the customizer. Normally this is a good thing because it allows your editor to replicate the exact CSS on your front end, but something about OceanWP’s implementation is buggy.

Here’s the solution to this problem:
1. Download the Stylus addon for Chrome or Firefox. This addon allows you to modify the CSS of any site you see and the changes are only applied to your current computer.

2. Once Stylus is installed, add the required CSS that fixes the weird font-size bugs in the Gutenberg editor. In my case, I only needed to add the following lines in Stylus but your version of WordPress/Gutenberg/OceanWP might be different (just use your browser’s built-in page inspector to look at the CSS to find the matching selectors):

/* The Gutenberg Editor for WordPress inherets CSS from OceanWP Theme which causes bugs, e.g. enormous font-size settings. */
.interface-interface-skeleton__content .block-editor .editor-styles-wrapper .editor-post-title__block .editor-post-title__input {
    font-size: 30px;
}
.interface-interface-skeleton__content .wp-block {
    font-size: 20px ! important;
}

I’m being lazy here and applying a font-size of 20px for ALL the editor contents, so everything from a paragraph to headings with be set to 20px. If you are less lazy than me, you can apply different CSS for separate html elements like h1,h2,h3,h4, etc.

In the selectors above, I’ve added selectors to make sure the declarations only apply to the gutenberg editor and nothing else on the edit page. Additionally, I’ve set up Stylus to limit the CSS to my blog domain by using the “Applies to” at the bottom of the Stylus editor.

This is a temporary fix in that it doesn’t solve the underlying issues, but it’s much faster and easier to solve than trying to figure out wtf Gutenberg+OceanWP is up to.

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

I had the problem too and I think I know what caused the problem. I added “1.5em” to the typography > body > font size field and it caused all the text in the gutenberg editor to be HUGE! I changed this value back to 14px and everything went back to normal.