Register a new block for the WordPress block editor

To register a new block for the WordPress block editor, you’ll need to follow a few steps. Here’s a general process using JavaScript and PHP to add a custom block.

To register a new block for the WordPress block editor, you’ll need to follow a few steps. Here’s a general process using JavaScript and PHP to add a custom block:

1. Create a Plugin (Optional, if not already using one)

If you don't already have a plugin for your custom block, you should create one. Inside your wp-content/plugins directory, create a folder for your plugin, e.g., my-custom-block, and add a main PHP file, e.g., my-custom-block.php.

1<?php
2/**
3 * Plugin Name: My Custom Block
4 * Description: Registers a custom block for the block editor.
5 * Version: 1.0
6 * Author: Your Name
7 */
8
9defined( 'ABSPATH' ) || exit;
10
11// Enqueue block assets (JS and CSS).
12function my_custom_block_assets() {
13    wp_enqueue_script(
14        'my-custom-block',
15        plugin_dir_url( __FILE__ ) . 'block.js',
16        array( 'wp-blocks', 'wp-element', 'wp-editor', 'wp-i18n' ),
17        filemtime( plugin_dir_path( __FILE__ ) . 'block.js' ),
18        true
19    );
20
21    wp_enqueue_style(
22        'my-custom-block-editor',
23        plugin_dir_url( __FILE__ ) . 'editor.css',
24        array( 'wp-edit-blocks' ),
25        filemtime( plugin_dir_path( __FILE__ ) . 'editor.css' )
26    );
27}
28add_action( 'enqueue_block_editor_assets', 'my_custom_block_assets' );
29
30// Register block type.
31function my_custom_block_register() {
32    register_block_type( 'my-custom/block', array(
33        'editor_script' => 'my-custom-block',
34        'editor_style'  => 'my-custom-block-editor',
35    ));
36}
37add_action( 'init', 'my_custom_block_register' );

2. Create the JavaScript File for the Block (block.js)

This file will define the block's behavior and appearance in the block editor. Create a file called block.js in your plugin folder.

Here’s an example of a simple block:

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

3. Create the CSS File for the Editor (editor.css)

You may want to add styles for your block in the editor. Create a editor.css file.

1.my-custom-block {
2  background-color: #f0f0f0;
3  padding: 20px;
4  border-radius: 5px;
5}

4. Activate Your Plugin

Once you've created the plugin with the PHP, JavaScript, and CSS files, go to the WordPress admin dashboard and activate your plugin.

5. Add the Block in the Editor

After activating the plugin, you should see your custom block in the block editor. You can now add your custom block to pages or posts.

This is a basic example to get you started. You can expand your block by adding more complex features, custom controls, settings, etc. Let me know if you need more details or help on specific parts!