Add background color control for table block #10611

talldan · 2018-10-15T08:38:04Z

Description

Adds background and text color controls to the table block.

Works with both Regular and Stripes style variations of the table block.

How has this been tested?

Manual testing

Screenshots

Types of changes

New feature (non-breaking change which adds functionality)

Checklist:

My code is tested.
My code follows the WordPress code style.
My code follows the accessibility standards.
My code has proper inline documentation.

packages/block-library/src/table/index.js

packages/block-library/src/table/edit.js

+							},
+						] }
+					>
+						<ContrastChecker


talldan · 2018-10-15T08:49:43Z

packages/block-library/src/table/edit.js

+
+const applyFallbackStyles = withFallbackStyles( ( node, props ) => {
+	const { textColor, backgroundColor } = props.attributes;
+	const styles = node ? getComputedStyle( node.querySelector( 'tr' ) ) : undefined;


Currently only grabs fallback colors for the first row.

karmatosed

Let's scale this back a little to just having the background color and not a text color also. We should only have this for the stripes not for every cell right now. I have some ideas how we can do this and will comment in issue but let's also make sure this gets a 'design feedback' label as this goes in for Wednesday because a UI change.

karmatosed · 2018-10-15T11:49:30Z

We need to remove text color options and focus just on background ones that can't become inaccessible, just for stripes. As part of this, we should remove the color picker.

Color palette wise let's have it use a fixed palette. We have a few options:

Use a light palette based on a set of colors:
Desaturate and lighten the existing theme palette:

Ideally, we would go for 2 but with time stop of Wednesday, let's make sure we get something in.

ZebulanStanphill · 2018-10-15T14:20:25Z

What if the stripes were a lighter or darker variant of the selected background color? Would that idea work?

postphotos · 2018-10-15T21:41:46Z

What if the stripes were a lighter or darker variant of the selected background color? Would that idea work?

That could work as well!

talldan · 2018-10-16T05:15:26Z

I've refactored this quite a bit now from yesterday:

Removed text color controls.
Removed the ability to choose custom background colors.
Dynamically filtered out background colors that don't contrast with the default text color. (potentially though, this might exclude all colors for some themes? We could hide the color control for those themes.)
Use CSS only for styling background colors.

I think this makes the implementation a lot cleaner, and hopefully mergeable, but would love @jorgefilipecosta's feedback on the changes to color utils, ColorPalette and withColorContext.

talldan · 2018-10-16T05:31:26Z

Hi @karmatosed - My understanding is that the colors can be provided by the theme, so potentially the second option would be preferable so that the colors are still in keeping with the theme. Having said that, I'm not sure how we can lighten the colors dynamically if they're specified through css.

I think we'd have to only set the colors using inline styles (instead of classes) and lighten the colors in JavaScript. Potentially that could work, but might need input from a dev with more experience of themes / the color system to validate that approach.

At the moment I've used a different approach - I've filtered the color palette down to only accessible colors, which means the red and black colors are no longer available:

I know this is not a particularly great set of colors to choose from. Three or four of them are ok.

Option 1 - I think I could make that work, but I worry about it being too prescriptive and maybe hard to undo in the future.

packages/editor/src/components/colors/utils.js

jorgefilipecosta

Hi @talldan I think if we manage to merge #10457 before this PR we may be able to simplify the changes here as it looks like the other PR is addressing a need from this PR.
I really like the feature being added here 👍
In the last version when I try to execute this branch I'm getting an error:

TypeError: Failed to execute 'getComputedStyle' on 'Window': parameter 1 is not of type 'Element'.
    at edit.js:47

jorgefilipecosta · 2018-10-16T13:43:23Z

packages/editor/src/components/color-palette/with-color-context.js

 			const settings = select( 'core/editor' ).getEditorSettings();
 			const colors = settings.colors;
-			const disableCustomColors = settings.disableCustomColors;
+			const disableCustomColors = settings.disableCustomColors || ownProps.disableCustomColors;


In PR #10457 I'm adding the possibility to overwrite color definitions for a specific component. If we manage the land it before it this PR it may be very useful and simplify the changes here.

packages/components/src/color-palette/index.js

packages/block-library/src/table/edit.js

talldan · 2018-10-18T08:24:33Z

Hi @karmatosed - I had a go at lightening and desaturating the theme colors, but it ended up being very hit and miss, and was hard to find a happy medium that works for a decent selection. The current version of this branch goes with your first recommendation - there's a static selection of colors:

jorgefilipecosta

Hi @talldan this PR is testing well for me, nice work 👍
I think it would be perfect if we could avoid the use of inline styles I created a PR and left a comment with a possible path to get us there.

packages/block-library/src/table/edit.js

noisysocks

LGTM, minor comments aside 👍

I was confused by the createCustomColorsHOC API at first but the JSDoc code examples helped me eventually grok it. I think that using render props here might be simpler than a HOC but then again I think that about most of our HOCs, so... 😀

noisysocks · 2019-01-17T01:17:06Z

packages/block-library/src/table/edit.js

+
+export default compose( [
+	withCustomBackgroundColors( 'backgroundColor' ),
+] )( TableEdit );


We don't need to use compose() here since it's just one HOC.

export default withCustomBackgroundColors( 'backgroundColor' )( TableEdit );

Very true, addressed in 38a74ad

noisysocks · 2019-01-17T01:23:39Z

packages/block-library/src/table/index.js

 		const classes = classnames( {
 			'has-fixed-layout': hasFixedLayout,
+			'has-background': !! backgroundClass,
+			[ backgroundClass ]: backgroundClass,
 		} );


The object given to classnames should only map strings to booleans. I think for this use case we ought to pass backgroundClass as an argument.

const classes = classnames( backgroundClass, { 'has-fixed-layout': hasFixedLayout, 'has-background': !! backgroundClass, } );

Good spot! Addressed in 8fddd40

- Remove text color control - Disable custom colors - Apply class names to table element instead of tr element - Remove JS striping

…ntrast with the default text color

… that contrast with the default text color" This reverts commit 8a39fbc.

…st applied

… usages with custom colors array. Refactor withColorHOC. Ensure withSelect is not used when not needed, and ensure custom color HOC has the right display name Add tests for new createCustomColorsHOC

…ly class names to set the background color

…table block has custom background colors designed to meet contrast requirements

… of using the object form

Requested changes have been addressed

youknowriad · 2019-01-18T10:08:40Z

👍 Nice

* Add background and text color controls for table block * Modify fallback styles to use first table row * Make text color control apply to all rows, not only striped row * Simplify implementation of colors for table block. - Remove text color control - Disable custom colors - Apply class names to table element instead of tr element - Remove JS striping * Filter colors in table background color control to only those that contrast with the default text color * Remove errant tab * Export using a single statement * Revert "Filter colors in table background color control to only those that contrast with the default text color" This reverts commit 8a39fbc. * Fix issue with row element not being present when fallback styles first applied * Use a predefined set of background colors suitable for a table * Add createCustomColorsHOC HOC builder that creates withColors HOC for usages with custom colors array. Refactor withColorHOC. Ensure withSelect is not used when not needed, and ensure custom color HOC has the right display name Add tests for new createCustomColorsHOC * Use createCustomColorHOC for table backgrounds and refactor to use only class names to set the background color * Remove contrast checker from table block background color selector - table block has custom background colors designed to meet contrast requirements * Remove use of compose for single HOC * Modify use of classnames, pass backgroundColor as an argument instead of using the object form * update CHANGELOG

talldan added the [Feature] Blocks Overall functionality of blocks label Oct 15, 2018

talldan self-assigned this Oct 15, 2018

talldan requested review from jasmussen and jorgefilipecosta October 15, 2018 08:38

talldan commented Oct 15, 2018

View reviewed changes

packages/block-library/src/table/index.js Outdated Show resolved Hide resolved

talldan commented Oct 15, 2018

View reviewed changes

packages/block-library/src/table/edit.js Outdated

},

] }

