Blocks overlap meta boxes on posts

[DeveloperWil]

When composing a post, the Gutenberg blocks overlap the meta boxes at the bottom of the post. I cannot enter content into those blocks so I cannot complete my post using the new editor.

All meta boxes from Advanced Custom Fields Pro are shown and the other is Yoast SEO Premium.

I presume because there is no document template option that ACF conditionals are not working so it shows all those meta boxes, but that's a separate issue.

To Reproduce
Steps to reproduce the behavior:

1. Create new post
2. Create a number of content blocks that push content to the bottom of the page
3. Gutenberg blocks and controls overlap with document meta boxes at the bottom of the page

Expected behavior
Clear separation of the content editor and the document meta boxes.

Screenshots
You can see the overlapping Title block and the eBooks and Yoast SEO meta boxes from this screenshot.

Desktop (please complete the following information):

• Laptop
• Windows 10
• Chrome 70, Firefox 62, Edge 42

Additional context
WordPress 4.9.8
Advanced Custom Fields PRO 5.7.7
Yoast SEO Premium 8.3

[La-Geek]

I can confirm this issue. Insert a long content into the classic block and the meta boxes will overlap this block.

[youknowriad]

Can anyone of you test with master, I'm not being able to reproduce this issue, it might have been fixed.

[La-Geek]

It persists.
Tested with a pure WordPress 4.9.8 installation and Gutenberg 4.2.0
For test purposes I installed a plugin as described in #11482

Result:

[youknowriad]

It could be a windows issue? Can you test with this zip https://builds.danielbachhuber.com/gutenberg-nightly.zip

[La-Geek]

With the nightly build it is working 👍

[youknowriad]

Thanks for the test, that's great news. I'm going to close this, this will be released in the 4.3 version.

[DeveloperWil]

I installed Gutenberg 4.3.0-alpha-1ac70e1 on my 4.9.8 site and the problem persists.

https://youtu.be/cSdo1cUIb1E

[youknowriad]

@DeveloperWil Interesting, I'm reopening so we can investigate more, but it's not going to be an easy fix if we can't reproduce reliably.

[La-Geek]

@DeveloperWil could you deactivate Advanced Custom Fields PRO and
Yoast SEO Premium? Then install the plugin as described in #11482 for test purposes?

I had also tested (like you) with windows 10 64bit and Chrome, WP 4.9.8 etc and Gutenberg 4.3.0-alpha-1ac70e1 (but nothing else installed) and the bug has been fixed.

[websupporter]

Firefox
Ubuntu 14.04
WP 5.0-beta3-43878
Gutenberg nightly build https://builds.danielbachhuber.com/gutenberg-nightly.zip

registered a lot of metaboxes.

My issue from #11482 does not really persist.

[La-Geek]

@gziolo modified the milestones: 4.3, WordPress 5.0 5 days ago

This is not fixed in Gutenberg 4.3.0 and it is not fixed in WP 5.0-beta3-43891.

[jonathanbossenger]

I'm not sure if this is related, but if it is, you can replicate this by enabling the Sharing Buttons in the Jetpack plugin. As you can see in the screenshot, the sharing buttons meta box overlaps the Gutenberg blocks. This could however be a bug in Jetpack (and the All in One SEO plugin, which has the same issue, as you can see in the image)

If this is a bug in those two plugins, please let me know and I'll log issues with each project.

[websupporter]

I am crossreferencing this issue from TwentyNineteen WordPress/twentynineteen#599 as this issue also seems to address metaboxes and the editor field (while from a slightly different angle)

[La-Geek]

The same bug exists with Genesis Framework 2.7.1 (Gutenberg ready) and Gutenberg 4.4.0

[jasmussen]

I've found a way to reproduce, however only on 4.4, not in master. So it's worth trying to figure out when/how it was fixed.

• Step 1: Enable Yoast, or other plugin with a metabox. Expand it for maximum effect.
• Step 2: Type a bunch of stuff, see how it overlaps. Another symptom is a TON of whitespace before you can see the metaboxes.

Result of the above steps in 4.4:

Result of the above steps in master:

☝️ Note that the coral color is one i added in the debugger, to the editor-writing-flow__click-redirect element, which initially appeared to be the one misbehaving.

I have tested this in Chrome and Firefox on Windows and Mac.

When I initially investigated, it looked like it was bad flexing of the editor-writing-flow and the .editor-writing-flow__click-redirect. However as noted, I can't reproduce this issue in master, despite the code appearing unchanged. Let's try and figure out what changed here recently.

[jasmussen]

Would appreciate if someone could test this issue in master and see if the issue persists there.

[jonathanbossenger]

I'm not sure if this is related, but if it is, you can replicate this by enabling the Sharing Buttons in the Jetpack plugin. As you can see in the screenshot, the sharing buttons meta box overlaps the Gutenberg blocks. This could however be a bug in Jetpack (and the All in One SEO plugin, which has the same issue, as you can see in the image)

If this is a bug in those two plugins, please let me know and I'll log issues with each project.

As it turns out my 'bug' was related to the Divi theme and not the Jetpack or All in One SEO plugins.

