Open
Description
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
Labels
No labels