Gutenberg: Document Actions: Block Toolbar overlaps Document Titles

Created on 3 Oct 2020  路  3Comments  路  Source: WordPress/gutenberg

Describe the bug
When scrolling through the block editor, if a block toolbar is displayed, it can overlap the document actions labels.

To reproduce
Steps to reproduce the behavior:

  1. Set up the site editor locally
  2. Navigate to the site editor
  3. Hover over a sibling inserter
  4. Scroll down through the editor until the block toolbar would overlap the document actions labels
  5. Verify that there is no visual overlap

Expected behavior
When scrolling through the block editor, the block toolbar does not overlap document actions labels.

Screenshots
2020-10-02 17 27 24

[Feature] Full Site Editing [Type] Bug

Most helpful comment

Mainly so the parent selector button would be visible.

All 3 comments

I noticed the block-popover has z-index of 31, while the header in the interface skeleton has z-index of 30. It seems to be noted as intended to be above the header:
https://github.com/WordPress/gutenberg/blob/c2ea1b27df08117dbf53200630e8a627f4479df1/packages/base-styles/_z-index.scss#L91-L92

However, it does not behave this way in the post editor. I tried to dig around a bit but am unsure why it behaves differently in the other editor. 馃

@shaunandrews

I see that you introduced the code Addie mentioned above. Link to the commit and the pr. Do you happen to remember why we wanted the popover above the block list _and_ the header?

I'm making my way through the PR (it's pretty long) and, I might be missing something, but I can't seem to find more information about the reasoning 馃槄

Mainly so the parent selector button would be visible.

Was this page helpful?
0 / 5 - 0 ratings