Activating Twenty Seventeen and running the master branch of the plugin, everything works fine.

[mtias]

Thanks for the followups and testing.

[HighTechDad]

While I see that this bug is closed, I too have this issue with the Meta Blocks floating over the WP editor blocks. I tried disabling my current theme (Theme.co Pro) as well as Yoast. This was on a dev site with minimal plugins. I will try deactivating all plugins to see if I can identify a conflict. I'm using 5.0-RC1.

Updated: Found the conflicting Plugin - Shortcake (Shortcake UI) - https://wordpress.org/plugins/shortcode-ui/
After disabling that, all looks good.

[bitwitch]

There are multiple issues opened with this same problem and there seem to be multiple sources. I ran into it as well, for me the issue was not silent php errors. The issue was that my theme css had a rule setting the body element's height to 100%. The way Gutenberg handles editor styles is by transforming your theme's css:

In the classic editor, the editor stylesheet is loaded directly into the iframe of the WYSIWYG editor, with no changes. Gutenberg, however, doesn’t use iframes. To make sure your styles are applied only to the content of the editor, we automatically transform your editor styles by selectively rewriting or adjusting certain CSS selectors. This also allows Gutenberg to leverage your editor style in block variation previews.

The result in my case is that body { height: 100% } becomes .editor-styles-wrapper { height: 100% }. This is the css rule that caused the plugin metaboxes to overlap the editor. Removing height: 100% from the body element fixed the issue for me.

[jasmussen]

The result in my case is that body { height: 100% } becomes .editor-styles-wrapper { height: 100% }. This is the css rule that caused the plugin metaboxes to overlap the editor. Removing height: 100% from the body element fixed the issue for me.

Thank you for sharing that, @bitwitch! @youknowriad this feels like something we should mitigate. Do you think we should either remove that height when rewriting, or create a separate rule in the new "normalization" stylesheet that overrides the height to always be auto, perhaps with an !important and an inline comment?

[youknowriad]

May I ask why there's a body { height: 100% } in the editor styles?

The main reasons for the fact that the editor styles are opt-in in Gutenberg is the fact that the old editor styles are not usable directly. Theme authors should check whether their styles are "compatible" and then enable them.

I'm not sure we should introduce hacks like this.

[jasmussen]

May I ask why there's a body { height: 100% } in the editor styles?

The primary reason to do this is usually to create websites that use the full height of the browser window for elements. For example if you have an "above the fold" splash element on your homepage, one that's always 100% tall. Or if you need to bottom align something on a page that doesn't scroll.

Admittedly this is very much a front-end thing, and not something you would normally put in the editor style. In that vein, I buy your argument indeed. My thought in perhaps opening a separate ticket is to take yet another small baby step towards a future where the editor style doesn't have to be different from the frontend style. Though perhaps this particular one is a task to revisit at a later time.

[bitwitch]

May I ask why there's a body { height: 100% } in the editor styles?

The reason for such a rule in my case is because we do not use a separate stylesheet for the editor. We minify the entire site's css into a single file, including all the css for custom blocks. The body height: 100 rule is for elsewhere on the site. My intention in posting was to help out others who may have the same source of problem as me, not necissarily to recommend introducing a workaround on gutenberg's end.

[PhotoCoog]

I don't have much to add other than to say I have had the same issue (Yoast SEO blocking text on the page editor) to the point of making it barely usable.

[jasmussen]

@PhotoCoog usually this is a plug-in issue.

Can you open the JavaScript console and see if there are any messages there? In Chrome, mac it's ⌘⌥J, in Firefox it's ⌘⌥K, in Safari you first have to enable it, instructions here: https://support.airtable.com/hc/en-us/articles/232313848-How-to-open-the-developer-console

Depending on whether or not there's a message in the console, the next steps depend on that. Thanks.

[PhotoCoog]

It has the following which actually mentions the issue! Any way to fix it?

JQMIGRATE: Migrate is installed, version 1.4.1
edit-post.min.js?ver=3.1.11:12 Your browser is using Quirks Mode.

This can cause rendering issues such as blocks overlaying meta boxes in the editor. Quirks Mode can be triggered by PHP errors or HTML code appearing before the opening . Try checking the raw page source or your site's PHP error log and resolving errors there, removing any HTML before the doctype, or disabling plugins.

[jasmussen]

@PhotoCoog Thanks for looking!

This means there there is a plugin or a theme on your website that needs an update. One way to test is disable plugins one by one and figure out which one makes the editor render correctly, but I realize this is tricky to do on a production site. As an alternative, feel free to send me a list of the plugins you're using, and I can test them one by one for you, and see which one causes the issue. Once we find the culprit, I can reach out to the developer to suggest a fix.

[rendergraf]

Fix this issue from style for the dashboard.

Add this hook in your theme, functions.php

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

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

[jasmussen]

@rendergraf Can you open the JavaScript console and let me know if you see a warning there? In Chrome, mac it's ⌘⌥J, in Firefox it's ⌘⌥K, in Safari you first have to enable it, instructions here: https://support.airtable.com/hc/en-us/articles/232313848-How-to-open-the-developer-console

