Defeating the list block walloftext problem using CSS

Last month, Bella of thoughtsnlifeblog kindly interviewed me for her ‘Let’s Get Inspired‘ series. One question she asked me was whether I had any coding tips for bloggers… and that reminded me of a perennial problem I’ve encountered over the years: the annoying way that lists are presented by default in WordPress. No, this isn’t just another rant about the misbehaviour of the new ‘Gutenberg‘ block editor; this particular problem predates that — and the ‘new, improved’ editor doesn’t fix it.

The only constant is change

There’s one rule I’ve come to understand that’s (ironically) immutable: Things Change. What I present below may not be valid forever. Perhaps WordPress will fix this flaw in the future… or, perhaps, your browser may render this content differently from how I see it now (and have seen for some years, in several different browsers). I coined an acronym many years ago: ‘WYSINWOG’: it stands for ‘What You See Is Not What Others Get’. All I can tell you is that what I describe here has been true for at least the last seven years (and in all that time it has never been addressed); I first used this technique in my post ‘If I ruled the world‘, which was published on 29Jan2014.

A wall of text is an unfriendly barrier to communication

The ‘wall of text problem’ will be familiar to those with any experience of HCI. Jakob Nielsen lists it as #4 in his ‘top ten web design mistakes‘:

A wall of text is deadly for an interactive experience. Intimidating. Boring. Painful to read.

Jakob Nielsen, co-founder of the Nielsen Norman Group

There, Jakob bemoans the inability of some to comprehend the value of splitting text into paragraphs; but here, I’m curmudgeonly whingeing about the inability of self-proclaimed ‘expert’ systems designers to allow those of us who are trying to communicate on the web to do so in a way that doesn’t inflict the ‘wall of text’ on readers unnecessarily in a particular situation, to wit: the humble bullet-point list.

If you already know what I’m wittering on about, please skip ahead to the solution. If you want a demonstration, read on….

Demonstrating the list block’s walloftext problem

So, without further ado, here we go with a list that’s rendered in the ‘list block’ that the vaunted new WordPress ‘Gutenberg’ block editor provides by default (text courtesy of the ‘lorem ipsum generator‘):

  • Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ullamcorper malesuada proin libero nunc consequat interdum. Mi tempus imperdiet nulla malesuada pellentesque elit. Venenatis tellus in metus vulputate eu. Nulla facilisi morbi tempus iaculis urna id volutpat lacus. Ornare massa eget egestas purus viverra accumsan in nisl nisi. Augue eget arcu dictum varius duis at. Nunc sed augue lacus viverra vitae congue eu consequat ac. Odio ut enim blandit volutpat maecenas volutpat. Amet aliquam id diam maecenas ultricies mi.
  • Ornare suspendisse sed nisi lacus sed viverra tellus in hac. Duis at consectetur lorem donec. Mi ipsum faucibus vitae aliquet nec ullamcorper sit amet risus. Dui nunc mattis enim ut tellus elementum sagittis vitae et. Blandit aliquam etiam erat velit. A diam sollicitudin tempor id eu nisl nunc. Dignissim convallis aenean et tortor at. Turpis in eu mi bibendum neque egestas congue quisque egestas. Felis eget nunc lobortis mattis aliquam faucibus purus. Sit amet nisl suscipit adipiscing bibendum. Rutrum quisque non tellus orci ac auctor. Morbi leo urna molestie at elementum eu facilisis. Cras pulvinar mattis nunc sed blandit libero volutpat sed. Ornare aenean euismod elementum nisi.
  • Viverra vitae congue eu consequat. Iaculis at erat pellentesque adipiscing commodo elit at. Risus feugiat in ante metus dictum at. Enim diam vulputate ut pharetra sit amet aliquam id. Ornare massa eget egestas purus viverra. Vitae tortor condimentum lacinia quis vel eros donec ac odio. Massa tincidunt nunc pulvinar sapien et ligula. Dignissim sodales ut eu sem integer vitae. Tempor orci eu lobortis elementum. Sit amet risus nullam eget felis. Ut porttitor leo a diam sollicitudin tempor id.
  • Leo a diam sollicitudin tempor id eu nisl nunc. Ornare massa eget egestas purus viverra accumsan in nisl nisi. Aliquam sem et tortor consequat id porta. Eget lorem dolor sed viverra ipsum. Tincidunt dui ut ornare lectus sit amet. Blandit massa enim nec dui nunc mattis enim. Ac auctor augue mauris augue neque. At quis risus sed vulputate. Vulputate eu scelerisque felis imperdiet proin. Quis ipsum suspendisse ultrices gravida. Ultricies mi quis hendrerit dolor magna eget est lorem ipsum. Curabitur gravida arcu ac tortor dignissim. Facilisis mauris sit amet massa vitae tortor. Facilisi nullam vehicula ipsum a arcu cursus vitae congue mauris. Massa eget egestas purus viverra. Non tellus orci ac auctor augue mauris augue neque gravida. Turpis in eu mi bibendum neque. Pharetra sit amet aliquam id diam maecenas. Aliquam nulla facilisi cras fermentum odio eu feugiat pretium. Erat imperdiet sed euismod nisi.
  • A pellentesque sit amet porttitor eget dolor morbi. Nunc faucibus a pellentesque sit amet porttitor eget dolor morbi. Lorem donec massa sapien faucibus et molestie. Purus non enim praesent elementum facilisis leo vel. Mauris sit amet massa vitae tortor condimentum lacinia quis vel. Libero nunc consequat interdum varius. Pulvinar mattis nunc sed blandit libero volutpat sed. Tempus iaculis urna id volutpat lacus laoreet non. Aliquam vestibulum morbi blandit cursus risus at ultrices. Volutpat ac tincidunt vitae semper. Et malesuada fames ac turpis egestas sed. Felis bibendum ut tristique et egestas quis ipsum. Ultricies lacus sed turpis tincidunt id. Sed egestas egestas fringilla phasellus faucibus scelerisque. Ut aliquam purus sit amet luctus venenatis. Id volutpat lacus laoreet non curabitur gravida arcu.

