Query Loop & classic themes: when using the pagination dynamic behavior it breaks the styling of the whole page

[Robertght]

Description

Using the pagination dynamic behavior breaks the styling of the whole page.

As a workaround, on the Query Loop advanced settings, the Reload full page option can be turned on to not use this dynamic behavior when loading other pages.

Step-by-step reproduction instructions

1. Activate a classic theme like Twentyseventeen/Pictorio
2. Create a new page
3. Add the Query block
4. Ensure the Query block has "Reload full page" turned off
5. Make sure you have the Pagination block added.
   PS: Make sure you have posts/pages to render in the block.

Screenshots, screen recording, code snippet

Screen.Capture.on.2025-02-05.at.09-55-14.mp4

Environment info

Gutenberg 20.0.0
WordPress 6.7.1

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

[nani-samireddy]

Hi @Robertght, I tried the same steps but not able to replicate it
Is there any specific/custom plugin or add-on you are using?

Screen.Recording.2025-02-06.at.11.52.12.AM.mov

[dsas]

@nani-samireddy I can repro. The only plugin I have enabled is Gutenberg 20.2.0.

Looking at your video I suspect your Query Loop block has "Reload full page' enabled.

Screen.Recording.2025-02-06.at.09.38.02.mov

[dsas]

I updated the repro steps to add:

Ensure the Query block has "Reload full page" turned off

[nani-samireddy]

Hi @dsas,
I have Twenty Seventeen Theme, and updated the Query block with "Reload full page" off

I'm still not able to reproduce it

Screen.Recording.2025-02-06.at.5.53.35.PM.mov

[dsas]

@nani-samireddy oh that's interesting. Which version of Gutenberg do you have?

[nani-samireddy]

@dsas Gutenberg version 20.2.0

[t-hamano]

I can't reproduce this issue either. Maybe there's some condition that needs to be met to reproduce it.

• Can you reproduce this issue with Gutenberg disabled, i.e. WordPress 6.7.x?
• Could you switch to a code editor and paste the HTML here? Because it might be the Query Loop block setting that's affecting it.

[dsas]

@t-hamano I can't repro with Gutenberg disabled.

Here's my page content:

<!-- wp:query {"queryId":1,"query":{"perPage":2,"pages":0,"offset":0,"postType":"post","order":"desc","orderBy":"date","author":"","search":"","exclude":[],"sticky":"","inherit":false},"enhancedPagination":true,"metadata":{"categories":["posts"],"patternName":"core/fullwidth-posts-titles-with-dates","name":"Fullwidth posts titles with dates"},"align":"full","layout":{"type":"default"}} -->
<div class="wp-block-query alignfull"><!-- wp:group {"align":"full","style":{"spacing":{"padding":{"top":"0","right":"var:preset|spacing|40","bottom":"var:preset|spacing|40","left":"var:preset|spacing|40"}}},"layout":{"type":"default"}} -->
<div class="wp-block-group alignfull" style="padding-top:0;padding-right:var(--wp--preset--spacing--40);padding-bottom:var(--wp--preset--spacing--40);padding-left:var(--wp--preset--spacing--40)"><!-- wp:post-template {"align":"full","style":{"typography":{"textTransform":"none"}}} -->
<!-- wp:group {"style":{"spacing":{"blockGap":"0","padding":{"bottom":"var:preset|spacing|50"}}},"layout":{"type":"default"}} -->
<div class="wp-block-group" style="padding-bottom:var(--wp--preset--spacing--50)"><!-- wp:group {"style":{"border":{"bottom":{"color":"var:preset|color|contrast","width":"4px"}},"spacing":{"padding":{"top":"var:preset|spacing|30","right":"0","bottom":"var:preset|spacing|30","left":"0"}}},"layout":{"type":"flex","flexWrap":"nowrap","justifyContent":"space-between"}} -->
<div class="wp-block-group" style="border-bottom-color:var(--wp--preset--color--contrast);border-bottom-width:4px;padding-top:var(--wp--preset--spacing--30);padding-right:0;padding-bottom:var(--wp--preset--spacing--30);padding-left:0"><!-- wp:post-date {"textAlign":"left","format":"m.j","style":{"spacing":{"margin":{"top":"0","right":"0","bottom":"0","left":"0"}},"elements":{"link":{"color":{"text":"var:preset|color|contrast"}}},"typography":{"letterSpacing":"1px","fontSize":"2rem","fontStyle":"normal","fontWeight":"600"}},"textColor":"contrast"} /-->

