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.



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


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

Credit: James Burke via.

Need help implementing a tutorial in your site or want to hire me for custom work?


Find the article helpful and wish to donate?

linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram
%d bloggers like this: