Twenty Twenty includes color settings in the Customizer for background color and accent color, and based on these settings, it generates ten different colors that it applies to different elements in the theme. In order to give the user a good idea of how their content will look when published, these colors also need to be applied to style elements in the block editor interface.

This ticket was created after a conversation with @andersnoren who added most of the technical context here.

The add_editor_style() function doesn’t support appending inline styles to the stylesheet.

Because of this, Twenty Twenty uses wp_enqueue_style() and wp_style_add_data() in a function hooked to the enqueue_block_editor_assets action:

function twentytwenty_block_editor_styles() {

	// Enqueue the editor styles.
	wp_enqueue_style( 'twentytwenty-block-editor-styles', get_theme_file_uri( '/assets/css/editor-style-block.css' ), array(), wp_get_theme()->get( 'Version' ), 'all' );
	wp_style_add_data( 'twentytwenty-block-editor-styles', 'rtl', 'replace' );

	// Add inline style from the Customizer.
	wp_add_inline_style( 'twentytwenty-block-editor-styles', twentytwenty_get_customizer_css( 'block-editor' ) );

	// Add inline style for non-latin fonts.
	wp_add_inline_style( 'twentytwenty-block-editor-styles', TwentyTwenty_Non_Latin_Languages::get_non_latin_css( 'block-editor' ) );

	// Enqueue the editor script.
	wp_enqueue_script( 'twentytwenty-block-editor-script', get_theme_file_uri( '/assets/js/editor-script-block.js' ), array( 'wp-blocks', 'wp-dom' ), wp_get_theme()->get( 'Version' ), true );
}

add_action( 'enqueue_block_editor_assets', 'twentytwenty_block_editor_styles', 1, 1 );

(Twenty Twenty also sets different font families depending on which locale is active, as seen in the line beneath ”Add inline style for non-latin fonts.”)

As a result of this, some of those inline styles explicitly target .editor-styles-wrapper, in order to apply to only the right blocks and places.

The primary purpose of add_editor_style is for theme developers to avoid having to write custom CSS just for the editor, or more precisely to avoid having to target .editor-styles-wrapper at all, as that increases specificity unnecessarily and could break in future updates to the block editor structure, for example a change that necessitates a different classname or a new element.

So, ideally, the stylesheet enqueues above could be replaced with add_editor_style. This is currently not possible – at least not while following theme directory guidelines. A workaround could be to write the dynamic colors directly to a CSS file, which is then added using add_editor_style( 'editor-style.css' ), but themes on the WordPress.org theme directory are (fortunately) not allowed to write to files.

There might be a usecase for a function that has the same relationship to add_editor_style() as wp_add_inline_style() has to wp_enqueue_style(), allowing themes to append inline styles to the editor stylesheet. The code block above could then be partially replaced by something like:

function twentytwenty_classic_editor_styles() {

	// Enqueue the editor styles.
	add_editor_style( '/assets/css/editor-style-block.css' );
	
	// Add inline style from the Customizer.
	add_inline_editor_style( '/assets/css/editor-style-block.css', twentytwenty_get_customizer_css( 'block-editor' ) );

	// Add inline style for non-latin fonts.
	add_inline_editor_style( '/assets/css/editor-style-block.css', TwentyTwenty_Non_Latin_Languages::get_non_latin_css( 'block-editor' ) );

}

add_action( 'init', 'twentytwenty_classic_editor_styles' );

...allowing themes to enqueue dynamic block editor styles while still using add_editor_style.

Is there a better way?

For now, the above is posted as an opener for a discussion about how to achieve what TwentyTwenty does with dynamic editor styles. Is there a way to do it today that avoids targetting .editor-styles-wrapper?

Or is there a use case for a new function, like add_editor_style, which accomplishes the same?

Thoughts welcome!