example-block-style-js doesn't display proper style in the block editor #9

juanmaguitar · 2023-12-07T22:02:34Z

There's an issue with the playground created for example-block-style-js that is a bit strange:

It doesn't work in its playground version
It doesn't work with wp-env - launch wp-env start from inside the example-block-style-js folder
It works when installed as a child theme from its zip

In the block editor, the image component with the "HaIn Drawn" block style look like this

And it should have the same look in the editor than the example-block-style-php

The issue with example-block-style-js is that is not loading style.css and it should according the the code at functions.php of that example

The text was updated successfully, but these errors were encountered:

justintadlock · 2023-12-11T17:18:43Z

The change from wp_enqueue_scripts to enqueue_block_assets in #10 is not the correct fix. It may fix things in Playground, but it makes the example code incorrect.

In a normal WordPress install, we're now getting the same CSS (style.css) loading twice in the editor.

The problem from Playground stems from this code in functions.php:

add_action( 'after_setup_theme', 'themeslug_editor_styles' );

/**
 * Adds the `style.css` file as an editor stylesheet.
 *
 * @since 1.0.0
 */
function themeslug_editor_styles() {
	add_editor_style( get_stylesheet_uri() );
}

Why is Playground not loading the CSS for add_editor_style()? That's what needs to be addressed.

justintadlock · 2023-12-11T17:21:24Z

You can see the block style being loaded twice with the change in #10 (once in <head> and once via style.css):

juanmaguitar · 2023-12-11T18:07:52Z

The change from wp_enqueue_scripts to enqueue_block_assets in #10 is not the correct fix. It may fix things in Playground, but it makes the example code incorrect.
In a normal WordPress install, we're now getting the same CSS (style.css) loading twice in the editor.

Isn't enqueue_block_assets the recommended method to load assets in both the Editor (iframed) and the frontend from WP 6.3 as per Enqueueing assets in the Editor > Editor content scripts and styles

As of WordPress 6.3, all assets added through the enqueue_block_assets PHP action will also be enqueued in the iframed Editor. See WordPress/gutenberg#48286 for more details (source: Enqueueing assets in the Editor)

justintadlock · 2023-12-11T18:26:12Z

add_editor_style() is the recommended method for themes to add editor stylesheets, and wp_enqueue_scripts + wp_enqueue_style() for the front end. This is the method outlined in the Including Assets Theme Handbook doc and is generally recommended by the WP Themes Team.

To be clear, we can use enqueue_block_assets (with some other changes in functions.php) to make this work with Playground. But that's only going to fix it for this specific example.

I'd rather make sure this is corrected in Playground if there's a bug. If Playground is not loading styles via add_editor_style(), that's going to be problematic for 100s or 1,000s of themes which use this method to load any editor styles. It's not just specific to this example. We definitely need some more testing of this

ndiego · 2023-12-11T18:31:24Z

add_editor_style() is the recommended method for themes to add editor stylesheets, and wp_enqueue_scripts + wp_enqueue_style() for the front end. This is the method outlined in the Including Assets Theme Handbook doc and is generally recommended by the WP Themes Team.

Yup, this is the recommended approach for themes. enqueue_block_assets is generally for plugins but does of course work in themes.

I wonder if playground is having trouble with get_stylesheet_uri()? 🤔

justintadlock · 2023-12-11T19:51:33Z

As far as I can tell, add_editor_style() is not loading stylesheets in Playground at all.

I've tried the standard get_stylesheet_uri():

add_action( 'after_setup_theme', 'themeslug_editor_styles' );

function themeslug_editor_styles() {
	add_editor_style( get_stylesheet_uri() );
}

I've tried get_theme_file_uri():

add_action( 'after_setup_theme', 'themeslug_editor_styles' );

function themeslug_editor_styles() {
	add_editor_style( get_theme_file_uri( 'style.css' ) );
}

And a relative URL (usually not recommended unless specifically overwriting a parent theme doing this):

