[wp-trac] [WordPress Trac] #61928: Metaboxes overlap block editor's edit link popup

[WordPress Trac]

#61928: Metaboxes overlap block editor's edit link popup
-----------------------------+-----------------------------
 Reporter:  tessawatkinsllc  |      Owner:  (none)
     Type:  defect (bug)     |     Status:  new
 Priority:  normal           |  Milestone:  Awaiting Review
Component:  Editor           |    Version:  6.6.1
 Severity:  minor            |   Keywords:
  Focuses:  css              |
-----------------------------+-----------------------------
 **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
 [https://www.lipsum.com/feed/html 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**
 [[Image(https://i.ibb.co/7rhwWtX/Edit-Post-Hello-world-Local-Dev-Site-
 Word-Press.png)]]

 **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.

-- 
Ticket URL: <https://core.trac.wordpress.org/ticket/61928>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform