Unable to add CSS class names to editor iframe about gutenberg

[markhowellsmead]

Reopening as there should be a more logical way to do this.

[ramonjd]

I'm just throwing this out there without much thought, so it might be irrelevant or useless.

The comment above says:

// Ideally ALL classes that are added through get_body_class should
// be added in the editor too, which we'll somehow have to get from
// the server in the future (which will run the PHP filters).

I wonder if it'd be okay to inject the return value of body_class() in get_block_editor_settings, whose output is rendered in the editor HTML — and therefore accessible to the block editor applications — via wp.[editSite | editPost].initializeEditor?

[markhowellsmead]

See #17854 and

gutenberg/packages/block-editor/src/components/iframe/index.js

Lines 144 to 152 in cad8fae

	// Ideally ALL classes that are added through get_body_class should
	// be added in the editor too, which we'll somehow have to get from
	// the server in the future (which will run the PHP filters).
	setBodyClasses(
	Array.from( ownerDocument.body.classList ).filter(
	( name ) =>
	name.startsWith( 'admin-color-' ) ||
	name.startsWith( 'post-type-' ) ||
	name === 'wp-embed-responsive'

.

The solution is to use the admin_body_class hook in PHP to add class names to the main body. By prefixing the class names with admin-color-, the class names will be automatically copied over to the editor iframe.