Im trying to create custom blocks and cannot get them to show up in the content editor when inserting new blocks, despite being able to activate the plugin in the Plugins menu.

I've seen a couple of other posts with similar problems, but I dont understand the answers (Im not using NPX or NPM, and don't even really know what they are).

I have stripped everything down to the most basic sort of block I can think of, and still having the same problem.

This is just for a block that displays 'abc'.

Can anyone see what I'm doing wrong?

I'm using a local environment using MAMP for Mac, if that matters

Also I've realised Im getting the following error in the console:

Uncaught SyntaxError: Cannot use import statement outside a module (at index.js?ver=6.7.2:1:1)

custom-blocks/index.js

import { registerBlockType } from '@wordpress/blocks';

registerBlockType('custom-blocks/simple-block', {
    edit: () => 'abc',
    save: () => 'abc'
});

custom-blocks/custom-blocks.php

<?php

/**
 * Plugin Name: Custom Blocks
 * Description: A simple Gutenberg block that displays 'abc'.
 * Version: 1.0
 * Author: Your Name
 */

if (! defined('ABSPATH')) {
    exit; // Exit if accessed directly.
}

function custom_blocks_init()
{
    register_block_type(__DIR__);
}
add_action('init', 'custom_blocks_init');

custom-blocks/block.json

{
  "apiVersion": 2,
  "name": "custom-blocks/simple-block",
  "title": "Simple Block",
  "category": "widgets",
  "editorScript": "file:./index.js"
}

Im trying to create custom blocks and cannot get them to show up in the content editor when inserting new blocks, despite being able to activate the plugin in the Plugins menu.

I've seen a couple of other posts with similar problems, but I dont understand the answers (Im not using NPX or NPM, and don't even really know what they are).

I have stripped everything down to the most basic sort of block I can think of, and still having the same problem.

This is just for a block that displays 'abc'.

Can anyone see what I'm doing wrong?

I'm using a local environment using MAMP for Mac, if that matters

Also I've realised Im getting the following error in the console:

Uncaught SyntaxError: Cannot use import statement outside a module (at index.js?ver=6.7.2:1:1)

custom-blocks/index.js

import { registerBlockType } from '@wordpress/blocks';

registerBlockType('custom-blocks/simple-block', {
    edit: () => 'abc',
    save: () => 'abc'
});

custom-blocks/custom-blocks.php

<?php

/**
 * Plugin Name: Custom Blocks
 * Description: A simple Gutenberg block that displays 'abc'.
 * Version: 1.0
 * Author: Your Name
 */

if (! defined('ABSPATH')) {
    exit; // Exit if accessed directly.
}

function custom_blocks_init()
{
    register_block_type(__DIR__);
}
add_action('init', 'custom_blocks_init');

custom-blocks/block.json

{
  "apiVersion": 2,
  "name": "custom-blocks/simple-block",
  "title": "Simple Block",
  "category": "widgets",
  "editorScript": "file:./index.js"
}

• plugins
• plugin-development
• block-editor
• json
• plugin-json-api

1 Answer 1

The import syntax only works if you are using a build system (the npm/npx stuff).

If you don't want to use that right now, you can replace the import with wp.<module> like:

const { registerBlockType } = wp.blocks;

registerBlockType('custom-blocks/simple-block', {
    edit: () => 'abc',
    save: () => 'abc'
});

Or directly like:

wp.blocks.registerBlockType('custom-blocks/simple-block', {
    edit: () => 'abc',
    save: () => 'abc'
});

Further, you'd want to create an index.asset.php file with metadata about the index.js file for WordPress to register the script with. When using wordpress-scripts to do this (via npm), it would generate this for you automatically. However, we can write one ourselves like:

<?php

return array(
  'dependencies' => array(
    'wp-blocks'
  ),
  'version' => hash_file( 'sha256', __DIR__ . '/index.js' )
);

The dependencies map to the wp.blocks we need to access. The version produces a unique hash of the index.js file dependent on its content for cache-busting purposes.

WordPress Playground working example