Group - Fix inner container regexes using fixed div tag

[davecpage]

Description

I've adjusted the two regexes used within the function gutenberg_restore_group_inner_container so that rather than using the fixed div element tagname it now changes based on what has been selected for that group.

Fixes #34404

How has this been tested?

Using the TwentyTwentyOne theme I setup a page with a parent group block set to use the HTML element section within which I created 2 child groups that use the default div element. Before the regex change the frontend showed the 2nd child group within the 1st because of the restored wp-block-group__inner-container. Afterwards the 2 child groups are correctly shown as siblings.

Screenshots

Before (parent group has a white background set):

After:

Types of changes

Uses sprintf to change the fixed div in the two regexes to be whatever has been set for the group block.

Checklist:

• My code is tested.
• My code follows the WordPress code style.
• My code follows the accessibility standards.
• I've tested my changes with keyboard and screen readers.
• My code has proper inline documentation.
• I've included developer documentation if appropriate.
• I've updated all React Native files affected by any refactorings/renamings in this PR (please manually search all *.native.js files for terms that need renaming or removal).

[github-actions]

👋 Thanks for your first Pull Request and for helping build the future of Gutenberg and WordPress, @davecpage! In case you missed it, we'd love to have you join us in our Slack community, where we hold regularly weekly meetings open to anyone to coordinate with each other.

If you want to learn more about WordPress development in general, check out the Core Handbook full of helpful information.

[Mamaduka]

Thanks for working on this, @davecpage.

Tested using similar block markup and can confirm this fixes the issue.

We can merge #36221 separately on GitHub, but it might be a good idea to combine both fixes on Trac.

Block Markup

<!-- wp:group {"tagName":"section","style":{"spacing":{"padding":{"top":"20px","right":"20px","bottom":"20px","left":"20px"}}},"backgroundColor":"purple"} -->
<section class="wp-block-group has-purple-background-color has-background" style="padding-top:20px;padding-right:20px;padding-bottom:20px;padding-left:20px"><!-- wp:group -->
<div class="wp-block-group"><!-- wp:paragraph {"backgroundColor":"red"} -->
<p class="has-red-background-color has-background">First inner group!</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->

<!-- wp:group {"backgroundColor":"green"} -->
<div class="wp-block-group has-green-background-color has-background"><!-- wp:paragraph -->
<p>Second inner group!</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group --></section>
<!-- /wp:group -->

[github-actions]

Congratulations on your first merged pull request, @davecpage! We'd like to credit you for your contribution in the post announcing the next WordPress release, but we can't find a WordPress.org profile associated with your GitHub account. When you have a moment, visit the following URL and click "link your GitHub account" under "GitHub Username" to link your accounts:

https://profiles.wordpress.org/me/profile/edit/

And if you don't have a WordPress.org account, you can create one on this page:

https://login.wordpress.org/register

Kudos!

[andrewserong]

Cherry picked into the Gutenberg 11.9 release in: 86fb466