Creating your own Gutenberg blocks with JavaScript and React

Gutenberg, the new WordPress editor, uses blocks to create content. This is a big departure from the previous TinyMCE editor and provides a much more intuitive and dynamic user interface. At the heart of this new editor is the React JavaScript library. This means you can now create your own blocks using JavaScript and React. In this article, we will discuss how to create your own Gutenberg block using these technologies.

Preparation

To get started, we need to have Node.js and NPM installed on our machine. Next, we'll use the WP CLI, specifically the package @wordpress/create-block, to create our block structure. In your command prompt, navigate to the wp-content/plugins folder of your WordPress site and enter the following command:

npx @wordpress/create-block my-block

Here 'my-block' is the name of your block. This will create a new folder with the same name, including all the necessary files for a Gutenberg block.

Development of the block

Now open the block folder in your preferred text editor. You will see two main files – edit.js and save.js. The file edit.js defines how the block will look and function in the Gutenberg editor, whereas save.js determines how the block will be displayed on the frontend of your site.

To create our own block we will need to import several components from @wordpress/block-editor and @wordpress/components.

For example, in edit.js we can import and use RichText component to create a text block that users can edit:

import { RichText } from '@wordpress/block-editor'; export default function Edit( { attributes, setAttributes } ) { const { content } = attributes; return (  setAttributes( { content: newContent } ) } /> ); }

Here we use RichText the component it receives content the attribute and the function setAttributes from props. When the user changes the text, onChange the event updates content attribute with the new content.

IN save.js we will use the same one RichText.Content component to print the contents of the block:

import { RichText } from '@wordpress/block-editor'; export default function Save( { attributes } ) { const { content } = attributes; return ( ); }

Block registration

Finally, we need to register our new block with WordPress. Go back to index.js file and add the following function registerBlockType:

import { registerBlockType } from '@wordpress/blocks'; import Edit from './edit'; import save from './save'; registerBlockType( 'my-plugin/my-block', { apiVersion: 2, title: 'My Block', category: 'common', attributes: { content: { type: 'string', source: 'html', selector: 'p', }, }, edit: Edit, save, } );

Here we register a new block with the name 'my-plugin/my-block', defining the attributes the block will use and specifying the functions Edit and save to edit and display the block.

Conclusion

This is a basic guide to creating your own block in Gutenberg with JavaScript and React. Since Gutenberg is built with React, the possibilities for customizing and extending the functionality of the blocks are almost endless. With React skills, you can create more complex blocks that meet the specific needs of your website or app.