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 https://github.com/10up/mce-table-buttons/issues/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:

• 2609

• 2620

• 1470

• 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 https://github.com/WordPress/gutenberg/issues/1470#issuecomment-398727732 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.

[hedgefield]

Alright, I managed to wrap my head around a way to add all these functions to the current chrome. Here's a sketch showing different parts of it:

I hope the ideas are clear enough like this, let me know what you think.

[karmatosed]

Interesting @hedgefield thanks for mocking this. I do wonder though what about not having a sidebar? Do we need all these options? @helen right said a point I think has got lost:

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.

It's not to add everything. What do we need to add specifically?

I also wonder if exploring a visual grid over words makes better sense also. Maybe coming up with a criteria of what to add is a starting point?

Design wise I'd be careful of '+' icons because of their meaning for blocks. Just as a little point.

[afercia]

What to add:

1. a way to define row and column header cells, see #1470 🙂

[hedgefield]

The features I included are already heavily pared down from the original TinyMCE list, but they're open to discussion of course. The mock is mostly a way to get a grip on how we can present them.

In that light, how do we feel about the options in the toolbar dropdown, and the idea of separating them between adding new and editing existing? And I filled the rest of the toolbar with the default text styling options, is there anything missing there?

The sidebar stuff is optional to me - the table size is a bit of a duplicate, the rest can be done via the theme, but the alignment would be the only one I'd want to keep there. But it feels weird to have a whole sidebar and not put anything in it, too.

A visual grid for table size could work as well, I just found the number fields a bit more pragmatic as they're an existing pattern in Gutenberg, also because they can be reused in the sidebar. But the UI allows for both to be explored. I believe you said before you didn't want it to show right when you insert the table, right? In the mock it's an option in the menu so you can always refer to it later.

The + I think can be okay here since it hooks into the same pattern we're teaching people with blocks, as it performs mostly the same function: it adds or inserts a 'content holder', just in this case it's cells instead of blocks. It feels like a waste to not utilize that mental association. But let's test if people find it confusing or not.

[karmatosed]

Thanks @hedgefield for your exploration. I do feel we can simply a bit and in thinking about that @mtias showed me the new Tiny MCE table interface. It really made me think of how we could reduce things and avoid using the inserting icon here.

I just opened #7733 which would see some addition to table steps come in. I think this would help a lot. In light of that I would suggest the following settings:

This I think makes sense looking at paragraph block and in exploring this is better than a modal.

[hedgefield]

Yeah those sidebar settings make sense. Let's wait on #7733 then if that will solve the block UI matter.

[karmatosed]

I am going to use this issue as a master issue to bring in some other table issues, we've got a lot! I'm going to add each as a comment to allow clarification.

Let's firstly roll into this: #7733. This is where we bring in the Tiny Mce table interface. Here are some mocks:

[karmatosed]

I think we can also bring in #4027 into this issue as the solutions here fix the problems.

[karmatosed]

Adding in another issue we should also loop into table fixes and that's of resizing cell width: #4026

[karmatosed]

We should also fix the tabbing as outlined here: #4025.

[karmatosed]

Also we should loop in headers into the fix here: #1470

[ZebulanStanphill]

I just opened #7733 which would see some addition to table steps come in. I think this would help a lot. In light of that I would suggest the following settings:

One issue I have with this interface is that the inspector controls are not just contextual to the block, but I am guessing that they are contextual to each individual cell. This is handy, of course, but it feels confusing. What if I just wanted to make the entire table one color? One issue Gutenberg seems to have at the moment is the lack of a clear divide between entire block formatting and inline formatting. Right now it seems like most inline formatting options are put in the toolbar, but in the case of the Table block I am not sure if it makes sense to that there or not.

Putting cell-specific color settings in the Inspector feels wrong unless there is some way to distinguish the inline settings from the whole-block settings. It makes me think back to that mockup I made a while back to have another tab in the inspector called Inline for inline formatting settings. Actually, this kind of brings me back to wanting a breadcrumb-ish sort of inspector as well, since that could also potentially solve this problem (along with some other existing issues). See #7548.

[karmatosed]

One issue I have with this interface is that the inspector controls are not just contextual to the block, but I am guessing that they are contextual to each individual cell.

They are not. I haven't included adding color to each cell in this mock. That in this case would be additional features and potentially a plugin.

What if I just wanted to make the entire table one color?

That is the default as said, this has nothing to do on a per cell basis.

[ZebulanStanphill]

@karmatosed Oh, okay. In that case, I have no problems with the mockups.

[karmatosed]

Adding another to the list here to co-ordinate: https://github.com/WordPress/gutenberg/issues/2904

[karmatosed]

We (10up) can help shepherd work on this block, since it's been low priority.

@helen do you think this is something still able to happen? This block has a few areas now that all would be great improvements.

[karmatosed]

Another one to include in this: https://github.com/WordPress/gutenberg/issues/6096

[karmatosed]

Another one to include: #6699

[afercia]

Adding the accessibility label, since this issue incorporates #1470

[noisysocks]

Heads up that @iseulde is rewriting the table block in https://github.com/WordPress/gutenberg/pull/8767.

[ellatrix]

Thanks @noisysocks. Since the rewrite all additional functionality can make use of React. I'd be happy if anyone interested could work on that. Feel free to message me if you have any questions about the rewrite.

[talldan]

Putting together a list of features to work on as a priority, how about this as the initial list?

