Bug Report: Popover Modals Display Incorrectly in Visual Block Editor When Metaboxes Are Present

[s-a-s-k-i-a]

Description

In the WordPress Visual Block Editor, when metaboxes are attached at the bottom of the screen, popover modals within the .editor-visual-editor element are displayed beneath subsequent containers instead of overlapping them. This issue makes the modals partially obscured and difficult to interact with, particularly when editing block that are located at the bottom of the screen and use popover modals.

Expected Behavior: Popover modals should be rendered above all other elements within the editor interface, ensuring they are fully visible and interactable.

Actual Behavior: Popover modals are rendered beneath subsequent containers, particularly when metaboxes are present at the bottom of the screen, causing the modals to be partially obscured and unusable.

There are existing issues in this repo regarding accessibility, but I didn't find any issues, that were addressing this particular behaviour. I found this pr which was merged, but it didn't fix the issue described. #63939

Step-by-step reproduction instructions

1. Add one or more metaboxes to the bottom of the post editing screen in the WordPress admin area. (simply install and activate some plugins like yoast and other tools.)
2. Open a post or page in the Visual Block Editor.
3. Insert a few paragraph blocks, until the entire viewport is filled.
4. Attempt to edit or add a link within the last text block.
5. Observe how the link popover modal is displayed below the metabox container, making it partially or fully obscured.

Screenshots, screen recording, code snippet

This is now:

This would be better.:

Proposed Solution (used in last screenshot):
The issue can be resolved by adding a z-index property to the .editor-visual-editor CSS rule, ensuring that it is positioned above other elements.

Code Fix in WP Core Gutenberg CSS directory.
Update the CSS for .editor-visual-editor as follows:

.editor-visual-editor { align-items: center; background-color: #ddd; display: block; height: 100%; isolation: isolate; position: relative; z-index: 9; /* Added z-index to ensure popovers are displayed above other elements */ }

Affected Files in WP Core:
/wp-includes/css/dist/editor/*.*

Any other relevant CSS or SCSS files where the .editor-visual-editor class is defined or styled.
Rationale: Adding the z-index property will ensure that the .editor-visual-editor container and its children are displayed above any metaboxes or other elements that might otherwise obscure the popovers. This is a low-impact, high-benefit change that improves the usability of the editor when metaboxes are present.

Additional Notes:

The fix has been tested locally and resolves the issue without introducing any side effects.
Further testing may be required to ensure compatibility across different browsers and screen sizes.

Environment info

WordPress 6.6.1
Divi Theme, but this is irrelevant here.

Please confirm that you have searched existing issues in the repo.

• Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

• Yes

[t-hamano]

Thanks for the report.

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