Gutenberg Block Development Tutorial: Create Rich Text Block

Complete tutorial series link

---

• Getting Started With Gutenberg Block Development Tutorial
• Gutenberg Block Development Tutorial: Create Rich Text Block [This Post]

---

With Gutenberg editor, WordPress is going to change drastically from its core. This change will force both the users & developers to go beyond their comfort zone. Users will learn to interact with a new editor interface for their regular work. And developers will require to develop new skills with JavaScripts (ES6) & React JS library.

In my previous tutorial, I have already guided you through the setup of a Gutenberg block plugin. Also, you have learned to create a simple static block with it. If you are new here I’ll suggest you go through that tutorial first to get a few basic knowledge.

Now, in this tutorial, I’ll show you how to create a dynamic block in Gutenberg. It will be more helpful in real-life scenarios than a static block.

Let’s start developing the block.

Below is the file structure of our setup from the previous tutorial. Here we will create a new directory (rich-text-block) for the new block within “/block/” folder.

INSIDE: /local_dev_site/wp-content/plugins/my-block

├── .gitignore
├── plugin.php
├── package.json
├── README.md
|
├── dist
|  ├── blocks.build.js
|  ├── blocks.editor.build.css
|  └── blocks.style.build.css
|
└── src
   ├── block
   |  ├── rich-text-block
   |  ├── block.js
   |  ├── editor.scss
   |  └── style.scss
   |
   ├── blocks.js
   ├── common.scss
   └── init.php

Now, within the newly created directory create index.js file. In this file, we’ll add our code for the block.

Before registering our new block, import this block file within blocks.js  file which is located in /src/  directory, by adding the code below.

import './block/rich-text-block';

Now, we can register our block by the codes below.

const { registerBlockType } = wp.blocks;
const { RichText } = wp.editor;

registerBlockType('myblock/rich-text-block', {
    title: 'My Rich Text Block',
    icon: 'welcome-write-blog',
    category: 'common',
    edit: function() {
        ....
    },
    save: function() {
        ....
    }
});

This is a basic code snippet for adding a new Gutenberg block in WordPress. But now focus in line no. 2, there I have called the RichText element from wp.editor, now we can use it in our block.

Now we have to update our edit function codes.

    edit: function( {className} ) {

        function onChangeContent() {
            console.log("Working!");
        }

        return (
            <RichText
                tagName="p"
                className={ className }
                onChange={ onChangeContent }
            />
        );
    },

After adding this code we can see our block is outputting below figures in our editor.

Now if we wish to type something in it, it will not show anything in it. But within our browser console we should see “Working!” message as we have mentioned on onChangeContent()  function.

Here we need to introduce another registerBlockType settings to our block, which is attributes. Attributes are used for adding and handling dynamic data in Gutenberg blocks. This is optional for static blocks but if our blocks work with dynamic data that a user can change we have to use it.

Attributes are quite tricky and useful for Gutenberg block development. It deserves its own tutorial with all of its properties and their details. But that is not the case here. You can learn more about it from official Gutenberg handbook.

Before edit function add this code below.

    attributes: {
        content: {
            type: 'string',
            source: 'html',
            selector: '.text-content'
        }
    },

Here, content is an attribute, and it is an arbitrary string, it can be anything of your choice. Next, type defines what kind of data we wish to store or retrieve from the database. Then, source determines how we want to store or retrieve the data. And, selector can be a class, id or simply the tag of the HTML element which holds the data at frontend.

Now, after adding attributes we need to update our edit function as below.

    edit: function( {className, attributes, setAttributes} ) {
        const { content } = attributes;

        function onChangeContent( newContent ) {
            setAttributes( { content: newContent } );
        }

        return (
            <RichText
                tagName="p"
                className={ className }
                onChange={ onChangeContent }
                value={ content }
            />
        );
    },

After adding this code, now we can type anything in it and it will display in the editor like this below.

Now, most of our work has been done. The only thing is left is to display the user-generated content to the frontend. And for this, we need to update our save function.

   save: function( { attributes, className } ) {
        const { content } = attributes;

        return (
            <RichText.Content
                tagName="p"
                className="text-content"
                value={ content }
            />
        );
    },

With this, our rich text Gutenberg block code is completed.

Hope you learn something new and useful today from this article. If you need any more guidance for this tutorial you can follow the step-by-step guide video tutorial of this topic below.

 Happy coding! 🙂

Complete tutorial series link

---

• Getting Started With Gutenberg Block Development Tutorial
• Gutenberg Block Development Tutorial: Create Rich Text Block [This Post]

---