Embedding Editor Style (add_editor_style) during development

[lnilya]

Hi there,

I am experimenting with WPack.io and so far love the speed, it solved a lot of my build chain issues I had previously! thanks for this amazing work.

My question is what would be the best workflow to use editor-styles during development (because CSS files are not generated and Wordpress wants a CSS file).

Normally I would just embed my main CSS file via something like this: add_editor_style( 'assets/css/theme.css' ); but I can only do this when the theme/plugin was actually built, since only then I have the files.

Right now I am just adding a new entry point that embeds the css file via the Wordpress 'enqueue_block_editor_assets' hook. This way I get the style in the backend in the block editor only, however the styles of course apply to the whole site, that means all the Wordpress buttons and h1/h2 tags etc get styled as well, not only the ones inside the block editor as it would be when using add_editor_style.

Does the WPackio\Enqueue class have some sort of functionality to enable this? Or are there any workarounds for this? Getting hot reloading in the Wordpress block editor would be absolutely stellar!

Thanks a lot!

[lnilya]

Just maybe a bit of explanation - I am using ACF Blocks, so the blocks are all server rendered in php and not embedded via JS.

[lnilya]

So far the workaround I have works pretty well. Have created 2 scss files one is for the backend and one is for the frontend. They only differ in the the fact that in the backend everything goes into block-editor__typewriter and is thus limited to the editor itself.
while "imports.scss" contains the actual css code.

This obviously fails for things where you need to reference body or html (menus, popups etc)... but these styles you usually don't need in the editor anyway.

// In backend_theme.scss
.block-editor__typewriter{
	@import "imports";
}

// In frontend_theme.scss
@import "imports";