-
Notifications
You must be signed in to change notification settings - Fork 4.7k
Description
Description
When content is replaced an Interactivity API router region, some attributes seem to be removed during the replacement. Specifically, the open attribute of a details element. The HTML being returned from the server will contain the open attributes as expected, but when the content is updated in the router region the open attribute has been removed.
This behavior can be demonstrated in the stock Query Loop and Details blocks when the Query Loop employs enhanced pagination, but I originally observed it with custom Interactivity API router and accordion blocks.
Step-by-step reproduction instructions
This test involves pagination; and assumes that there are multiple posts available to paginate through.
- Create a new test page.
- Add a Query Loop to that test page. It should be Custom query type, taget Posts, and show 1 item per page (to force pagination; a single item is enough to demonstrate the issue).
- Enable enhanced pagination on the Query Loop (disable "Reload full page" under the Advanced panel).
- Configure the Post Template such that it has a Details block, that Details block has contents to be shown when the details block is expanded, and that the Details block is configured to "Open by default".
- Publish the page, and review the rendered results. The first render (after full page load) will show the Details block expanded, but the results of any pagination operations will show the block collapsed.
Screenshots, screen recording, code snippet
Sample test page, creating a basic Query Loop targeting posts, with a per-page post count of 1, and enhanced pagination enabled.
<!-- wp:query {"queryId":6,"query":{"perPage":1,"pages":0,"offset":0,"postType":"post","order":"desc","orderBy":"date","author":"","search":"","exclude":[],"sticky":"","inherit":false,"taxQuery":null,"parents":[],"format":[]},"enhancedPagination":true} -->
<div class="wp-block-query"><!-- wp:post-template -->
<!-- wp:post-title /-->
<!-- wp:details {"showContent":true} -->
<details class="wp-block-details" open><summary>Post details</summary><!-- wp:paragraph {"placeholder":"Type / to add a hidden block"} -->
<p></p>
<!-- /wp:paragraph -->
<!-- wp:post-excerpt /--></details>
<!-- /wp:details -->
<!-- /wp:post-template -->
<!-- wp:query-pagination -->
<!-- wp:query-pagination-previous /-->
<!-- wp:query-pagination-numbers /-->
<!-- wp:query-pagination-next /-->
<!-- /wp:query-pagination -->
<!-- wp:query-no-results -->
<!-- wp:paragraph {"placeholder":"Add text or blocks that will display when a query returns no results."} -->
<p></p>
<!-- /wp:paragraph -->
<!-- /wp:query-no-results --></div>
<!-- /wp:query -->
Environment info
This can be replicate on WordPress Playground using the latest WordPress and Gutenberg versions.
I've noticed the behavior in Chrome, Firefox, and Safari.
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
Please confirm which theme type you used for testing.
- Block
- Classic
- Hybrid (e.g. classic with theme.json)
- Not sure