Accordions Should Auto-wrap contents

[bd-viget]

Summary

This issue is related to animating the Core Details block.

If we attempt to add a smooth open/close animation to the content of the Details block, the targeted elements can be unclear. To accommodate for the dynamic content, we should always wrap the content in a group block (using the render_block filter) whenever there is more than 1 sibling element in the content, then target the nextSibling of the summary element.

Examples

Only 1 Sibling: No Wrap Necessary

<details class="wp-block-details">
    <summary>Lorem ipsum dolor sit amet, consectetur adipiscing elit</summary>
    <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</details>

Only 1 Sibling: No Wrap Necessary

<details class="wp-block-details">
    <summary>Lorem ipsum dolor sit amet, consectetur adipiscing elit</summary>
    <div class="wp-block-group">
        <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium</p>
    </div>
</details>

2 Siblings: Needs Group Wrapper

<details class="wp-block-details"
    <summary>Lorem ipsum dolor sit amet, consectetur adipiscing elit</summary>
    <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium</p>
</details>