Published on Sep 13, 2019

How to fix Gutenberg editor overlap issue in Chrome 77

Sridhar Katakam

The recent update of Google Chrome 77 has broken the layout of webpages in Gutenberg and elsewhere where a height of 100% applies in the CSS.

Here’s how this can be fixed for Gutenberg editor so the entry content can be seen again.

But first, before and after screenshots.

Before:

After:

Step 1

The following code can go inside your active theme’s functions.php or a custom functionality plugin or in a snippet using the Code Snippets plugin.

Install and activate Code Snippets plugin.

Go to Snippets > Add New.

Title: Fix Gutenberg editor issue with Chrome 77

Code:

/**
* Modify the height of a specific CSS class to fix an issue in Chrome 77 with Gutenberg.
*
* @see https://github.com/WordPress/gutenberg/issues/17406
*/
add_action(
'admin_head',
function() {
echo '<style>.block-editor-writing-flow { height: auto; }</style>'; // phpcs:ignore
}
);

Credit: James Burke via.

tagschevron-leftchevron-rightchainangle-rightangle-upangle-downfolder-omagnifiercrossmenuchevron-downarrow-right