Create WordPress Block with Script

Home / Guides / Converting Shortcodes to Blocks in WordPress / Create WordPress Block with Script
Lesson 2 of 7
5m read.
35m video.

This guide will illustrate how to create a block using the wordpress/create-block script.

You should have your demo site for the guide ready and its directories open inside your code editor.

Local WP Site and VS Code set up.
Local WP and VS Code set up.

Create WordPress Block Tutorial

Create WordPress Block – Process

  • Open the terminal inside the website Plugins directory.
  • Check for the version of Node installed on your computer. You should be running the latest recommended Node version.
  • Run the npx @wordpress/create-block command to create the block.
  • In this tutorial, we will create a block called ‘scbdemo‘. Thus, you will run the command: npx @wordpress/create-block scbdemo.
Creating a block with the wordpress/create-block command.
Creating a block with the wordpress/create-block command.

Go to the WP Admin. Navigate to plugins to check out the block plugin.

New WordPress Block plugin inside WP Admin
New WordPress Block plugin inside WP Admin.

WordPress Block Directory and Files.

Let us look at the files and folders inside the scbdemo block folder.

WordPress block folder structure
scbdemo block folder structure
  • build: This folder contains the compiled files from the src folder.
  • node_modules: Folder for node module files.
  • src: Contains all Block files that are later complied to the build folder. – We will take a further look at the src folder’s contents.
  • scbdemo.php: The main plugin file handles the initialization of the plugin. It also loads its core files.

Note: Plugin Header fields

The video tutorial shows you how to define your plugin’s name, version, author, etc.

You define this plugin information from the header field comment.

  • package-lock.json: This is a detailed description of the exact versions of the project’s dependencies. This file ensures we install the same dependencies across all devices we run this project on.
  • package.json: Contains information about the project. It has the name of the project (in this case, scbdemo), the version, author, dependencies, and scripts. NPM uses this file to install the project’s dependencies and run the project’s scripts.
  • readme.txt: This file contains information about the plugin that could be useful to its users. This information could include names of the contributors, tags, changelogs, screenshots, FAQs etc.
  • .gitignore: Used to define files and directories Git should ignore when committing and pushing changes. An example of this is the node_modules folder. You should not push this folder to your remote Git repository.
  • .editorconfig: Plain text file that defines coding styles for our project. We can use this file to enforce consistent coding styles across all developers working on the same project.

src files

Let us take a look at the files inside the src folder.

WordPress block plugin src folder structure.
WordPress block plugin src folder structure.
  • block.json: This is the most important file in a WordPress block. It contains the metadata for our created WordPress block. This metadata includes the block name, description, icon, and attributes. We use this file to register the block with WordPress.
  • edit.js: Defines the React component used to render the block in the editor. This component displays the block’s content and handles user interactions inside the editor.
  • editor.scss: This file contains the styles we use to style the block inside the Gutenberg editor.
  • index.js: This is the entry point for the block. It imports the other files and registers the block with WordPress. This file also loads the block’s assets, such as its JavaScript and CSS files.
  • save.js: Defines the React component used to save the block’s content.
  • style.css: Contains the styles used to style the block on the front end. We use these styles to control the appearance of our block’s content at the front end.

Run the build

You always need to run a build when you make changes to files inside the src folder. This build re-compiles the code to update the build files.

Use the command npm run build inside your terminal to run a build process. Ensure to run this command at the root level of the plugin’s folder (scbdemo).

Running a WordPress block build.
Running a WordPress block build.

Test the for Block.

You can now test and see if the WordPress plugin you have created renders the new block. To do this;

  • Go to the Plugins page inside WP Admin.
  • Activate the Scbdemo plugin.
  • Create a new demo page.
  • Add the scbdemo block from the editor.
  • Publish to save changes.
Test for the created WordPress block.
Test for the newly created WordPress block.

Guide recap

In this guide, we have looked at the following;

  • Created our block plugin using the wordpress/create-block script.
  • Looked at the folders and files that make up the plugin.
  • The importance of files in the plugin’s src folder.
  • How to run a build to compile src files to build.
  • Testing the block in WordPress.

Take a look at some of the other guides related to WordPress development.