Excerpt panel has a z-index/layering issue in the WordPress Media Library modal.

[aksharmakwana6]

Steps to Reproduce
1) Open a post in the WordPress admin panel.
2) Open the Excerpt panel.
3) Keep the Excerpt panel open.
4) Click Set featured image / open the Media Library.
5) Select an image from the Media Library.
6) Observe the right-side Attachment Details panel.
7) The Excerpt popup remains above the Media Library modal.
8) This causes a z-index/layering conflict and overlaps the Media Library UI.

Screenshot:- ​https://prnt.sc/L_WvA80pt5Zl

[aksharmakwana6]

Screenshot showing the z-index issue between the Excerpt panel and Media Library modal.

[sainathpoojary]

Welcome to Trac and thank you for opening your first ticket, @aksharmakwana6!

I tried reproducing this z-index issue in ​WordPress Playground using the steps provided, but I wasn't able to replicate the conflict on my end. I have attached a video of my testing process.

Could you take a quick look at the video and let me know if I am missing any steps?

Also to help us narrow down the cause, could you also try reproducing the issue with all plugins disabled, or by testing it on a fresh ​WordPress Playground environment? This will help us confirm if it is a core WordPress issue or a potential conflict with a specific plugin or theme.

Thanks for your help!

Video: ​https://rioudcpuyg.ufs.sh/f/PL8E4NiPUWyOp8e6cRaQVMXblTwtAz0NaoWOrjEIdxin63gS

[aksharmakwana6]

Replying to sainathpoojary:
Thank you for the update and for taking the time to investigate this.

I mentioned the issue because it had occurred multiple times for me, so I wanted to bring it to your attention and make sure it was properly reported.

I’ll also try to reproduce the issue with all plugins disabled and in a fresh WordPress Playground environment. If I encounter the same issue again, I’ll provide the relevant details and any additional information that may help with troubleshooting.

Thanks again for your help and support.

[micahele]

The layering inversion described here is real, even though the steps as written do not reliably trigger it.

The Excerpt panel renders inside a .components-popover — see src/wp-includes/css/dist/editor/style.css:

.editor-post-excerpt__dropdown__content .components-popover__content { … }

and .components-popover carries z-index: 1000000 (src/wp-includes/css/dist/components/style.min.css), while .media-modal is z-index: 160000 (src/wp-includes/css/media-views.css, line 195).

So any editor popover that is still open when the wp.media modal opens will paint above the modal. That is not specific to the Excerpt panel — it applies to every dropdown in the editor sidebar.

@sainathpoojary, I suspect the reason it did not reproduce for you is that the steps route through the Featured Image panel, and clicking there is a click-outside that closes the Excerpt popover before the modal appears. Nothing overlaps because nothing is left open.

@aksharmakwana6, two things that would help pin this down: was the Excerpt popover still visibly open at the moment the Media Library appeared, and how did you open the modal — mouse, or keyboard? A path where the popover survives the modal opening is what is needed to reproduce this consistently.

One caution for whoever picks this up: it is not a one-line z-index bump. .media-modal-backdrop (159900), .media-frame-toolbar (560000) and the uploader overlays (600000) are all layered relative to the current value, and third-party code layers against 160000 too, so raising the modal above 1000000 would need to move the whole stack together.

Summary

When the Excerpt panel is open, opening the Media Library can leave the Excerpt popover above the Media Library. This can cover part of the modal and make it difficult to use.

This change moves the Excerpt popover below the Media Library only while the modal is open. The normal popover behavior is unchanged after the modal closes.

Screenshots

Before: 66031-before.png

After: 66031-after.png

Testing

• Opened a new post in the block editor.
• Opened the Excerpt panel.
• Opened the Media Library with Set featured image.
• Confirmed the Media Library covers the Excerpt popover.
• Closed the Media Library and confirmed the Excerpt popover returns to its normal position.
• Ran npm run grunt -- precommit:css.

Screenshots

Before:

After: