Menu

How To Create A Custom Gutenberg Block Using A WordPress Plugin

File and Folder Structure

Before we dive into the code, here's the file and folder structure you'll need:

wp-content/
└── plugins/
    └── custom-gutenberg-block/
        ├── build/
        ├── src/
        │   ├── index.js
        │   └── editor.scss
        ├── custom-gutenberg-block.php
        └── package.json

 

Step 1: Set Up Your Plugin

  1. Create the Plugin Folder:

    Navigate to wp-content/plugins and create a new folder named custom-gutenberg-block.

  2. Create the Main Plugin File:

    Inside this folder, create a file named custom-gutenberg-block.php and add the following code:

<?php
/*
Plugin Name: Custom Gutenberg Block
Description: A plugin to add a custom Gutenberg block.
Version: 1.0
Author: Templatebench
*/

// Exit if accessed directly
if ( ! defined( 'ABSPATH' ) ) {
    exit;
}

// Register the block
function custom_gutenberg_block_register() {
    // Enqueue block editor assets
    wp_enqueue_script(
        'custom-gutenberg-block-editor',
        plugins_url( '/build/index.js', __FILE__ ),
        array( 'wp-blocks', 'wp-element', 'wp-editor' ),
        filemtime( plugin_dir_path( __FILE__ ) . 'build/index.js' )
    );

    // Enqueue block editor styles
    wp_enqueue_style(
        'custom-gutenberg-block-editor-style',
        plugins_url( '/build/editor.css', __FILE__ ),
        array( 'wp-edit-blocks' ),
        filemtime( plugin_dir_path( __FILE__ ) . 'build/editor.css' )
    );

    // Enqueue frontend styles
    wp_enqueue_style(
        'custom-gutenberg-block-style',
        plugins_url( '/build/style.css', __FILE__ ),
        array(),
        filemtime( plugin_dir_path( __FILE__ ) . 'build/style.css' )
    );
}
add_action( 'enqueue_block_assets', 'custom_gutenberg_block_register' );

 

Step 2: Set Up Your Build Tools

  1. Install Node.js and npm:

    Ensure Node.js and npm are installed on your system. Download them from nodejs.org.

  2. Initialize npm:

    Navigate to your plugin folder in the terminal and run:

npm init -y

3. Install Development Dependencies:

    Install the @wordpress/scripts package, which helps with building your block:

npm install @wordpress/scripts --save-dev

4. Create the package.json Script:

     Add the following scripts to your package.json:

"scripts": {
  "start": "wp-scripts start",
  "build": "wp-scripts build"
}

Step 3: Create Your Block Files

  1. Create JavaScript and CSS Files:

    Inside your plugin folder, create a src directory. In src, create index.js and editor.scss:

  • src/index.js:
import { registerBlockType } from '@wordpress/blocks';
import { RichText } from '@wordpress/block-editor';
import './editor.scss';

registerBlockType('custom/block', {
    title: 'Custom Block',
    icon: 'smiley',
    category: 'layout',
    attributes: {
        content: {
            type: 'string',
            source: 'html',
            selector: 'p',
        },
    },
    edit({ attributes, setAttributes }) {
        return (
            <div className="custom-block">
                <RichText
                    tagName="p"
                    value={attributes.content}
                    onChange={(content) => setAttributes({ content })}
                    placeholder="Write your content..."
                />
            </div>
        );
    },
    save({ attributes }) {
        return <p>{attributes.content}</p>;
    },
});
  • src/editor.scss:
.custom-block {
    border: 1px solid #ddd;
    padding: 10px;
    border-radius: 4px;
}

 2. Create the Build Directory:

      After creating these files, build your assets by running:

npm run build
  1. This command will compile your JavaScript and CSS files and place them in the build directory.

Step 4: Test Your Block

  1. Activate Your Plugin:

    Go to the WordPress admin dashboard, navigate to Plugins, and activate the “Custom Gutenberg Block” plugin.

  2. Add Your Block:

    Open the block editor, add a new post or page, and you should see your custom block available. Add it to your content and test its functionality.

Gutenberg custom block

Then select your block and write something to your block.

Conclusion

You’ve successfully created a basic custom Gutenberg block using a WordPress plugin. This simple block allows you to enter and display text content and demonstrates how to set up a custom block from scratch.

Feel free to customize and extend this block to fit more complex needs as you become more familiar with Gutenberg development!

8009
Search

Ads