How to Create a Custom WordPress Block Without Plugins

If you've ever needed a little custom content element in the Block Editor (Gutenberg) and you didn’t want to rely on yet another plugin, building your own block is a solid choice. I’ll take you through a straightforward version where you build a block from scratch, register it, and activate it — all without loading a full framework.

Step 1: Set Up Your Workspace

Head into your `wp-content/plugins` directory and create a new folder. Let’s call it `my-custom-block`. Inside that folder, create two files: `my-custom-block.php` and `block.js`. We’ll use the PHP file to register the block and enqueue the JS file, and then use the JS file to define your block’s behavior.

Step 2: Register the Block

Open `my-custom-block.php` and add code that sets up your plugin header, then dequeues or enqueues your block script in the editor. Here’s a simple example:

1<?php
2  /**
3   * Plugin Name: My Custom Block
4   */
5  
6  function my_custom_block_register() {
7      wp_enqueue_script(
8          'my-custom-block-editor-script',
9          plugin_dir_url( __FILE__ ) . 'block.js',
10          array( 'wp-blocks', 'wp-element', 'wp-editor' ),
11          true
12      );
13  }
14  add_action( 'enqueue_block_editor_assets', 'my_custom_block_register' );

That snippet enqueues `block.js` in the editor and makes sure WordPress knows about your plugin via the header comment. With that in place, we move to actually defining the block in JavaScript.

Step 3: Create the Block Script

In `block.js`, you’ll use `registerBlockType()` to define your block’s name, title, icon, category, attributes, edit and save behavior. Here’s a minimal example:

1const { registerBlockType } = wp.blocks;
2  const { RichText } = wp.editor;
3  
4  registerBlockType( 'my-custom-block/my-block', {
5      title: 'My Custom Block',
6      icon: 'smiley',
7      category: 'common',
8      attributes: {
9          content: {
10              type: 'string',
11              source: 'children',
12              selector: 'p',
13          },
14      },
15      edit: ( props ) => {
16          return (
17              <RichText
18                  tagName="p"
19                  value={ props.attributes.content }
20                  onChange={ ( content ) => props.setAttributes( { content } ) }
21                  placeholder="Enter some text..."
22              />
23          );
24      },
25      save: ( props ) => {
26          return (
27              <RichText.Content
28                  tagName="p"
29                  value={ props.attributes.content }
30              />
31          );
32      },
33  } );

Here’s what’s happening: you set `attributes` to capture whatever the user types, you define `edit()` to control how the block appears in the editor, and `save()` to decide how it’s rendered on the front-end. With those bits in place, your block is basically done.

Step 4: Activate Your Block

Go to the WordPress dashboard, Plugins → Add New or simply activate your plugin folder from there. Once activated, open the block editor and look for “My Custom Block” under the common or the category you chose. From there you can add it to pages or posts just like any built-in block.

That’s it — you’ve built a basic custom block without relying on other block-builder plugins. Once you’ve got this pattern nailed, you can extend it: add custom controls, style options, dynamic rendering, and so on.

Useful Links

Official WordPress Block Editor Handbook – “Build your first block” tutorial:

Step-by-step guide from Kinsta: “Building custom Gutenberg blocks”: