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.