Gutenberg Block not loading my styles to the front-end of my site

Question

I have recently been trying to dig into guttenberg blocks. I have been following the 'tutorial' on wordpress in order to get a basic set up (create-guten-block was giving me styling problems as well so I decided to try to set it up myself). However, for some reason the styles are not applying to my sites front-end.

I have followed several different tutorials on what could be going on. Including removing the 'jetpack' plugin in no luck so far. I have used enqueue script instead of register. I have also tried splitting the items into different functions and adding them separately.

FILE ), array( 'wp-blocks', 'wp-element' ) );

wp_register_style(
    'wild-wonders-editor-style',
    plugins_url( 'dist/css/editor.css', __FILE__ ),
    array( 'wp-edit-blocks' ),
    filemtime( plugin_dir_path( __FILE__ ) . 'dist/css/editor.css' )
);

wp_register_style(
    'wild-wonders-hero-style',
    plugins_url( 'dist/css/blockStyle.css', __FILE__ ),
    array(),
    filemtime( plugin_dir_path( __FILE__ ) . 'dist/css/blockStyle.css' )
);


register_block_type( 'blocks/wild-wonders-blocks-hero', array(
    'editor_script' => 'wild-wonders-blocks-hero',
    'editor_style'  => 'wild-wonders-editor-style',
    'style' => 'wild-wonders-hero-style',
) );

} add_action( 'init', 'wild_wonders_blocks' );

As far as I can tell from the several tutorials I have read, this is the correct way to add the style sheets. However, I get nothing on the front-end. Not even a network request.... Is there something else I am supposed to be doing? Thanks

Answer 1

You are doing it wrong, instead of registering you should enqueue assets, like this -

/**
 * Enqueue Gutenberg block assets for both frontend + backend.
 *
 * `wp-blocks`: includes block type registration and related functions.
 *
 * @since 1.0.0
 */
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-editor' ) // 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' );

/**
 * Enqueue Gutenberg block assets for backend editor.
 *
 * `wp-blocks`: includes block type registration and related functions.
 * `wp-element`: includes the WordPress Element abstraction for describing the structure of your blocks.
 * `wp-i18n`: To internationalize the block's text.
 *
 * @since 1.0.0
 */
function my_block_cgb_editor_assets() {
    // Scripts.
    wp_enqueue_script(
        'my_block-cgb-block-js', // Handle.
        plugins_url( '/dist/blocks.build.js', dirname( __FILE__ ) ), // Block.build.js: We register the block here. Built with Webpack.
        array( 'wp-blocks', 'wp-i18n', 'wp-element', 'wp-editor' ), // Dependencies, defined above.
        // filemtime( plugin_dir_path( __DIR__ ) . 'dist/blocks.build.js' ), // Version: filemtime — Gets file modification time.
        true // Enqueue the script in the footer.
    );

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

// Hook: Editor assets.
add_action( 'enqueue_block_editor_assets', 'my_block_cgb_editor_assets' );

You are better off using tools like - Create guten block so that you can focus more time on building stuff rather than figuring settings.