Layout styles are incompatible with Interactivity API client-side navigation

[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

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:

5. Save and go to frontend
6. 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.
7. Refresh the page (mimicking you just start your flow here)
8. 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

[Gulamdastgir-Momin]

Hi @kmanijak

I wasn’t able to replicate the issue on my end. Could you please share a video demonstrating the problem for better understanding?

Thanks!

[Mayank-Tripathi32]

Hello @kmanijak ,

Thank you for reporting this,

I’ve been able to replicate the issue when using wrapper blocks like Group or Stack. However, it works fine when styling the text directly without wrapping it in these blocks.

I will look into possible solution for the same.

cc: @Gulamdastgir-Momin

[luisherranz]

As of today, there is no solution for this problem.

As part of the WordPress 6.8 iteration, we are working to address all these issues related to region-based client-side navigation. Our idea is to replace all the CSS of the page when navigating to a new page and also load the JavaScript for the new modules. This not only opens up the possibility of using full-page client-side navigation, but it also solves all these problems in region-based client-side navigation. However, it's something we are still working on.

My suggestions are:

1. Disable client-side navigation when this case is detected. It can be done using wp_interactivity_config.
2. Always render all the items on the last page, using dummy content and hiding their final HTML. This is probably a bit riskier, as the dummy content could conflict with a custom block.
3. Treat the blocks that use layout styles as incompatible. In other words, disable client-side navigation when a block using layout styles is detected.

I understand that none of those solutions is ideal, but that's the current state of things. I hope the work on client-side navigation improvements in WordPress 6.8 can finally lift the limitations of region-based client-side navigation.