SDK: refactor todo-extension styles

[simison]

To better understand what kind of flexibility blocks might need with their CSS, I looked into todo block.

Some problems, questions and possible solutions:

Importing two color definition files

Imports Calypso color variables for $green-text-min and Gutenberg color variables for the rest.

💥 It's unclear just by looking at the file where each variable came from
💥 Variable names have collisions
💡Unify into one source of truth; there should be only one colour definition file.
💡Prefix colour variables. $calypso__white or $gutenberg__white. Since the latter one comes from NPM module, suppose it's the Calypso ones that we would prefix

Block needs CSS selectors from the editor

The block has CSS like this:

.editor-block-list__block.is-selected,
.editor-block-list__block.is-typing {
	.wp-block-a8c-todo .add-new-todo-item-form {
		display: flex;
	}
}

💥 The block wrapper cannot always be the highest CSS selector
💥 While full Gutenberg editor might have .editor-block-list__block.is-typing classes, can we ensure we have these available in Calypso?
💡 Stay flexible — don't wrap/prefix everything in the build. CSS prefixing needs to be manual; possibly enforced by a linter so that it's possible to turn it off when needed.
💡 Some of these cases in this extension can probably be baked out by adding CSS resets and improving the specificity of CSS selectors, but not all.

P2 specific styling

The block has some styling that's meant only for P2s.

💥 P2 specific styling ships to all environments (wp-admin, Calypso etc)
💥 Nothing about body:not( .wp-admin ) .gutenberg really says it's P2 specific. That could very well be Calypso, too.
💡 Preferably get rid of any needs for environment specific styling and use themes for things that need to be themed (e.g. Jetpack branding)
💡 Conditionally include styles depending on the target environment. Not ideal.

Testing

1. Build the block:

   npm run sdk:gutenberg -- --editor-script=client/gutenberg/extensions/todo/block.js
   

2. Load the files in the Gutenberg and confirm that the block works.

[matticbot]

Test live: https://calypso.live/?branch=update/sdk-todo-extension-css

[ehg]

Prefix colour variables. $calypso__white or $gutenberg__white. Since the latter later on come from NPM module, suppose it's the Calypso ones that we can affect.

We'll have different colours for different projects 🤔 Namespacing is an option, but could be kind of awkward. Gutenberg currently handles some basic themeing via https://github.com/WordPress/gutenberg/blob/master/bin/packages/post-css-config.js — I'm not sure how set in stone this is?

Block needs CSS selectors from the editor

Could the work being done in WordPress/gutenberg#9008 help us here?

[alisterscott]

Is this one still in progress or ready for review?

[simison]

Still in progress, currently serving as an example at pa9srA-1m-p2