Still with me? Oh, good.

What I’ve inflicted upon you above, my friends, is the proverbial, highly unreadable, ‘walloftext’. No spacing whatsoever — by default, and presumably some incompetent’s design — between the bullet points in the list.

Now, I ask you to compare that with this:

  • Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ullamcorper malesuada proin libero nunc consequat interdum. Mi tempus imperdiet nulla malesuada pellentesque elit. Venenatis tellus in metus vulputate eu. Nulla facilisi morbi tempus iaculis urna id volutpat lacus. Ornare massa eget egestas purus viverra accumsan in nisl nisi. Augue eget arcu dictum varius duis at. Nunc sed augue lacus viverra vitae congue eu consequat ac. Odio ut enim blandit volutpat maecenas volutpat. Amet aliquam id diam maecenas ultricies mi.
  • Ornare suspendisse sed nisi lacus sed viverra tellus in hac. Duis at consectetur lorem donec. Mi ipsum faucibus vitae aliquet nec ullamcorper sit amet risus. Dui nunc mattis enim ut tellus elementum sagittis vitae et. Blandit aliquam etiam erat velit. A diam sollicitudin tempor id eu nisl nunc. Dignissim convallis aenean et tortor at. Turpis in eu mi bibendum neque egestas congue quisque egestas. Felis eget nunc lobortis mattis aliquam faucibus purus. Sit amet nisl suscipit adipiscing bibendum. Rutrum quisque non tellus orci ac auctor. Morbi leo urna molestie at elementum eu facilisis. Cras pulvinar mattis nunc sed blandit libero volutpat sed. Ornare aenean euismod elementum nisi.
  • Viverra vitae congue eu consequat. Iaculis at erat pellentesque adipiscing commodo elit at. Risus feugiat in ante metus dictum at. Enim diam vulputate ut pharetra sit amet aliquam id. Ornare massa eget egestas purus viverra. Vitae tortor condimentum lacinia quis vel eros donec ac odio. Massa tincidunt nunc pulvinar sapien et ligula. Dignissim sodales ut eu sem integer vitae. Tempor orci eu lobortis elementum. Sit amet risus nullam eget felis. Ut porttitor leo a diam sollicitudin tempor id.
  • Leo a diam sollicitudin tempor id eu nisl nunc. Ornare massa eget egestas purus viverra accumsan in nisl nisi. Aliquam sem et tortor consequat id porta. Eget lorem dolor sed viverra ipsum. Tincidunt dui ut ornare lectus sit amet. Blandit massa enim nec dui nunc mattis enim. Ac auctor augue mauris augue neque. At quis risus sed vulputate. Vulputate eu scelerisque felis imperdiet proin. Quis ipsum suspendisse ultrices gravida. Ultricies mi quis hendrerit dolor magna eget est lorem ipsum. Curabitur gravida arcu ac tortor dignissim. Facilisis mauris sit amet massa vitae tortor. Facilisi nullam vehicula ipsum a arcu cursus vitae congue mauris. Massa eget egestas purus viverra. Non tellus orci ac auctor augue mauris augue neque gravida. Turpis in eu mi bibendum neque. Pharetra sit amet aliquam id diam maecenas. Aliquam nulla facilisi cras fermentum odio eu feugiat pretium. Erat imperdiet sed euismod nisi.
  • A pellentesque sit amet porttitor eget dolor morbi. Nunc faucibus a pellentesque sit amet porttitor eget dolor morbi. Lorem donec massa sapien faucibus et molestie. Purus non enim praesent elementum facilisis leo vel. Mauris sit amet massa vitae tortor condimentum lacinia quis vel. Libero nunc consequat interdum varius. Pulvinar mattis nunc sed blandit libero volutpat sed. Tempus iaculis urna id volutpat lacus laoreet non. Aliquam vestibulum morbi blandit cursus risus at ultrices. Volutpat ac tincidunt vitae semper. Et malesuada fames ac turpis egestas sed. Felis bibendum ut tristique et egestas quis ipsum. Ultricies lacus sed turpis tincidunt id. Sed egestas egestas fringilla phasellus faucibus scelerisque. Ut aliquam purus sit amet luctus venenatis. Id volutpat lacus laoreet non curabitur gravida arcu.

