Skip to content
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 · 59 comments
Open

Table block: flesh out editor features #6923

helen opened this issue May 23, 2018 · 59 comments
Labels
[Block] Table Affects the Table Block [Feature] Blocks Overall functionality of blocks [Focus] Accessibility (a11y) Changes that impact accessibility and need corresponding review (e.g. markup changes). [Type] Discussion For issues that are high-level and not yet ready to implement. [Type] Enhancement A suggestion for improvement.
Milestone

Comments

@helen
Copy link
Member

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:

@danielbachhuber danielbachhuber added [Type] Enhancement A suggestion for improvement. [Feature] Blocks Overall functionality of blocks labels May 23, 2018
@danielbachhuber danielbachhuber added this to the WordPress 5.0 milestone May 23, 2018
@paaljoachim
Copy link
Contributor

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
Copy link
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.

@afercia
Copy link
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
Copy link

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
Copy link
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
Copy link

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
Copy link
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
Copy link

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
Copy link
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
Copy link
Contributor

afercia commented Jul 3, 2018

What to add:

  1. a way to define row and column header cells, see Tables: no method to define row or column header cells (th) #1470 🙂

@hedgefield
Copy link

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
Copy link
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.

@karmatosed karmatosed added Needs Design Feedback Needs general design feedback. and removed Needs Design Needs design efforts. labels Jul 5, 2018
@hedgefield
Copy link

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

@karmatosed
Copy link
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

@karmatosed
Copy link
Member

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

@karmatosed
Copy link
Member

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

@karmatosed
Copy link
Member

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

@nicopujol
Copy link

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
Copy link
Contributor

talldan commented May 14, 2019

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.

@talldan talldan mentioned this issue May 15, 2019
5 tasks
@aduth aduth added the [Type] Tracking Issue Tactical breakdown of efforts across the codebase and/or tied to Overview issues. label Jun 7, 2019
@afercia
Copy link
Contributor

afercia commented Jun 10, 2019

Related: this issue from the WPCampus accessibility report, with important recommendations: #15283

@prakashsinghgaur
Copy link

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.

@talldan
Copy link
Contributor

talldan commented Oct 8, 2019

Not at the moment @prakashsinghgaur. I had been working on the table block. I still have a few PRs that I'm looking to merge. Those don't include cell widths, unfortunately. After that I'll working on the navigation block.

@patrikhuber
Copy link

patrikhuber commented Nov 1, 2019

Hi, are there any updates on the accessibility issues? I.e. being able to specify a table header and caption in Gutenberg.

Additionally I want to add my support for the "merge cells" feature - I am really disappointed by the Gutenberg table block - it is as basic as it can get, severely limiting its usefulness.

Looking forward to any and all improvements.

Edit: I've found the ongoing PRs: #15409, #15554. No ongoing work for merging cells (colspan/rowspan) it looks like.

@youknowriad youknowriad added [Type] Discussion For issues that are high-level and not yet ready to implement. and removed [Type] Tracking Issue Tactical breakdown of efforts across the codebase and/or tied to Overview issues. labels Jun 4, 2020
@uzabila
Copy link

uzabila commented Nov 17, 2020

Gutenberg team, you are so lazy and it's seems you hate your users. Thank you very much for that.

@paaljoachim
Copy link
Contributor

paaljoachim commented Nov 17, 2020

@sergeiermilov Hey Sergei.
Thank you for adding a comment. It could have been said a bit more constructive such as how is this issue coming along, or when will we see an update to the Table Block, or I really need a better Table Block.

What happens is that there are so many aspects of Gutenberg being worked on, that some aspects are talked about and perhaps specific feedback is needed so that an issue stops up and is forgotten about for a while.

We really could use a status update on this general Table block issue.

@noisysocks
Copy link
Member

Vertical alignment was requested in https://core.trac.wordpress.org/ticket/49897.

@paaljoachim
Copy link
Contributor

Here is another Table block issue to add to the list.
Table Block: Should we use InnerBlocks?
#18768

@talldan talldan removed their assignment May 18, 2021
@amberhinds
Copy link

Is there any update on the likelihood of getting first-column row-scoped table headers in this block? That is an accessibility feature that is necessary for most tables out there.

@a4jp-com
Copy link

Screen Shot 03-16-24 at 07 41 AM
Please.

@anevins12
Copy link
Contributor

Would be great to allow the use of column headers at a minimum. If the concern is how users will do things wrong then we can add scripts to validate incorrect structures.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Block] Table Affects the Table Block [Feature] Blocks Overall functionality of blocks [Focus] Accessibility (a11y) Changes that impact accessibility and need corresponding review (e.g. markup changes). [Type] Discussion For issues that are high-level and not yet ready to implement. [Type] Enhancement A suggestion for improvement.
Projects
None yet
Development

No branches or pull requests