fbpx

How to Create Custom Gutenberg Block in WordPress Without Plugin

A custom gutenberg block can be hard to create especially if you don’t know your way with javascript. On the other hand, i know some of you may be wondering if it’s possible to create your own custom block in gutenberg well it is possible and the process isn’t too complex. Gutenberg blocks can save you lots of time plus they are great for visual styling.

build custom block in wordpress
  • Save

And of course, the number of blocks available to you will surely increase over time. Core WordPress developers will definitely add new elements and features, and WordPress plugin developers will also fill in the blanks as they usually do.

While we wait for new blocks on gutenberg, if there is a particular block you’d like to try but can’t find it, you have an option to create a custom block you can use with the Gutenberg Editor.

Let’s do this!

Start by Registering Block Type and Asset

Block name’s format must be namespace/block-id.

functions.php
add_action( ‘init’, ‘my_register_block_type’ );

function my_register_block_type() {
// if Gutenberg is not active
if ( !function_exists( ‘register_block_type’ ) ) {
return;
}

// Register assets
$css_dir = get_stylesheet_directory_uri() . ‘/assets/css’;
$js_dir = get_stylesheet_directory_uri() . ‘/assets/js’;
wp_register_script( ‘my-block-admin’, $js_dir . ‘/my-block-admin.js’, [ ‘wp-blocks’, ‘wp-dom’ ] , null, true );
wp_register_style( ‘my-block-admin’, $css_dir . ‘/my-block-admin.css’, [ ‘wp-edit-blocks’ ] );
wp_register_style( ‘my-block’, $css_dir . ‘/my-block.css’ );

// Register block type and enqueue the assets.
register_block_type( ‘my/simple-text’, [
‘editor_style’ => ‘my-block-admin’, // admin only
‘editor_script’ => ‘my-block-admin’, // admin only
‘style’ => ‘my-block’, // admin & public
] );
}

The Basic Script to Create Custom Blocks

js/my-editor.js
( function( blocks, element, blockEditor ) {
var el = element.createElement;
var RichText = blockEditor.RichText;

blocks.registerBlockType( ‘my/simple-text’, {
title: ‘Simple Text (Custom)’,
icon: ‘universal-access-alt’,
category: ‘layout’,
attributes: {},
edit: myEdit,
save: mySave
} );

// what’s rendered in admin
function myEdit( _props ) {

}

// what’s saved and rendered in frontend
function mySave() {

}

}( window.wp.blocks, window.wp.element, window.wp.blockEditor ) );

Here’s some of registerBlockType() parameters:

edit – Callback on how to render the content in the editor
icon Click here to see list of available icons.
attributes – Defines how to extract the value from saved content See How it works here
save – Callback on how to render the content before saved to the database.

Implement, Edit and Save Attributes

js/my-editor.js
( function( blocks, element, blockEditor ) {
var el = element.createElement;
var RichText = blockEditor.RichText;

blocks.registerBlockType( ‘my/simple-text’, {
title: ‘Simple Text (Custom)’,
icon: ‘universal-access-alt’,
category: ‘layout’,
example: {},

// All the children inside ‘p’ will be extracted as ‘text’ variable.
attributes: {
text: { type: ‘array’, source: ‘children’, selector: ‘p’ }
},
edit: myEdit,
save: mySave,
} );

// Render RichText (field with basic toolbar) wrapped with ‘p’
function myEdit( props ) {
return el( RichText, {
tagName: ‘p’,
onChange: _onChange,
value: props.attributes.text,
className: props.className,
} );

// when changed, update the attribute
function _onChange( newContent ) {
props.setAttributes( { text: newContent } );
}
}

// Save the content of RichText wrapped with ‘p’
function mySave( props ) {
return el( RichText.Content, {
tagName: ‘p’,
className: props.className,
value: props.attributes.text,
} );
}

}( window.wp.blocks, window.wp.element, window.wp.blockEditor ) );

View your Custom Block Results

Now that you are done with creating your custom block, it is time to view the result and probably try it out.

wordpress custom block
  • Save
below is an image that shows our above sample of custom block result
wordpress custom block results
  • Save
And here’s our simple test custom block in action

My name is Kings Chukwuebuka Amalaego and i created Toomakesense because of my undying passion for tech with the goal of helping as many internet marketers, bloggers and non-tech savvy’s as i can.

Share via
Copy link
Powered by Social Snap