Many WordPress users have complained that the Gutenberg editor in WordPress was completely broken after the Chrome 77 update.
If you’ve been using WordPress for a long time, you might already be familiar with the Gutenberg editor which replaced the classic editor. Not a few WordPress fans were impressed with Gutenberg, saying that the new editor caused them many problems. I was one of those who didn’t like Gutenberg. However, I tried Gutenberg a few months ago and has grown to like it. It’s not perfect but it works.
I updated Google Chrome to the latest version (Chrome 77) and was shocked to discover that the Gutenberg editor was broken. It seems that the boxes containing the various settings for my plugins like Yoast SEO have overlapped with the editing screen.
Some users on the WordPress subreddit said that the issue is specific to Chrome and not with any plugins, as the same error also happened with other plugins and add-ons.
So I quickly searched for the solution online. I found a few suggestions that caused errors or did nothing, but finally found one that solved the problem.
How to Fix the Gutenberg Error in Chrome 77
Edit your theme’s functions.php by going to Appearance > Editor, logging in to FTP or by using the Cpanel file manager.
Insert the following code:
//Fix Gutenberg error in Chrome 77
add_action(
'admin_head',
function() {
echo '<style>.block-editor-writing-flow { height: auto; }</style>';
}
);Save or upload the edited file and refresh the Gutenberg editor to check if the error has been fixed.
The bug has already been reported to the Chromium team but a permanent fix is scheduled to be out only on October 22, 2019 or the Chrome 78 update. For the meantime, please use the suggested fix mentioned above to continue using Gutenberg in Chrome 77.
If you have any other fixes to suggest, please comment below.
