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.

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

Swap template makes page unresponsive when preview a lot of content #59843

Closed
JulienGardair opened this issue Mar 13, 2024 · 12 comments
Closed
Labels
[Feature] Template Editing Mode Related to the template editor available in the Block Editor [Status] Needs More Info Follow-up required in order to be actionable. [Type] Bug An existing feature does not function as intended

Comments

@JulienGardair
Copy link

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

@JulienGardair JulienGardair added the [Type] Bug An existing feature does not function as intended label Mar 13, 2024
@jordesign jordesign added Needs Testing Needs further testing to be confirmed. [Feature] Template Editing Mode Related to the template editor available in the Block Editor labels Mar 13, 2024
@annezazu
Copy link
Contributor

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?

@annezazu annezazu added [Status] Needs More Info Follow-up required in order to be actionable. and removed Needs Testing Needs further testing to be confirmed. labels Mar 14, 2024
@JulienGardair
Copy link
Author

JulienGardair commented Mar 14, 2024

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

2024-03-14

@JulienGardair
Copy link
Author

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

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

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

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:

Screenshot 2024-03-29 at 11 49 57 AM

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

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

: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
Copy link
Author

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

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

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)

CleanShot 2024-04-12 at 08 06 21@2x

This seems to happen on pages with a Query block.

@tomjn
Copy link
Contributor

tomjn commented Aug 12, 2024

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Feature] Template Editing Mode Related to the template editor available in the Block Editor [Status] Needs More Info Follow-up required in order to be actionable. [Type] Bug An existing feature does not function as intended
Projects
None yet
Development

No branches or pull requests

6 participants