Wrapping block elements with a link - auto formatting problem (wpautop?)

Heya,

I'm having some trouble wrapping blocks with a tags in the Wordpress editor. I have been using a visual editor for quite a while, but tired of it, I am switching back to all manual coding - so this issue will force me to change some design / development aspects of my future sites. Below is a very basic example of the intended HTML markup:

<a href="#"><div><h4>test</h4></div></a>

When switching to the visual editor or updating the page, the editor strips out the link:

<div>
<h4>test</h4>
</div>

I believe (please correct me if I'm wrong) HTML5 standards allow for us to wrap block elements with links and will validate, so why is this happening? The same happens when using an icon class to wrap a block element. Removing the wpautop filter does not help (nor would I want to disable). Have tested on a fresh install and can be replicated.

Any thoughts / help would be appreciated.

Thanks.

  • Dave Bell
    • WPMU DEV Initiate

    Update - not even going to try and complete this functionality within the editor, just sticking with setting these links to display as block. But would still be interested in hearing from others that may know of a work-around using the tinyMCE editor. Thanks.

  • Predrag Dubajic
    • Support

    Hi @Dave Bell,

    Hope you're doing well today :slight_smile:

    With HTML5 you should be able to use div inside link tag but it looks like WordPress doesn't allow this.
    It's not only on your end, testing it on my installation and the same thing happens.

    I'm not familiar with any workaround for this but if there are any members willing to jump in here please do :slight_smile:

    Best regards,
    Predrag

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.