How to add multiple custom blocks in custom Wordpress theme using create-block?

admin管理员组

文章数量:1122846

I want to add multiple custom blocks to my custom wordpress theme using create-block package.

In my root folder I initiated package.json by running npm init -y and added wp-scripts as a dev dependency.

My package.json:

{
  "name": "<THEME-NAME>",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "devDependencies": {
    "@wordpress/scripts": "^28.0.0"
  },
  "scripts": {
    "build": "wp-scripts build",
    "format": "wp-scripts format",
    "lint:css": "wp-scripts lint-style",
    "lint:js": "wp-scripts lint-js",
    "packages-update": "wp-scripts packages-update",
    "plugin-zip": "wp-scripts plugin-zip",
    "start": "wp-scripts start"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

Next, I created a src folder with a directory called 'blocks' in it.

I navigated to the blocks folder and ran npx @wordpress/create-block block-name --no-plugin for my blocks.

Then I registered these blocks in my functions.php as follows:

function register_custom_blocks() {
    $blocks = [
        'my-first-block',
        'my-second-block',
        'my-third-block'
    ];
    foreach ($blocks as $block) {
        register_block_type(__DIR__ . '/src/blocks/' . $block);
    }
}
add_action('init', 'register_custom_blocks');

I can't seem to get my block visible in the gutenberg editor. What am I missing here and is this the correct way to implement multiple blocks in a custom Wordpress theme?

本文标签： How to add multiple custom blocks in custom Wordpress theme using createblock