Skip to content

Layout styles are incompatible with Interactivity API client-side navigation #67308

@kmanijak

Description

@kmanijak

Description

Blocks relying on layout styles, for example Stack, may be corrupted when used with the client-side navigation (in Query Loop).

This happens if for any reason, the number of items displayed initially may grow over time. There are iterative classes applied to the content

Image

generated in here. And only those classes with those IDs that are initially displayed are loaded (for example last page that doesn't display all of the posts). Hence if you change the page to previous one displaying full page of posts, there will be posts with "new" IDs not loaded initially and they will be missing styles.

Step-by-step reproduction instructions

  1. Create new post
  2. Add Query Loop block
  3. Go to Inspector Controls > Advanced > disable Reload full page (to enable client-side navigation)
  4. Add Stack block to Post Template and change some setting, for example align to right. Example:

Image

  1. Save and go to frontend
  2. Go to the very last page of Query Loop. For bug to occur there should be less posts displayed than the "posts per page". If the last page is full, please change the "posts per page" so the last page displays less posts.
  3. Refresh the page (mimicking you just start your flow here)
  4. Change the page to previous one

Expected: All the posts have the same layout
Actual: Some posts have broken layout as their styles weren't initially loaded and are not available on the page change

Screenshots, screen recording, code snippet

Last page. All the posts have right-align layout Previous page, some posts have broken layout
Image Image

Environment info

  • WordPress 6.7
  • Theme: TT5

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] Query LoopAffects the Query Loop Block[Feature] Interactivity APIAPI to add frontend interactivity to blocks.[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