Sticky feature not working [Bug]:

[mosesmed]

Quick summary

The sticky feature is not working when the group block within the header block is set to Sticky.

I've tried it with 3 themes on the Creator Plan and also the Explorer Plan. I've also used the Twenty Twenty Four theme, it didn't work.

Steps to reproduce

1. Activate the Twenty Twenty Four theme on the Creator Plan
2. Go to the editor and set the Group block within the header block as sticky
3. You can replicate same issue with other themes even on the Explorer Plan.

What you expected to happen

The section set as sticky ought to remain sticky at the top of the screen.

What actually happened

The section set as sticky scrolled off the screen like normal page.

Browser

Mozilla Firefox

Context

No response

Platform (Simple, Atomic, or both?)

Simple, Atomic

Other notes

No response

Reproducibility

Consistent

Severity

All

Available workarounds?

None

Workaround details

No response

[mosesmed]

8312006-zen

[github-actions]

Support References

This comment is automatically generated. Please do not edit it.

• 8312006-zen

[coder-mahfuz]

To make the sticky header work you will have to wrap the header element inside a group block and then set that group blocks position to sticky. Can you try the steps I have shown in this video: https://www.loom.com/share/16464cfbdff54a3caa8571c73d02efd0?sid=fa27cf78-5c04-4d37-8a17-fea7fd84afa4

[mrfoxtalbot]

What @coder-mahfuz says (thank you!)

I am going to close this but please feel free to reopen if the issue persists after adding the header template to a group and making that top-level group sticky.

Thanks @mosesmed!

[mrfoxtalbot]

To clarify further, this is indeed very confusing and needs to be fixed in core:

WordPress/gutenberg#47043
WordPress/gutenberg#50617
WordPress/gutenberg#56147