Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Open
3 of 6 tasks
kmanijak opened this issue Nov 26, 2024 · 3 comments · May be fixed by #68210
Open
3 of 6 tasks

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

kmanijak opened this issue Nov 26, 2024 · 3 comments · May be fixed by #68210
Assignees
@DAreRodz
Labels
[Block] Query Loop Affects the Query Loop Block [Feature] Interactivity API API to add frontend interactivity to blocks. [Status] In Progress Tracking issues with work in progress [Type] Bug An existing feature does not function as intended

Comments

@kmanijak
Copy link
Contributor

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
@kmanijak kmanijak added the [Type] Bug An existing feature does not function as intended label Nov 26, 2024
@Gulamdastgir-Momin
Copy link

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
Copy link
Contributor

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.

Image
Image

I will look into possible solution for the same.

cc: @Gulamdastgir-Momin

@gziolo gziolo added [Block] Query Loop Affects the Query Loop Block [Feature] Interactivity API API to add frontend interactivity to blocks. labels Nov 26, 2024
@luisherranz luisherranz mentioned this issue Nov 26, 2024
Open
40 tasks
@luisherranz
Copy link
Member

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.

This was referenced Dec 18, 2024
Merged
Draft
@github-actions github-actions bot added the [Status] In Progress Tracking issues with work in progress label Dec 20, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@DAreRodz DAreRodz

Labels
[Block] Query Loop Affects the Query Loop Block [Feature] Interactivity API API to add frontend interactivity to blocks. [Status] In Progress Tracking issues with work in progress [Type] Bug An existing feature does not function as intended
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Layout Support: Replace incremental IDs with hashes WordPress/gutenberg
6 participants
@gziolo @luisherranz @DAreRodz @kmanijak @Mayank-Tripathi32 @Gulamdastgir-Momin