Skip to content

Accordions Should Auto-wrap contents #176

Open
@bd-viget

Description

@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>

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions