Seedlet Blocks: Make the header more compact

[alaczek]

Seeldet Blocks is the future base theme of our FSE compatible designs. To give ourselves a running start we're already working on layouts using Seedlet Blocks, but we've run into some issues with header design.

If you look at our current starter designs, 7 out of 10 are using a theme with a compact, two-column header as a base. This is because we're aiming to show as much of the design above the fold as possible to create an appealing "wine label" (at 1280 x 960px resolution).

For comparison, here's a new design I'm working on, with default Seedlet header (sans logo):

...and this is the kind of header I had in mind for this particular design:

The secondary goal is to include as much content as possible in the preview in Gutenboarding. Tight spacing in the header goes a long way. While FSE will eventually improve enough to allow us to create all kinds of headers, having a header that fits our needs out of the box would bridge the current gap.

I have two ideas on how we could address this:

1. Reduce the top and bottom padding in the header. Current 90 px padding is quite generous, maybe we could reduce it to say 30px? Could we examine the spacings between the header element too and reduce as much as possible?
2. Change the header design to a single-line, two-column similar to Mayland. This could be done in Seedlet Blocks, or in another block-based child theme if those are on the map (à la Varia child-themes).

cc @ianstewart

[alaczek]

I worked today on a post about FSE tools (p9Jlb4-1Do-p2), and it becomes clear that in the absence of options to control vertical spacing, having the header outer padding/margin built into the theme will prevent us from creating headings like the one in Rockfield.

Here's my attempt:

We can always add spacing using the Spacer block, but we don't have any tools yet to remove it, so we should carefully consider what we're baking into the theme.

[kjellr]

It's actually really easy to override that — you can just remove the site-header class from the container that wraps the header template part:

All that class does is add the extra padding, really. So it doesn't hurt at all to lose it. We should really use spacers in the header template part instead of tying into that class anyway — it's only there as a temporary shortcut.

[alaczek]

Mind blown 😁 Are there any other handy classes that would make our life easier?

[kjellr]

The site-footer class is applied by default to the footer right now, and I believe that adds some extra space. In addition, we do add site-content to the main content area, though I can't remember if that does anything. 😄