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.

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

HIRE ME

Find the article helpful and wish to donate?

DONATE

Comments

For adding code blocks wrap the code in three backticks. Markdown should work.
Provide a URL of your site/webpage if something is not working.
magnifiercross
>
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram
%d bloggers like this: