Skip to content

Details element missing open attribute after enhancement pagination content update #74148

@claycarpenter

Description

@claycarpenter

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.

  1. Create a new test page.
  2. 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).
  3. Enable enhanced pagination on the Query Loop (disable "Reload full page" under the Advanced panel).
  4. 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".
  5. 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

Metadata

Metadata

Assignees

Labels

[Block] DetailsAffects the Details Block - used to display content which can be shown/hidden[Feature] Interactivity APIAPI to add frontend interactivity to blocks.[Package] Interactivity Router/packages/interactivity-router[Status] In ProgressTracking issues with work in progress[Type] BugAn existing feature does not function as intended

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions