Classic block → Convert to blocks not responsive when the block contains a specific string

[mxhassani]

Quick summary

Any Classic Block containing this string <p><!-- /wp:paragraph --> <!-- wp:paragraph {"align":"center"} --></p> in the HTML code can't be converted to blocks. The button "Convert to blocks" is visible, clickable, but does nothing, not even a console error.

Steps to reproduce

1. Add Classic block
2. Edit it as HTML (or skip 1. and add an HTML block)
3. Add <p><!-- /wp:paragraph --> <!-- wp:paragraph {"align":"center"} --></p>
4. Optional: Add anything else
5. Go back and edit the block visually
6. Click Convert to blocks

What you expected to happen

The Classic Block to disappear and the text added in step 4 to be placed inside corresponding blocks

What actually happened

Nothing. The content stays all the same.

Context

33327602-hc User going through their posts to convert them all to blocks, gut stuck on one of the posts

Simple, Atomic or both?

Simple, Atomic

Theme-specific issue?

No

Browser, operating system and other notes

This part seem to be the most problematic:

Reproducibility

Consistent

Severity

Some (< 50%)

Available workarounds?

Yes, easy to implement

Workaround details

1. Edit the classic block as HTML
2. Search and delete: <!-- wp:paragraph {"align":"center"} --></p>

[kimerlin81]

Thanks for submitting this detailed bug report @mxhassani!

I'm able to reproduce this as shown below:

https://user-images.githubusercontent.com/83732167/150600569-a5067470-175f-4df3-9ed7-67abfed03471.mp4

I wonder if the search and replace feature can be used to help the user instead of them having to manually remove that from each block. Perhaps using the method mentioned in the Updating Specific Content section of FG can work - although I've not tested.

[saraita-git]

Hello!

34556836-hc

I had a similar issue during this live chat. The difference is that the code causing the issue was <p><!-- wp:paragraph --></p> instead of <!-- wp:paragraph {"align":"center"} --></p>. Removing <p><!-- wp:paragraph --></p> fixed the issue.

[hacchism]

Another report: 33808510-hc

In this user's case, their Classic Block included not just <p><!-- wp:paragraph --></p> but also <p><!-- wp:heading --></p>. Removing both codes fixed the issue.

[edwinho89]

5422806-zd-woothemes

There were empty <p><!-- /wp:paragraph --><!-- wp:paragraph --></p>, and removing them switches to block editor after editing visually.

<p><!-- /wp:paragraph --><!-- wp:paragraph --></p>

[github-actions[bot]]

Support References

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

• [ ] 5422806-zen
• [ ] 5486428-zen
• [ ] 6491553-zen

[ccwalburn]

• [ ] 5486428-zen

This user had copied text from Word to paste into their post. It had various strings like these:

<p><!-- /wp:paragraph --><!-- wp:paragraph {"fontSize":"normal"} --></p>
<p><!-- wp:media-text {"mediaId":2146,"mediaType":"image"} --></p>
<p><!-- /wp:paragraph --></p>
<p><!-- wp:heading {"textAlign":"center"} --></p>

And also had an image in the copied text. Removing all of the strings like the ones above and the image fixed it. But there were so many that the workaround I gave the user was this:

1. Copy text from Word
2. Add a Classic Block to the post
3. Click the Paste as Text icon on the toolbar
4. Paste the text
5. Click the Convert to Blocks button.

[TPilgs]

Instance here: 28844378-hc

[poeticabdul]

Reported here 6491553-zen