Converting a paragraph into a heading (or viceversa) will break the block if it contains a link

[mrfoxtalbot]

Trying to convert a paragraph block into a heading (or the other way around) will cause the block to break if it includes a link

To reproduce

1. Create a new post
2. Add a paragraph
3. Add a link inside the paragraph
4. Convert the paragraph block into a heading.

Expected behavior
The paragraph should convert into a heading without issues but instead, it broke.

Screenshots

Editor version:

• WordPress version 5.6
• Gutenberg plugin version 9.7.0
• The problem does not occur without the plugin
• I was also able to reproduce this exact error on a free (simple) WordPress.com site

The exact same problem arises if you do the opposite: create a heading, add a link and try to convert it into a paragraph.

The console returns this error:

react-dom.min.de439aae.js:125 TypeError: Cannot read property 'ownerDocument' of undefined
    at index.js?ver=5f012ae2a1c6dc1a4b432c305b2be604:1
    at Object.useMemo (react-dom.min.de439aae.js:216)
    at d.useMemo (react.min.e713ea3b.js:32)
    at st (index.js?ver=5f012ae2a1c6dc1a4b432c305b2be604:1)
    at index.js?ver=16801eb7527d46a7b6c21552167c80f5:1
    at we (react-dom.min.de439aae.js:84)
    at zj (react-dom.min.de439aae.js:226)
    at Th (react-dom.min.de439aae.js:152)
    at tj (react-dom.min.de439aae.js:152)
    at Te (react-dom.min.de439aae.js:146)

If I switch to the "Code View" I see this markup:

 <a href="react-dom.min.de439aae.js:125 TypeError: Cannot read property 'ownerDocument' of undefined
    at index.js?ver=5f012ae2a1c6dc1a4b432c305b2be604:1
    at Object.useMemo (react-dom.min.de439aae.js:216)
    at d.useMemo (react.min.e713ea3b.js:32)
    at st (index.js?ver=5f012ae2a1c6dc1a4b432c305b2be604:1)
    at index.js?ver=16801eb7527d46a7b6c21552167c80f5:1
    at we (react-dom.min.de439aae.js:84)
    at zj (react-dom.min.de439aae.js:226)
    at Th (react-dom.min.de439aae.js:152)
    at tj (react-dom.min.de439aae.js:152)
    at Te (react-dom.min.de439aae.js:146)">Ut enim ad minim veniam</a>

[leewillis77]

I can reproduce this only if the whole of the paragraph is a link. E.g.

Works fine:
This is a link in a paragraph

Breaks:
This is a whole-paragraph link

[mrfoxtalbot]

That's interesting @leewillis77. I came across this error a couple of times and I did not report it earlier because I could not reproduce it consistently. In some instances, it happened only when the entire paragraph was a link but in other instances, it happened with just one word being a link.

Should I update the name of the issue or its description to reflect this?

[leewillis77]

@mrfoxtalbot If you think you can reproduce it with mixed content then leave as-is. I was just noting my experience trying to reproduce the issue.

[mrfoxtalbot]

I was just able to reproduce this error linking just a single word, using the Gutenberg plugin (Version 9.7.1 )

I also noticed that if you duplicate the broken block, it will look fine. Weird!

[ntsekouras]

It seems to break when the URL popover is open. That explains the inconsistency of reproducing it - I'll look more into it though.