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
- Create a custom block
- use
"supports": { "__experimentalLayout": { "allowSwitching": false, "allowInheriting": false, "default": { "type": "flex", "flexWrap": "wrap", "justifyContent": "center" } } }
- get bothered by a gap of 0.5em and an align-items:center
Environment info
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
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
"supports": { "__experimentalLayout": { "allowSwitching": false, "allowInheriting": false, "default": { "type": "flex", "flexWrap": "wrap", "justifyContent": "center" } } }Environment info
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