Straightforward sticky header

[gvgvgvijayan]

Actual:

There is no direct, easy way to turn the menu into a sticky menu. Even if you set position to sticky for the group inside header template part it won't work, therefore you have to do a cumbersome way of editing all templates and encase the header part in group then apply sticky position.

Consider if the website is well matured and have many templates for each post types, archives, miscellaneous pages like 404, search, etc. Then we have to touch all templates.

The caveat is also discussed here Sticky Header one of the best site to learn about Gutenberg.

Expectation:

Sticky menu should work out of the box, plus for DX provide an API (register_template_part_style) to add custom class to template part as like register_block_style.

Summary:

Summary of Sticky Menu Challenges in Gutenberg:

• Sticky Behavior Confined to Parent Boundaries: position: sticky is restricted to the scrollable boundaries of its nearest parent, causing issues when the parent container scrolls out of view.
• Template Part Encapsulation: Wrapping sticky styles inside a template part (header) limits their effectiveness due to inherited DOM structure constraints.
• Manual Template Adjustments: Achieving consistent sticky behavior across templates requires editing each template file, increasing the workload.
• Lack of Native Gutenberg Sticky Tools: Gutenberg lacks a straightforward, out-of-the-box solution for applying sticky behavior globally across block templates.
• Complexities in CSS and JavaScript: Workarounds, such as using position: fixed or JavaScript, often disrupt alignment or introduce inconsistencies.

[Andrew-Starr]

@gvgvgvijayan do you think the option of having one primary template would help with this?

The idea is that the primary template would contain the sticky group wrapped header, and other templates wouldn't need to include the header, so there would only be the one template to edit when making changes such as this.

I opened an issue/request at #68884 but I'm not sure if it would be better as a discussion or a continuation of this discussion.

[gvgvgvijayan]

@Andrew-Starr Thank you for reviving this discussion and sharing your thoughts. From the engineering perspective, I think this will lead to lots of complexities. Making a primary template-part means it should encase the other template-part like header, footer, sidebar, etc. this requires dynamic DOM manipulation I guess. Plus, one primary template-part won't be ideal for all template-part encase/parent. Therefore, I leave this to WP core engineering people to do the research.

[Andrew-Starr]

It wouldn't be a primary template-part. The idea is for a primary template.

Currently you have all your various templates; page, single, archive, index, search, 404, custom post type(s), custom archive(s) etc.

When you want a sticky header, like you already said you need to edit each template just to wrap the header in a group and make the group sticky.

If there was a primary template (not a template-part), this primary template could have the header template-part, and all the other templates wouldn't need to contain the header template-part. So, when you want to make changes to the header (in this case to wrap it in a group and make it sticky) you would only need to edit the one single primary template and not all the other templates.

It's just an idea at the moment and I'm going to try and do some testing to see how it would work in reality, and even if it would be possible.

[gvgvgvijayan]

If it is template then how should you use or import that in other template by default like home.html, single.html, etc.?

<!-- wp:template-part {"slug":"header"} /-->

<!-- wp:group {"tagName":"main","style":{"spacing":{"margin":{"top":"var:preset|spacing|60"}}},"layout":{"type":"constrained"}} -->
...
<!-- /wp:group -->

<!-- wp:template-part {"slug":"footer"} /-->

As of now in any template you can insert template part but not template(s). For e.g:

<!-- wp:template {"slug":"primary"} /-->

<!-- wp:group {"tagName":"main","style":{"spacing":{"margin":{"top":"var:preset|spacing|60"}}},"layout":{"type":"constrained"}} -->
...
<!-- /wp:group -->

<!-- wp:template-part {"slug":"footer"} /-->

[Andrew-Starr]

There would be a new block named something like "template" with block markup something like <!-- wp:template /--> which would automatically render the required template.

This would work in a similar way to the post content block <!-- wp:post-content /--> which automatically displays the content of the required post/page.

In your primary template you would have something like the following, with the header inside a sticky group, then the new template block and the footer template part.

<!-- wp:group {"style":{"position":{"type":"sticky","top":"0px"}},"layout":{"type":"default"}} -->
<div class="wp-block-group">

	<!-- wp:template-part {"slug":"header"} /-->

</div>
<!-- /wp:group -->

<!-- wp:template /-->

<!-- wp:template-part {"slug":"footer"} /-->

The other templates would not need to contain the header or footer template parts, only the blocks that you want for that particular template.

For example the single template with post title and post content blocks:

<!-- wp:post-title {"textAlign":"center","level":1} /-->

<!-- wp:post-content {"layout":{"type":"constrained"}} /-->

The home template with query loop and pagination for example:

<!-- wp:query {"queryId":1,"query":{"offset":0,"perPage":10,"postType":"post","order":"desc","orderBy":"date","author":"","search":"","sticky":"","inherit":true}} -->
<div class="wp-block-query">
	<!-- wp:post-template {"layout":{"type":"grid","columnCount":2}} -->

		<!-- wp:post-title {"isLink":true} /-->

		<!-- wp:post-featured-image {"isLink":true} /-->

		<!-- wp:post-terms {"term":"category"} /-->

		<!-- wp:post-date /-->

	<!-- /wp:post-template -->

	<!-- wp:query-pagination {"paginationArrow":"arrow","showLabel":false,"layout":{"type":"flex","justifyContent":"center"}} -->
		<!-- wp:query-pagination-previous /-->

		<!-- wp:query-pagination-numbers /-->

		<!-- wp:query-pagination-next /-->
	<!-- /wp:query-pagination -->

</div>
<!-- /wp:query -->

The primary template would be entirely optional for those who want to try it out, and to not break any existing setups.

[jinsley8]

Yes, this is an issue. The easiest fix would be to allow the position setting on template parts in page templates.

A follow-up solution would be to not wrap the header or footer template part again in a page template. Just render what is in the original template part.

[Andrew-Starr]

Yes, this is an issue. The easiest fix would be to allow the position setting on template parts in page templates.

Allowing position setting directly on the template part in page templates would make it only marginally easier. You would still need to edit every template which is the same procedure as now.

IIRC, in the early days of block theming, template parts did have block controls - although fixed position didn't exist as an attribute at that time - and it was decided to remove the controls to avoid the issue of users making changes to a template part in say the page template and perhaps not realising that those changes would only take effect on that template, and not on other templates. I don't think going back to that is a good idea.

[Andrew-Starr]

A follow-up solution would be to not wrap the header or footer template part again in a page template. Just render what is in the original template part.

If I'm understanding this correctly (please correct me if I've got this wrong) this wouldn't work as you would force the same header or footer template part on every template, and there are genuine use cases where one may want a different header or footer depending on the template e.g. landing pages, ecommerce checkout etc.

[jinsley8]

But you can only create one header template part, correct? If you wanted a different header in a couple of templates then wouldn't you save the 2nd header as a regular template part and add it as a normal part?

[Andrew-Starr]

You can create an unlimited number of template parts.
When you refer to a template part as a "header template part" it is still a "regular template part", the only difference is that it is categorized as a "Header".

Any template part can be categorized as either "Header", "Footer", "Sidebar" or "Uncategorized" so when you create a new template part you can create it any of these categories (referred to as "Areas" in the editor) and use it wherever you want.
So for example you could create a new "Footer" template part and use it as a "Header" if you really wanted to.