Custom HTML block transforms into different block when pasting the code

[devNigel]

trafficstars

Quick summary

Pasting HTML codes into a Custom HTML block automatically transforms it into another block. This appears to be a new feature but results in a bad user experience as it removes the essential parts of the code and makes it difficult to edit the code added to the Custom HTML block.

For example, if you paste HTML code for Image, it immediately transforms into an Image block.

If you add code for Iframe embed, it turns into an Embed block.

If you add a JavaScript widget with HTML, it turns into a Paragraph block.

This behavior is reproducible on both Atomic and Simple sites.

Steps to reproduce

1. On a page or post editor, click on + icon and add Custom HTML block.
2. Copy a HTML / JavaScript code and paste it into the Custom HTML block. For example, you can use code for the embeddable clock widget from here: https://logwork.com/clock-widget-text
3. Observe that the Custom HTML block automatically transforms into a Paragraph block.

Here's a screen recording: https://github.com/Automattic/wp-calypso/assets/33957570/6dbbc6c4-3195-43f5-9946-ca9b725b45ce

This is how it renders on the live page:

What you expected to happen

Custom HTML block should remain in their original state instead of transforming automatically.

What actually happened

Custom HTML block automatically transformed to Paragraph block.

Impact

All

Available workarounds?

Yes, difficult to implement

Platform (Simple and/or Atomic)

Simple, Atomic

Logs or notes

Workaround is to add Custom HTML block, switch to Code Editor view and paste the code between

Screen recording: https://github.com/Automattic/wp-calypso/assets/33957570/0fba8a41-03d6-4b72-af61-0d4d5c630e09

This makes the code work as expected:

[devNigel]

User report: 8231362-zd-a8c

[github-actions[bot]]

Support References

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

• [ ] 8231362-zen
• [ ] 8231919-zen
• [ ] 8232265-zen
• [ ] 8232215-zen
• [ ] 8232784-zen
• [ ] 8231661-zen
• [ ] 8235170-zen
• [ ] 8234931-zen
• [ ] 8235178-zen
• [ ] 8236654-zen
• [ ] 8234797-zen
• [ ] 8235648-zen
• [ ] 8237160-zen
• [ ] 8238862-zen
• [ ] 8196112-zen
• [ ] 8237502-zen
• [ ] 8235898-zen

[vinnykaur]

I have got two reports so far. 8231919-zen and 8232265-zen

[jartes]

Another report on 8232215-zd-a8c

[alevarsir]

Another report: 8232784-zen

[mrfoxtalbot]

This is coming from core https://github.com/WordPress/gutenberg/issues/61923

[liviopv]

📌 REPRODUCTION RESULTS

• Tested on Simple – Replicated
• Tested on Atomic – Replicated
• Replicable outside of Dotcom – Yes

📌 FINDINGS/SCREENSHOTS/VIDEO

It the example below (Atomic), it switches the Custom HTML block into a Code Block https://github.com/Automattic/wp-calypso/assets/14153300/074f460f-e522-4195-92bd-9d6af4702ab4

📌 ACTIONS

• Triaged
• Core issue: https://github.com/WordPress/gutenberg/issues/61923

📌 WORKAROUND

1. Add the Custom HTML Block
2. Switch from Visual Editor to Code Editor
3. Add the HTML code inside the markup for the block:

[mrfoxtalbot]

Another one in zen-8232975

[marcuswisecaesar]

Another one in 8231661-zen

[supernovia]

Another one from the forums: 8235170-zd-a8c

This user would like an update once this is resolved.

[jamiepalatnik]

Another report: 8234931-zd-a8c I let user know we'll follow up with an update. I shared the workaround to switch to the Code Editor view in the meantime.

[mosesmed]

8235178-zen

[vinnykaur]

8236654-zen

[Aurorum]

8234797-zen - advising that they use a Shortcode

[Aurorum]

8235648-zen

[vinnykaur]

8237160-zen

[rinazrina]

Another one: 8238862-zd-a8c

[i11za]

Another user report, shared the workaround: 8196112-zd-a8c

[daria2303]

8237502-zd-a8c

[mrfoxtalbot]

Another one in 8235898-zd-a8c

via this comment https://github.com/Automattic/wp-calypso/issues/91139#issuecomment-2130380148

[mrfoxtalbot]

This has been fixed via https://github.com/WordPress/gutenberg/pull/61389

Updating to 18.4.1 should fix the problem