>

<ContrastChecker

This comment was marked as outdated.

Sign in to view

talldan commented Oct 15, 2018

View reviewed changes

talldan added the [Type] Enhancement A suggestion for improvement. label Oct 15, 2018

karmatosed self-requested a review October 15, 2018 11:27

karmatosed previously requested changes Oct 15, 2018

View reviewed changes

karmatosed added the Needs Design Feedback Needs general design feedback. label Oct 15, 2018

talldan force-pushed the add/table-block-background-text-color branch from 7c024ea to b58fdcc Compare October 16, 2018 05:10

jorgefilipecosta reviewed Oct 16, 2018

View reviewed changes

packages/editor/src/components/colors/utils.js Outdated Show resolved Hide resolved

jorgefilipecosta reviewed Oct 16, 2018

View reviewed changes

ZebulanStanphill reviewed Oct 16, 2018

View reviewed changes

packages/block-library/src/table/edit.js Outdated Show resolved Hide resolved

ZebulanStanphill reviewed Oct 16, 2018

View reviewed changes

packages/block-library/src/table/edit.js Outdated Show resolved Hide resolved

ZebulanStanphill reviewed Oct 16, 2018

View reviewed changes

packages/block-library/src/table/edit.js Show resolved Hide resolved

talldan changed the title ~~Add background and text color controls for table block~~ Add background color control for table block Oct 17, 2018

talldan force-pushed the add/table-block-background-text-color branch 3 times, most recently from 82d5ca7 to c6c4cc9 Compare October 18, 2018 08:10

