Change Blockbase Header Design Target

[pbking]

The design target for "Stock" Blockbase Headers has two different layouts for Desktop vs Mobile.

Desktop:

Mobile:

This has always been tricky but is getting increasingly more difficult. (Using techniques outlined in that linked issue the desktop design target could be achieved (mostly) with just blocks and not special CSS, but how those techniques COULD result in mobile-only CSS differences is something I haven't figured out yet.).

TwentyTwentyTwo has similar header designs, but they remain consistent in the responsive view; a much easier feat.

Considering the "polyfill" goal of Blockbase shoehorning a design target like the current one seems the incorrect way to go.

I propose that instead we adopt a single design for Desktop/mobile and just use that. Quadrat and Skatepark (etc) seem reasonable to leverage CSS to achieve a particular design target like that but for the Blockbase I propose we simplify instead.

My 'Druthers:

[scruffian]

FWIW I much prefer the stacked site title and site tagline, and I think we should do that on all our themes, except maybe Videomaker.

[MaggieCabrera]

I kind of agree here. I also think it would be useful if Blockbase did like TT2 and had a couple of different options of headers that child themes can choose from, but we are writing way too much CSS to modify the mobile headers at the moment, the baseline one should be simpler.
@kjellr I'd love your opinion on this

[jasmussen]

we are writing way too much CSS to modify the mobile headers at the moment, the baseline one should be simpler

Happy to help here if I can. In cases like these, I'd agree you should ideally only need to write code to customize superficial stuff. As soon as structural stuff is changed, it increases the chance of drift.

[MaggieCabrera]

Happy to help here if I can. In cases like these, I'd agree you should ideally only need to write code to customize superficial stuff. As soon as structural stuff is changed, it increases the chance of drift.

Yeah, we are moving stuff everywhere on mobile as you can see in the screenshots, but it all started out when the navigation block was much more barebones and the responsive version needed a lot of CSS anyway, I think now it's in a good place to simplify that a bit

[jasmussen]

It does definitely seem like you could get a fair bit of the way with a few carefully put together Row blocks, and yes, the navigation has been in a bad place. TT1 is still a bit hobbled by the old CSS it carries around to style the past version of it.

That said, some of the improvements needed will likely go beyond the navigation block itself. I wonder if an interesting PR could be to implement some of the grid-based responsiveness outlined in this ticket on the row block. 🤔

[MaggieCabrera]

That said, some of the improvements needed will likely go beyond the navigation block itself. I wonder if an interesting PR could be to implement some of the grid-based responsiveness outlined in this ticket on the row block. 🤔

I wonder how those would be implemented though, in a manner that is flexible enough to allow for different layouts and it's not forcing you to stick to a particular one.

Also, WordPress/gutenberg#35820 would help a lot too

[jasmussen]

Also, WordPress/gutenberg#35820 would help a lot too

I didn't assign you as reviewer to not risk distracting from other items, but you're free to give a green check if you like ;)

I wonder how those would be implemented though, in a manner that is flexible enough to allow for different layouts and it's not forcing you to stick to a particular one.

Yes, it needs thought. The north star dream is to make it work so there's no user surfaced UI at all — "Stack on mobile" toggles have not been good solutions. But I do wonder if that one doesn't require at least a "mobile" breakpoitn query. I wonder if such a query could be surfaced in global styles 🤔. The CSS grid stuff that causes the 3 columns to collapse to 1 just needs to know the width at which the container will shift.

[MaggieCabrera]

Yes, it needs thought. The north star dream is to make it work so there's no user surfaced UI at all — "Stack on mobile" toggles have not been good solutions. But I do wonder if that one doesn't require at least a "mobile" breakpoitn query. I wonder if such a query could be surfaced in global styles 🤔. The CSS grid stuff that causes the 3 columns to collapse to 1 just needs to know the width at which the container will shift.

Yeah, headers are complicated enough that one simple solution won't cover all bases. I was looking at Blockbase's CSS and it's not so terrible in terms of the breakpoints it needs.

And feel free to tag me as reviewer anywhere, if I have time, I'll have a look for sure. Any of us for that matter, actually, we are all more or less equally familiar with our theme's codebase.

[kjellr]

FWIW I much prefer the stacked site title and site tagline, and I think we should do that on all our themes, except maybe Videomaker.

I agree. For what it's worth, the only reason Twenty Twenty-Two behaves the way it does is that we can't achieve something like what Blockbase does without a ton of extra CSS. So anything we can do in Gutenberg to make that sort of thing more possible is my preferred solution.

[pbking]

Recent changes to Gutenberg have made our existing design target work again. Since nothing is currently broken I'm moving this out of "in progress" and while I think maybe we could/should close it I'll defer that decision for now. I do still prefer the design noted in the description, but there's no longer a pressing reason to implement it.