Sticky position – hide the rest of the content in the editor

[unprintedch]

Description

When you make a group (or any block) sticky. They are sticky in the editor, so the content under it become inaccessible.

Step-by-step reproduction instructions

Open a new page, import a couple of nice groups/site sections. Take the first. Make it sticky. Scroll. The other sections pass behind, so they are impossible to edit.

Screenshots, screen recording, code snippet

Here is a screen capture of the bug.

Environment info

Latest version on a plaground.

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

Yes

[rohitmathur-7]

I also noticed that when we make something sticky it has z-index 10, and when some element is left or right aligned then they have a z-index of 21 in the editor.

It is coming from this CSS from wp-includes/css/dist/block-editor:

.wp-block.alignleft,.wp-block.alignright,.wp-block[data-align=left]>*,.wp-block[data-align=right]>*{
  z-index:21;
}

Should this be the expected behavior when we align something left or right?

[akasunil]

I have tested this issue and confirm it. Should we exclude sticky position CSS loading in editor by useBlockProps?

[unprintedch]

But we need a way to show the user a block is sticky (I know there is a pin in the explorer sidebar)

And maybe a way to set z-index and top. Sometimes you want to make the sticky hero to stay behind the rest of the content.

[stokesman]

I wonder how much of an issue this is. It’s behaving as it should. This issue demonstrates it can be a foot gun but making it safe without compromising the editing fidelity seems tricky.

And maybe a way to set z-index and top. Sometimes you want to make the sticky hero to stay behind the rest of the content.

To some degree I think that’s the real issue, the feature is currently only able to support the one (probably most common) use case of sticking an element in front of what follows.

So far the best idea I've imagined is a toggle switch that appears when a block is sticky positioned that controls whether or not it’s in front of or behind subsequent blocks. When sticky position is first selected the state of the toggle could auto-set according to how much vertical space the block occupies. A tall block defaults to behind and a short block defaults to in front. The initial auto-set may not always infer the correct intent but at least it could mitigate the issue.

[akasunil]

I had same thinking, but little bit of change. We can provide toggle below position control that appear when sticky is selected. With help of the toggle user can preview sticky effect in editor. We can use inline styles to override container style for sticky position on toggle change. Default will be true to show sticky block.

[unprintedch]

I agree, with great power comes great responsibility! User should be aware of what he is doing.

But it is clearly an editor bug when it prevent the user from editing.

[skorasaurus]

Also reported at https://github.com/WordPress/gutenberg/issues/62916