Code editor not accepting block element (<h3>) inside anchor tag (<a>)

[zanona]

Describe the bug
Whenever editing a page/post through the code editor instead of the visual one and adding a block element inside an anchor tag, whenever focusing out or saving the page, the editor automatically changes the code creating an orphan anchor tag.

To reproduce
Steps to reproduce the behaviour:

1. Go to 'edit post or page'
2. Click on '3-dotted menu > code editor`
3. Paste the mark up below
4. Click outside the editor (focusing out)
5. The markup changes automatically
6. Publish it
7. The mark up on front end changes even further

<ul>
  <li>
    <a href='#'>
      <h3>Title</h3>
    </a>
  </li>
</ul>

Expected behaviour
Since the markup added is valid HTML I would expect it to be kept as is. But instead, on focusing out the editor, it is changed to (adjusted indentation for readability)

<ul>
  <li>
    <a href="#">
      <h3>Title</h3>
    </a>
    <a href="#"></a>
  </li>
</ul>

However, when publishing, it changes the markup even further to:

<ul>
  <li>
    <a href="#">
      </p>
      <h3>Title</h3>
      <p>
    </a>
    <a href="#"></a>
  </li>
</ul>

Additional context

• WordPress 5.3

[talldan]

I can reproduce this 👍

[jorgefilipecosta]

Hi @aduth, does this issue rings any bells related to autop?

[aduth]

It may well be an issue related to autop. In some initial debugging, I observe that things start going poorly as soon as autop is introduced. Specifically, here:

gutenberg/packages/blocks/src/api/parser.js

Line 444 in 38f4914

innerHTML = autop( innerHTML ).trim();

... where the innerHTML becomes mangled to:

<ul>
<li>
    <a href='#'></p>
<h3>Title</h3>
<p>    </a>
  </li>
</ul>

I expect that the Freeform block will try to normalize the markup to the best of its abilities, resulting in what is shown as the markup in the original comment.

To clarify, this would probably have been an issue for some time already.

The autop functionality is old enough that it may well be targeting HTML 4.01 standard, where the h3 within the a is technically not valid HTML (you can check via W3C Markup Validation Service, running under HTML 4.01 Doctype).

Error Line 4, Column 10: document type does not allow element "H3" here; missing one of "OBJECT", "MAP", "BUTTON" start-tag

The autop implementation should be updated to conform to expectations of HTML5 specification behavior.

Although previous versions of HTML restricted the a element to only containing phrasing content (essentially, what was in previous versions referred to as “inline” content), the a element is now transparent; that is, an instance of the a element is now allowed to also contain flow content (essentially, what was in previous versions referred to as “block” content)—if the parent element of that instance of the a element is an element that is allowed to contain flow content.

https://w3c.github.io/html-reference/a.html#a-changes

In the meantime, possible workarounds include:

• Change the markup such that the <a> is within the <h3>, not wrapping it, so that it is considered valid per HTML 4.01 standard.
• Use the HTML block instead for custom markup, which is not subjected to autop.

[paaljoachim]

Testing with WordPress 5.7. Gutenberg 10.5.4. Twenty Twenty One.

The bug is still there even though it was fixed it showed up in another way.

Associated issues:
#29988

PR:
#27717

[mcsf]

Closing this one in favour of https://core.trac.wordpress.org/ticket/27350. If and when Core's wpautop is fixed, then Gutenberg's JS port can be fixed accordingly.