Gutenberg: Add Block: List

[jasmussen]

Attributes

• Formatting bar

Markup

<ul>
    <li>The quick brown fox jumps over the lazy dog.</li>
</ul>

<ol>
    <li>The quick brown fox jumps over the lazy dog.</li>
</ol>

States

Existing text:

Switching to a list:

Selected:

Neutral unordered:

Hover:

Neutral ordered:

Placeholder, when inserted as a block:

[mtias]

Something to consider: it'd be neat to allow easy re-arrangement of individual list items with up/down arrows. That's something I do often and it takes some dancing around copy/paste and not losing inline formatting of list while doing so.

[jasmussen]

it'd be neat to allow easy re-arrangement of individual list items with up/down arrows

Google Keep has a neat interface for this:

@spocke How hard would this be to make as a TinyMCE improvement? On a scale from "trivial" to "nightmare hellride".

Edit: just to clarify, not asking for checkboxes, just the drag and drop UI for rearranging list items

[ellatrix]

Something to keep in mind here as well are nested lists:

• Down
  
  
  
  • down
  
  
  • down the rabbit hole.
  
  

[androb]

Other requirements to think about:

• Ending list when you are in the last item and it is empty and you hit
  enter again
• Splitting lists into two lists if you hit enter twice in the middle of
  the list
• Joining two lists if you hit delete key at first character and there is a
  list before it
  On Wed, Mar 29, 2017 at 4:28 AM, Ella [e-mail] wrote:

Something to keep in mind here as well are nested lists:

• Down
  
  
  
  • down
    
    
    
    
    
    • down the rabbit hole.
    
    
    
  
  

—
You are receiving this because you are subscribed to this thread.
Reply to this email directly, view it on GitHub
https://github.com/WordPress/gutenberg/issues/346#issuecomment-290061739,
or mute the thread
https://github.com/notifications/unsubscribe-auth/ACD2sI_TATUYjNTVPiLGNpmvnRQEe5_lks5rqkBzgaJpZM4MsuUr
.

[spocke]

It might become complicated on nested lists since how do you drag between levels. For example beginning of a indented list is the same location as after the unindented item.

The location between these two are the same but the user could want to drag before b inside that list or after a.1. However I guess that could be done by just supporting the "a" case and the user would have to indent it to get it to the same level as "b".

• a
  
  
  
  • b
  
  

[circlecube]

With nested lists, it's also useful to keep in mind the UI for indenting the list/nested list.

-For moving a list item deeper down the rabbit hole (right)
-Also for moving a list item up the nested structure (left)
-What to do with the nested list items when their parent moves up/down the hierarchy? I'd assume just leave them where they are in relation to the moving li. Here's how it is done in the current editor:

[mtias]

I think maybe instead of dragging, just up/down arrows like we do for blocks themselves could be interesting.

[joyously]

The ol can have a reversed attribute and a start attribute.
The li can have a value attribute.

[androb]

Regarding implementation, if this were to be implemented as a "wrapped TinyMCE that is constrained to just do lists" @Afraithe has raised concerns about how this would be achieved.

Perhaps this is better implemented as part of the more generic "TinyMCE Block" that is getting discussed in PR #335

[Afraithe]

Yeah, constraining TinyMCE to "just" handle lists isn't really what it's made for, so not sure how that would work.

[androb]

Moved some thoughts about a Smart Text Block to #349

[anna-harrison]

We have made a start on list block: #358
Feedback welcome!

[mimo84]

Just an update on the implementation of the block plugin. As I will be away for the next two weeks, at this moment we merged in basic editing and implementation for the editor and block level operations (align).
I opened a new PR about block switching and save / update content.
We need to find a better way to extract the attributes in the onChange method.
Next things to be implemented are block list toolbar, where to hook switching block type. Needs to be discussed also if block switching belongs to the plugin itself or not. For example, how do we manage swapping a heading block to a list block and which actions should be possible or not possible.
Ideas welcome :)

[jasmussen]

@mimo84 @intronic I see the list block in master, hooray!

I also noticed the alignments, which were part of the mockups initially. Upon reflection it doesn't seem like text align makes any sense at all in the list block, do you agree?

On the other hand, indent and unindent makes a lot of sense to have, so I've updated the mockups on this page. Let me know if you're still working on these and/or could use some help.

[EphoxJames]

@jasmussen To create the list as shown in the mockups above it seems I will need to have an ordered and unordered variant so I can create transforms between them (looking at the heading block for an example). Alternatively I could create buttons like with the alignment selector or the heading levels. Which is the preferred approach?

[EphoxJames]

I've submitted a pull request to enable the updating of list content based on @mimo84 's pull request.
https://github.com/WordPress/gutenberg/pull/598

[jasmussen]

To create the list as shown in the mockups above it seems I will need to have an ordered and unordered variant so I can create transforms between them (looking at the heading block for an example).

Correct, we'd need separate blocks for unordered list, and ordered lists, and a way to switch between them using the Switcher. Edit, scratch that. Upon discussing this with Matías, it might or might be multiple blocks. Maybe it's a single block that defaults to unordered, with option to switch to an ordered list, or it's two virtually identical blocks that each default to what's on the block label. In both cases, here's a new mockup for switching between them.

Alternatively I could create buttons like with the alignment selector or the heading levels. Which is the preferred approach?

I think it may be good to focus on those blocks primarily, as opposed to the flow. Because the flow for creating lists might evolve, as tracked here: https://github.com/WordPress/gutenberg/issues/539#issuecomment-298613026

In other words, we know that we'll need the two list blocks. But we haven't fully decided what the best approach for creating them is.

Thanks! Please reach out here or in DM or anywhere, if I can be of more help.

[jasmussen]

As an update, your PR looks great, and I think we should get it merged in without any more feature work. That will close this ticket.

Future enhancements, like flows for creating lists, and whether a list is a single or multiple blocks, I will open separate tickets for that.

[EphoxJames]

@jasmussen I've updated the pull request to a mergeable state. Should I merge it myself or should that be done by reviewers? Is the procedure that wordpress follows documented somewhere?

[jasmussen]

I've updated the pull request to a mergeable state. Should I merge it myself or should that be done by reviewers? Is the procedure that wordpress follows documented somewhere?

Nice work! You can merge it yourself once it's approved by the reviewers. I'll ask and see if we can get that expedited!

[jasmussen]

Closing in favor of #704 🎉