The key to creating a Gutenberg block is to understand its basic structure and correctly connect front and back end resources. 1. Prepare the development environment: install local WordPress, Node.js and @wordpress/scripts; 2. Use PHP to register blocks and define the editing and display logic of blocks in JavaScript; 3. Build JS files through npm to make changes take effect; 4. Check whether the path and icons are correct when encountering problems or use real-time listening to build to avoid repeated manual compilation. Following these steps, a simple Gutenberg block can be implemented step by step.

Creating a simple Gutenberg block is not really difficult, especially if you are already familiar with the basic development process of WordPress. Gutenberg is the new editor of WordPress, which organizes content through "blocks", each block is an independent content unit. If you want to customize your own block, you can start from the most basic one and implement it step by step.

Here are some practical steps and suggestions to help you get started quickly.

Preparation: Set up a development environment

Before you start writing code, make sure you have a WordPress environment suitable for development. You can use local development tools such as Local or XAMPP to build a test site.

• Install the latest version of WordPress
• Install Node.js and npm (for building JavaScript files)
• Install the @wordpress/scripts package, which is the official recommended script tool set

You can install the necessary dependencies through the following command:

 npm install --save-dev @wordpress/scripts

Then, create a directory in your theme or plugin to store block code, such as /blocks/my-first-block/ .

Create basic structure: register blocks and edit components

A Gutenberg block is usually composed of two parts: PHP is used to register blocks , and JavaScript is used to define the appearance and behavior of blocks .

PHP section (registration block)

Add the following code to your theme functions.php file, or load it in the plugin:

 function register_my_first_block() {
    wp_register_script(
        'my-first-block',
        get_template_directory_uri() . '/blocks/my-first-block/build/index.js',
        array( 'wp-blocks', 'wp-element' )
    );

    register_block_type( 'my-plugin/first-block', array(
        'editor_script' => 'my-first-block',
    ) );
}
add_action( 'init', 'register_my_first_block' );

This code tells WordPress where the JS script for this block is and registers a new block type.

JavaScript section (definition block)

Write the following content in /blocks/my-first-block/src/index.js :

 const { registerBlockType } = wp.blocks;
const { RichText } = wp.editor;

registerBlockType( 'my-plugin/first-block', {
    title: 'My first block',
    icon: 'smiley',
    category: 'common',

    edit: () => {
        Return (
            <RichText
                tagName="p"
                placeholder="Enter some text..."
            />
        );
    },

    save: () => {
        return <RichText.Content tagName="p" value="This is a static text" />;
    },
} );

This way you create a block that you can see in the editor.

Build and run: Compile JS files with npm

The Gutenberg block requires JavaScript to be compiled into a format that the browser can recognize. You can use the scripting tools provided by WordPress to automate this process.

Create a package.json file in the project root directory and add the following configuration:

 {
  "name": "my-first-block",
  "version": "1.0.0",
  "scripts": {
    "build": "wp-scripts build ./blocks/my-first-block/src/index.js"
  }
}

Then run:

 npm run build

After each time you modify the JS file, you must re-run the build command to make the changes take effect.

Tips and FAQs

• The icon cannot be displayed? You can use the icon name in WordPress Dashicons .

• Blocks are not displayed? Check whether JS compiles successfully and whether the PHP registration path is correct.

• Don't want to compile manually every time? You can add --watch parameter to listen to file changes in real time and automatically build:

   npx wp-scripts build ./blocks/my-first-block/src/index.js --watch

  ---

  Basically that's it. The key to creating a Gutenberg block from scratch is to understand the basic structure of the block and how to connect front and back end resources. Although it seems a bit complicated, you can quickly grasp it by just taking it step by step.

  The above is the detailed content of How to create a simple Gutenberg block. For more information, please follow other related articles on the PHP Chinese website!