Blockbase: Update the stacking of site title and tagline in Blockbase and co

[scruffian]

Changes proposed in this Pull Request:

This updates the way that site title and site tagline blocks stack in the header. I realised we could do this easily without any CSS. I think this is preferable as it will give a lot more space to the navigation before it stacks.

Blockbase:

Quadrat:

Geologist:

Zoologist:

Mayland blocks:

Russell:

Kerr:

Related issue(s):

#4881

[MaggieCabrera]

I agree with this if @beafialho and @kjellr give the thumbs up, it helps when either the site title, tagline or the menu are very long.

Skatepark doesn't seem to be aligned though, although this PR is not affecting it we should make it look like the rest:

Looks like mobile works fine too with this change:

With tagline	Without

[beafialho]

This looks good, except for Skatepark which is misaligning on mobile:

Here's how it should align, according to the Figma file:

[scruffian]

I don't see that problem on Skatepark:

Either way this PR doesn't touch skatepark, so I don't think that should stop us merging.

[pbking]

I tried to make it even more "blocky" by wrapping things in another row:

<!-- wp:group {"className":"site-header","layout":{"type":"flex","justifyContent":"space-between"},"style":{"spacing":{"padding":{"bottom":"80px"}}}} -->
<div class="wp-block-group site-header" style="padding-bottom:80px">

	<!-- wp:group {"layout":{"type":"flex"}} -->
	<div class="wp-block-group">
		<!-- wp:site-logo /-->

		<!-- wp:group -->
		<div class="wp-block-group">
			<!-- wp:site-title /-->
			<!-- wp:site-tagline {"style":{"typography":{"fontSize":"var(--wp--custom--font-sizes--tiny)"}}} /-->
		</div>
		<!-- /wp:group -->
	</div>
	<!-- /wp:group -->

	<!-- wp:navigation {"className":"is-style-blockbase-navigation-improved-responsive","itemsJustification":"right","isResponsive":true,"__unstableLocation":"primary","__unstableSocialLinks":"social"} /-->
</div>
<!-- /wp:group -->

Doing so allowed more of the header.scss to be cleaned out, however the design changing so that the logo was above and in-the-center wasn't do-able that way.

As it stands this change just updates the design, it doesn't simplify the header like I was hoping we could.

My 'druthers would be to drop the design (at least for Blockbase) where the mobile layout is different than desktop allowing the design to be more fully represented in block markup rather than CSS. But that's a bigger change then the design change done here and more impactful I think.

If the image needs to stay where it is this change looks good and we should ship it. All the themes I checked out looked correct.

[kjellr]

I think we should keep the image where it is today on mobile. 👍

[kjellr]

@scruffian, @pbking: Let's please revert this change. This has a very noticeable impact to users of these themes, and it also does not look right today anyway: