Unable to Swap Templates for Pages and Posts that contain an Amazon Embed

[rw-ye]

Quick summary

There is currently an issue where trying to swap a template on a page/post that contains an Amazon embed will cause the page to freeze and show an error message: This editor has encountered an unexpected error.

So far, I have been able to reproduce the issue on two FSE themes:

• Byrne
• Twenty-Twenty Two

Steps to reproduce

1. Active Byrne or Twenty-Twenty Two theme
2. Create a new page/post
3. Add Amazon Kindle embed block, and paste in the URL to a product from Amazon
4. Under page/post settings, click on "Swap Template"
5. The page/post will freeze, and you won't be able to select a template, or the editor will crash with an error: This editor has encountered an unexpected error.

https://github.com/Automattic/wp-calypso/assets/21261509/fbd39aca-0e48-45ed-aebe-b1674fb399eb

What you expected to happen

To select a different template on the page/post

What actually happened

When trying to change the template, the entire page/post freezes, and a template can not be selected.

Impact

Some (< 50%)

Available workarounds?

Yes, easy to implement

Platform (Simple and/or Atomic)

Atomic and Simple

Logs or notes

As a workaround, deleting the embed block, switching the template and then re-adding the embed block will work.

[rw-ye]

This user is experiencing the issue: 7544640-zd-a8c

[github-actions[bot]]

Support References

This comment is automatically generated. Please do not edit it.

• [ ] 7544640-zen
• [ ] 7601615-zen

[liviopv]

📌 REPRODUCTION RESULTS

• Tested on Simple – Could Not Replicate
• Tested on Atomic – Could Not Replicate

📌 FINDINGS/SCREENSHOTS/VIDEO Template swapping works as expected using a dummy Amazon link http://www.amazon.com/dp/B0BSB7X81Y

Test on simple:

https://github.com/Automattic/wp-calypso/assets/14153300/67f84258-e426-48bb-9e87-54d3785be531

📌 ACTIONS

• Requested author feedback
• Closed as could not replicate (please reopen if the issue reoccurs)

📌 Message to Author @rw-ye I wasn't able to replicate on Simple or Atomic on a test site, so it's not widespread but I can see it happens on the user site. I guess that it has to do with the template on this user's site, the error on the block is just a symptom. It's also important to note that this block has a very specific usage https://wordpress.org/documentation/article/amazon-kindle-embed/ and it will not accept just any Amazon links.

[rw-ye]

@liviopv I did some further testing and can still consistently reproduce the issue on both the Byrne and Twenty-Twenty Two themes.

Twenty-Twenty Two - Simple Site

https://github.com/Automattic/wp-calypso/assets/21261509/53206a7d-48a8-4b50-ab85-7fca921543ee

Byrne - Simple Site

https://github.com/Automattic/wp-calypso/assets/21261509/d1f0f133-aab8-427c-8872-c0778792df74

Twenty-Twenty Two - AT Site

https://github.com/Automattic/wp-calypso/assets/21261509/3af8a434-525c-4fbf-abd5-9e7acc578f17

When trying to select the template, nothing happens and the browser essentially freezes. I was also able to reproduce on my second WPCOM account.

[mgozdis]

Slightly similar issue here with the editor freezing when having an Amazon Kindle embed: 7601615-zd-a8c

It was making thousands of failed network requests:

Had to remove the block via the code editor and manually add it back, which then shows as an Embed rather than Amazon Kindle:

[liviopv]

@rw-ye @mgozdis in both cases, the Amazon Kindle link being used seems incorrect. Documentation for the block https://wordpress.org/documentation/article/amazon-kindle-embed/ indicates the block will only accept URLs formatted in a very specific way:

Keep in mind that the link needs to follow this format: http://www.amazon.com/dp/ASIN where you will need to paste your preferred ASIN numbers and choose the corresponding locale (amazon.co.uk, amazon.com, and so on). More information can be found here: Linking from Your Website.

That said, even though I cannot reproduce the swap template issues when using correct links, I do see the multiple network requests @mgozdis flagged above, so I opened https://github.com/WordPress/gutenberg/issues/58267 in core.

Keep in mind that this is most likely not going to be a quick fix, and there were discussions in the past advocating to remove this block, so it's a good idea to recommend alternative embeds to the customers.