Nesting groups with non-default tagName generates unexpected HTML

[hteumeuleu]

Description

When nesting a Group block inside another Group block with a non-default tagName attribute, the generated HTML seems wrong and unexpected.

Keeping the default tagName, the result of such blocks would be:

<div class="wp-block-group">
	<div class="wp-block-group__inner-container">
		<div class="wp-block-group">
			<div class="wp-block-group__inner-container">
				<p>Lorem ipsum.</p>
			</div>
		</div>
	</div>
</div>

Using a non-default tagName for the first Group (for example choosing <aside>), the result is the following:

<aside class="wp-block-group">
	<div class="wp-block-group">
		<div class="wp-block-group__inner-container">
			<div class="wp-block-group__inner-container">
				<p>Lorem ipsum.</p>
			</div>
		</div>
	</div>
</aside>

Notice how the .wp-block-group__inner-container divs are nesting in one another, instead of being direct children of each .wp-block-group element. The expected HTML here would have been:

<aside class="wp-block-group">
	<div class="wp-block-group__inner-container">
		<div class="wp-block-group">
			<div class="wp-block-group__inner-container">
				<p>Lorem ipsum.</p>
			</div>
		</div>
	</div>
</aside>

Step-by-step reproduction instructions

1. Add a "Group" block.
2. In the advanced panel of this block, change its "HTML element" value to anything other than the default (<div>) option. For example here, I'll pick <aside>.
3. Inside this first group, add another "Group" block.
4. Inside this second nested group, add a "Paragraph" block with "Lorem ipsum" in it.

Screenshots, screen recording, code snippet

Environment info

• WordPress 5.8.2 default installation with the Twenty Twenty-One theme, no plugins
• Firefox 96.0b10
• macOS 12.0.1

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

[Andrew-Starr]

I see you do not have Gutenberg installed, and in the latest version (and I assume in upcoming core WP 5.9 also) the inner element <div class="wp-block-group__inner-container"> is no longer used, and this issue will effectively be fixed.

The resulting HTML would be correctly nested like so:

<aside class="wp-block-group">
	<div class="wp-block-group">
		<p>Lorem ipsum.</p>
	</div>
</aside>

[Mamaduka]

@Andrew-Starr is correct. The issue was fixed via #36256 and will ship with WP 5.9.

[hteumeuleu]

Thank you!