Gutenberg: [G2] Block mover is not clickable or draggable on full-width blocks

[jffng]

Description
Following the amazing work from #19348, I encountered a small issue: the block mover isn't clickable or draggable on blocks that are set to full-width, e.g. the image, gallery, cover, group, and columns block. The mover appears and renders the correct contextual state, but just isn't clickable.

It appears to be a stacking order issue; I briefly tested manually adding a positive z-index to any of the container elements (e.g. .block-editor-block-toolbar__mover-switcher-container), and this allowed the mover to be clickable + draggable.

To reproduce

1. Install Gutenberg 7.6.0-rc.1
2. Open up a post and add any block that accepts full-width
3. Try to move the block using the mover UI

Environment

• Gutenberg 7.6.0-rc.1
• WordPress 5.3.2
• Browser: chrome, firefox
• OS: macOS 10.14.5

[SchneiderSam]

Yes same here

@jasmussen

[jasmussen]

CC: @youknowriad do you have any insights on how to address this?

[youknowriad]

Nothing in particular, seems more like a z-index issue. I also wonder why it's just in full width, so maybe more a CSS to remove somewhere.

[lgersman]

Nothing in particular, seems more like a z-index issue. I also wonder why it's just in full width, so maybe more a CSS to remove somewhere.

Yeah,

@media (min-width: 782px) {
    .block-editor-block-toolbar.has-responsive-movers
      .block-editor-block-toolbar__mover-trigger-container {
      z-index: inherit;
    }
  }

seems to fix this issue.

[youknowriad]

@lgersman I'm not sure I understand that fix yet but please consider opening a PR :)

[jasmussen]

I created a fix in #21097.