<!-- wp:post-date {"textAlign":"left","format":"Y","style":{"spacing":{"margin":{"top":"0","right":"0","bottom":"0","left":"0"}},"elements":{"link":{"color":{"text":"var:preset|color|contrast"}}},"typography":{"letterSpacing":"1px","fontSize":"2rem","fontStyle":"normal","fontWeight":"600"}},"textColor":"contrast"} /--></div>
<!-- /wp:group -->

<!-- wp:post-title {"isLink":true,"style":{"layout":{"selfStretch":"fit"},"typography":{"lineHeight":"1.1","fontSize":"4.6rem","fontStyle":"normal","fontWeight":"600"},"elements":{"link":{"color":{"text":"var:preset|color|contrast"}}},"spacing":{"padding":{"top":"var:preset|spacing|30"}}},"textColor":"contrast"} /--></div>
<!-- /wp:group -->
<!-- /wp:post-template --></div>
<!-- /wp:group -->

<!-- wp:group {"style":{"spacing":{"padding":{"top":"var:preset|spacing|40","bottom":"var:preset|spacing|40","right":"var:preset|spacing|40","left":"var:preset|spacing|40"},"margin":{"top":"0","bottom":"0"}}},"layout":{"type":"default"}} -->
<div class="wp-block-group" style="margin-top:0;margin-bottom:0;padding-top:var(--wp--preset--spacing--40);padding-right:var(--wp--preset--spacing--40);padding-bottom:var(--wp--preset--spacing--40);padding-left:var(--wp--preset--spacing--40)"><!-- wp:query-pagination {"layout":{"type":"flex","flexWrap":"nowrap","justifyContent":"space-between"}} -->
<!-- wp:query-pagination-previous {"style":{"typography":{"fontSize":"2rem","fontStyle":"normal","fontWeight":"600","textTransform":"uppercase","letterSpacing":"1px"}}} /-->

<!-- wp:query-pagination-next {"style":{"typography":{"fontSize":"2rem","fontStyle":"normal","fontWeight":"600","textTransform":"uppercase","letterSpacing":"1px"}}} /-->
<!-- /wp:query-pagination --></div>
<!-- /wp:group -->

<!-- wp:query-pagination -->
<!-- wp:query-pagination-previous /-->

<!-- wp:query-pagination-numbers /-->

<!-- wp:query-pagination-next /-->
<!-- /wp:query-pagination --></div>
<!-- /wp:query -->

[t-hamano]

@dsas Thanks for sending the info. Unfortunately, I haven't been able to reproduce it yet.

One thing I noticed, however, is that when I tested it on a .com-hosted site, some elements were missing styles:

d7b43bcdc0f548f2b3299ab7fb7f1f77.mp4

I suspect #68691 might be related.

@DAreRodz @luisherranz Do you know anything about this?

It seems that if we disable "Reload full page" and navigate through the page, the styles are no longer applied. Also, based on the info I've gathered so far, it doesn't seem to be an issue with WP 6.7, but it does seem to be an issue with Gutenberg 20.2.

[dsas]

One thing I noticed, however, is that when I tested it on a .com-hosted site, some elements were missing styles:

Thanks, I see that too and I guess it's part of this issue.

Just for the avoidance of doubt, I'm still reproducing the problem using WordPress locally, including via WordPress Playground using both Firefox and Chrome.

Comparing the CSS of the header image element between a page after using the paginator (left) and before using it (right), I can see several differences.