Make WordPress Core

Opened 7 years ago

Last modified 7 years ago

#40676 new defect (bug)

wpautop adds opening & closing p tags around the opening a tag and around the closing a tag when the link contains certain flow content elements like div, h1, h2...

Reported by: diegocanal's profile diegocanal Owned by:
Milestone: Awaiting Review Priority: normal
Severity: normal Version: 4.8
Component: Formatting Keywords: needs-patch needs-unit-tests 2nd-opinion
Focuses: Cc:

Description (last modified by ocean90)

Hi,

Description

wpautop leaves <a href=""> (opening tag of the link) in between <p></p> tags and </a> (closing tag of the link) in between <p></p> tags when the link contains certain flow content elements like div, h1, h2...

Example 1

If I add this to the HTML editor:

<a href="https://example.com/"><div>DIV inside link</div></a>

The output source code is:

<p><a href="https://example.com/"></p>
<div>DIV inside link</div>
<p></a></p>

Example 2

If I add this to the HTML editor:

<a href="https://example.com/"><h1>H1 inside link</h1></a>

The output source code is:

<p><a href="https://example.com/"></p>
<h1>H1 inside link</h1>
<p></a></p>

Note 1

I would like to point out that html flow content elements such as <div> or headings (<h1>, <h2>, <h3> ,...) belong to the category of permitted content for the <a> element. References:
WHATWG HTML Living Standard |The definition of a
HTML5 | The definition of a
MDN | The definition of a.


Note 2

This issue might be related to ticket #34722

Attachments (1)

screenshot-wpautop-wp-bug.png (26.2 KB) - added by diegocanal 7 years ago.
screenshot-wpautop-wp-bug

Download all attachments as: .zip

Change History (19)

@diegocanal
7 years ago

screenshot-wpautop-wp-bug

#1 @diegocanal
7 years ago

  • Component changed from General to Formatting

#2 @diegocanal
7 years ago

  • Severity changed from normal to major

This ticket was mentioned in Slack in #core by diegocanal. View the logs.


7 years ago

#4 follow-up: @hlashbrooke
7 years ago

As a general HTML rule (regardless of whether it's WordPress or not), block level elements should never be wrapped inside inline elements. So a div or h1 should never be placed inside an a tag. I imagine that is why wpautop handles things in this way, as you are going against the general HTML standards that are accepted all over the web.

I'm not on the core team and don't have the requisite knowledge for patching this, but I don't think it really warrants a patch as this is not a bug, but rather an HTML standard that is being adhered to.

#5 @ocean90
7 years ago

  • Description modified (diff)

#6 in reply to: ↑ 4 @diegocanal
7 years ago

Replying to hlashbrooke:

As a general HTML rule (regardless of whether it's WordPress or not), block level elements should never be wrapped inside inline elements. So a div or h1 should never be placed inside an a tag. I imagine that is why wpautop handles things in this way, as you are going against the general HTML standards that are accepted all over the web.

I'm not on the core team and don't have the requisite knowledge for patching this, but I don't think it really warrants a patch as this is not a bug, but rather an HTML standard that is being adhered to.

@hlashbrooke, have you fully read my initial comment (specially "Note 1")? After reading "Note 1", do you still need more arguments to make you realise that div and h1 can be perfectly placed inside an a element? I can give you more.

I provided arguments –referencing 3 authoritative sources– to support my statement, you haven't done the same to support yours. Could you please give us something more than "because I say so"?

#7 follow-up: @hlashbrooke
7 years ago

I didn't realise this was an argument :)

It seems you are probably correct, but parsing all of that content about HTML standards is pretty daunting to be honest, so I'm not going to go through the task of interpreting it all. I merely commented on here to weigh in on it a bit, but I'm not that invested in the outcome.

I was just pointing out that it isn't generally accepted in HTML practice, even if it is permissible. I'll leave this to more experienced minds to work out from here :)

#8 in reply to: ↑ 7 @diegocanal
7 years ago

Replying to hlashbrooke:

I was just pointing out that it isn't generally accepted in HTML practice, even if it is permissible.

I couldn't disagree more with you. FYI, nesting block elements such as div and headings (h1, h2, etc) inside the a element (links) has been widely used since 2009. Here you have some examples I found in very well known sites:

  • Apple (look at the 4 blocks below the slider)
  • Amazon (towards the bottom look at "Your recently viewed items and featured recommendations" section items)
  • Google (all over the page)

#9 follow-up: @hlashbrooke
7 years ago

Well then - I'll let someone else with more authority weigh in here - I was just trying to be helpful :)

#10 in reply to: ↑ 9 @diegocanal
7 years ago

Replying to hlashbrooke:

Well then - I'll let someone else with more authority weigh in here - I was just trying to be helpful :)

Thank you @hlashbrooke! :)

#11 @calvinkoepke
7 years ago

I can confirm that is has been a recurring issue for me as well, and for quite some time. I have no knowledge of how to fix the parsing issue, but it is certainly there and would, in my opinion, warrant a patch.

#12 @bfintal
7 years ago

Might be related to #40603

This ticket was mentioned in Slack in #core by diegocanal. View the logs.


7 years ago

#14 @swissspidy
7 years ago

  • Keywords needs-patch needs-unit-tests added
  • Severity changed from major to normal

#15 follow-up: @afercia
7 years ago

  • Keywords 2nd-opinion added
  • Version 4.7.4 deleted

Worth noting
<a href="https://example.com/"><div>DIV inside link</div></a>
is valid in HTML5. However, WordPress shouldn't assume all the themes use HTML5 as this would be invalid in HTML 4.0.1.

#16 in reply to: ↑ 15 @diegocanal
7 years ago

Replying to afercia:

Worth noting
<a href="https://example.com/"><div>DIV inside link</div></a>
is valid in HTML5. However, WordPress shouldn't assume all the themes use HTML5 as this would be invalid in HTML 4.0.1.

You are right pointing out that this kind of structures would not be valid in HTML 4.0.1 but...even if a developer made a mistake using invalid code (in HTML 4.0.1), how would it help having wpautop messing up the code? The way wpautop works now, it outputs invalid code for both standards, HTML5 and HTML 4.0.1. Sorry, I think I'm missing the point.

Last edited 7 years ago by diegocanal (previous) (diff)

#17 @afercia
7 years ago

@diegocanal bolding text is not necessary :) I'm not saying this shouldn't be addressed. Just that it's not so simple as it seems at first sight.

#18 @diegocanal
7 years ago

  • Version set to 4.8
Note: See TracTickets for help on using tickets.