add_action( 'after_setup_theme', 'themeslug_editor_styles' );

function themeslug_editor_styles() {
	add_editor_style( 'style.css' );
}

All three of these methods are acceptable in standard WP themes, but none of them seem to work with Playground.

juanmaguitar · 2023-12-14T10:37:04Z

Pinging @adamziel for visibility of this conversation
I have created the issue in the Playground repo to keep track of this issue WordPress/wordpress-playground#869

adamziel · 2024-01-11T11:07:15Z

I can't reproduce the issue, unfortunately.

This URL loads an editor with the "handdrawn" style applied for me:

https://playground.wordpress.net/?blueprint-url=https://raw.githubusercontent.com/wptrainingteam/block-theme-examples/master/example-block-style-js/_playground/blueprint.json

In a wp-env WordPress installation, the following plugin does not load mystyle.css for me in the post editor:

add_action( 'after_setup_theme', 'themeslug_editor_styles' );
function themeslug_editor_styles() {
	file_put_contents('/var/www/html/wp-content/themes/twentytwentythree/mystyle.css', 'body { background: red; }');
	add_editor_style(get_theme_file_uri('mystyle.css'));
}

juanmaguitar · 2024-01-11T11:18:19Z

@adamziel sorry about the confusion, let me clarify it.
This issue was indeed fixed with this PR but the fix wasn't correct as explained by @justintadlock in this comment. The fix was causing the CSS to be loaded twice (see this comment)

I have updated the code to use wp_enqueue_scripts which is the recommended method as per this comment so right now the issue should be reproduced with the link https://playground.wordpress.net/?blueprint-url=https://raw.githubusercontent.com/wptrainingteam/block-theme-examples/master/example-block-style-js/_playground/blueprint.json

The issue in Playground seems to be with add_editor_style function as per this comment

adamziel · 2024-01-11T11:29:40Z

@juanmaguitar is that specific to Playground, though? I just installed that theme on my local WordPress installation and ran into the exact same problem there:

juanmaguitar · 2024-01-11T11:36:09Z

@adamziel you're right, I've tested this locally with wp-env

⬢  block-theme-examples  master ⦾ cd example-block-style-js
⬢  example-block-style-js  master ⦾ wp-env start
WordPress development site started at http://localhost:8888
WordPress test site started at http://localhost:8889
MySQL is listening on port 50938
MySQL for automated testing is listening on port 50937

 ✔ Done! (in 47s 618ms)

and it also doesn't work...

@justintadlock can you provide more context about this issue?

justintadlock · 2024-01-11T13:54:13Z

The issue is that when using this code to load an editor stylesheet (as the theme is doing now):

add_action( 'after_setup_theme', 'themeslug_editor_styles' );

function themeslug_editor_styles() {
	add_editor_style( get_stylesheet_uri() );
}

It looks like this in Playground (because the stylesheet is not being loaded and inlined in the iframe <head>):

It looks like this on a normal WordPress site (the stylesheet is being correctly loaded and inlined in <head>):

That last one is from my local install, but this is also the method for loading editor styles for thousands of WordPress themes.

justintadlock · 2024-01-11T14:25:53Z

Or, if you want to test another theme, try Powder: https://playground.wordpress.net/?theme=powder

It uses add_editor_style() to load its editor stylesheet, which includes CSS for several block style variations.

Create a new page and insert a Group block. Add the "Shadow Solid" style to it. You should see that the box-shadow is missing:

The block should look like this (but the stylesheet is not loaded and inlined in the <head> on the editor side):

This only happens in Playground as far as I know. It works fine for me on a local test install.

adamziel · 2024-01-11T15:11:22Z

This is super weird @justintadlock! I just installed the powder theme in wp-env and I'm not getting that CSS loaded in my editor:

adamziel · 2024-01-11T15:13:17Z

It does seem to work on my WordPress.com site, though. How weird.

