Creating your first Gutenberg Block: A Step-by-Step Guide for WordPress

Gutenberg is the block-based editor that was introduced in WordPress 5.0, and it provides a powerful and flexible way to create custom blocks using HTML, CSS, and JavaScript. In this article, we will discuss the process of developing a WordPress block, from creating a custom block template to registering it with WordPress.

Creating a Custom Block Template

To create a custom block, the first step is to create a block template. The block template is an HTML template that defines the structure and layout of the block. To create a block template, follow these steps:

1. Create a new file in your WordPress theme or plugin directory and name it something like ‘my-custom-block.php’.
2. Add the following code to the file to define the block template:

<div class="my-custom-block">
  <!-- Your block content here -->
</div>

3. Replace the ‘my-custom-block’ class with a unique class name that represents your block.
4. Add any additional HTML, CSS, or JavaScript that you need to define the structure and layout of your block.
5. Creating a Block JavaScript File

After you have created your block template, the next step is to create a JavaScript file that will register your block with WordPress.

Create a block JavaScript file:

1. Create a new file in your WordPress theme or plugin directory and name it something like ‘my-custom-block.js’.
2. Add the following code to the file to register your block:

(function() {
  wp.blocks.registerBlockType('my-custom-block', {
    title: 'My Custom Block',
    icon: 'smiley',
    category: 'common',
    edit: function() {
      return wp.element.createElement(
        'div',
        { className: 'my-custom-block' },
        'Edit Mode'
      );
    },
    save: function() {
      return wp.element.createElement(
        'div',
        { className: 'my-custom-block' },
        'Save Mode'
      );
    },
  });
})();

3. Replace the ‘my-custom-block’ value with the unique class name that you used in your block template.
4. Customize the ‘title’, ‘icon’, and ‘category’ values to represent your block.
5. Add any additional JavaScript that you need to define the behavior and functionality of your block.
6. Enqueueing Your Block Scripts

After you have created your block template and JavaScript file, the next step is to enqueue your block scripts in WordPress. To enqueue your block scripts, follow these steps:

1. Add the following code to your theme or plugin’s functions.php file:

function my_custom_block_enqueue_scripts() {
  wp_enqueue_script(
    'my-custom-block',
    get_template_directory_uri() . '/my-custom-block.js',
    array('wp-blocks', 'wp-element')
  );
}
add_action('enqueue_block_editor_assets', 'my_custom_block_enqueue_scripts');

2. Replace ‘my-custom-block’ with the name of your JavaScript file.
3. Add any additional dependencies that your block requires, such as jQuery or Underscore.
4. Testing Your Block

After you have created and registered your block with WordPress, the final step is to test your block to ensure that it is working as expected.

Testing your new WordPress block:

1. Add a new post or page in WordPress.
2. Click on the ‘+’ icon to add a new block.
3. Search for your custom block in the ‘Common’ category.
4. Add your custom block to the post or page.
5. Verify that your block is displayed correctly in both edit and save mode.

Conclusion

Creating a custom block in WordPress can seem intimidating at first, but it is actually a straightforward process that can be accomplished with a few lines of code. By following the steps outlined in this article, you can create a custom block template, register your block with WordPress, enqueue your block scripts, and test your block to ensure that it is working correctly. Whether you are a beginner or an experienced WordPress developer, creating custom blocks can help you take your website to the next level and provide your users with a better user experience.