Try/consolidate headers

[pbking]

Started from #5120 and encorporating changes and discussion from #5121.

The task of this change is to consolidate header styles designed for child themes into Blockbase which child themes can use as header/footer options. (Or maybe introduce those options in the children, regardless they should be alternative template parts, not replacements).

Closes #5087 #5119 #5066 #5166

[pbking]

Example of the goal with Quadrat's header style:

[pbking]

I THINK this is ready for a solid shake-down.

Template Part Alternatives

All header options (with the exception of Skatepark's) have been rolled up into Blockbase as alternate header template parts. The templates in the child themes have been changed to load those alternate templates by default. 'header-linear' is Quadrat's header used by Geologist and Zoologist. 'header-arbutus' is uh... creatively named and only used by Arbututs. 'header-centered' is Seedlet-Block's and 'header-minimal' is Videomaker's.

There is MINIMAL (but still some) CSS remaining for the header. It's responsible for modifying the layout and position of the site logo when in 'mobile' view as well as stacking title/tag in mobile view for the 'header-linear'

Skatepark is the exception to this. The Theme's header template and the CSS that went along with it were too large and too specific to be able to be refactored easily. Instead the header is still offered as an alternate template (header-ollie), but it's provided by Skatepark rather than Blockbase. This COULD be refactored to simplify the header and extract the CSS making it available for other themes but not for this pass.

Header Spacing

All of the template header templates include a new "header-spacer" template. The default template provided by Blockbase is simply a 50px spacer block. Adjusting the spacer in that template part changes the gap across the site. This has the benefits of a css variable in utility (define once, use many places) but is conveniently able to be modified by the user.

Where necessary themes that defined that gap in page templates were refactored to instead expect that space in the header.

Full Width Background Options

Each of the headers were (if necessary) refactored to allow a full-width group to have a background color. This was done with standard block layout techniques rather than CSS tricks to ensure that users of the FSE are able to customize the header completely.

Site Logo Sizing

CSS dictating the size of the theme's logo has been removed and replaced with block attributes. Unfortunately our themes have been dictating a HEIGHT while only a WIDTH option is available on the site-logo block.

Get Rid of Navigation Block Style

The alternate block style for navigation that cleans up the responsive menu was removed and is just styling provided by blockbase by default.

[scruffian]

I think we can achieve the differences in this file using theme.json

[pbking]

In general we want a gap between items, we only want SOME groups to be "gapless". I'm not sure how that could be achieved in theme.json.

Alternately we could just leave the gap and adjust the size of the spacer to be it's current size minus the gap size. The only problem with that was that it looked a little strange as an adjusting mechanism with the gap there, and also there are a couple of themes where the "header gap" is smaller than the "block gap" and the design target couldn't be achieved. If it's OK making those gaps slightly larger than they are now then we could do away with the concept entirely.

[scruffian]

I noticed a slight issue in the Videomaker header (it was on trunk too) so I've used the same classes in the header-minimal template to achieve the design intention.

[scruffian]

I also fixed some spacing issues in the Seedlet header:

[scruffian]

I noticed that the navigation was off in Quadrat/zoologist/Geologist, so I pushed a fix for that too.

[scruffian]

I made some simplifications to the arbutus header to make it more inline with the other themes. Unfortunately there's no way to specify a block style in theme.json so it will need to be a different template for now. I've renamed it to header-rounded-logo so that the difference is more obvious.

[scruffian]

I think this looks good to merge now, but I'd like another review from someone...

[pbking]

I noticed that the navigation was off in Quadrat/zoologist/Geologist, so I pushed a fix for that too.

The changes were put into those themes rather than blockbase. I believe those should go in Blockbase so that anything that header option gets the navigation fixes.

Also the responsive menus in all themes seem a little wonkey, especially when there are social icons.

[scruffian]

I believe those should go in Blockbase so that anything that header option gets the navigation fixes.

The navigation for these themes is right aligned, not left, so there does need to be something different in the theme somehow. I think the navigation needs greatly simplifying, but I think that needs to be a followup PR as this one is so big already. My aim was just to fix the visual regression so we could ship this :)

[pbking]

Adjusted the blockbase (default) navigation RE: Social icons:

Before: (also happening on trunk)

OR

After:

OR

[pbking]

Quradrat still has some visual problems and these are also happening on trunk. Those didn't seem to get all-the-way resolved.

[pbking]

After:

Also those styles are now a part of Blockbase assigned to the .blockbase-responsive-navigation-linear class which is assigned to the navigation block in the header-linear header option. Thus anything that leverages that header template part will also get the matching responsive styling.

(Zoologist)

The same has been done for videomaker.

[pbking]

The navigation for these themes is right aligned, not left, so there does need to be something different in the theme somehow. I think the navigation needs greatly simplifying, but I think that needs to be a followup PR as this one is so big already.

This should be visually correct now and accessible to any Blockbase theme. It could still definitely be simplified. What's been refactored into Blockbase is pretty much whole-hog what came from Quadrat, but it's not too heavy. I think it could be fine as-is until Gutenberg better offers some kind of responsive styling options.

I think this is ready for (one more?) look?

[scruffian]

LGTM

[MaggieCabrera]

Bring it in and we can iterate on Skatepark later on

[scruffian]

@Automattic/flow-patrol-manage these changes will need to happen to other Blockbase children...

[alaczek]

Could I please get some guidance on how to best make those changes in Kerr and Byrne?

In Byrne the issue is with both top padding and nav menu placement.

In Kerr I fixed the top padding, but the nav menu placement is off.

[scruffian]

What I would try is removing the header template from those themes so it falls back to the default Blockbase one. Blockbase supplies a variety of different header templates now, so you could choose one that you need.

If these themes need a different header from the one supplied then you'll need to add the justifyContent property to the header group block.

[alaczek]

Thanks for the tip! I tried the Blockbase headers and the linear one sounds like a good fit, but the spacer at the bottom really throws off the balance (in Byrne and Kerr at least). So I'm guessing I'm still going to need a custom header - unless there is another way?

[scruffian]

If you copy the template part called header-spacer.hmtl from Blockbase then you should be able to adjust the amount of space using that template.

[alaczek]

Yeah, I've thought about that too, but I do want zero, and it feels slightly hacky? But happy to do it if it's the right way :)

[scruffian]

You can do it either way, I think both are fine :)

[pbking]

If you want it zero you could just include an empty header-spacer.html template (like Arbutus). That way no spacer will be added there.

Adjusting the space by way of the header-spacer template ensures that the same amount of space (none) will be used should the user switch to another header option. If you make a custom header instead then if the user switches to another style then the default amount of space introduced by Blockbase will be used instead.

[alaczek]

Thanks for the tip @pbking - this is what I'm going to do!

[simison]

Empty header spacer causes UX issue, where "plus button" is always visible in the editor: #5236

[mtias]

Please, let's remove this concept of a "header spacer template" altogether and look for a different solution. This is super confusing as a user.