sage icon indicating copy to clipboard operation
sage copied to clipboard

"editor.css" not included when Gutenberg (block) editor is in the new iframe mode

Open mjsarfatti opened this issue 1 year ago • 1 comments

Version

10.8.2

What did you expect to happen?

The new Gutenberg (block) editor is now inside an iframe. For this reason enqueueing editor assets using the enqueue_block_editor_assets hook no longer works reliably, and we are recommended to use enqueue_block_assets instead (see: https://github.com/WordPress/gutenberg/blob/trunk/docs/how-to-guides/enqueueing-assets-in-the-editor.md#editor-content-scripts-and-styles).

I expect styles in editor.css to be applied when the editor appears inside an iframe and I use the enqueue_block_assets hook.

What actually happens?

Styles in editor.css are not applied in the following two cases:

  1. When using the enqueue_block_editor_assets hook if the editor appears inside an iframe, or
  2. When using the enqueue_block_assets hook both when the editor appears inside an iframe and when it appears in page (legacy).

Steps to reproduce

  1. Do a fresh install of Bedrock+Acorn+Sage and activate the Sage theme
  2. Edit the file web/app/themes/sage-theme/app/setup.php like so:
- add_action('enqueue_block_editor_assets', function () {
+ add_action('enqueue_block_assets', function () { 
  1. Add some CSS to editor.css, for example:
.wp-block {
  background: pink;
}
  1. Go to edit a page, and see that the background is not applied

System info

No response

Log output

No response

Please confirm this isn't a support request.

Yes

mjsarfatti avatar Apr 12 '24 18:04 mjsarfatti

Both editor CSS and JS are working as expected for me with enqueue_block_editor_assets and enqueue_block_assets

When using the current hook (enqueue_block_editor_assets) there is this warning:

editor/0-css was added to the iframe incorrectly. Please use block.json or enqueue_block_assets to add styles to the iframe.

I'll get a PR up with that change

retlehs avatar Sep 19 '24 14:09 retlehs