Quadrat: revise post header and meta

[jffng]

This PR addresses #3784.

Before	After

One thing I wasn't able to address is changing the divider between categories. This is baked into the block at the moment.

[MaggieCabrera]

is it better to use padding on the group block? even margin now that we can do that? I'm writing this but I think I prefer spacers when the distance is so prominent so feel free to ignore

[jffng]

Yeah, for some reason using spacers feels a bit nicer when the spacing is large and opinionated like this. It makes the design more explicit via blocks.

[MaggieCabrera]

this is the same we are using for h1, should we make a variable?

[jffng]

Ohh, perhaps. I will look at adding one.

[MaggieCabrera]

This looks good to me in terms of code

[kjellr]

One thing I wasn't able to address is changing the divider between categories. This is baked into the block at the moment.

That's weird! Can we adjust using CSS in the meantime?

[jffng]

@kjellr

Can we adjust using CSS in the meantime?

It looks like the divider is output in raw HTML (no wrapping or pseudo element), so I can't target / change its contents with CSS:

I will look at submitting an improvement in Gutenberg (EDIT: opened an issue here WordPress/gutenberg#31710). In the meantime, is the rest of this PR okay to you?

I also just realized the way I'm adding the dot in between the date isn't good because it will always display, even if the post has no categories. So I will change that.

---

[kjellr]

While that issue gets sorted out, can you do something like this pseudocode to hide the pipes?

.wp-block-post-terms {
 color: var(--background);
}

.wp-block-post-terms a {
 color: var(--foreground);
}

[jffng]

Okay, here's what the post header is like now:

Desktop	Mobile

(Header + mobile menu styling will be addressed separately)

[kjellr]

Added some small adjustments to even things out. Once those are in place, I think this is good to merge. We may want to make some adjustments on mobile somehow, since some of the spacing seems extra-large there. But we can reassess in a separate PR.