How to Fix Chrome 77 Breaking Gutenberg Editor

Chrome 77 breaking Gutenberg editor layout issue is all over the Internet now. With the recent update of Chrome version 77. It has caused WordPress's Gutenberg editor break. The layout is completely broken where Gutenberg is enabled. Overlapping boxes with each other.

Chrome 77 breaking Gutenberg
Chrome 77 breaking Gutenberg editor layout.

How to Fix Gutenberg on Chrome 77

So the fix is rather easy.

You will need to add a simple line of code to fix the CSS Height value.

/** * 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 } );
Code Credit: jameswburke

The above code needs be active with one one of the following methods:

  • Add to your active theme’s functions.php
  • Use custom functionality plugin
  • Use snippet using the Code Snippets plugin.

And you're done. Now Gutenberg editor will load as usual, running on Chrome 77.

Here's the after image of the Gutenberg editor fixed. Running on Chrome 77

For any questions, leave a comment below.

5/5 (1 Review)

Leave a Reply

Your email address will not be published. Required fields are marked *

2 comments on “How to Fix Chrome 77 Breaking Gutenberg Editor”