WP 6.2 Update destroys flex-layouts in custom blocks (blockGap and align-items:center)

[mehne]

Description

Hello Everyone,

after the latest Patch 6.2 there was a change that adds a new class to every flex-styled block.
This results in 2 things, that are added, in the CSS:

:where(.is-layout-flex) { gap: 0.5em; }

and

body .is-layout-flex { flex-wrap: wrap; align-items: center; }

For core-blocks that is nothing new or strange. But for custom blocks, that use

"supports": { "__experimentalLayout": { "default": { "type": "flex", } } }

Both of them are a problem.

The new gap for example overrides the default of 0 so what was in one row before now wraps into multiple rows.
You can't change the gap though, so you have to override some code.

I found two workaround.
First - of course - is override the css-rule
Second is only possible for the theme-owner: you have to add this to your theme.json:
"settings": { "spacing": { "blockGap": true } }, "styles": { "spacing": { "blockGap": "0" } }

The second and way bigger problem is the align-items:center.
You can only get rid of it by overriding the css. (align-items:normal)

But why is this nessecary? Why do I have to override a css rule to its default? Why is WP changing the default? I See no reason.
So I support the #47099 issue here!

So in the end my question is this:
Is there a way to control the align-items property with the "__experimentalLayout" property? Cause I can control the justify-content so why not the align-items?
AND
Is there a way to set the default (horizontal) gap to 0 without the need to have access to the theme.json or to override the css?

Step-by-step reproduction instructions

1. Create a custom block
2. use "supports": { "__experimentalLayout": { "allowSwitching": false, "allowInheriting": false, "default": { "type": "flex", "flexWrap": "wrap", "justifyContent": "center" } } }
3. get bothered by a gap of 0.5em and an align-items:center

Environment info

• Wordpress 6.2

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

Yes

Edit: typo

[tellthemachines]

Is there a way to control the align-items property with the "__experimentalLayout" property? Cause I can control the justify-content so why not the align-items?

There is a verticalAlignment property that works the same as justifyContent does.

Is there a way to set the default (horizontal) gap to 0 without the need to have access to the theme.json or to override the css?

Not currently, but this would be worth looking into, thanks for the suggestion!

[mehne]

Hi, and thanks for your answer!

Sadly it does not. Look at my Screenshot pls.

So there is no option under "layout" to adjust the vertical alignment.
You can only adjust the justification and tell if it should be wrap/nowrap and if it should be column or row.

[tellthemachines]

@mehne sorry, I thought you were setting the values in theme.json. In the UI that control can be found in the block toolbar:

It's not great that the controls aren't all in the same place, and there are a few open issues to address that, along with other layout control improvements: #49272, #49448 and #42385.

Layout is still a work in progress, and all feedback helps make it better, so thanks for reporting this!

[mehne]

@mehne sorry, I thought you were setting the values in theme.json. In the UI that control can be found in the block toolbar:

It's not great that the controls aren't all in the same place, and there are a few open issues to address that, along with other layout control improvements: #49272, #49448 and #42385.

Layout is still a work in progress, and all feedback helps make it better, so thanks for reporting this!

Thanks for looking into this.
The alignment controls should be where the justification controls are, I think. But as you mentioned there are several issues about this.

But what about removing the the default "align-items:center" like described here: #47099

Thanks very much for your time and for looking into this!
:-)

[mehne]

As both issues are beeing adressed like said here
#49502 (comment)
and
#47099
and
#49272, #49448 and #42385.

I close this one and hope for the best :-)