Table block: flesh out editor features

[helen]

I'd like to discuss which features from the old TinyMCE table plugin should be recreated as functionality for the table block in Gutenberg and whether that should be in core or left to a plugin that extends the table block. This is coming from my review of an existing 10up plugin that adds the TinyMCE plugin to the classic WP editor and a determination that having such a forked code path in the same plugin probably doesn't make sense if table blocks are meant to be a core feature. We (10up) can help shepherd work on this block, since it's been low priority.

From 10up/mce-table-buttons#2:

Toolbar

• Dropdown button with multiple flyouts
  • Cell
    • Merge table cells
      • NOTE: Has modal when nothing selected
    • Split table cell
  • Row
    • Insert row before (exists with icon)
    • Insert row after (exists with icon)
    • Delete row (exists with icon)
    • — SEPARATOR —
    • Cut table row
    • Copy table row
    • Paste table row before
    • Paste table row after
  • Column (all exist with icons)
    • Insert column before
    • Insert column after
    • Delete column

Sidebar

• Table properties
  • Rows (this is currently only accessible when creating a new table)
  • Columns (this is currently only accessible when creating a new table)
  • Width
  • Height
  • Cell spacing
  • Cell padding
  • Border
  • Caption (checkbox)
  • Alignment (None, Left, Center, Right)
• Cell properties
  • Width
  • Height
  • Cell type (None/Cell, Header cell)
  • Scope (None, Row, Column, Row group, Column group)
  • Alignment (None, Left, Center, Right)
• Row properties
  • Row type (Header, Body[default], Footer)
  • Alignment (None, Left, Center, Right)
  • Height

Related Gutenberg issues/PRs:

• Table block UX - to discuss or not? #2609
• Table Block: Default Styling #2620
• Tables: no method to define row or column header cells (th) #1470
• Polish the Table block #6314

[paaljoachim]

I have been looking at the Advanced Gutenberg plugin by https://www.joomunited.com/wordpress-products/advanced-gutenberg and they added: Single Cell Settings, Background Color, Text Color, Border, Padding and Text Alignment options to their Advanced Table block.

[karmatosed]

Thanks for the sketch @paaljoachim and for starting this discussion @helen. I have added the 'needs design' tag to get some work going on this.

[afercia]

See also #1470 (comment) where a good point was made to not allow nested blocks within the table block, to enforce it shouldn't be used for layout purposes.

[hedgefield]

Hi @helen, thanks for writing down that list. They all sound like logical functions for people who work with tables a lot, though I wonder if things like border, padding and color shouldn't be the domain of the theme? And some of these functions feel like plugin territory indeed.

Is it the intention to still make (some of) these improvements before 5.0? If so I'd say we might want to cut down the features a little bit to keep things manageable. Here's what my personal MVP list would be:

Dropdown button:

• Rows
  • Insert row before
  • Insert row after
  • Delete row
  • Paste table row before
  • Paste table row after
  • Create row header
• Columns
  • Insert column before
  • Insert column after
  • Delete column
  • Create column header

Sidebar:

• Table properties
  • Number of rows
  • Number of columns
  • Alignment
  • Equal width cells toggle
  • Custom CSS

Simple cut and paste can be done with keyboard shortcuts, and the width and height is part automatic, part adjustable by dragging the cell borders, so I'd like to ditch those options from the dropdown and sidebar.

Also, but this might be wishful thinking, I would love it if we could reorder rows and columns by drag-and-drop, so the insert/paste before/after options could be removed too.

So what do you think? I can provide a mockup with these options.

[afercia]

Worth reminding that any feature to edit the table should work also using only the keyboard. For example, in some cases TinyMCE provides alternative UIs for keyboard users (try on the tinymce.com demo to set the number of cells/rows using the mouse and using the keyboard, you will get a different UI). Whatever the Gutenberg choice will be, everything should work with only the keyboard too.

[hedgefield]

Looking at Dropbox Paper, it has an interesting UX.

The default table is very similar to ours, with a sibling inserter between rows/columns, which works really well. I thought the empty cells on the sides were placeholders for headings, but turns out those are drag-and-drop grabbers as well as bulk-selectors.

[karmatosed]

I took a look at what Google docs have and it made me think of what we need or don't.

This simplified interface really seems nice.