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

Related To:

Tags: |

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.

5/5 (1 Review)
Do we all agree that Coffee is the fuel that feeds the free content creating?
5 Easiest Ways to Create Your Ecommerce Website

You can make an ecommerce website for a brick or a packet of tablets. But what is important is how […]

Proven Tips How to Improve Your Content Strategy with Influencer Marketing

One of the best ways to improve your content marketing is with influencer marketing strategy. This will help you reach […]

How to Increase Brand Awareness with Digital Content Marketing

The digital world is more powerful than ever – and its power keeps growing. If you want to survive in […]

Why is Ethical Leadership Important in Business

How many times have we come across peer pressure and do ethically wrong things? Or Like probably favor a candidate […]

The Importance of Having a Website for Business

If you are running a business without a website, it means you are skipping the step of success. In this […]

Sustainable Workplace: How to Create a Sustainable Work Environment

The world has experienced a significant rise in global warming. And this has negatively affected our environment over the years. […]

Instapage vs ClickFunnels: The Ultimate Guide

No matter what your business is, you should have a landing page so that you can turn visitors into subscribers, […]

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”

menu-circlecross-circle