Sticky group, while logged in: Content is visible above the group on small screens

[carolinan]

Description

When you are logged in, the sticky group block uses the --wp-admin--admin-bar--height to set the top value. top: calc(0px + var(--wp-admin--admin-bar--height, 0px));

But at 600px width, the wp admin bar is no longer fixed, and it moves as you scroll. Because the group is still sticky at this width, it sits 46px down from the top even though the admin bar is no longer visible. The page content can be seen in this space as you scroll.

The video shows the Chrome dev tools, but I have also tested this with an android phone (also using chrome)

Step-by-step reproduction instructions

Activate Gutenberg trunk. Please make sure that your WP install is set to show the admin bar.

In the site editor, add a group block at the very top. Open the block settings, and select position, sticky. Make sure there is some content on the rest of the page. Using two different background colors makes the bug easier to see. Save and view the front of the site. Reduce the browser window width to 600px or less. Scroll. Confirm that the WP admin bar moves, but the sticky group does not. As you scroll, the content on the page is visible between the sticky group and the top of the browser window.

Screenshots, screen recording, code snippet

https://user-images.githubusercontent.com/7422055/215526094-8466e45c-1844-45ad-986f-f61390c19051.mov

Environment info

No response

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

[carolinan]

@andrewserong I have run into a bug with the sticky position, when the user is logged in and the screen width is 600px or smaller. Since the style engine does not support media queries yet, I think we need a temporary fix where the position setting outputs a CSS class on the front, so that a media query can be added to the group block CSS. With this media query we can adjust the position when the admin bar is no longer fixed. What do you think? Do you have any other suggestions?

I also think that developers will come asking for a class that identifies the state.

[andrewserong]

Thanks for opening this one @carolinan! I think adding a CSS class to the frontend is a good pragmatic idea for this. I'll have a play around with that idea today.