jorgefilipecosta mentioned this pull request Oct 18, 2018

Add withPropsChange hoc; Add Mechanism to use custom colors on withColors #10765

Closed

jorgefilipecosta reviewed Oct 18, 2018

View reviewed changes

packages/block-library/src/table/edit.js Show resolved Hide resolved

talldan added the [Status] In Progress Tracking issues with work in progress label Oct 22, 2018

noisysocks added this to the 4.9 (Gutenberg) milestone Jan 17, 2019

noisysocks approved these changes Jan 17, 2019

View reviewed changes

talldan and others added 15 commits January 18, 2019 14:40

Add background and text color controls for table block

dfa21f0

Modify fallback styles to use first table row

366196c

Make text color control apply to all rows, not only striped row

00d4873

Simplify implementation of colors for table block.

6ac4bd4

- Remove text color control - Disable custom colors - Apply class names to table element instead of tr element - Remove JS striping

Filter colors in table background color control to only those that co…

71c2842

…ntrast with the default text color

Remove errant tab

97331c4

Export using a single statement

b1f19d6

Revert "Filter colors in table background color control to only those…

c5e31d3

… that contrast with the default text color" This reverts commit 8a39fbc.

Fix issue with row element not being present when fallback styles fir…

c5be7a8

…st applied

Use a predefined set of background colors suitable for a table

e78db87

Add createCustomColorsHOC HOC builder that creates withColors HOC for…

f539044

… usages with custom colors array. Refactor withColorHOC. Ensure withSelect is not used when not needed, and ensure custom color HOC has the right display name Add tests for new createCustomColorsHOC

Use createCustomColorHOC for table backgrounds and refactor to use on…

7a130b6

…ly class names to set the background color

Remove contrast checker from table block background color selector - …

eeb7bf4

…table block has custom background colors designed to meet contrast requirements

Remove use of compose for single HOC

38a74ad

Modify use of classnames, pass backgroundColor as an argument instead…

8fddd40

… of using the object form

talldan force-pushed the add/table-block-background-text-color branch from d64ba6b to 8fddd40 Compare January 18, 2019 06:49

update CHANGELOG

1384c41

talldan force-pushed the add/table-block-background-text-color branch from 673ef10 to 1384c41 Compare January 18, 2019 08:20

talldan added the [Block] Table Affects the Table Block label Jan 18, 2019

talldan merged commit 3111e48 into master Jan 18, 2019

talldan deleted the add/table-block-background-text-color branch January 18, 2019 08:34

talldan mentioned this pull request Jan 15, 2020

Improve background color options on table block #19659

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add background color control for table block #10611

Add background color control for table block #10611

talldan commented Oct 15, 2018 •

edited

Loading

This comment was marked as outdated.

talldan Oct 15, 2018

karmatosed left a comment

karmatosed commented Oct 15, 2018

ZebulanStanphill commented Oct 15, 2018

postphotos commented Oct 15, 2018

talldan commented Oct 16, 2018

talldan commented Oct 16, 2018 •

edited

Loading

jorgefilipecosta left a comment

jorgefilipecosta Oct 16, 2018

talldan commented Oct 18, 2018

jorgefilipecosta left a comment

noisysocks left a comment

noisysocks Jan 17, 2019

talldan Jan 18, 2019

noisysocks Jan 17, 2019

talldan Jan 18, 2019

youknowriad commented Jan 18, 2019

Add background color control for table block #10611

Add background color control for table block #10611

Conversation

talldan commented Oct 15, 2018 • edited Loading

Description

How has this been tested?

Screenshots

Types of changes

Checklist:

This comment was marked as outdated.

talldan Oct 15, 2018

Choose a reason for hiding this comment

karmatosed left a comment

Choose a reason for hiding this comment

karmatosed commented Oct 15, 2018

ZebulanStanphill commented Oct 15, 2018

postphotos commented Oct 15, 2018

talldan commented Oct 16, 2018

talldan commented Oct 16, 2018 • edited Loading

jorgefilipecosta left a comment

Choose a reason for hiding this comment

jorgefilipecosta Oct 16, 2018

Choose a reason for hiding this comment

talldan commented Oct 18, 2018

jorgefilipecosta left a comment

Choose a reason for hiding this comment

noisysocks left a comment

Choose a reason for hiding this comment

noisysocks Jan 17, 2019

Choose a reason for hiding this comment

talldan Jan 18, 2019

Choose a reason for hiding this comment

noisysocks Jan 17, 2019

Choose a reason for hiding this comment

talldan Jan 18, 2019

Choose a reason for hiding this comment

youknowriad commented Jan 18, 2019

talldan commented Oct 15, 2018 •

edited

Loading

talldan commented Oct 16, 2018 •

edited

Loading