WordPress.org

Making WordPress.org

Opened 4 years ago

Last modified 8 months ago

#20 new defect

Possible for user's to break layout when adding forum posts

Reported by: siobhyb Owned by:
Milestone: Priority: low
Component: Support Forums Keywords: has-patch
Cc:

Description

When a user wraps text in their forum posts with "<li>" tags - The layout of the page breaks.

For an example of this see - http://wordpress.org/support/topic/please-ignore-just-testing-something?replies=1#post-4430248

Attachments (3)

meta-20.before.PNG (92.8 KB) - added by SergeyBiryukov 10 months ago.
meta-20.after.PNG (77.3 KB) - added by SergeyBiryukov 10 months ago.
meta-20.patch (1.5 KB) - added by SergeyBiryukov 10 months ago.

Download all attachments as: .zip

Change History (10)

#1 @siobhyb
4 years ago

  • Component changed from General to wordpress.org/support

#2 @nacin
4 years ago

The issue is when they use <li> without <ul> and <ol> wrapping it. Longstanding problem; ideally bbPress is modified to balance these tags for us.

I imagine it might also be possible to adjust some CSS to prevent serious breakage. I've never seen such destruction from a missing <ol> or <ul> than I have on wordpress.org/support.

#3 @SergeyBiryukov
10 months ago

  • Keywords has-patch added

This was brought up in a recent Slack discussion.

meta-20.patch is an experimental patch that wraps standalone <li> tags in <ul>:

  • Code blocks are not affected, as they are htmlencoded earlier.
  • The filter runs on output, so user input is intact.

See before/after screenshots.

Test 1, from @netweb's Code Blocks & Ordered Lists

Input:

<li>
<ol>
first
</ol>
<ol>
second
</ol>
</li>

Output:

<ul><li>
<ol>
first
</ol>
<ol>
second
</ol>
</li>
</ul>

Test 2

Input:

<ul>
<li>Unordered list item
</ul>

<ol>

<li>Ordered list item
</ol>

<li>
Code block:
`
<li>List item inside code block
`

Output:

<ul>
<li>Unordered list item
</li>
</ul>
<ol>
<li>Ordered list item
</li>
</ol>
<ul><li>
Code block:
<pre><code>
&lt;li&gt;List item inside code block
</code></pre>
</li>
</ul>

This would need some unit test coverage, but the direction seems correct.

This ticket was mentioned in Slack in #bbpress by netweb. View the logs.


10 months ago

This ticket was mentioned in Slack in #forums by sergey. View the logs.


8 months ago

#6 @netweb
8 months ago

Related: #bbPress2357 Design Crashes! - Li button issue - Editor not filtering improper HTML usage.

#7 @netweb
8 months ago

#2809 was marked as a duplicate.

Note: See TracTickets for help on using tickets.