Add "stretch" as option on Row block.

[johnstonphilip]

What problem does this address?

It's currently not possible to use align-items:stretch to make items inside a row block vertically fill the space available.

While stretch is the default for a flex item in CSS, I am not able to use that in the block editor.

What is your proposed solution?

Add "stretch" to the available options, alongside Align top, Align middle, and Align bottom.

gutenberg/packages/block-editor/src/components/block-vertical-alignment-control/ui.js

Lines 12 to 25 in c761edb

	const BLOCK_ALIGNMENTS_CONTROLS = {
	top: {
	icon: alignTop,
	title: _x( 'Align top', 'Block vertical alignment setting' ),
	},
	center: {
	icon: alignCenter,
	title: _x( 'Align middle', 'Block vertical alignment setting' ),
	},
	bottom: {
	icon: alignBottom,
	title: _x( 'Align bottom', 'Block vertical alignment setting' ),
	},
	};

[karmatosed]

My thought around this is perhaps the naming. Would calling it something like 'fill' mean more to not just developers?

[cbirdsong]

This would also be good to add on the Stack block, as outlined in #46008.

[willybahuaud]

I think the problem is in the editor style. Il you look at the column block, it's stretched by default. But in the group (layout row) the css rules are :

.editor-styles-wrapper .is-layout-flex{align-items:center}
body .is-layout-flex{align-items:center}

I don't know why this is so. After changing the style, the only persistent effect is that the "centered" icon remains grayed out even if it is not checked.

Can someone explain us why centered is set by default here?

[tellthemachines]

Closing as "stretch" has been added in #47134.