在 WordPress 块主题中添加自定义块（不使用插件）

Question

基本上我想开发一个wordpress块主题。为了方便自定义，我想在我的主题中添加一些自定义块。但我不想为此创建一个插件。自定义块将在我的主题内。当有人安装我的主题他将获得那些内置于我的主题中的自定义块。我怎样才能实现它以及如何组织我的文件夹结构？

Answer 1

我只需要做同样的事情：在我的主题内注册一个自定义块。

在其中创建块src/blocks

src/blocks首先，我使用创建了内部块npx @wordpress/create-block my-block。该区块现在位于{theme}/src/blocks/my-block。

构建块

然后，我使用 构建了该块npm run build。

block.json从构建文件夹注册

最后，我使用构建block.json的元数据文件注册了该块：

函数.php

function register_my_block()
{
    register_block_type( dirname(__FILE__) . '/src/blocks/my-block/build/block.json' );
}
add_action('init', 'register_my_block');

Answer 2

您需要做的就是在主题内创建一个src文件夹，然后将块文件夹放在那里（如下所示的结构）。

文件夹结构可能是：

-- 主题文件夹 --> src --> 块文件夹 > 块文件（edit.js、index.js、save.js 等）

对于块文件：

现在是时候安装wp-scripts包来使用 wp 块了。为此，请更新您的package.json文件，添加以下行。然后在终端中转到主题文件夹并命令“ npm install ”，它将安装所有依赖项包，然后给出“ npm start ”命令。

{
"main": "build/index.js",
"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"
},
"devDependencies": {
    "@wordpress/scripts": "^23.4.0"
}
}

register_block_type注意： PHP 方式或registerBlockTypeJS 方式需要通过函数注册块。否则，上面的代码将无法工作。上面的代码只会创建您的文件。