Support, News and Updates

Support

Meta boxes overlap WordPress Visual Editor

Recently we noticed that when you attempt to edit an existing WordPress page or post with the latest version of Google Chrome ( 77.0.3865.90 ), the (Gutenberg) Visual Editor would disappear behind some of the meta boxes (the meta boxes overlap the editor window). A quick solution for some quick edits is to disable the WordPress Visual Editor from your profile (From your dashboard see Users->Your Profile). Uncheck the Use Visual Editor option.

The meta boxes overlap problem appears to be common when you are using the plug-ins Yoast SEO and/or ACF. There have been reports of similar problems with the WordPress Visual Editor (Codename Gutenberg) since November 2018.

An elegant solution found on github is to add the following code in your WordPress theme “function.php” file

// Add style for dashboard, overlap meta boxes on posts(editor)
add_action('admin_head', 'custom_metabox_style');

function custom_metabox_style()
{
echo '<style>
.block-editor-writing-flow {
overflow: auto;}
</style>';
}

If this does not work, try replacing the code overflow: auto; to height: auto;

This code was referenced from this document on github and we’ve confirmed it is working. Please visit this link below for more details and/or updates on the above (temporary?) fix. Hope it helps.

https://github.com/WordPress/gutenberg/issues/11378

Leave a reply