Gutenberg: What's new with enqueue_block_assets in WordPress 5.0 alone?

[sanzeeb3]

Previously, with WordPress v4.9.8 and Gutenberg plugin active, the styles are loaded with enqueue_block_assets. Even with 5.0 and Gutenberg active, the styles are loaded. However with WordPress 5.0 alone, the styles are not loaded.

add_action( 'enqueue_block_editor_assets', 'ur_enqueue_block_editor_assets' );
function enqueue_block_editor_assets() {
              wp_register_style(
            'user-registration-block-editor',
            UR()->plugin_url() . '/assets/css/user-registration.css',
            array( 'wp-edit-blocks' ),
            UR_VERSION
        );
}

I haven't enqueued the styles. However, I guess 'editor_style' => 'user-registration-block-editor', in register_block handled this in WordPress 4.9.8 and Gutenberg, but not in WordPress 5.0?

      add_action( 'init', 'register_block' );
       function register_block() {

        register_block_type( 'user-registration/form-selector', array(
            'attributes'      => array(
                'formId'       => array(
                    'type' => 'string',
                ),
            ),
            'editor_script'   => 'user-registration-block-editor',
            'editor_style'    => 'user-registration-block-editor',
            'render_callback' => array( $this, 'render_callback' ),
        ) );
    }

[swissspidy]

If you register the block type like this, you should also register the styles on init, not later on.

[gregbia]

I'm using the following in my plugin init code and the css is not being loaded. This previously worked with the Gutenberg plugin.

function my_block_cgb_block_assets() {
    // Styles.
    wp_enqueue_style(
        'my_block-cgb-style-css', // Handle.
        plugins_url( 'dist/blocks.style.build.css', dirname( __FILE__ ) ), // Block style CSS.
        array( 'wp-blocks' ) // Dependency to include the CSS after it.
        // filemtime( plugin_dir_path( __DIR__ ) . 'dist/blocks.style.build.css' ) // Version: filemtime — Gets file modification time.
    );
} // End function my_block_cgb_block_assets().

// Hook: Frontend assets.
add_action( 'enqueue_block_assets', 'my_block_cgb_block_assets' );

[flabernardez]

Me too, same problem:

// Gutenberg support
function cancer_theme_assets() {

    wp_enqueue_style(
        'cancer-theme-blocks-css',
        get_template_directory_uri() . '/blocks.css' ,
        [ 'wp-blocks' ],
        wp_get_theme()->get('Version')
    );

    wp_enqueue_style(
        'cancer-theme-blocks-js',
        get_template_directory_uri() . '/js/blocks-min.js' ,
        [ 'wp-blocks', 'wp-element' ],
        wp_get_theme()->get('Version')
    );
}
add_action( 'enqueue_block_assets', 'cancer_theme_assets' );

[sergixnet]

I'm with the same problem. I have WordPress 5.0 without the gutenberg plugin.

It seems that the wp-blocks dependency is missing, on the front end and in the editor.

This is my block plugin code:

// add_action enqueue_block_editor_assets
add_action( 'enqueue_block_editor_assets', 'block_examples_02_stylessheets_block_enqueue_block_editor_assets' );

function block_examples_02_stylessheets_block_enqueue_block_editor_assets() {
    wp_enqueue_script( 
        'block-examples-02-stylesheets-block-editor',
        plugins_url('block.build.js', __FILE__),
        array( 'wp-blocks', 'wp-i18n', 'wp-element' ),
        filemtime( plugin_dir_path( __FILE__ ) . 'block.build.js' )
    );

    wp_enqueue_style(
        'block-examples-02-stylesheets-block-editor',
        plugins_url( 'editor.css', __FILE__ ), 
        array( 'wp-edit-blocks' ), 
        filemtime( plugin_dir_path( __FILE__ ) . 'editor.css' )
    );
}


// add_action enqueue_block_assets
add_action( 'enqueue_block_assets', 'block_examples_02_stylesheets_block_enqueue_block_assets' );

function block_examples_02_stylesheets_block_enqueue_block_assets() {
    wp_enqueue_style( 
        'block-examples-02-stylesheets-block',
        plugins_url('style.css', __FILE__),
        array('wp-blocks'),
        filemtime( plugin_dir_path( __FILE__ ) . 'style.css' )
    );
}

And this is an screenshot of Query monitor with some errors:

[vguerrerobosch]

Hi there,

I was having the same issue as you are facing and I found out that the problem was that the stylesheet dependency handle 'wp-blocks' is now called 'wp-edit-blocks' in WordPress 5.0. Just replacing the handle in the dependencies array solved the issue.

[bazco]

Removing the 'wp-blocks' dependency handle worked for me.

[swissspidy]

Yeah wo-blocks is a script depe