Fix: Ensure popover modals in block editor display above metaboxes #64958
Conversation
Problem: When metaboxes are attached to the bottom of the screen in the WordPress block editor, popover modals (e.g., link editing popovers) within the `.editor-visual-editor` element are incorrectly rendered beneath these metaboxes. This issue makes the popovers partially or fully obscured, leading to usability problems, particularly when editing links within blocks. Solution: Added a `z-index: 9;` to the `.editor-visual-editor` CSS rule. This change ensures that the `.editor-visual-editor` element and its child popovers are displayed above any metaboxes, preventing them from being obscured and maintaining their usability. Affected Files: - Updated the relevant SCSS file(s) to include the `z-index` property. This commit resolves the issue where popover modals are not fully visible due to being rendered underneath subsequent containers. WordPress#64957
|
The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message. To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook. |
|
👋 Thanks for your first Pull Request and for helping build the future of Gutenberg and WordPress, @s-a-s-k-i-a! In case you missed it, we'd love to have you join us in our Slack community. If you want to learn more about WordPress development in general, check out the Core Handbook full of helpful information. |
github-actions
bot
added
the
First-time Contributor
|
@s-a-s-k-i-a Thanks for the PR! This problem has been fixed in #63939. This fix will be available in the next minor WordPress release. I would like to close this PR, but please let me know if there is anything I've missed. |
Problem:
When metaboxes are attached to the bottom of the screen in the WordPress block editor, popover modals (e.g., link editing popovers) within the
.editor-visual-editorelement are incorrectly rendered beneath these metaboxes. This issue makes the popovers partially or fully obscured, leading to usability problems, particularly when editing links within blocks that are located at the bottom of the screen next to possible subsequent metaboxes.Solution:
Added a
z-index: 9;to the.editor-visual-editorCSS rule. This change ensures that the.editor-visual-editorelement and its child popovers are displayed above any metaboxes, preventing them from being obscured and maintaining their usability.Affected Files:
z-indexproperty.This commit resolves the issue where popover modals are not fully visible due to being rendered underneath subsequent containers. #64957
Why?
#64957