Swap template makes page unresponsive when preview a lot of content

[JulienGardair]

Description

When trying to swap the template of a post after editing it, or when there is a lot of content already in the post, such as images for example, the page doesn't respond anymore. This doesn't happen when the content in the edited post is light.

Step-by-step reproduction instructions

In post edition
On the right click on template / swap template
Overlay window opens with a preview of the rendered page with new template.
At this point the page freezes (Chrome Version 122.0.6261.70 (Official Build) (64-bit))

Screenshots, screen recording, code snippet

No response

Environment info

Wordpress 6.4.3
Gutenberg 17.9.0
Chrome Version 122.0.6261.70 (Official Build) (64-bit))

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

[annezazu]

Noting for triage that I can't replicate with 6.5 RC2:

Screen.Recording.2024-03-14.at.8.53.31.AM.mov

I then tried replicating with Gutenberg 17.9.0 but couldn't either! Can you provide a video of what's happening @JulienGardair?

[JulienGardair]

This happened as mentioned with WordPress 6.4.3 and heavier content, such as containing multiple images rather than just text.
I could make a video but it won't show you more than the attached screenshot where you can see the rendered content, basically the post is rendered in the modal but nothing can be done, until the browser's alert, waiting for more doesn't resolve the issue, forcing to exit the page.
One thing that is not showing in the capture is that the post contains also below a query loop block rendering post template with Featured Image

[JulienGardair]

Well after more testing today, it seems like the error might come from a pattern I have that includes a query loop.
I try swaping templates without that pattern and it worked great, I tried make a new post, including a query loop and didn't have a problem, then after inserting that pattern to that post, the swaping was problematic, with the preview in the modal jumping around and the post creating a Wordpress error.
So until I understand what is the problem in that pattern we might want to close that issue.

[annezazu]

If you'd like to share the contents of the pattern here, I can try to replicate too and see what might be going on. We definitely don't want any errors for patterns with query loops either :D Thanks for continuing to test and looping back either way. It's a huge help.

[JulienGardair]

painting-cutouts-query.json
I attached the pattern, I was about to delete it and start over if it can help identify an issue...
It seems like the new Query Loop block (Gutenberg 17.9.0) creates more glitches, that I have a hard time pinning down, mostly when refreshing a pagination URL which is maybe not especially recommended but would happen often as developing and just trying to refresh (then some of the featured images would disappear, I could look deeper into it if you think that worth it).
I am not sure, but it is possible that I designed that pattern with the previous version of Gutenberg and a 0 items per page. Back then, the query loop would not automatically add the pagination if I remember well.
So it might be related to #59912
Anyway, this pattern is a simple Query Loop with a taxonomy filter, showing the title, the excerpt and the featured image in a grid, nothing fancy.
Thank you! I have to say Wordpress is getting really exciting and powerful out of the box!

[annezazu]

Thanks so much for your patience. I'm on the WordPress 6.5 release squad and the last two weeks have been quite stressful (and exciting) to get everything lined up. I'm just now finally looping back here.

I tried to import the pattern you created but got a wild error:

In any case, I recreated based on your description and found I could swap the templates, but it "flickers":

Screen.Recording.2024-03-29.at.11.54.44.AM.mov

I've opened a new issue to cover this "flickering" effect in the swap preview!

Thank you! I have to say Wordpress is getting really exciting and powerful out of the box!

I couldn't agree more :D

[JulienGardair]

Thank you! I can only imagine! I had the flickering issue as well.
I found some other random issues, but then they would disappear when switching themes, so I assume they were coming from changes made to the theme via templating/patterning and changing options, I could not trace the origin of the problem so didn't create any ticket. I assume it came from a misusage on my side.
Looking forward to 6.6 already, especially the pattern overrides or however the component possibilities will be called !!!! I was putting projects on hold until the 6.5 release to develop in a more sustainable manner using them and... well... I stopped waiting and getting quite obsessed! Thank you all for all your terrific work!

[annezazu]

:D I love your excitement and please keep opening issues as you use the latest & greatest. You never know when you'll find a bug that'll save headaches for millions (part of the fun on working on a project of this scale). Here's that issue on flickering btw: #60309

Looking forward to 6.6 already, especially the pattern overrides or however the component possibilities will be called !!!! I was putting projects on hold until the 6.5 release to develop in a more sustainable manner using them and... well... I stopped waiting and getting quite obsessed! Thank you all for all your terrific work!

:D Here's where you can follow along with what's currently being thought of for 6.6 there: #59819 (comment)

In particular, there's a lot of discussion around how the UI will look and work that might be of interest to you: #59813 (comment)

[JulienGardair]

Thanks! I guess I need to download the coming testing versions (is it how you get access?) in order to participate in the discussions as it is a bit abstract to understand the UI through the description of the issues...
Regarding the issues, I will when I can understand the context and reproduce them rather than being part of issues coming from my environment.

[bridgebrain]

I'm also experiencing this problem. My page uses lazyblocks, which load a preview in the editor. The swap option doesn't become available until the page loads fully, and if I click swap, it causes the page to become unresponsive. Making previews optional would be appreciated.

[andreasjr]

I also experience this problem; however, the whole editor crashes, and I get this error:

Error: Minified React error #185; visit https://reactjs.org/docs/error-decoder.html?invariant=185 for the full message or use the non-minified dev environment for full errors and additional helpful warnings.
    at al (/wp-includes/js/dist/vendor/react-dom.min.js?ver=18.2.0:10:82583)
    at Jt (/wp-includes/js/dist/vendor/react-dom.min.js?ver=18.2.0:10:52962)
    at $ (/wp-includes/js/dist/compose.min.js?ver=1339d3318cd44440dccb:9:24507)
    at /wp-includes/js/dist/compose.min.js?ver=1339d3318cd44440dccb:9:24996
    at $ (/wp-includes/js/dist/compose.min.js?ver=1339d3318cd44440dccb:9:24507)
    at /wp-includes/js/dist/compose.min.js?ver=1339d3318cd44440dccb:9:24996
    at Dr (/wp-includes/js/dist/vendor/react-dom.min.js?ver=18.2.0:10:72986)
    at $r (/wp-includes/js/dist/vendor/react-dom.min.js?ver=18.2.0:10:75027)
    at jr (/wp-includes/js/dist/vendor/react-dom.min.js?ver=18.2.0:10:74867)
    at $r (/wp-includes/js/dist/vendor/react-dom.min.js?ver=18.2.0:10:75624)

This seems to happen on pages with a Query block.

[tomjn]

I encountered this working on a client site along with the timeout for setState that crashed the editor when previewing templates on the modal in WP 6.5. Installing the gutenberg plugin resolved the issue