Create WordPress Block with Script

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.

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.

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

WordPress Block Directory and Files.

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

• 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.

• 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.

• 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).

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.