Metaboxes overlap block editor's edit link popup

[tessawatkinsllc]

Bug: The link editor box is obscured by the metaboxes when the linked content is near the metaboxes, if they have content, and if that content expands the overall scroll height of the page making it so the bottom of the editor is not near the bottom of the page. This prevents users from being able to edit their links in this specific situation.

Expectation: the link editor box should overlay the metaboxes, or it should open upward, allowing users to be able to edit them in all situations.

Note: While the metaboxes don't have content in a blank install, the container of these metaboxes and the ability to add them are provided by core, therefore I believe the solution should be provided in core.

Environment Info for Testing

• WordPress version 6.6.1
• Desktop with Windows 11 Pro
• Google Chrome Browser version 128.0.6613.84 (Official Build) (64-bit)
• Yoast SEO version 23.3 (or any plugin that adds a metabox to the post edit page)

Steps to Reproduce

1. Use a fresh install of WordPress
2. Install and activate any plugin that adds meta boxes to the post page
3. Create a new post
4. Copy/paste the first five (5) paragraphs of ​Lorem Ipsum into the body, this should automatically create five paragraph blocks.
5. Ensure that the metabox(es) is(are) expanded, extending the scroll height of the page.
6. Scroll down so that the bottom of the editor where it meets the metaboxes are in the middle of the page.
7. Highlight the last word with your mouse and then press CTRL + K to add a link, this reveals the link editor's popup box below the highlighted text and displays behind the metabox(es).

Screenshots

Proposed solution 1 (quickfix): Add z-index: -1 to .edit-post-layout__metaboxes in after line 95 of file /wp-includes/css/dist/edit-post/style.css and in its minified file. This changes it so the metaboxes are below the link editor's popup, allowing it to be fully visible.

Proposed solution 2 (preferred): Edit the JS responsible for determining whether it should open upward or downward to reflect an upward opening when it is near the bottom of the editor (div element with editor-visual-editor class), not just the bottom of the visible window or screen.

[tessawatkinsllc]

My current workaround (snippet can be placed in child theme's functions.php, plugin, etc.)

<?php
/**
 * Add WordPress Backend Assets
 *
 * @param string $hook
 *
 * @return void
 */
function au_load_admin_assets($hook)
{
    if (in_array($hook, array('post.php', 'post-new.php'))) {
        wp_add_inline_style(
            'wp-edit-post',
            '.edit-post-layout__metaboxes{z-index:-1}'
        );
    }
}
add_action('admin_enqueue_scripts',  'au_load_admin_assets');

[narenin]

Hi @tessawatkinsllc

Welcome to the Core Trac!

This is related to the Gutenberg, so this should be reported in ​https://github.com/WordPress/gutenberg

I have reported the same to Gutenberg and also submitted patch for the same.

Issue : ​https://github.com/WordPress/gutenberg/issues/64812

PR with Patch : ​https://github.com/WordPress/gutenberg/pull/64813

[narenin]

Metabox working fine with Yoast Plugin

[wildworks]

Thanks for the report.

This problem has been fixed in ​#63939. This fix will be available in the next minor WordPress release.

[tessawatkinsllc]

Thank you @narenin and @wildworks! I wasn't sure if it was technically block editor/gutenberg related due to it not being compiled in the same CSS, but it is why I had written out the bug this way :)

[hellofromTonya]

Closing this ticket as reported upstream.

Please note, this bug was fixed in 6.6.2.

References:

• Bugfix: ​Post Editor: Prevent popover from being hidden by metabox
• [58988] is the changeset that updated the npm packages which included this fix.