Sticky header isn't reflected in list view on a page in Site Editor

[luminuu]

Description

When creating a sticky header on a page template in TT5, I have to create a group around the header template part and change the position setting to sticky. If I then edit a page that uses this page template from the site editor, the additional group of the header is not displayed in the list view. It does work on the frontend and on the backend in the page edit though. The code is correct, it's only the group that is missing from the list view to identify there's a different setup in the header. This is confusing to users as they can't find where the sticky setting is set, as the group is not showing in the page edit view.

Step-by-step reproduction instructions

1. Have a clean install of WP 6.7, no Gutenberg plugin needed
2. In the site editor, go to the default Pages template
3. Make the header sticky by putting the header template part into a group and set that group to "Position: sticky"
4. For better visibility, change the background color of the group to another color
5. Save the Pages template
6. Still in the site editor, navigate to the pages selection and select the Sample Page or any other page
7. Open the list view if it's not open already and confirm the header template shows on the top level, but the sticky header does work in the editing area
8. Confirm the sticky header also works on the frontend

Screenshots, screen recording, code snippet

CleanShot.2024-12-05.at.11.54.29.mp4

Environment info

• WordPress 6.7
• Twenty Twenty-Five
• Nothing else installed/acitve

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

Please confirm which theme type you used for testing.

• Block
• Classic
• Hybrid (e.g. classic with theme.json)
• Not sure

[hagege]

I have just checked this briefly on an existing instance as well as on a new instance on Playground based on Jessica's very detailed description. There is indeed an issue.
However, I haven't noticed it yet because, old school style, I usually leave the site editor when I edit a page. By default, no header and footer are displayed there in the list view.

[talldan]

I think this needs some design feedback (cc @WordPress/gutenberg-design), as I'm not sure the best way to resolve this issue. Generally parts of the template are not interactive when editing pages, so it's unclear where to draw the line on which blocks are shown. Even headers/footers being selectable feels inconsistent to me.

However, I haven't noticed it yet because, old school style, I usually leave the site editor when I edit a page. By default, no header and footer are displayed there in the list view.

@hagege you might be interested to know you can see the same thing in the page editor using the 'Show template' option in the document settings:

[hagege]

@talldan thanks - I know the menu and have often used it to change the template, but I hadn't noticed this option in the menu before.

[jasmussen]

This is a curious and definitely buggy behavior that needs refinement. Likely it dates back to when page editing was first introduced in the site editor, as part of the same unification work that benefits from the "Show template" option just discussed.

Part of the work that happened then was to provide special editing affordances when you were editing content (pages/posts/cpts) even while showing the template. Especially in the case of pages, these show the full template by default, because they are often sections of your site, so the abstracted view you'll see without the template is less useful in that context. These special editing affordances were things like, at the time, showing a snackbar when you clicked a header or footer area: this is part of the template, you can double click to edit. There are also other things underway, like #63484, even if that will benefit both template and content editing modes.

The snackbar has now been removed, and the header part has been made selectable again, but the behavior between the two modes (content vs. template editing) is not the same. When editing templates, you can select any block inside the template part, seeing the full context of the template still:

When editing content, you can select the template part, but only the Edit button is shown, which takes you to isolated editing:

Keep in mind that when you create a new page, you see the header and footer, you see the template by default. But really in that state, your mindset is on editing the content of the page, not the template details like these. That's why things are different in content editing modes. And so I wonder: should the header and footer be selectable in this state at all? Is there a different way to provide an intuitive shortcut to editing the template when you need to?

[luminuu]

Another way to look at this is thinking about if the Header/Footer Template Parts can get some more abilities like the Group block has to just set the sticky setting directly on them, instead of having to add a surrounding group. It unfortunately does not work when adding a sticky group inside the template part, so that's why it has to be "outside" of it. If the template part block itself would have more options, this would immediately solve the issue.

[bph]

Indeed @luminuu the group block wrapper is a workaround for the missing sticky option on headers.
There is an issue for that: #50617

[jasmussen]

The problem with surfacing such controls on the template part directly, is that they are saved in the template, not the template part. So if you apply sticky to it, then you'll have done it only for that particular template. I realize the irony that having to wrap the template part in a group in order to apply sticky to that group is also something you have to do for every template, but that at least does not carry with it any implication that it would sync to other template parts. That was the confusion that caused #47133 to not be merged.

To that end, I think that the best solution is likely untangling the current heuristic that shows and hides some blocks depending on template or content editing modes.

[luminuu]

In a most ideal world you'd be able to have the sticky group inside the template part so it's even more clear where that belongs to. Because if you want to have a sticky header, you most likely want to have it on every site, no matter what template it is. I have not yet digged into it to see why the stickyness isn't working when added to a group inside, I'm just trying to think of a solution that doesn't require too much work.

[jasmussen]

I have not yet digged into it to see why the stickyness isn't working when added to a group inside, I'm just trying to think of a solution that doesn't require too much work.

That "works", it just doesn't work the way you expect it to. The thing is, if it's sticky inside a group inside the template part, then it's sticky only there, i.e. it sticks to the top of just that group. What you want here is for it to stick to the top of your main template, which is a much taller container.

[luminuu]

That "works", it just doesn't work the way you expect it to. The thing is, if it's sticky inside a group inside the template part, then it's sticky only there, i.e. it sticks to the top of just that group. What you want here is for it to stick to the top of your main template, which is a much taller container.

Makes sense, I haven't thought of that earlier today.

Circling back to an earlier question of yours:

And so I wonder: should the header and footer be selectable in this state at all? Is there a different way to provide an intuitive shortcut to editing the template when you need to?

I think it should be clearer in what is currently being edited, if it's a page or a template. Right now both "modes" pretty much blur and are only distinguishable via the top bar where it says what I'm editing. That is IMHO not visible enough for most users, also because the icons look kinda similar and are "sometimes purple and sometimes gray". The original confusion that caused this ticket was a client of mine wondering where I had edited the sticky header, because he was in the page and I was in the template.
An option here could be to have the "Edit" button on the header change to "Edit in template", and clicking on that, it would switch to the template mode. Same then for clicking on the content, it would not be editable until you click on "Edit in page", which then switches the mode again to the page itself and not the template. Do my words make sense?