There is no way for the front side to determine that a Group Block is a "Row" variation.

[ddryo]

Description

Since WordPress 5.9, the wp-container-{id} class is given to the Group block, and the flex style of "Row" is written for this selector.

Class names that can be used to determine whether a block is a "Row" (such as is-row) are not output, so the theme cannot adjust the style for "Row" only.

Why do we need classes like is-row?

In some cases, Block Styles are registered and used for Group blocks.

When these block styles are used in "Row "blocks, the design may be broken.

So, we need to make minor adjustments to the "Row" blocks.

Step-by-step reproduction instructions

1. Place the "Row" block.

Screenshots, screen recording, code snippet

Environment info

• WordPress 5.9-RC3
  -Twenty Twenty-One

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

[ddryo]

Are there any plans to fix this problem?

I think it is a pretty important issue.

[ddryo]

I would like to propose a new problem with the absence of the is-row class.

In the classic theme, there are cases where wp-container-{id} output is unnecessary.

Suppose we stop the output of wp-container-{id} with the following code.

remove_filter( 'render_block', 'wp_render_layout_support_flag' );

In this case, the collapsed block needs to be adjusted by applying CSS separately, but there is no identifiable class for the "row" variation, and it is not possible to apply flex to it on your own.

Translated with www.DeepL.com/Translator (free version)

[cbirdsong]

Here is an interim workaround filter that also accounts for the "Stack" variation:

function block_filter_group_add_layout_classes($block_content, $block)
{
	if (empty($block["attrs"]["layout"])) {
		return $block_content;
	}

	$classes = [];

	if (!empty($block["attrs"]["layout"]["type"]) && $block["attrs"]["layout"]["type"] == "flex") {
		if (isset($block["attrs"]["layout"]["orientation"])) {
			$orientation = $block["attrs"]["layout"]["orientation"];
		} else {
			$orientation = "horizontal";
			// orientation not explicitly defined on the "row" variation as of 6.0, so assume horizontal if absent
		}

		switch ($orientation) {
			case "vertical":
				$classes[] = "is-layout-stack";
				break;
			case "horizontal":
				$classes[] = "is-layout-row";
				break;
		}
	}

	if (!empty($block["attrs"]["layout"]["justifyContent"])) {
		$classes[] = "is-content-justification-" . $block["attrs"]["layout"]["justifyContent"];
	}

	if (!empty($block["attrs"]["layout"]["flexWrap"])) {
		$classes[] = "is-" . $block["attrs"]["layout"]["flexWrap"];
	}

	if (!empty($classes)) {
		$classes = implode(" ", $classes);

		$search = 'class="wp-block-group';
		$replace = 'class="wp-block-group ' . $classes;
		$block_content = preg_replace("/" . $search . "/", $replace, $block_content, 1);
	}

	return $block_content;
}
add_filter("render_block_core/group", "block_filter_group_add_layout_classes", 10, 2);

Caveats:

• You probably need to remove the .wp-container- class for the preg_replace to work.
• This will stop working entirely if the value of $block["attrs"]["layout"]["type"] changes away from flex.
• There will be redundant or duplicate classes added to your markup once core adds semantic classes to these blocks.

[ddryo]

I just confirmed that the class was added in 6.1.
thank you!