Unable to add CSS class names to editor iframe

[markhowellsmead]

Description

I'm attempting to add CSS class names to the new iframe in the editor using JavaScript. The aim is to apply a user-selected accent colour in the editor.

I've only been able to do so using an overly-complicated combination of MutationObserver (to detect when the iframe becomes available) and a setInterval to repeatedly try to apply the class name until it sticks. This seems to be unnecessarily complex. Is there a better solution?

I've tried to add the class names using the admin_body_class hook in PHP, but this doesn't feel right (as it's PHP) and it also only appears to work on the main body (which doesn't help, as it's hidden by the iframe).

Step-by-step reproduction instructions

See the code example.

Screenshots, screen recording, code snippet

https://gist.github.com/markhowellsmead/01c8c29937162e93a11e21c8209872d1

Environment info

• WordPress 6.4
• No plugins.

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

Yes

[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.

[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?