使用@wordpress脚本在基本webpack设置中打包block.json renderTemplate

Question

在 WordPress 安装中，我使用带有“block.json”的 ACF 块，其中我的块从 /source 目录编译到 /build 目录，并通过

register_block_type

注册。我使用 @wordpress/scripts/config/webpack.config 的相对默认变体进行编译/构建。

我的问题是“render.php”不会复制到我的构建目录中，除非我在 block.json 中包含“render”属性 (

"render": "file:./render.php"

)。但如果我包含它，那么它会覆盖 ACF 块渲染模板 (

renderTemplate": "render.php"

)，并且该模板将被解释为标准块模板，而不是 ACF 块模板。

是否有简单的解决方法，或者这是我需要在“webpack.config.js”中手动解决的问题？我对 webpack 配置还很陌生，我能想到的就是在 module.exports 中为每个 render.php 文件创建一个新的入口点，但我觉得这是一种非常低效的方法，因为默认配置已经正常工作了。

使用 webpack 插件（例如

replace-in-file-webpack-plugin

）从构建文件中删除 block.json 中的

render

属性字符串是否最有意义？

或者也许有一个函数或过滤器可以强制 ACF renderTemplate 超过核心“渲染”，即使“渲染”存在于 block.json 中？

我觉得我不是第一个遇到这种情况的人，但我不知道标准解决方案是什么。

简单的文件结构：

src
|--blocks
| |-- carousel
| | |-- block.json
| | |-- render.php
| |-- anotherBlock
| | |-- block.json
| | |-- render.php
build
|--blocks
| |-- carousel
| | |-- block.json
| | |-- render.php
| |-- anotherBlock
| | |-- block.json
| | |-- render.php

报名：

function my_register_acf_blocks() {
  register_block_type(dirname(__DIR__, 1) . '/build/blocks/carousel' );
  register_block_type(dirname(__DIR__, 1) . '/build/blocks/anotherBlock' );
}
add_action( 'init', 'my_register_acf_blocks' );

block.json的相关行：

{
  "$schema": "https://schemas.wp.org/trunk/block.json",
  "apiVersion": 3,
  "name": "acf/carousel",
  "title": "Image or Video Carousel with Overlay",
  "render": "file:./render.php", //<-- webpack won't copy render.php to build without this line, but it breaks ACF block when present
  "script": "file:./index.js",
  "style":  ["splide", "file:./style-index.css"],
  "acf": {
    "mode": "edit",
    "renderTemplate": "render.php"
  }
}

webpack.config.js

const defaultConfig = require( '@wordpress/scripts/config/webpack.config' );

module.exports = {
    ...defaultConfig,
    entry: {
        ...defaultConfig.entry(),
        index: './src/index.js',
        loginStyles: './src/sass/login-styles.scss',
        splide: './src/js/splide.js'
    },
};

Answer 1

根据您的项目结构，要复制

.php

文件以按预期进行构建，对于您的构建过程，请尝试：

npm wp-scripts build --webpack-copy-php

这将复制通过您的 .php 函数注册的块中包含的

所有

my_register_acf_blocks()

文件。

如果您使用

@wordpress/create-block

创建了原始项目，对于包含多个动态渲染块的项目，最好使用

--webpack-copy-php

更新 package.json，例如：

package.json

{
    "name": "my-blocks",
     ...
    "scripts": {
        ...
        "build": "wp-scripts build --webpack-copy-php",
        "start": "wp-scripts start --webpack-copy-php"
    },
...
}

然后，当您运行

npm plugin-zip

时，所有文件都应该正确构建和捆绑。