Learning to Create a Simple Custom Gutenberg Block

Note: This post of understanding newly added WordPress Site Editor features including using blocks. This learning post is still in active development and updated regularly.

WordPress blocks are the basic building blocks that hold some pieces of content that users can add to a WordPress post or page.

“Block” is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage. The idea combines concepts of what in WordPress today we achieve with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience. WordPress Resources

Some of the examples of the blocks are titles, paragraphs, columns, images, galleries, and everything else in the editor’s interface, like sidebar panels, block toolbar controls, etc.

In this learning-post series, I am exploring how to create a basic custom block, understand its anatomical structure, and learn how to modify its style.

In this part, let’s first set up the development environment scaffold for a custom block.

Note: This article was prepared as proof of concepts while preparing for this forthcoming article on Smashing Magazine.

Setting up the Dev Environment

Preparation

First, we will need a development environment and tools: Node, NPM, and a code editor. Setting up your development environment provides information on how to install and prepare your development environment.

If you don’t, follow the instructions here to install them on your machine.

Creating block

For my first custom block, I am following this Kinsta tuturial.

Step 1: From the test theme’s plugins folder, issue npx @wordpress/create-block.

This command will generate the required PHP, SCSS, and JS files to register a blank plugin. Alternately, you could issue a command with your block name slug, npx @wordpress/create-block my-custom-block. This command will create a block named My First Custom Block.

Step 2: For this learning demo, let’s fill up the required fields manually, as outlined in the tutorial:

After the installation of the plugin and its dependencies, it will open the following screen:

Alternately, if the quick mode of installation is followed, then we can create a block scaffold, similar to the previous step but without completing the parameter fields.

npx @wordpress/create-block my-custom-block --title "My First Custom Block" --short-description "A learning to create custom block example" --category "widgets"

The above command would also create the same my-first-custom-block scaffold without having to configure block parameters step-by-step.

Step 3: Change your directory to the newly created plugin folder cd my-custom-block. Then issue the npm start command, which will run the wp-scripts start command and compile the package. If the compilation is successful, you will see the Webpack compiled successfully message.

Step 4: Now open the plugins from your admin dashboard, and you will notice My First Custom Plugin is installed.

Step 5: Activate the plugin, open the block inserter, and search for My.. at the search box, you will notice your new custom block. To use the plugin, go to Inserter and select My First Custom Block, which will open the following window:

The My First Custom Block will also be listed under the Widgets category.

This works as described.

Uninstall or reset wp-env

In case the wp-env needs to be uninstall or reset, use the following instructions:

• To reset and clean the WordPress database, run wp-env clean all
• To remove the local environment completely for a specific project, run wp-env destroy
• To globally uninstall the wp-env tool, run npm -g uninstall @wordpress/env

To remove a directory file such as Custom-clock, issue rm -r custom-block command

Wrapping up

In this post, we successfully set up a development environment for creating a custom block and created a scaffold block within a block theme’s plugins directory. In the next post, we will go through the file structure and overview its contents.

NEXT POST: Anatomy of the Create Block Plugin File Structure.

Useful resource links