Cannot align inner blocks in flex layout when allowSwitching is set to true

[metropoliscreative]

Description

When a block has layout support and the allowSwitching subproperty is set to true, the vertical alignment setting should be displayed in the block toolbar when the layout is set to flex. The alignment setting is not shown unless allowSwitching is set to false (the default) and flex is the default layout type.

Step-by-step reproduction instructions

Create a block with layout support and allowSwitching set to true

Screenshots, screen recording, code snippet

This is the code that prevents the alignment button from being added to the block toolbar when allowSwitching is set to true:

gutenberg/packages/block-editor/src/layouts/flex.js

Lines 97 to 99 in e7f0dc5

	if ( layoutBlockSupport?.allowSwitching ) {
	return null;
	}

Environment info

WordPress 6.7, Gutenberg plugin not active

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

Please confirm which theme type you used for testing.

• Block
• Classic
• Hybrid (e.g. classic with theme.json)
• Not sure

[Mayank-Tripathi32]

@metropoliscreative Could you share a recorded video of the issue? Also, could you clarify the intended behavior here and the reasoning behind it?

Thanks

[metropoliscreative]

First video shows a sample block with layout support and the default layout type set to flex. The block toolbar contains both justification and alignment controls.

block.json supports:

"supports": {
    "layout": {
        "allowSwitching": false,
        "default": {
            "type": "flex"
        }
    }
}

Screen.Recording.2024-11-14.at.3.42.10.PM.mov

The next video shows the same block with allowSwitching enabled. When the Flex layout is selected for the block there is a justification control but no alignment control.

block.json supports:

"supports": {
    "layout": {
        "allowSwitching": true
    }
}

Screen.Recording.2024-11-14.at.3.41.12.PM.mov

could you clarify the intended behavior here and the reasoning behind it?

I would expect the block to receive alignment control along with justification control when the layout type is set to flex, even if switching the layout type is enabled for the block.

[Infinite-Null]

Hi @metropoliscreative,

Thank you for bringing this up. I’ve looked into it and was able to reproduce the issue as follows:

For the configuration:

"supports": {
    "layout": {
        "allowSwitching": true
    }
},

Here is the resulting behavior (No settings in block toolbar):

For the configuration:

"supports": {
    "layout": {
        "allowSwitching": false,
        "default": {
            "type": "flex"
        }
    }
}

Here is the resulting behavior:

To improve accessibility and provide a better user experience, I believe adding settings for this functionality within the block toolbar would be a great enhancement.