I've tried that overflow trick in the past, and there are unfortunate side effects to it. Additionally, if you do see a warning in the JS console, it means there is a conflict with a plugin, and the real fix is to fix that plugin.

[rendergraf]

@jasmussen in the console does not show any error related to admin_head.

everything works correctly

[jasmussen]

Interesting! Thank you for getting back to me with that.

If you open the web inspector, is the first thing in the document the doctype? I.e. <!doctype html>? Or is there anything before that?

[rendergraf]

No, in my case is:

... class="wp-admin wp-core-ui ...more

Please, if you need more information about hook admin_head, can you see documentation oficial:
https://developer.wordpress.org/reference/hooks/admin_head/

I hope it helps you

[DMPR-dev]

In my case the problem was in a CSS code echoed on admin_menu hook, changed the hook to 'admin_bar_menu' and everything seems to be okay

[4selin]

Fix this issue from style for the dashboard.

Add this hook in your theme, functions.php

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

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

that works

but why it is not fixed in WP itself still.

[patjun]

I run in this problem yesterday, after i upgraded to Google Chrome Version 77.0.3865.75 on my mac. I disabled all Browser Plugins, the Problem still exists.

The editing is working normal on Google Chrome 76. I upgraded Chrome to Version 77 on this machine and the problem also appears.

I also tested with Chrome Canary Version 79.0.3912.0 (Offizieller Build) canary (64-Bit) without problems.

And i tested with firefox. Also no problems.

[renusss]

I run in this problem yesterday, after i upgraded to Google Chrome Version 77.0.3865.75 on my mac. I disabled all Browser Plugins, the Problem still exists.

The editing is working normal on Google Chrome 76. I upgraded Chrome to Version 77 on this machine and the problem also appears.

I also tested with Chrome Canary Version 79.0.3912.0 (Offizieller Build) canary (64-Bit) without problems.

And i tested with firefox. Also no problems.

Upper solution doesn't help me, i try edit this hook and its works for me.

// 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 {
height: auto;}
</style>';
}

[VickyTM]

I'm seeing this same problem across several sites that updated to 5.2.3. ACF, Yoast and RevSlider settings cover the post content and if collapsed will stay in the middle of content when you scroll. Tried to isolate by turning off plugins and using one at a time and behavior is the same.

[amorphine]

I confirm.

Plugins: Yoast, ACF

---

Firefox 69.0

---

Chrome 77.0.3865.75

---

This piece of code fixes a bit Chrome behaviour

add_action('admin_head', 'custom_metabox_style');

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

metaboxes are at bottom now but some lags persist

[nexakasaki]

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

Works for me.
Win10, Google Chrome

[TylerB24890]

Can confirm this issue exists in Chrome 77.0.3865.75 on MacOS.

The above solutions regarding adding height: auto; to .block-editor-writing-flow or overflow: auto; to .editor-writing-flow did not work for me. The solution for me was adding:

add_action( 'admin_head', 'fix_overlapping_blocks' );
function fix_overlapping_blocks() {
    ?>
    <style>
        .edit-post-layout__content .edit-post-visual-editor {
            flex-basis: auto; // override the default flex-basis: 100%;
        }
    </style>
    <?php
}

[patjun]

@TylerB24890
i can confirm your css solution.
Same solution worked for me.

Best
Patrick

[alana314]

Happening on 4 sites in 5.2.3 for us. TylerB's fix worked for me, though you should remove the // comment since that's not a valid CSS comment.
You can also run this in the console as a temporary fix:
document.querySelector('.edit-post-layout__content .edit-post-visual-editor').style.flexBasis = 'auto'

[webber-naut]

.block-editor-writing-flow {
height: auto;}

Worked for me!

[gagata]

document.querySelector('.edit-post-layout__content .edit-post-visual-editor').style.flexBasis = 'auto'
this works as a temporary solution, but why is it not added to the core by default?

[VoidZA]

You can also use:

#editor .edit-post-layout__content {
  display:block;
}

With this the editor will show its content always, and not shrink down when your mouse enters a meta-box.

[ahmader]

Here is what fixed it for me, which is combinition of both solutions.

add_action( 'admin_head', 'fix_overlapping_blocks' );
function fix_overlapping_blocks() {  // fix the admin edit post with metabox
    ?>
    <style>
    #editor .edit-post-layout__content {
        display: block;
    }
    #editor .edit-post-layout__content .edit-post-visual-editor {
        flex-basis: auto;  /* override the default flex-basis: 100%;*/
        clear: both;
    }
    </style>
    <?php
}

[originlondon]

Fix with this:
/* sort out floating metaboxes issue */ in file 'post_edit_styles.css' .block-editor-page .edit-post-visual-editor.editor-styles-wrapper { min-height: unset; }

Enqueue only on admin:
function function_name( $hook){ $screen = get_current_screen(); if ( ! is_admin() && $screen->id !== 'edit-post' ) { return; } $datetimeversion = date('YmdHis'); wp_enqueue_style( 'post_edit_styles', plugin_dir_url( __FILE__ ) . 'css/post-edit-page.css', array(), $datetimeversion, 'all' ); }