How To Register A Gutenberg Block With Plain Javascript In WordPress
You can register a simple block without a build step. Load the script in the editor with the enqueue_block_editor_assets hook and declare the WordPress packages as dependencies.
functions.php
function lotgrafix_enqueue_block_editor_script() {
wp_enqueue_script(
'lotgrafix-block',
get_template_directory_uri() . '/js/block.js',
array( 'wp-blocks', 'wp-element', 'wp-block-editor' ),
'1.0.0',
true
);
}
add_action( 'enqueue_block_editor_assets', 'lotgrafix_enqueue_block_editor_script' );
block.js
( function ( blocks, element, blockEditor ) {
var el = element.createElement;
var useBlockProps = blockEditor.useBlockProps;
blocks.registerBlockType( 'lotgrafix/hello-block', {
title: 'Lotgrafix Hello Block',
icon: 'smiley',
category: 'widgets',
edit: function () {
return el( 'p', useBlockProps(), 'Hello from the editor!' );
},
save: function () {
return el( 'p', useBlockProps.save(), 'Hello from the frontend!' );
},
} );
} )( window.wp.blocks, window.wp.element, window.wp.blockEditor );
November 3, 2026


