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:
- Including a filter to
tiny_mce_before_init
that units TinyMCE’svalid_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’sschema
setting tohtml5
.
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.