• Fixed table width using a % or px value
• Fixed table height using a px value
• Cell padding
• Border color
• Background color
• Toggle first row as table header

Others that could come later:

• Multiple cell selection
• Merge cells
• Cell spacing
• Border style
• Individual column/row resizing

[karmatosed]

That sounds like a great list @talldan and you should have mocks for most of those. If you don't have for any please reach out and add a 'needs design' label. Thanks for taking this on!

[mtias]

@karmatosed @talldan are there remaining items here or can we close the issue and open a new one for future releases with any future work?

[talldan]

@mtias There are remaining items. I'll try to make some progress on my two PRs I have open for the table block.

[mtias]

Cool, we have this week to wrap things up here. Anything else should be punted for future versions.

[gziolo]

Are you aware of work done in the past in #7035?

[talldan]

@gziolo I hadn't seen that one. I think the work there is unfortunately stale now since it's from before the table block rewrite - https://github.com/WordPress/gutenberg/pull/8767

[ThomasG1]

Hi, looking for Merged Cells. This seems like a pretty important feature to get pushed to the future. Right now, HTML can be edited, but conversion back reverts the state to original state. Keeping in HTML seems incongruous with spirit of Gutenberg (which I'm a proponent of BTW). Thx

[theCurrentz]

It's a little unclear who is taking on the work described in @talldan 's well-defined list.

[talldan]

Hey @Timbral - I'm trying to. I have a couple of pull requests open, but wasn't successful getting them over the line before the 5.0 release. I'll look to make some progress in the coming weeks.

[noisysocks]

@youknowriad: Just wanted to clarify if this is something we want to include in Phase 2 tightening up?

[youknowriad]

While I think it's good to have this (and we can work on it), I don't think it's critical to outline there. We can reconsider though.

[paaljoachim]

Status check of the table block: A customer sent me a pricelist to add to a new page so I decided to try out the current table block in GB version 4.8.

Backend Gutenberg:

I took a very wide screenshot just to show how small the table block is visually in the backend.

Frontend:

Bottom line: current block from what I noticed. Block is too narrow in the backend. Frontend table rows and columns are crammed together. When pasting in directly from Word I had to be sure to hold down shift-cmd-v to paste it as raw unformated text. As formated text messed up the cells.

I look forward to an update. Thanks.

[maxbeech]

Any progress on reordering rows via drag and drop please? This feature would be SUPER useful.

Cheers!

[noisysocks]

@maxbeech: No progress on drag and drop to report on, unfortunately. This issue is in the Phase 2 project which means it's prioritised to be worked on in the near to medium term. If you or somebody you know wants to take a crack at implementing drag and drop then I'd encourage you to drop by the #core-editor channel in our Slack to chat about it—the core team is here to support all volunteers wanting to get involved! 🙂

[maxbeech]

Great thanks for the heads up Robert!

On Mon, 25 Mar 2019 at 04:22 Robert Anderson notifications@github.com wrote:

@maxbeech https://github.com/maxbeech: No progress on drag and drop to report on, unfortunately. This issue is in the Phase 2 project which means it's prioritised to be worked on in the near to medium term. If you or somebody you know wants to take a crack at implementing drag and drop then I'd encourage you to drop by the #core-editor channel in our Slack https://make.wordpress.org/chat/ to chat about it—the core team is here to support all volunteers wanting to get involved! 🙂

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/WordPress/gutenberg/issues/6923#issuecomment-476050195, or mute the thread https://github.com/notifications/unsubscribe-auth/AH_-adVUlt2TwwP5qwgwyDPupWBoux0xks5vaE7-gaJpZM4ULDi9 .

[willstocks]

Any movement/timeline on the "Row type (Header, Body[default], Footer)" aspect of this? I came to use the table block today and noticed I wasn't able to define the table header row which is a bit annoying (I've managed to fudge something together!)

[stmarytx]

I would like to reiterate the accessibility needs of captions and THs for rows and columns. From my perspective it seems more important to make accessible components and then later consider refinements like the styling or even selection.

Currently, adding a caption or a TH in HTML throws a "this block contains unexpected or invalid content" error, so the only option is to convert the table to pure HTML. In my organization, not-super-tech-savvy editors make changes, so those editors wouldn't be able to make changes to the tables, pushing the content management work onto those whose primary focus is development.

[nicopujol]

Trying to merge cells in a table block in Gutenberg. Was working in classic editor, converted to blocks, and merged cells un-merged. Will this be soon possible or is it best to ignore table block for this use case and insert table as a powerpoint image?

[talldan]

Hi @nicopujol. Just wanted to check, how did you create the tables in the classic editor? Was it a plugin that you used for tables in the classic editor? I think the 'MCE Table Buttons' plugin is a popular table plugin.

I've been gradually working on new features for the table block. The block should really support merged cells when importing from other places (e.g. classic editor or excel/google sheets), but you're right, it doesn't. That's something I can try to tackle, but it might not be quick.

I think the best option for now to achieve merged cells would be to use the 'Classic Block' in Gutenberg. If you were using 'MCE Table Buttons' before that should continue to work in the classic block and it supports merged cells.

Another option, if you're comfortable working with HTML is the 'Custom HTML' block.

[afercia]

Related: this issue from the WPCampus accessibility report, with important recommendations: https://github.com/WordPress/gutenberg/issues/15283

[prakashsinghgaur]

HI, I just want to know whether there is any plan or progress on making the cell widths adjustable either by drag and drop or specifying pixels.