sage
sage copied to clipboard
"editor.css" not included when Gutenberg (block) editor is in the new iframe mode
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:
- When using the
enqueue_block_editor_assetshook if the editor appears inside an iframe, or - When using the
enqueue_block_assetshook both when the editor appears inside an iframe and when it appears in page (legacy).
Steps to reproduce
- Do a fresh install of Bedrock+Acorn+Sage and activate the Sage theme
- Edit the file
web/app/themes/sage-theme/app/setup.phplike so:
- add_action('enqueue_block_editor_assets', function () {
+ add_action('enqueue_block_assets', function () {
- Add some CSS to
editor.css, for example:
.wp-block {
background: pink;
}
- 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
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