Add Checklist Block (WIP)

[ellatrix]

Description

While working on the list block, I thought it might be fun to try to create a list block with InnerBlocks. Perhaps more useful would be to start with something new like a checklist block. This allows us to experiment with InnerBlocks more before eventually moving on to more complicated scenarios like nesting.

A checklist block also comes with a few challenges. There's no standard HTML structure for it.

Option 1:

<ul>
  <li><input type="checkbox">Some text...
</ul>

The advantage of this structure is that it will be indented just like other list blocks that are styled by the theme. But we end up with two prefixes: the bullet (or number in case of an ordered list) and the checkbox. Usually the bullet is removed, and the checkbox positioned where the bullet is. This is no easy task to get right for all times though. It also excludes the possibility to create a numbered checklist. Keeping both (the bullet or number) and the checkbox seems the easiest: there's no need for styling, it works for all themes, and it's possible to number the list items. If themes want, they can also remove the bullet for an unordered list and position the checkbox.

Option 2:

<label>
  <input type="checkbox">Some text...
</label>

I'm not sure if the previous example would need a label, but it's also possible to not put the items in a list element at all. The block becomes a bit less complex as there's no need for a wrapper block (ol or ul), but the items won't be indented like other list items styled by the theme.

How has this been tested?

Screenshots

Types of changes

Checklist:

• My code is tested.
• My code follows the WordPress code style.
• My code follows the accessibility standards.
• My code has proper inline documentation.
• I've included developer documentation if appropriate.

[ZebulanStanphill]

lightBlockWrapper should make this block easier to implement.

I think a list of labeled checkboxes is the right way to create this using HTML:

<ul>
	<li><input type="checkbox" id="unique-auto-generated-id"/><label for="unique-auto-generated-id">Buy groceries</label></li>
</ul>

I'm not sure whether we should hide the list item bullets by default or not; I'm not really sure where the line is supposed to be drawn between core and theme styles in general.

[ZebulanStanphill]

Suggested change

	className={ className + '__checked' }
	className={ `${ className }__checked` }

[ZebulanStanphill]

The text next to the checkboxes should be label elements, shouldn't they?