fix: custom header content cannot be placed below the site header - #1564
Open
ngineer420 wants to merge 1 commit into
Open
fix: custom header content cannot be placed below the site header#1564ngineer420 wants to merge 1 commit into
ngineer420 wants to merge 1 commit into
Conversation
Custom header HTML is inserted at the top of <body>, which puts it above the nav bar and outside #root. Since the nav bar and the page are both inside #root and the injected node is a sibling of it, there is no CSS that can move it back into place -- so a banner under the site's own header, which is what most sites want a header area for, is unreachable. The layout now renders a slot below <Header /> and the server template emits into the same element, so both render paths agree on where custom header content lives. Two details this needs to work: - Layout renders the content rather than Customize injecting it. React replaces #root's contents when it takes over, so anything injected there is destroyed the moment the page hydrates, and restoring it afterwards makes the banner visibly appear, vanish and return. - The rendered value falls back to whatever is already in the slot. The customize store is filled by an API call and is empty on the first render, so rendering it empty would blank the server's markup for as long as that request takes. Customize keeps the head and footer areas, which are outside #root and unaffected.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Proposed Changes
Custom header HTML is injected at the top of
<body>:and the server template emits it in the same place, before
<div id="root">.That puts it above the nav bar and outside
#root. The nav bar and the pageare both inside
#root, and the injected node is a sibling of it, so nostylesheet can move it back into place. A banner under the site's own header —
which is what most sites want a header area for — is unreachable.
Layoutrenders a#custom-header-slotbelow<Header />Customizekeeps the head and footer areas, which are outside#rootandunaffected
Two details this needs in order to work:
Layoutrenders the content rather thanCustomizeinjecting it. Reactreplaces
#root's contents when it takes over, so anything injected there isdestroyed on hydration; restoring it afterwards makes the banner visibly
appear, vanish and return.
store is filled by an API call and is empty on the first render, so rendering
it empty would blank the server's markup for as long as that request takes.
Tested on 2.0.2 with a banner in the custom header area, signed out and signed
in, on both the server-rendered and SPA navigation paths.