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.
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.
For any questions, leave a comment below.
2 comments on “How to Fix Chrome 77 Breaking Gutenberg Editor”
Gives my website a 520 error after adding to functions.php
Hi @Luis, It's probably a syntax error, or are you on CloudFlare?
However, you can use a custom function plugin, or snippets plugin.