
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
-
Create the Plugin Folder:
Navigate to
wp-content/plugins
and create a new folder namedcustom-gutenberg-block
. -
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
-
Install Node.js and npm:
Ensure Node.js and npm are installed on your system. Download them from nodejs.org.
-
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
-
Create JavaScript and CSS Files:
Inside your plugin folder, create a
src
directory. Insrc
, createindex.js
andeditor.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
-
This command will compile your JavaScript and CSS files and place them in the
build
directory.
Step 4: Test Your Block
-
Activate Your Plugin:
Go to the WordPress admin dashboard, navigate to Plugins, and activate the “Custom Gutenberg Block” plugin.
-
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.
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!