-
-
Notifications
You must be signed in to change notification settings - Fork 3.1k
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.css" not included when Gutenberg (block) editor is in the new iframe mode #3185
Comments
Both editor CSS and JS are working as expected for me with When using the current hook (
I'll get a PR up with that change |
This one's a bit tricky because as far as I can tell (and please let me know where I'm off-base), there's not a way to determine via PHP whether the editor will be iframed or not. Here's how it's determined in js. Basically, every registered block must be API version 3 in order for the iframe to kick in. On top of that, there are several plugins that by default don't utilize v3. Meaning, as soon as one is installed/activated, your editor will no longer be iframed. For example, ACF defaults to v2*, Gravity Forms to v1**. Meaning that how editor styles are actually enqueued changes based on the active plugins at any given time. If your editor isn't iframed, you can determine which blocks are the culprit by running this in the console: wp.blocks.getBlockTypes().filter(b => b.apiVersion !== 3) It looks like @retlehs is correct here in that having both add_action('enqueue_block_editor_assets', function (): void {
if (is_admin()) {
bundle('editor')->enqueue();
}
}, 100);
add_action('enqueue_block_assets', function () {
bundle('editor')->enqueue();
}, 100);
That's all just for editor-specific styles. If you also want to load your frontend styles into the editor, then you should include it using add_theme_support('editor-styles');
add_editor_style(asset('app.css')->relativePath(get_theme_file_path())); Are there any enqueues I'm missing? 😅 With regards to @AxelDeneu's console error, I'm seeing that as well when running
* Bonus: If you want to force ACF to use API version 3 (which also disables "Preview" mode for blocks entirely): add_filter('acf/register_block_type_args', function (array $block): array {
$block['acf_block_version'] = 3;
$block['api_version'] = 3;
return $block;
}); Works great in conjunction with acf-composer. ** Bonus Bonus: If you want to force GF to use API version 3 (which completely breaks the block during /**
* @see {@link https://developer.wordpress.org/block-editor/reference-guides/filters/block-filters/#blocks-registerblocktype}
*/
export const hook = 'blocks.registerBlockType';
/**
* Filter handle
*/
export const name = 'sage/gravityforms/form';
/**
* Filter callback
*
* @param {object} settings
* @param {string} name
* @returns modified settings
*/
export function callback(settings, name) {
if (name !== 'gravityforms/form') return settings;
return {
...settings,
apiVersion: 3,
};
} |
Thanks a lot @joshuafredrickson for this comment as it removes a lot of fog about what's not going as it should in my code. That's a really big shame on me. As you mentioned, the code solution provided by @retlehs indeed works. For anyone wondering why, |
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 useenqueue_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 theenqueue_block_assets
hook.What actually happens?
Styles in editor.css are not applied in the following two cases:
enqueue_block_editor_assets
hook if the editor appears inside an iframe, orenqueue_block_assets
hook both when the editor appears inside an iframe and when it appears in page (legacy).Steps to reproduce
web/app/themes/sage-theme/app/setup.php
like so:editor.css
, for example:System info
No response
Log output
No response
Please confirm this isn't a support request.
Yes
The text was updated successfully, but these errors were encountered: