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 3 years ago on September 13th, 2019.

Related To:

Tags: |
How a Rephraser can Help you Improve your Social Media Presence

Having a problem with your social media content? Too much competition to deal with? Worry not! Here is how a Rephraser can help.

How Automation Software Help with Payroll Processing

Automation software greatly reduces payroll processing errors, enhances compliance, increases efficiency, and makes paychecks easier to create and file. Automation […]

How To Stay Safe While Surfing The Internet

The Internet is a part of our everyday life nowadays. Every day we spend a good amount of time on […]

Business Books Entrepreneurs Must Read to Dominate Their Industry

Whether you aspire to start a small business or launched a digital marketing agency, you must spend sufficient time reading […]

The Creative Entrepreneur: Exploring Career Opportunities for Innovators and Problem-Solvers

All entrepreneurs need problem-solving and innovative skills. Finding solutions or creating new possibilities is accomplished through problem-solving. The ability to […]

Top 2D Animation Tools in 2023

Shopping for 2D animation software for your next project? Here are five of the best 2D Animation tools that are worth exploring.

Is Link Building Essential for WordPress Website

In current digital marketing, inbound link creation directly correlates with online success. Link building is all about gaining inbound connections, […]

What and How Web-Based CRM Matter for Your Business

As a business owner, you know that maintaining strong customer relationships is crucial for success. A customer relationship management (CRM) […]

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.