Adding Custom Content Blocks to Gutenberg Editor

Posted on 16th June 2023

In the past, creating custom content blocks for the WordPress editor was a complicated process that required a lot of code. However, with the introduction of the Gutenberg editor in WordPress 4.9, it is now possible to create custom content blocks without writing any code.

There are two ways to create custom content blocks in Gutenberg:

1. Use a plugin
2. Use the Block API

Using a Plugin

There are a number of plugins that allow you to create custom content blocks without writing any code. One of the most popular plugins is Advanced Custom Fields.

Using the Block API

If you’re a developer, you can use the Block API to create custom content blocks. The Block API is a new way to create blocks that was introduced in WordPress 4.9.

To create a custom content block using the Block API, you need to register a block type. You can do this by using the register_block_type() function.

Once you have registered a block type, you can then use the render_block() function to output the block.

The Block API is a powerful way to create custom content blocks. However, it is a bit more complicated than using a plugin.

Creating a Custom Block Type

In this section, we will show you how to create a custom content block using the Block API.

First, you need to register a block type. You can do this by using the register_block_type() function.

The register_block_type() function takes two arguments:

1. The name of the block type.
2. An array of options.

The name of the block type is a string that must be unique. It is used to identify the block type when you register it.

The array of options is an associative array that contains the following keys:

1. ‘render_callback’ => ‘my_render_callback’

The render_callback key is used to specify the name of the function that will be used to render the block type.

2. ‘editor_script’ => ‘my_editor_script’

The editor_script key is used to specify the name of the JavaScript file that will be used to load the block type in the editor.

3. ‘editor_style’ => ‘my_editor_style’

The editor_style key is used to specify the name of the CSS file that will be used to style the block type in the editor.

4. ‘style’ => ‘my_style’

The style key is used to specify the name of the CSS file that will be used to style the block type on the front-end of your website.

5. ‘icon’ => ‘my_icon’

The icon key is used to specify the name of the icon that will be used to represent the block type in the editor.

Now that you know how to register a block type, let’s take a look at how to actually create the custom content block.

Creating the Custom Block

Now that you have registered a block type, you can use the render_block() function to output the block.

The render_block() function takes two arguments:

1. The name of the block type.
2. An array of attributes.

The name of the block type is a string that must be unique. It is used to identify the block type when you register it.

The array of attributes is an associative array that contains the following keys:

1. ‘content’ => ‘My content’

The content key is used to specify the content that will be rendered in the block.

2. ‘className’ => ‘my-class’

The className key is used to specify the class that will be applied to the block.

3. ‘align’ => ‘left’

The align key is used to specify the alignment of the block. Possible values are ‘left’, ‘center’, ‘right’, or ‘wide’.

4. ‘format’ => ‘standard’

The format key is used to specify the format of the block. Possible values are ‘standard’, ‘aside’, ‘image’, ‘video’, or ‘quote’.

Now that you know how to use the render_block() function, let’s take a look at an example.

In the following example, we will create a custom content block that outputs a heading and a paragraph.

First, we will register a block type using the register_block_type() function:

function my_register_block_type() {

register_block_type( ‘my-plugin/my-block-type’, array(

‘render_callback’ => ‘my_render_block’,

‘editor_script’ => ‘my_editor_script’,

‘editor_style’ => ‘my_editor_style’,

‘style’ => ‘my_style’,

‘icon’ => ‘my_icon’,

) );

}

add_action( ‘init’, ‘my_register_block_type’ );

Next, we will create the my_render_block() function:

function my_render_block( $attributes ) {

return ‘

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nec mauris sit amet nibh ultrices condimentum. Nulla eget justo eget nibh dignissim rhoncus. Nunc bibendum magna a justo ultrices, a malesuada urna ultrices. Aenean at tincidunt tellus. Etiam vestibulum tellus a turpis hendrerit, eu ultrices urna eleifend. Ut at euismod tortor. Nullam eget ante nec nibh vehicula iaculis quis eu nibh. Nulla facilisi. Vivamus at velit quis erat volutpat lobortis. Donec dignissim, metus nec molestie ultrices, lorem enim mattis felis, vel sagittis tortor risus nec metus. Sed viverra est mauris, a ultrices nisi pharetra eget. Vestibulum eget justo in purus dignissim dignissim. Nullam euismod sapien sed maximus facilisis.

‘;

}

In the my_render_block() function, we use the $attributes array to output the content of the block.

Finally, we will create the my_editor_script() and my_editor_style() functions:

function my_editor_script() {

wp_enqueue_script(

‘my-block-type-editor-script’,

plugins_url( ‘my-block-type-editor-script.js’, __FILE__ ),

array( ‘wp-blocks’, ‘wp-element’ )

);

}

function my_editor_style() {

wp_enqueue_style(

‘my-block-type-editor-style’,

plugins_url( ‘my-block-type-editor-style.css’, __FILE__ ),

array( ‘wp-blocks’ )

);

}

In the my_editor_script() function, we use the wp_enqueue_script() function to load the my-block-type-editor-script.js file.

In the my_editor_style() function, we use the wp_enqueue_style() function to load the my-block-type-editor-style.css file.

Both of these files are located in the plugin’s directory.

Now that we have created the custom block, let’s take a look at how to use it in the editor.

Using the Custom Block in the Editor

Once you have created the custom block, you can use it in the editor by selecting it from the “Add Block” menu.

Once you have added the block to the editor, you can enter the content that you want to output in the block.

In the following example, we will output a heading and a paragraph in the custom block: