Taras Dashkevych

Frontend developer focused on inclusive design

Create WordPress block

The introduction of WordPress block editor was a big shift from the classic editor.

However, the transition hasn't been smooth for everyone. Long-time WordPress users, particularly those accustomed to the classic editor or specific page builders, found the transition challenging.

Personally, I think that the block-based approach is an improvement.

Block-based approach

The block editor is flexible, but choice depends on individual preference. Some still lean towards the classic. Here's why I prefer the block-based approach:

  1. Modularity and reusability: Blocks are modular. Users can move them, customize them, and reuse across pages and posts. This modularity provides flexibility in designing layouts.
  2. Rich integration: The block editor makes it easier to integrate and style various content elements. For example, images, galleries, videos, columns, etc. No need to use shortcodes.
  3. Intuitive interface: The block interface borrows concepts from popular page builder plugins. It offers a more visual approach to content creation. As a result, the editor feels more intuitive than the classic editor.
  4. Structured content: Since each block is distinct and has its own settings, content is more structured. This structured approach can be beneficial for future design changes and more control over SEO of webpages.

Create own block

like the WordPress block editor because it allows custom blocks. Instead of relying on default blocks, developers can extend the block editor by developing custom blocks. And it can be done using React.

Official tool

The @wordpress/create-block package provides a zero-configuration dev-tool to generate WordPress block plugins. This tool makes it simpler to start building blocks, especially for those new to block development.

Installation

First, make sure Node.js and npm are installed on a computer. Then, start by running the following command:

$ npx @wordpress/create-block@latest cool-block
$ cd cool-block
$ npm start

The first command tells the system to use npx to fetch and execute the @wordpress/create-block tool. The @latest ensures to use the most recent version of the tool. cool-block is the name (or slug) chosen for a new block.

If no slug is given, the script will run in an interactive mode, asking for necessary inputs like slug, title, namespace, and more.

After running the first command, a new directory named cool-block (or whatever name is chosen) will be created. The second command navigates into that directory.

The last command starts the development environment for a new block. It allows to preview the changes made to a block in real-time.

Options

The package provides multiple options to customize block creation process. For detailed options and other configurations, refer to the official documentation.