New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Table block: flesh out editor features #6923

Open
helen opened this Issue May 23, 2018 · 33 comments

Comments

Projects
None yet
@helen
Contributor

helen commented May 23, 2018

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:

@paaljoachim

This comment has been minimized.

Show comment
Hide comment
@paaljoachim

paaljoachim Jun 4, 2018

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.

joomunited advanced table block

paaljoachim commented Jun 4, 2018

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.

joomunited advanced table block

@karmatosed

This comment has been minimized.

Show comment
Hide comment
@karmatosed

karmatosed Jun 22, 2018

Member

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.

Member

karmatosed commented Jun 22, 2018

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

This comment has been minimized.

Show comment
Hide comment
@afercia

afercia Jun 22, 2018

Contributor

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.

Contributor

afercia commented Jun 22, 2018

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

This comment has been minimized.

Show comment
Hide comment
@hedgefield

hedgefield Jun 28, 2018

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.

hedgefield commented Jun 28, 2018

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

This comment has been minimized.

Show comment
Hide comment
@afercia

afercia Jun 28, 2018

Contributor

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.

Contributor

afercia commented Jun 28, 2018

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

This comment has been minimized.

Show comment
Hide comment
@hedgefield

hedgefield Jul 2, 2018

Looking at Dropbox Paper, it has an interesting UX.

screen shot 2018-07-02 at 11 19 13

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.

hedgefield commented Jul 2, 2018

Looking at Dropbox Paper, it has an interesting UX.

screen shot 2018-07-02 at 11 19 13

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

This comment has been minimized.

Show comment
Hide comment
@karmatosed

karmatosed Jul 2, 2018

Member

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

table1

table2

This simplified interface really seems nice.

Member

karmatosed commented Jul 2, 2018

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

table1

table2

This simplified interface really seems nice.

@hedgefield

This comment has been minimized.

Show comment
Hide comment
@hedgefield

hedgefield Jul 2, 2018

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:

tables

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

hedgefield commented Jul 2, 2018

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:

tables

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

@karmatosed

This comment has been minimized.

Show comment
Hide comment
@karmatosed

karmatosed Jul 2, 2018

Member

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.

Member

karmatosed commented Jul 2, 2018

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

This comment has been minimized.

Show comment
Hide comment
@afercia

afercia Jul 3, 2018

Contributor

What to add:

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

afercia commented Jul 3, 2018

What to add:

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

This comment has been minimized.

Show comment
Hide comment
@hedgefield

hedgefield Jul 3, 2018

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.

hedgefield commented Jul 3, 2018

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

This comment has been minimized.

Show comment
Hide comment
@karmatosed

karmatosed Jul 5, 2018

Member

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:

tablesettings

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

Member

karmatosed commented Jul 5, 2018

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:

tablesettings

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

@hedgefield

This comment has been minimized.

Show comment
Hide comment
@hedgefield

hedgefield Jul 11, 2018

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

hedgefield commented Jul 11, 2018

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

@karmatosed

This comment has been minimized.

Show comment
Hide comment
@karmatosed

karmatosed Jul 11, 2018

Member

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:

42339078-d415029e-8083-11e8-99a3-85045e3d2941
42339221-49c3681e-8084-11e8-969d-ac47f121fc99
42339088-dc5a4392-8083-11e8-8941-6cfcb7a0fe02

Member

karmatosed commented Jul 11, 2018

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:

42339078-d415029e-8083-11e8-99a3-85045e3d2941
42339221-49c3681e-8084-11e8-969d-ac47f121fc99
42339088-dc5a4392-8083-11e8-8941-6cfcb7a0fe02

@karmatosed

This comment has been minimized.

Show comment
Hide comment
@karmatosed

karmatosed Jul 11, 2018

Member

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

Member

karmatosed commented Jul 11, 2018

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

@karmatosed

This comment has been minimized.

Show comment
Hide comment
@karmatosed

karmatosed Jul 11, 2018

Member

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

Member

karmatosed commented Jul 11, 2018

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

@karmatosed

This comment has been minimized.

Show comment
Hide comment
@karmatosed

karmatosed Jul 11, 2018

Member

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

Member

karmatosed commented Jul 11, 2018

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

@karmatosed

This comment has been minimized.

Show comment
Hide comment
@karmatosed

karmatosed Jul 11, 2018

Member

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.

Member

karmatosed commented Jul 11, 2018

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

This comment has been minimized.

Show comment
Hide comment
@ZebulanStanphill

ZebulanStanphill Jul 11, 2018

Contributor

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

Contributor

ZebulanStanphill commented Jul 11, 2018

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

@karmatosed

This comment has been minimized.

Show comment
Hide comment
@karmatosed

karmatosed Jul 12, 2018

Member

Adding another to the list here to co-ordinate: #2904

Member

karmatosed commented Jul 12, 2018

Adding another to the list here to co-ordinate: #2904

@karmatosed

This comment has been minimized.

Show comment
Hide comment
@karmatosed

karmatosed Jul 13, 2018

Member

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.

Member

karmatosed commented Jul 13, 2018

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

This comment has been minimized.

Show comment
Hide comment
@karmatosed

karmatosed Jul 19, 2018

Member

Another one to include in this: #6096

Member

karmatosed commented Jul 19, 2018

Another one to include in this: #6096

@karmatosed

This comment has been minimized.

Show comment
Hide comment
@karmatosed

karmatosed Jul 20, 2018

Member

Another one to include: #6699

Member

karmatosed commented Jul 20, 2018

Another one to include: #6699

@afercia

This comment has been minimized.

Show comment
Hide comment
@afercia

afercia Aug 6, 2018

Contributor

Adding the accessibility label, since this issue incorporates #1470

Contributor

afercia commented Aug 6, 2018

Adding the accessibility label, since this issue incorporates #1470

@noisysocks

This comment has been minimized.

Show comment
Hide comment
@noisysocks

noisysocks Aug 10, 2018

Member

Heads up that @iseulde is rewriting the table block in #8767.

Member

noisysocks commented Aug 10, 2018

Heads up that @iseulde is rewriting the table block in #8767.

@iseulde

This comment has been minimized.

Show comment
Hide comment
@iseulde

iseulde Aug 27, 2018

Member

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.

Member

iseulde commented Aug 27, 2018

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

This comment has been minimized.

Show comment
Hide comment
@talldan

talldan Sep 6, 2018

Contributor

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
Contributor

talldan commented Sep 6, 2018

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

This comment has been minimized.

Show comment
Hide comment
@karmatosed

karmatosed Sep 8, 2018

Member

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!

Member

karmatosed commented Sep 8, 2018

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!

This was referenced Sep 11, 2018

@mtias

This comment has been minimized.

Show comment
Hide comment
@mtias

mtias Oct 12, 2018

Contributor

@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?

Contributor

mtias commented Oct 12, 2018

@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

This comment has been minimized.

Show comment
Hide comment
@talldan

talldan Oct 15, 2018

Contributor

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

Contributor

talldan commented Oct 15, 2018

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

@mtias

This comment has been minimized.

Show comment
Hide comment
@mtias

mtias Oct 15, 2018

Contributor

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

Contributor

mtias commented Oct 15, 2018

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

@noisysocks noisysocks removed their assignment Oct 16, 2018

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment