Sidebar panels added by plugins may inherit styles from WordPress that should be reset

[afercia]

Noticed while working on #8554 /Cc @jasmussen

Seems that sidebar panels added by plugin may inherit (depending on their implementation) styles from WordPress that could lead to unexpected results.

For example, when using the Ctrl + backtick keyboard shortcut to navigate through the main regions, the focus style applied around the sidebar may look wrong:

See the last sidebar panel that overlaps the focus style. This specific panel uses some markup from the WordPress meta boxes. After a quick investigation, seems two position: relative CSS declarations are responsible for this:

from Gutenberg:

.edit-post-meta-boxes-area {
    position: relative;
}

from WordPress

.postbox {
    position: relative;
    ...

Potentially, there could be other inherited CSS rules that could produce unexpected results. Soem special care should be taken in overriding these rules for the panels in the sidebar.

[jasmussen]

Interesting indeed. I'd love to get rid of both relative positionings, but I also feel like there's a reason they're there.

Do "modern" sidebar metaboxes get these CSS classed wrappers as well, or is it only "legacy" metaboxes? I haven't been deep into the code for a while so I can't recall the details.

Would an added z-index: 0; fix this for plugins, or would that just make things worse?

If we can't remove the position relative, plan B might be to expand the region-focus-outline outwards instead of inwards, which wouldn't be as nice but could solve it. CC: @youknowriad because I recall you working on these classnames.

[youknowriad]

I don't have any specific context to add at first sight. I don't recall any particular reason for the relative positioning.

[afercia]

Worth noting this happens only in combination with #8554 because it uses outline instead of box-shadow. An inset box-shadow is drawn on top of any other children, while the outline behaves differently.

I've just noticed that hovering the "Revisions" panels produces the same effect:

This happens because the "Revisions" panels (specifically the link icon-button within it) gets a white background only when hovered. So I've checked the panel added by the plugin and it does have a white background (set on the .postbox div). All the other panels don't have a background.

Seems the easier fix would be resetting these backgrounds?

[jasmussen]

Hmm that's interesting — simply removing the background there does seem to fix the issue. But I wonder why that is? Would any other CSS properties cause it to shift upwards like that?

[afercia]

Well the background is set on a children of the element with outline, and the children has a higher stack index. That is. Box-shadow works differently.

[jasmussen]

Right, but I'm wondering what makes the background property elevate this element. It also has borders and lots of other things, what makes those not elevate it?

[nerrad]

@afercia is this issue still present? I'm don't seen the hover issue with the Revisions panel anymore.

[afercia]

@nerrad can't reproduce as well. I think this was fixed as a side effect of the navigate regions focus style in #8554.