Block audit: Table

[kjellr]

Note: We'll be doing these audits in waves and editing this as we work through the blocks, so this text will be updated and fleshed out as we progress. See the full picture here.

Overview

Name: Table
Description: Insert a table -- perfect for sharing charts and data.
Category: Formatting
CSS class: wp-block-table in frontend and editor
Can be converted to: Nothing

States

Empty:

Selected:

Unselected:

Placeholder:

(Same as empty)

Primary (toolbar) settings

• Align left
• Align center
• Align right
• Edit table
  • Add row before
  • Add row after
  • Delete row
  • Add column before
  • Add column after
  • Delete column
• Bold
• Italic
• Strikethrough
• Link

Secondary (sidebar) settings

Table Settings: Fixed width table cells
Advanced: Additional CSS Class

Frontend appearance

Gutenberg starter theme:

Atomic Blocks

twentyseventeen:

twentyten:

Documentation

No devdocs in https://github.com/WordPress/gutenberg/tree/master/core-blocks/table

Suggestion for user-facing docs:

Performance on mobile

Accessibility

Bugs/errors

Individual issues will be opened for these soon

• When you add just a couple more columns, the block forces scrollbars. It's not clear this is necessary. (See Table Block: cannot see more than three columns at a time when adding new columns #8325)
• Horizontal scrolling is not evident on browsers/devices that hide scrollbars. (Table Block: Scrolling is not evident when a browser/device hides scrollbars. #8401)
• Row/Column selection color is not in our palette. (Table block: Row/Column selection color isn't from the WordPress palette.  #8404)

Suggestions

Individual issues will be opened for these soon

• I expected to be able to adjust text color/backgrounds. In this case, I assume that those settings would apply to the current cell. (Consider adding color and text size customizations to all text-based blocks.  #8171)
• It'd be great to add some "advanced" table features into the sidebar. There's a great discussion around this in Table block: flesh out editor features #6923
• Customizing tables would be much faster if the "Edit table" options were exposed in the block toolbar. That said, that might lead to icon overload, and the icons may not be particularly clear on their own. Trusting my gut on this one — this would be too many icons in the toolbar.
• Alignment feels a bit unexpected—it's using the block-level alignment icons and styling, but that doesn't seem to behave consistently. For instance, if I right-align the table, the text remains left-aligned, but if I centre-align the table, the text becomes centre-aligned. (Issue no longer occurs after the table block rewrite.)
• Being able to set column and row headings would help improve accessibility of content to screenreader users. (Tables: no method to define row or column header cells (th) #1470)

[ellatrix]

Just noting here that the table block has been rewritten recently, so the description may no longer be up to date.

[kjellr]

All the issues raised here have been opened as individual issues. Going to close this for now, and we can continue discussion in the individual issues instead. 👍

Thanks!