Site icon Hip-Hop Website Design and Development

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

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 </p> for a by no means opened <p> is obvious mistaken. Additionally there’s some non-closed <p> 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 </p> tag lacking after the <img>. (Okay, HTML5 accepts non-closed <p> tags… however I do not suppose that this conduct is used deliberately right here.) Additionally, WordPress introduces a <br /> 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:

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.