Custom Gutenberg blocks not showing in WP editor

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

Hata!: SQLSTATE[HY000] [1045] Access denied for user 'divattrend_liink'@'localhost' (using password: YES)