PIT Designs Logo

How to Fix Chrome 77 Breaking Gutenberg Editor

I'm the owner and founder of PIT Designs. I love creating digital presence and creative digital solutions for our clients.


Posted 2 years ago on September 13th, 2019.

Related To:

Tags: |

pCloud Lifetime Up to 35% OFF AliDropship Plugin

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.

Do we all agree that Coffee is the fuel that feeds the free content creating?
Why Does My Mac Keep Saying, Disk Full?

Is your Mac keep saying, Disk Full? Here is how you can clean junk files on Mac and optimize your computer manually or with the best Mac Uninstaller

5 Commonly used materials for sticker printing

commonly used materials for sticker printing, ideal uses. Exactly what to look out for and can get your perfect custom sticker in record time

How to Effectively Optimize Your Ecommerce Website for Voice Search

This article offers tips on how to optimize your ecommerce website for voice searches. It covers the importance of keyword research, optimizing your product page, and more.

The Most Expensive House in Dubai

The most expensive home in Dubai, located in one of the most exclusive neighborhoods. It has all the amenities you would expect from a luxury property

Top Premium Stock Images Websites

Find our where you can find premium stock images, in high definition for your blog posts, website designs, or social media

How to Build an Engaging UI-UX Design Website

Do you know that your website speaks on your behalf? Well, this is one of the most powerful marketing tools […]

3 Common Types of WordPress Attacks and Mitigation Steps

Have you ever wondered why WordPress (WP) is a primary target for attacks? Well, news has it that WordPress powers […]