Block audit: List

[sarahmonster]

Note: We'll be doing these audits in waves and editing this as we work through the blocks, so this text will be updated and fleshed out as we progress. See the full picture here.

Overview

Name: List
Description: Numbers, bullets, up to you. Add a list of items.
Category: Common blocks
CSS class: none in frontend or editor
Can be converted to: paragraph, quote

States

Empty:

Selected:

Unselected:

Placeholder:

Primary (toolbar) settings

Bulleted, numbered, decrease indent, increase indent, bold, italic, strikethrough, link

Secondary (sidebar) settings

Advanced: Additional CSS Class

Frontend appearance

Gutenberg starter theme:

Atomic Blocks

twentyseventeen:

twentyten:

Bugs/errors

Individual issues will be opened for these soon

• Empty <br> tags appear at the end of list items. (Cannot reproduce with WP 5.0.3 — @kjellr)

• Regardless of whether I'm using bulleted or numbered lists, the bulleted option is always selected in the primary toolbar. (Cannot reproduce with WP 5.0.3 — @kjellr)

• Using sibling inserter before a list block doesn't seem to work properly. (May be a sibling inserter issue.)(Cannot reproduce with WP 5.0.3 — @kjellr)

• Issues related to using tabs to control indentation. (Indent list keyboard shortcuts inconsistencies #7051)

Suggestions

Individual issues will be opened for these soon

• Consider greying out the decrease/increase indent buttons when they won't do anything (for instance, when at the top level of indentation). (List Block: Consider graying out indentation buttons when they will have no effect.  #13402)

• It would be nice if copying an indented list copied over my list settings.

• Consider adding colour and/or size options. (Consider adding color and text size customizations to all text-based blocks.  #8171)

• Add a CSS class!

• Spacing between individual list items in the same list should be equal or less than spacing between a list item and a new indented sub-list. (List block: Equalise spacing between list elements #14100)

• Decrease indentation of nested lists so they align with beginning of text. (List block: consider aligning list items with paragraphs #14098)

• Align lists to paragraphs. (List block: consider aligning list items with paragraphs #14098)

• Placeholder should use greyed-out bullets as well as text. (Since the bullet actually appears on the front-end when the user hasn't entered any text, this is probably the correct way of showing it, so I'm going to just moot this one. An alternate solution would be to hide the empty list item from the frontend display so it never appears, but I could see that being tricky and it's probably not super-critical to the UX.)

• When using a RTL language, the arrows inside the increase/decrease indent buttons do not indicate the actual direction the text will move when you press the button. (List Block: Increase/Decrease Indent icons should be switched when using RTL language. #8674)

[dionysous]

I wrote an issue about another bug which happens when pasting multiline text into the list: #9476

[sarahmonster]

All issues here have been filed as individual issues, so I'm going to go ahead and close out this tracking bug. Feel free to comment on if I missed anything, or open new issues as needed! 💪