如何避免Gutenberg区块样式内联？block.json注册区块样式加载问题

为什么样式会被内联？ #

WordPress处理block.json的style字段时，若同时混用file:本地路径和已注册的样式句柄（比如overlapping-columns-style），会默认将file:指向的CSS内容内联到页面。另外，当file:指向的文件体积较小时，WordPress也会触发自动内联优化，减少HTTP请求数。

如何让样式以文件形式加载？ #

有两种可行方案：

方案1：单独注册样式句柄，仅在block.json中引用句柄 #

在区块注册的PHP文件里，先手动将CSS文件注册为独立的样式句柄：

wp_register_style(
    'overlapping-columns-style',
    get_template_directory_uri() . '/你的区块路径/overlapping-columns.css',
    array(), // 无依赖则留空
    filemtime( get_template_directory() . '/你的区块路径/overlapping-columns.css' ) // 自动更新版本号
);

然后修改block.json的style字段，只保留样式句柄：

"style": [ "overlapping-columns-style" ],

这样WordPress会在区块出现在页面时，按需加载这个外部CSS文件。

方案2：使用@wordpress/scripts打包，正确关联asset文件 #

如果用官方@wordpress/scripts工具打包区块，确保在src/index.js中引入CSS文件，打包后会生成build/style-index.css和对应的style-index.asset.php文件。此时修改block.json的style字段为：

"style": "file:./build/style-index.css",

不要添加额外样式句柄，WordPress会自动识别asset文件，将CSS以外部文件形式按需加载，不会内联。

内容的提问来源于stack exchange，提问作者Luca Reghellin