如何通过REST API让Vue应用加载Gutenberg块的自定义CSS样式？

你导入的@wordpress/block-library下的三个CSS文件只包含块的基础结构样式，用户在编辑器中自定义生成的动态样式（比如文本颜色的.has-vivid-green-cyan-color类）并不在这些文件里——这些样式是WordPress后台根据用户的块设置实时生成的，需要额外处理才能在Vue应用中生效。下面是几个可行的解决办法：

方法一：从WordPress后端动态获取完整块样式（推荐） #

通过自定义REST API字段，让WP返回页面/文章关联的所有动态块样式，再在Vue中注入到页面：

1. 在WP主题的functions.php中添加自定义REST字段：

add_action( 'rest_api_init', function () {
    // 为页面类型添加字段，需要的话可以改成'post'或自定义文章类型
    register_rest_field( 'page',
        'block_styles',
        array(
            'get_callback' => function( $post ) {
                $css = '';
                // 加入全局样式（包含主题调色板、全局块设置）
                $css .= wp_get_global_stylesheet();
                // 加入当前页面的自定义CSS（如果用户在编辑器中添加了页面级自定义样式）
                $post_custom_css = get_post_meta( $post['id'], '_wp_custom_css_post', true );
                if ( $post_custom_css ) {
                    $css .= $post_custom_css;
                }
                return $css;
            },
            'schema' => array(
                'description' => '动态生成的块样式',
                'type' => 'string'
            ),
        )
    );
} );

2. 在Vue组件中请求页面数据后，注入样式：

// 假设你已经通过REST API获取到页面数据并存入pageData
mounted() {
    if (this.pageData.block_styles) {
        const styleElement = document.createElement('style');
        styleElement.textContent = this.pageData.block_styles;
        document.head.appendChild(styleElement);
    }
}

这个方法能完全同步编辑器中的所有自定义样式，包括颜色、背景、间距等动态设置。

方法二：导入WordPress基础颜色样式（仅解决颜色类问题） #

如果只需要默认调色板的颜色类生效，可以直接导入WP的基础颜色样式文件：

在Vue项目中安装@wordpress/base-styles依赖，然后在入口文件或组件中导入：

import '@wordpress/base-styles/colors.css';

这个文件包含了WP默认调色板所有has-xxx-color、has-xxx-background-color类的样式定义。

方法三：静态提取编辑器样式（适合静态Vue站点） #

如果你的Vue应用是静态生成的，可以使用WP静态站点生成插件，导出页面时将编辑器生成的动态样式提取为静态CSS文件，再在Vue项目中引入该文件。

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