Flex Layout: Incorrect default alignment value used in Vertical Alignment Control Component

[yogeshbhutkar]

Description

Originally discovered by @luisherranz while testing here #68112 (review) and splitting it from the enhancement as this is an existing bug.

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

Lines 202 to 205 in f14a977

	const defaultVerticalAlignment =
	orientation === 'horizontal'
	? verticalAlignmentMap.center
	: verticalAlignmentMap.top;

Here, the default value of vertical alignment when the orientation is set to vertical is essentially verticalAlignmentMap.top which resolves to flex-start, which is not acceptable for the Toolbar. This causes the default value to remain unselected within the Vertical Alignment Toolbar.

Acceptable values:

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

Line 222 in f14a977

? [ 'top', 'center', 'bottom', 'stretch' ]

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

Lines 146 to 147 in f14a977

	const verticalAlignment =
	verticalAlignmentMap[ layout.verticalAlignment ];

It's expected that layout.verticalAlignment holds the key instead of the value, failing to do so causes the bug mentioned above (No default alignment value being rendered on the toolbar when the orientation is set to columns).

I searched the issue repository but couldn’t find a similar report. Please feel free to close this if it’s a duplicate.

Step-by-step reproduction instructions

1. Create a Row block.
2. Verify that the default value of Alignment in the Toolbar is set as Align middle.
3. Convert the Row to a Column block.
4. Notice, that the Alignment value within the Toolbar is missing, whereas, it should have been selected as Top.

Screenshots, screen recording, code snippet

Environment info

• WordPress Version: 6.8-alpha-59361
• Gutenberg Version: Trunk (654bace)
• OS: macOS Sequoia

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