Skip to content

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

@mehne

Description

@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

Metadata

Metadata

Assignees

No one assigned

    Labels

    CSS StylingRelated to editor and front end styles, CSS-specific issues.[Feature] LayoutLayout block support, its UI controls, and style output.

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions