8

I've created a custom block plugin with @wordpress/create-block (https://developer.wordpress.org/block-editor/reference-guides/packages/packages-create-block/)

It works as a plugin, but when i move it into the theme, the "editorScript" in the block.json file, returns the wrong path.

themeDirectory/blocks/mycustomblock/block.json

{
    "name": "create-block/mycustomblock",
    "title": "Mycustomblock",
    "description": "Example block written with ESNext standard and JSX support – build step required.",
    "category": "text",
    "icon": "smiley",
    "supports": {
        "html": false
    },
    "attributes":{
        "backgroundColor": {
            "type": "string",
            "default": "red"
        }
    },
    "editorScript": "file:./build/index.js"
}

Returned path from editorScript:

404 | http://localhost:8888/wordpress-test/wp-content/plugins/Users/jonrose/Dropbox/htdocs/wordpress-test/wp-content/themes/mytheme/blocks/mycustomblock/build/index.js?ver=4f45658ee3212a45c5d5367f6fbdfeba

If i register the script inside the register_block_type function it works fine

wp_register_script( 'mycustomblock-js', get_template_directory_uri() . '/blocks/mycustomblock/build/index.js', array( 'wp-blocks' ));

    register_block_type( __DIR__, array(
        'editor_script' => 'mycustomblock-js'
    ) );
Jonatanbs
  • 223
  • 2
  • 9
  • 2
    I'm having this same issue, did you figure out how to set the relative path to look in your theme instead of plugins? – Taishi Sep 17 '21 at 13:01
  • 1
    No. I just went with the solution in the last example – Jonatanbs Sep 24 '21 at 00:22
  • I think that the creation of gutemberg blocks with the block.json descriptor is not intended to be used inside a theme, but it could be a bug at the same time :P did you reported this issue? Your solution is ok, but I don't know if also other paths (assets?) are affected – Kbyte Oct 11 '21 at 23:27
  • This behaviour was reported as a bug and will be fixed in Wordpress version 6.0. Github pull request: https://github.com/WordPress/wordpress-develop/pull/2494 – Branislav May 22 '22 at 19:19

2 Answers2

6

Registering a block type with block.json uses register_block_script_handle under the hood to register all relevant block scripts. That function uses plugins_url to generate URLs if the script uses the file:<path> pattern.

Passing in an already existing handle (e.g., mycustomblock-js) works because register_block_script_handle sees it's not file:<path> and just uses that handle (and corresponding URL) as-is.

edavis
  • 76
  • 1
  • 4
5

edavis is correct and that plugins_url() method is called when enqueing the editorScript, editorStyle, and style paths.

Although you can pass other arguments to register_block_type to declare what you need I do like the idea of just keeping a simple block.json file. To make this work within a theme I used a filter hook for plugins_url to fix up the URL if it detects the theme path is included in the URL.

add_filter( 'plugins_url', function ( $url, $path, $plugin ) {
    if ( strpos( $url, get_template_directory() ) !== false ) {
        $url = str_replace( 'wp-content/plugins' . get_home_path(), '', $url );
    }

    return $url;
}, 10, 3 );
SaRiD
  • 1,020
  • 11
  • 15