adamziel · 2024-01-11T15:20:16Z

add_editor_style() updates the global $editor_styles variable which is used in get_editor_stylesheets() which is only used in _WP_Editors::editor_settings() which is called in wp_tiny_mce() and in wp_editor(). All of this seems to be related to TinyMCE, not Gutenberg. I'm not sure what would render these styles in <head> 🤔

adamziel · 2024-01-11T15:29:50Z

On wp.com these styles are added via...

wp.domReady( function() {
	resolve(wp.editPost.initializeEditor('editor', "post", 1394, {
		"alignWide": false,
		"allowedBlockTypes": true,
		"styles": [
			{ "css": "<!-- HERE -->" }

justintadlock · 2024-01-11T15:32:35Z

I don't use wp-env, so I hadn't tested with it.

Maybe this is a Gutenberg ticket since it seems to not be working in at least two environments? I'm not sure. At this point, it's a bit beyond me.

adamziel · 2024-01-11T15:36:06Z

wp-admin/edit-form-blocks.php:

$editor_settings = get_block_editor_settings($editor_settings, $block_editor_context);
$init_script = <<<JS
( function() {
	window._wpLoadBlockEditor = new Promise( function( resolve ) {
		wp.domReady( function() {
			resolve( wp.editPost.initializeEditor( 'editor', "%s", %d, %s, %s ) );
		} );
	} );
} )();
JS;
$script = sprintf($init_script, $post->post_type, $post->ID, wp_json_encode($editor_settings),

get_block_editor_settings($editor_settings, $block_editor_context);:

$editor_settings['styles'] = array_merge($global_styles, get_block_editor_theme_styles());

Then get_block_editor_theme_styles():

function get_block_editor_theme_styles()
{
    global $editor_styles;
    $styles = array();
    if ($editor_styles && current_theme_supports('editor-styles')) {
        foreach ($editor_styles as $style) {
            if (preg_match('~^(https?:)?//~', $style)) {
                $response = wp_remote_get($style);
                if (!is_wp_error($response)) {
                    $styles[] = array('css' => wp_remote_retrieve_body($response), '__unstableType' => 'theme', 'isGlobalStyles' => false, );
                }
            } else {
                $file = get_theme_file_path($style);
                if (is_file($file)) {
                    $styles[] = array('css' => file_get_contents($file), 'baseURL' => get_theme_file_uri($style), '__unstableType' => 'theme', 'isGlobalStyles' => false, );
                }
            }
        }
    }
    return $styles;
}

So it uses the global $editor_styles; and does this:

For any style address starting with https?://, it requests that URL
For any other address, it ensures the file exists on the disk

And then it returns the retrieved CSS. How interesting!

I just tried enabling networking in Playground just to see if it would download that stylesheed and indeed it did:

justintadlock · 2024-01-11T15:42:15Z

I just tried enabling networking in Playground just to see if it would download that stylesheet and indeed it did:

Should we consider this fixed for Playground now? Will that setting continue to be enabled?

@juanmaguitar We might still need to address this with wp-env too since we're planning to ship .wp-env.json files with these. Is there a similar setting?

juanmaguitar · 2024-01-11T15:47:30Z

Pinging @mikachan for visibility on this issue as it seems to be beyond Playground.
Any thoughts on why add_editor_style doesn't work on wp-env (see this)?

adamziel · 2024-01-11T15:48:05Z

@justintadlock oh I just checked the checkbox in my browser tab. To enable it in a Blueprint you'll need to add the following entry:

{
    "features": {
        "networking": true
    }
}

See also https://wordpress.github.io/wordpress-playground/blueprints-api/data-format#features

juanmaguitar · 2024-01-11T15:56:35Z

@adamziel @justintadlock I have updated the blueprint of example-block-style-js, adding

{
    "features": {
        "networking": true
    }
}

and regenerated the zip, and it works fine now ✅

juanmaguitar assigned justintadlock Dec 7, 2023

juanmaguitar mentioned this issue Dec 9, 2023

fix issue with example-block-style-js #10

Merged

juanmaguitar closed this as completed in #10 Dec 10, 2023

justintadlock reopened this Dec 11, 2023

juanmaguitar mentioned this issue Dec 14, 2023

Documentation: Explain why theme styles added via add_editor_style() aren't loading when networking is disabled WordPress/wordpress-playground#869

Open

justintadlock mentioned this issue Jan 11, 2024

Introduction/Overview of WordPress Playground WordPress/developer-blog-content#198

Closed

ironnysh mentioned this issue Jan 11, 2024

Improve the networking disabled error message WordPress/wordpress-playground#927

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

example-block-style-js doesn't display proper style in the block editor #9

example-block-style-js doesn't display proper style in the block editor #9

juanmaguitar commented Dec 7, 2023 •

edited

Loading

justintadlock commented Dec 11, 2023

justintadlock commented Dec 11, 2023

juanmaguitar commented Dec 11, 2023

justintadlock commented Dec 11, 2023

ndiego commented Dec 11, 2023 •

edited

Loading

justintadlock commented Dec 11, 2023

juanmaguitar commented Dec 14, 2023

adamziel commented Jan 11, 2024 •

edited

Loading

juanmaguitar commented Jan 11, 2024 •

edited

Loading

adamziel commented Jan 11, 2024

juanmaguitar commented Jan 11, 2024

justintadlock commented Jan 11, 2024

justintadlock commented Jan 11, 2024 •

edited

Loading

adamziel commented Jan 11, 2024

adamziel commented Jan 11, 2024

adamziel commented Jan 11, 2024

adamziel commented Jan 11, 2024

justintadlock commented Jan 11, 2024

adamziel commented Jan 11, 2024

justintadlock commented Jan 11, 2024

juanmaguitar commented Jan 11, 2024 •

edited

Loading

adamziel commented Jan 11, 2024 •

edited

Loading

juanmaguitar commented Jan 11, 2024 •

edited

Loading

example-block-style-js doesn't display proper style in the block editor #9

example-block-style-js doesn't display proper style in the block editor #9

Comments

juanmaguitar commented Dec 7, 2023 • edited Loading

justintadlock commented Dec 11, 2023

justintadlock commented Dec 11, 2023

juanmaguitar commented Dec 11, 2023

justintadlock commented Dec 11, 2023

ndiego commented Dec 11, 2023 • edited Loading

justintadlock commented Dec 11, 2023

juanmaguitar commented Dec 14, 2023

adamziel commented Jan 11, 2024 • edited Loading

juanmaguitar commented Jan 11, 2024 • edited Loading

adamziel commented Jan 11, 2024

juanmaguitar commented Jan 11, 2024

justintadlock commented Jan 11, 2024

justintadlock commented Jan 11, 2024 • edited Loading

adamziel commented Jan 11, 2024

adamziel commented Jan 11, 2024

adamziel commented Jan 11, 2024

adamziel commented Jan 11, 2024

justintadlock commented Jan 11, 2024

adamziel commented Jan 11, 2024

justintadlock commented Jan 11, 2024

juanmaguitar commented Jan 11, 2024 • edited Loading

adamziel commented Jan 11, 2024 • edited Loading

juanmaguitar commented Jan 11, 2024 • edited Loading

juanmaguitar commented Dec 7, 2023 •

edited

Loading

ndiego commented Dec 11, 2023 •

edited

Loading

adamziel commented Jan 11, 2024 •

edited

Loading

juanmaguitar commented Jan 11, 2024 •

edited

Loading

justintadlock commented Jan 11, 2024 •

edited

Loading

juanmaguitar commented Jan 11, 2024 •

edited

Loading

adamziel commented Jan 11, 2024 •

edited

Loading

juanmaguitar commented Jan 11, 2024 •

edited

Loading