Improve background color options on table block

[talldan]

Summary

The table block currently has a hard-coded background color list (themes cannot disable or provide an alternative set of colors).

This was introduced in #10611 as a trade-off—a way to ensure sufficient contrast between background and text colors. Normally providing contrast isn't an issue, the user can change a text color. The table block is a little more complicated since it has a row striping style, alternate rows have a transparent background that the user has no control over, while other rows have the chosen background color with dark text.

Provided theme colors were not subtle enough to provide contrast, so we went with a set of hard-coded colors that would complement the light background of those alternate rows.

10611 initially tried dynamically lightening theme colors, but this resulted in those colors looking washed out and dull.

Ideas

Add additional color pickers for table block

Use theme colors like other blocks, allow the user to specify the following colors:

• Primary Background Color. Used for the body of the table.
• Secondary Background Color. Used for Headers, Footers and even rows in the body of the table when row-striping is enabled.
• Text Color

This would also require migrating the current hard-coded colors to custom colors.

Add an additional secondary background color picker when row-striping is enabled

Use theme colors like other blocks, and add an extra option for a secondary background color that is only visible when row-striping is enabled.

A text color option could also be added.

Dynamically change text and background colors to provide sufficient contrast

Use the theme colors for the background option (migrate the current color choices to custom colors). When a darker background color is selected dynamically change text color to light. If row-striping is enabled also dynamically change the rows with a transparent background to a black background.

Allow the theme to specify an extra range of colors for backgrounds

This could be an option that works in combination with another solution. The theme could provide a set of colors that are suitable for use in backgrounds and provide sufficient contrast with black or white text.

---

Related #16478, #18766

[talldan]

One other thing to mention is that this hard coded list of colors is not working particularly well in a theme where the background color might not be white (e.g. Twenty Twenty):

bleh!

[youssefelmourabit]

Can you add this feature in the next update.

[ChemicalSailor]

Add an additional secondary background color picker when row-striping is enabled

Use theme colors like other blocks, and add an extra option for a secondary background color that is only visible when row-striping is enabled.

A text color option could also be added.

I think this would be my preferred option. The option to set the colour of the striped rows should only be presented when that option is toggled on. It should probably be presented as a toggle switch like the header/footer options rather than a block style. I know the implementations are slightly different here in terms of markup; I'm thinking about it in terms of consistent presentation/flow.

The same thing could be could be done for the header, footer and borders - you toggle it on and you get to style it - all behind some filters so a developer can lock it down for end users if required.

Ideally we can automatically set the colour for striped rows etc based on the current selection for the background colour (if any) based on colour theory instead of just lightening/darkening. Hopefully that would solve the issue encountered before with colours looking dull or washed out. I'm sure I've seen libraries that can do this sort of thing before.

I think the block styles feature should transform into a 'presets' feature, kind of like patterns but within the local scope of the block. This is how styling takes place in, for example, powerpoint.

[ChemicalSailor]

I'm sure I've seen libraries that can do this sort of thing before.

I was thinking of chroma.js

@talldan I don’t know if this was what was used when you tried before.

[Micu22]

Any progress on this?

[paaljoachim]

Hey Dan @talldan Can we get a status update in relation to where this issue is at right now? I am wondering if I should bring up this issue in the next design triage session.

[paaljoachim]

@kjellr Can you take a look at this issue? Thanks.

[kjellr]

I think we should avoid overthinking this, and just use the default theme-provided colors. Maybe also with an opacity slider? We could default to a low opacity to aim for a readable color by default.

[Oto-boke]

This is my first comment, so I hope it's in the right place, tone etc.

I appreciate the concern from a readability perspective, however limiting the table colour offering to four uneditable colours is very limiting, especially given that the colours all include grey. Users have the ability to create white on white text (or whatever they choose) elsewhere within the editor, so the readability argument doesn't really hold up.

It would be incredibly useful to create theme-based colour pickers as with the current text / background in the same was as the text colour editor (add_theme_support( 'editor-color-palette', array...)) I've searched in vain for a similar workaround for tables.

Alternatively / as well, if you could set the 1st and 2nd colour and / or tint for table colours that would be great.

For the current project where this is an issue I've resorted to adding styles to the tables which works, however the site I'm building will be maintained by someone else so I'd wanted it as user-friendly as possible, hence the editor colour palette request.

Currently when you add a class to the table block it looks like the class is added to the table as a whole, it'd be really handy to be able to add a class to a single table cell, row or column. If you manually edit the table as HTML and convert it back to blocks then WordPress alerts unexpected content. I'm not aware that styles on td being illegal in html5. As an alternative, being able to add a class to the content of td would enable being to able to target a specific cell.

Finally you can only change the colour of table cell text one cell at a time, in the Classic editor you can select and change multiple cells in one go like in Excel.

PS I really appreciate all of the amazing work everyone has been doing on Gutenberg to where it is - thank you!

[deborah86]

I appreciate the concern from a readability perspective, however limiting the table colour offering to four uneditable colours is very limiting, especially given that the colours all include grey. Users have the ability to create white on white text (or whatever they choose) elsewhere within the editor, so the readability argument doesn't really hold up.

I agree

I think we should avoid overthinking this, and just use the default theme-provided colors. Maybe also with an opacity slider? We could default to a low opacity to aim for a readable color by default.

I agree.