Methods to make WordPress and TinyMCE settle for <a> tags wrapping block-level components as allowed in HTML5?

Pixeldust WordPress Developer

9 years ago

Beginning with model 5 the HTML normal permits <a> tags wrap block-level components. On a particular web page I have to wrap a heading and a picture with an <a> tag:

Some intro textual content.

<div>
  <a href="http://someplace/">
    <h4>Some heading</h4>
    <img src="http://someplace/some-img.jpg" alt="Some picture" />
  </a>
</div>

Whereas I can enter this within the textual content editor it causes some unusual conduct:

The code above might be remodeled into this HTML code:

<p>Some intro textual content.</p>
<div>
<a href="http://someplace/"></p>
<h4>Some heading</h4>
<p><img src="http://someplace/some-img.jpg" alt="Some picture" /><br />
</a>
</div>

Clearly, the opening <a> adopted by a closing  for a by no means opened  is obvious mistaken. Additionally there’s some non-closed  tag earlier than the <img> tag.

Since this appears to be a newline-related challenge, I attempted to take away newlines from my WordPress code:

Some intro textual content.

<div><a href="http://someplace/"><h4>Some heading</h4><img src="http://someplace/some-img.jpg" alt="Some picture" /></a></div>

Curiously, this leads to the next HTML code:

<p>Some intro textual content.</p>
<div><a href="http://someplace/"><br />
<h4>Some heading</h4>
<p><img src="http://someplace/some-img.jpg" alt="Some picture" /></a></div>

Now, there’s nonetheless a closing  tag lacking after the <img>. (Okay, HTML5 accepts non-closed  tags… however I do not suppose that this conduct is used deliberately right here.) Additionally, WordPress introduces a   that comes out of nowhere.

To date to the WordPress-related points…

Now to the TinyMCE-related points:

When switching again from the textual content edit mode in WordPress to the visible edit mode, the <a>s are nonetheless there. Nonetheless, when switching again to textual content mode once more (or saving the web page from visible edit mode) the <a>s get fully eliminated.

Having this defined, let’s come to my important query: How can I make WordPress and TinyMCE settle for <a> tags wrapping block-level components?

Here is what I’ve already tried:

Including a filter to tiny_mce_before_init that units TinyMCE’s valid_children setting for <a>s to incorporate <h4>s (as advised within the query “HTML5, WordPress and Tiny MCE challenge – wrapping anchor tag round div leads to funky output“)
Including a filter to tiny_mce_before_init that units TinyMCE’s schema setting to html5.

I additionally discovered the ticket “Block <a> tags are getting stripped from the Editor“, however do not actually perceive if stripping <a> tags is taken into account intentional conduct there.