Blockbase: Update Blockbase and children to use flex

[scruffian]

Changes proposed in this Pull Request:

Since https://github.com/WordPress/gutenberg/pull/33359/files merged we can use the flex property of the group block to achieve this layout. The blockGap setting doesn't seem to be working in my tests.

Related issue(s):

#4463

[MaggieCabrera]

Mmmh, I think the gap was only applying initially to the normal layout, not the flex one (so it's actually a vertical gap between blocks inside a container, not horizontal)

[scruffian]

blockGap should be inside styles not settings. This now works as expected.

[MaggieCabrera]

Looks like Quadrat's header is affected by this (here):

[scruffian]

Good catch. Updated it!

[MaggieCabrera]

I think this might be too big:

This is also applying vertically to blocks inside layout inherit groups. The rule coming from here.

I think GB should have two different gap values for the two different layouts, since inherit is going to be separating vertically and flex is horizontal, which usually means smaller blocks of text that don't need such a big gap between them.

[scruffian]

I've updated this to use the vertical margin everywhere. Ideally we'd be able to control the horizontal and vertical separately but for now I think this is an OK compromise.

Tracking here: WordPress/gutenberg#34347

[MaggieCabrera]

Skatepark's post meta looks like this now:

[pbking]

Fixed skatepark's meta:

Had to use an !important to beat the Gutenberg center style. That seems to opinionated to not have a way to configure.

[pbking]

NOW it looks like this:

[pbking]

post-meta is not a core block, it's just a class that we use for this bit of the theme :)

I just realized that and deleted my comment. :P

[MaggieCabrera]

I just realized that and deleted my comment. :P

No one will know :D

[pbking]

I can't find anything else that doesn't look correct. I believe this is ready to come in.

[pbking]

LGTM
🚢

[scruffian]

Thanks for finishing this one off @pbking