Block Editor: automatically generate inline CSS for editor theme supports

[nickcernis]

In recent (unreleased) StudioPress theme updates, we've started generating Gutenberg inline CSS code on the front and back that can be inferred automatically from theme supports such as editor-font-sizes and editor-color-palettes.

I'd like to explore doing the same in Genesis Sample to reduce the amount of Gutenberg-related CSS people have to write when using Sample as a starting point for their themes.

[wpfangirl]

That sounds like a wonderful idea.

[jb510]

This sounds scary...

I'm not necessarily opposed to it, but I am concerned with anything generating inline styles that might over-ride existing child theme CSS.

What "inline CSS" specifically is going to get injected based on theme supports? (I obviously haven't seen the unreleased updates)

[nickcernis]

@jb510 Nothing scary, just removing the need to add CSS like this manually:

genesis-sample/lib/gutenberg/front-end.css

Lines 4 to 18 in 71e85dd

	.entry-content p.has-small-font-size {
	font-size: 12px;
	}
	.entry-content p.has-regular-font-size {
	font-size: 16px;
	}
	.entry-content p.has-large-font-size {
	font-size: 20px;
	}
	.entry-content p.has-larger-font-size {
	font-size: 24px;
	}

As that CSS can already be inferred from:

genesis-sample/config/editor-font-sizes.php

Lines 13 to 34 in 71e85dd

	return array(
	array(
	'name' => __( 'Small', 'genesis-sample' ),
	'size' => 12,
	'slug' => 'small',
	),
	array(
	'name' => __( 'Normal', 'genesis-sample' ),
	'size' => 16,
	'slug' => 'normal',
	),
	array(
	'name' => __( 'Large', 'genesis-sample' ),
	'size' => 20,
	'slug' => 'large',
	),
	array(
	'name' => __( 'Larger', 'genesis-sample' ),
	'size' => 24,
	'slug' => 'larger',
	),
	);

Same with editor-color-palette.

Also, in case you hadn't spotted it, this proposal is for the Genesis Sample repo. You could remove it if you didn't want to use it, and it won't affect Genesis itself/other child themes at present.

[jb510]

Ugh, I'll be more careful, that's the second time I mistook an issue for Genesis Sample as an issue for Genesis core... Sorry.

[nickcernis]

@jb510 No problem! Thanks for taking an interest in this stuff and for sharing your thoughts.

[nickcernis]

Work on this has now been merged into develop in #198.

This will form part of the Genesis Sample 2.9.0 release planned for late this week.