Yes, yes, yes: you have to ignore the fact that the content presented here is utter gibberish. But, surely, you have to admit that even gibberish is easier to scan when there are white space breaks between the chunks of it, no? If your answer to that is indeed ‘no’, please feel free to accuse me of tilting at windmills and click away to somewhere else, and the best of luck to you… but if you agree with me that the second list is an improvement on the first, perhaps I can tempt you to read on.

Six steps (and three caveats) that solve the problem

The solution is to add white space (I chose ten pixels, but you can use a different number if you like) to the bottom margin of each item in the list, using CSS. That may sound complicated, but the recipe is pretty straightforward (though you may have to stay awake at step #5):

  1. Create your list in a list block.
  2. Select the block that contains your list.
  3. From the toolbar, select the ‘Options’ menu item (the one with the three vertical dots).
  4. Select ‘Edit as HTML’.
  5. [I’ve had to put this step in a ‘code’ block, below, for technical reasons!]
  6. Select ‘Options’, then ‘Edit visually’ to return to normal editing mode.

Here (for reasons explained in the Postscript) is step #5:

replace every instance (except the last one) of:
<li>
with:
<li style="margin-bottom:10px;">
(copy-paste the line above; you don't need to know what it means)

Some caveats:

  • Be aware that the change won’t be apparent in the editor itself; the white space between the bullet points will only show in ‘preview’, and, of course, when published.
  • There’s (currently) a bug that will revert all the opening tags back to plain old <li>s if you edit any of the list block’s content in ‘visual’ mode — so make this step the last thing you do before publication, once you’re completely happy with the content. You can make content changes, if needed, in ‘HTML mode’§. I guess it’s just another example of WYSINWOG.
  • This technique works in the WordPress theme employed here on ‘Wibble’ (‘Twenty Ten’): I don’t know whether it will work on other themes. I think it should; it’s standard HTML/ CSS, it’s not rocket science.

Postscript

Oh, look: while checking through this post to ensure it’s as clear as I can make it, I discovered more block editor bugginess. D’oh! I haven’t quite managed to pin down exactly what’s going on, but it’s clear that WordPress objects to the use of the (bog-standard) HTML entity code for ‘Quotation mark’ (I’d put it here but that’s pointless because it would get converted) when entered in ‘HTML mode’; it bizarrely changes these to ‘Left double quotation mark’ () and ‘Right double quotation mark’ ().

This means that, in the published post, WordPress renders the CSS code snippet, completely incorrectly, as <li style=margin-bottom:10px;>. And if you were to copy-paste that instead of the the correct code (see ‘step #5’) into your list block to generate white space as per my instructions above… it wouldn’t work (it’s a syntax thing). You’d probably see this:

Computer technologists… /eyeroll

So: phew! I’m glad I checked!


§ I tried to tell WordPress.com about this problem, but I was, sadly, unable to convince the ‘Happiness Engineer’ with whom I spoke that it was actually a bug that should be fixed. Who knows; maybe one day Someone Who Can might read this post and do something about the bugs. I’ve never been a believer in porcine aviation, though. And as text entry in this post is now becoming more and more sluglike, as often happens when I spend too long editing (I suspect a memory leak somewhere), I’m going to call it a day.

About pendantry

Phlyarologist (part-time) and pendant. Campaigner for action against anthropogenic global warming (AGW) and injustice in all its forms. Humanist, atheist, notoftenpist. Wannabe poet, writer and astronaut.
This entry was posted in balance, Communication, Computers and Internet, Education, Phlyarology and tagged , , , , , , , . Bookmark the permalink.

15 Responses to Defeating the list block walloftext problem using CSS

  1. Tom says:

    What’s this, Pendantry? A quirk? Never! 🤣
    They like keeping us on our toes, them little hamsters! 😂
    I don’t use the block editor. I only ‘touch’ the editor to select a featured image… and they’ve changed how that works as well.

    Liked by 2 people

  2. Herb says:

    I like the idea of white space. For me, I would just use the tag.

    Liked by 2 people

    • pendantry says:

      Uh… ‘the tag’? What ‘tag’ are you talking about?

      Liked by 2 people

      • Herb says:

        Arrggh…I had meant the tag for a line break left-carat br / right-carat but apparently was read as actual code.

        Liked by 2 people

        • Herb says:

          It disappeared: , is gone.

          Liked by 1 person

          • pendantry says:

            Yep: HTML in WordPress comments is handled differently from the way it is in the editor, the preview, or the published post (and with good reason, otherwise anyone could insert malicious code). It all ‘disappears’, and is interpreted, or not, according to the rules of the site’s theme.

            It’s possible to get around this — when the bugs don’t get in the way — using a technique called ‘escaping’ the code. There are online tools that will do this for you (in some cases), such as this one by freeformatter.com, which tells me to enter a ‘break tag’ like this: <br>

            Liked by 2 people

          • Herb says:

            Hmmm…Oh well. Thanks. I guess I’m not that excited about it, lol.

            Liked by 1 person

        • pendantry says:

          Ah! I see. Don’t be misled by the term ‘Edit visually’! Using the break tag at the end of each bullet point will show you a newline after each list item in the editor, but each one of those tags will vanish on publication, leaving you with the walloftext. I was fooled this way myself back in 2014… grasped the nettle and figured out a way around it. (Sorry that it’s taken me this long to get around to trying to pass on what I’ve learned.)

          The editor treats the content of a post differently from the way it’s treated in ‘preview’… and differently again in a published post. WordPress gets this wrong in a number of situations; the bugs are everywhere! Remember: ‘WYSINWOG’.

          Liked by 2 people

  3. Interesting the things you come up with. I never think of these issues and you seem to run into all of them. Thanks for the help I do keep a list to refer back to in case I ever need these tips.
    ;;
    ;;
    ;;
    Folks are watching. Be the one who’s Laughing

    Liked by 2 people

  4. Margins. Ha. Good thinking!

    Like

I'd love to hear your thoughts...

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.