-
Notifications
You must be signed in to change notification settings - Fork 4.5k
Description
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
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
- Create new post
- Add Query Loop block
- Go to Inspector Controls > Advanced > disable Reload full page (to enable client-side navigation)
- Add Stack block to Post Template and change some setting, for example align to right. Example:
- Save and go to frontend
- 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.
- Refresh the page (mimicking you just start your flow here)
- 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 |
---|---|
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