Gutenberg: Custom Blocks don't register when called from theme. Is this a bug or a feature?

[jcklpe]

I understand why Wordpress is discouraging people from including custom blocks in a theme.

But I'm curious and I wanted to see if I could.

I'm a design technologist which means I'm not the best coder, and most of my background has been with JS and stuff. So maybe I'm missing something.

I tried adding the following to my theme's functions.php

add_action( 'enqueue_block_editor_assets', 'block05editor_scripts' );

function block05editor_scripts() {
    wp_enqueue_script(
        'block05editor_scripts',
        get_stylesheet_directory() . '/Jackalope-Gutenberg/05-media-block/block.build.js',
        array( 'wp-blocks', 'wp-i18n', 'wp-editor', 'wp-components' ),
        ''
    );



    wp_enqueue_style(
        'block05editor_styles',
        get_stylesheet_directory()  . '/Jackalope-Gutenberg/05-media-block/editor.css',
        array(),
        ''
    );
}

//- ADD BLOCK ASSETS FOR FRONTEND
add_action( 'enqueue_block_assets', 'block05frontend_styles' );

function block05frontend_styles() {
    wp_enqueue_style(
        'block05frontend_styles',
        get_stylesheet_directory()  . '/Jackalope-Gutenberg/05-media-block/style.css',
        array(),
        ''
    );
}

This does not work. When I put my Jackalope-Gutenberg plugin in the plugin directory though, it does work.

The only thing I can guess is that the hook enqueue_block_assets doesn't work in themes, like maybe that hook passes by before the theme gets loaded, so even if a theme tries to use that hook it's to no avail?

Is my guess on that correct or is there something else I'm missing here?

[HardeepAsrani]

Hey,

I actually see no such issues in your code but it isn't enough to find out the reason. Do you have a Github of your theme so I could try and debug this issue?

[jcklpe]

Yeah sure thing @HardeepAsrani ! thank you or insight you can provide here's the latest version of the theme. https://github.com/jcklpe/common-wp

currently I have have tried to reduce the block registration to the most minimalist version possible. I'm not even using an index.php plugin folder to enqueue from, I'm just enqueuing the relevant block.js and styles.css for the block directly in the functions.php.

Here's a direct link to the code. It's currently commented out in the functions.php file.

And here is the individual block file files that are meant to be enqueued: https://github.com/jcklpe/common-wp/tree/master/assets/blocks

I ripped the enqueuing registration files from the index.php in order to simplify the diagnosing process by reducing the number of moving parts as much as possible.

I have a hunch perhaps it's maybe just that the register block hook gets passed before the theme gets loaded.

[HardeepAsrani]

This should fix it for you: https://github.com/jcklpe/common-wp/pull/1 - you were using the wrong function to get the script path. Feel free to close the PR and just copy/paste the code if you need. :)

[jcklpe]

@HardeepAsrani Thank you! Ugh I can't believe I made such an obvious mistake in retrospect!

[HardeepAsrani]

@jcklpe You're welcome. You can now close the ticket.