Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Editor styles are not enqueued properly #108

Open
groenroos opened this issue Oct 28, 2024 · 0 comments
Open

Editor styles are not enqueued properly #108

groenroos opened this issue Oct 28, 2024 · 0 comments

Comments

@groenroos
Copy link

groenroos commented Oct 28, 2024

Following on from #107, I'm trying to make sure the editor-style.scss asset in Vite is enqueued properly - since editor styles need to be added with the add_editor_style() function instead of wp_enqueue_style().

Currently, even when modifying the filter I wrote in #107, the editor-style.{hash}.css asset will be enqueued as a normal style, and thus the CSS is incorrectly applied to the entire page (instead of just the editor viewport). It also won't be enqueued in any way whatsoever for any Classic / TinyMCE-based editors (e.g. the ACF WYSIWYG field), since those operate on an iframe.

function my_add_editor_style($assets, $manifest, $entry, $options) {
	$url = Vite\prepare_asset_url( $manifest->dir );
	$item = $manifest->data->{$entry};

	/* Editor style */
	if (str_contains($item->file, 'editor-style')) {
		add_action('admin_init', function() {
			add_editor_style($item->file);
		});
	}

	/* ... */

	return $assets;
}
add_filter( 'vite_for_wp__production_assets', 'my_add_editor_style', 10, 4 );

The above doesn't work. The typical approach is to hook to admin_init, but perhaps admin_init has already been processed before we get to this filter?

The situation is additionally complicated by the facts that:

  • add_editor_style() expects the asset path parameter to be relative to the theme folder, not the WP root. This is also not necessarily the same as the Vite root, either.
  • Gutenberg will want to dynamically inline and transform the built CSS, which won't work in dev mode when relying on Vite to transform SCSS on-demand (and thus the CSS asset is in fact JS)

Ideally, this plugin would handle editor styles appropriately out of the box; either by sniffing the filename and/or allowing the user to define the entry point(s) they want to use for editor styles.

In the interim, I'd welcome any ideas for a way forward! 🙏

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant