WordPress.org

Make WordPress Core

Opened 15 months ago

Last modified 13 months ago

#40603 new defect (bug)

Incorrect paragraph tag placement in wpautop

Reported by: bfintal Owned by:
Milestone: Awaiting Review Priority: normal
Severity: normal Version: 4.7.4
Component: Formatting Keywords:
Focuses: Cc:

Description

If you have an inline element and a block element beside each other while wrapped inside a block element, such as this:

<div><input/><div></div></div>

Running wpautop on it incorrectly adds a misplaced </p> in there:

<div><input/></p> <div>Content</div> </div>

Same goes when the block element goes first then an inline element:

<div><p>Content</p><span>Span</span></div>

You get a misplaced <p>:

<div> <p>Content</p> <p><span>Span</span></div>

Change History (1)

#1 @dreamwhisper
13 months ago

I am also experiencing an issue with stray </p> tags depending on spacing between elements.

<div class="divclass">
<button class="someclass">Button</button>
<div class="anotherclass">
Paragraph goes here.
</div>					
</div>

Results in a stray </p>.

<div class="divclass">
<button class="someclass">Button</button></p>
<div class="anotherclass">
Paragraph goes here.
</div>
</div>

<div class="divclass">
<button class="someclass">Button</button>
<div class="anotherclass">

Paragraph goes here.

</div>					
</div>

Also results in an extra </p>.

<div class="divclass">
<button class="someclass">Button</button></p>
<div class="anotherclass">
<p>Paragraph goes here.</p>
</div>
</div>

<div class="divclass">
<button class="someclass">Button</button>

<div class="anotherclass">

Paragraph goes here.

</div>					
</div>

Again, results in an extra </p>.

<div class="divclass">
<button class="someclass">Button</button></p>
<div class="anotherclass">
<p>Paragraph goes here.</p>
</div>
</div>

However, if you add space between the first div and the button, it works:

<div class="divclass">

<button class="someclass">Button</button>
<div class="anotherclass">

Paragraph goes here.

</div>					
</div>

Results in no extra </p>.

<div class="divclass">
<p><button class="someclass">Button</button></p>
<div class="anotherclass">
<p>Paragraph goes here.</p>
</div>
</div>

I also found than an extra line between the span and the closing div causes the extra </p>.

<div class="someclass">
<strong>Bold</strong>
<span>This is some text.</span>

</div>

Results in a stray </p> here:

<div class="someclass">
<strong>Bold</strong><br />
<span>This is some text.</span></p>
</div>

But, if you remove the empty line, there's no stray </p>:

<div class="someclass">
<strong>Bold</strong>
<span>This is some text.</span>
</div>

Result:

<div class="someclass">
<strong>Bold</strong><br />
<span>This is some text.</span>
</div>

Notes: Possibly related to #40676 and #34722.

Note: See TracTickets for help on using tickets.