Getting a nest list correctly – in WP Classic Editor

Preamble

The classic editor of WordPress.com doesn’t have a nest list UI element, o you have to do it in HTML. However, when you switch back to Visual mode, for some reason, more random (and unwanted) <ul>  and &nbsp  and <li style="list-style-type: none;"> tags are added automatically. These unwanted tags have a couple of effects:

  • They indent by one immediately so that the first point is not up against the left hand side.
  • Also, a list item after a nested list can become a new list, i.e. the previous list is ended after the nested list.

Here is how it should look in HTML…

The code as it should look

This example has lost its formatting (ignore this)

<ul>
<li><a href="https://www.youtube.com/watch?v=8B6j_yr9H8g">Serial Communication Between an Arduino and a PC with Java</a> (20150213)</li>
<li><a href="https://www.youtube.com/watch?v=cw31L_OwX3A">Graph Arduino Sensor Data with Java and JFreeChart</a> (20150612)</li>
<li>Telemetry:
<ul>
<li><a href="https://www.youtube.com/watch?v=lFZ26gD7OIE">Easy Arduino Data Logging and Telemetry</a> (20160927) - <a href="http://www.farrellf.com/TelemetryViewer/">TelemetryViewer</a> source code and JAR files</li>
<li><a href="https://www.youtube.com/watch?v=yYyW16FYqE0">GPU-Accelerated Arduino Data Logging and Telemetry</a> (20161126)</li>
<li><a href="https://www.youtube.com/watch?v=r693Xb9t4dI">Advanced Arduino Telemetry and Data Visualization</a> (20170211)- <a href="https://www.youtube.com/watch?v=r693Xb9t4dI&amp;t=2510">41:50</a>, source code explained.</li>
<li><a href="https://www.youtube.com/watch?v=hooo9Ro06Bs">Easier Arduino Telemetry and Data Logging</a> (20170722)</li>
<li><a href="https://www.youtube.com/watch?v=Q4S-URWLC4k">Easy WiFi Telemetry with an Arduino and ESP8266</a> (20180821)</li>
<li><a href="https://www.youtube.com/watch?v=C1m6CvgjcSc">Timestamped Arduino Data Logging and Telemetry</a> (20190909)</li>
<li><a href="https://www.youtube.com/watch?v=FqfgBnCdrTo">Fast Raspberry Pi 4 Telemetry and Data Visualization</a> (20200720) - added camera</li>
</ul>
</li>
<li>Other
<ul>
<li><a href="https://www.youtube.com/watch?v=5N30jHMhw9c">Send Data from a PC to an Arduino with Java</a></li>
</ul>
</li>
<li>blah</li>
</ul>b;ah

Conclusion

It is very difficult to show the actual code as WP auto formats out the spacing even when placed inside <pre> and <code> tags. Look at the screen shot above.

The main points to remember are:

  • No blank lines
  • put the nesting (not nested) <ul>, </ul> and </li> tags on their own lines
  • You may have to try multiple times to get it right, I find that I have to correct it twice, in general.

An example of a messed up list and how it should look

Additional tags automatically added are <ul> and <li style="list-style-type: none;">, at the start of the list. It is these that cause the initial (unwanted and unnecessary) excess indenting.

Additional </ul> followed by <ul> tags are added after a nesting, causing the list to be broken after a nesting, i.e. one list followed by another list, with different initial indenting.

Screenshots of HTML:

Initial list
Initial list
Initial List with quick nesting edit
Initial List with quick nesting edit
Edited list with automatic tags added
Edited list with automatic tags added
Final fixed nested list
Final fixed nested list

This is how it show look in Visual mode:

  • First item
  • Second item
  • Third nested title
    • Fourth nested item
  • Fifth item

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s