如何在NextJS中添加WP Gutenberg调色板类样式

核心问题原因 #

你使用的@aamodtgroup/gutenberg-styles仅提供Gutenberg通用基础样式，但WordPress后台自定义调色板生成的has-purple-color、has-orange-text-color这类类，是和你的WP主题绑定的专属规则，前端无法自动获取，必须手动同步调色板数据并生成对应样式。

方案1：从WordPress动态获取调色板（推荐） #

通过WP REST API将后台调色板数据传到前端，动态生成样式，实现WP后台修改调色板后前端自动同步。

步骤1：在WordPress中添加REST端点 #

在主题的functions.php中添加代码，暴露调色板数据：

add_action('rest_api_init', function () {
    register_rest_route('wp/v2', '/gutenberg-palette', [
        'methods' => 'GET',
        'callback' => 'get_custom_gutenberg_palette',
        'permission_callback' => '__return_true'
    ]);
});

function get_custom_gutenberg_palette() {
    $theme_json_path = wp_get_theme()->get_file_path('theme.json');
    if (!file_exists($theme_json_path)) return [];
    
    $theme_data = json_decode(file_get_contents($theme_json_path), true);
    // 返回自定义调色板，若使用默认调色板则将custom改为default
    return $theme_data['settings']['color']['palette']['custom'] ?? [];
}

步骤2：在NextJS中获取并生成样式 #

在文章页面的getStaticProps或getServerSideProps中请求接口，再动态生成CSS规则：

export async function getStaticProps({ params }) {
    // 获取文章数据
    const postRes = await fetch(`${process.env.WP_API_URL}/wp/v2/posts/${params.id}`);
    const post = await postRes.json();
    
    // 获取调色板数据
    const paletteRes = await fetch(`${process.env.WP_API_URL}/wp/v2/gutenberg-palette`);
    const colorPalette = await paletteRes.json();

    return { props: { post, colorPalette } };
}

export default function BlogPost({ post, colorPalette }) {
    // 生成自定义颜色的CSS规则，兼容新旧类名
    const customColorStyles = colorPalette.map(color => `
        .has-${color.slug}-text-color {
            color: ${color.color};
        }
        .has-${color.slug}-background-color {
            background-color: ${color.color};
        }
        .has-${color.slug}-color {
            background-color: ${color.color};
        }
    `).join('');

    return (
        <>
            {/* 注入动态生成的样式 */}
            <style dangerouslySetInnerHTML={{ __html: customColorStyles }} />
            {/* 渲染文章内容 */}
            <div className="gutenberg-content" dangerouslySetInnerHTML={{ __html: post.content.rendered }} />
        </>
    );
}

方案2：手动同步调色板（适合静态场景） #

如果WP调色板很少变动，可直接将theme.json中的颜色复制到NextJS全局CSS：

/* styles/globals.css */
/* 对应WP后台自定义调色板 */
.has-purple-text-color { color: #6b46c1; }
.has-purple-background-color { background-color: #6b46c1; }
.has-orange-text-color { color: #ed8936; }
.has-orange-background-color { background-color: #ed8936; }
/* 其他颜色类照此添加 */

同时确保@aamodtgroup/gutenberg-styles基础样式已在_app.js中导入：

// pages/_app.js
import '@aamodtgroup/gutenberg-styles/css/gutenberg-styles.css';
import '../styles/globals.css';

export default function App({ Component, pageProps }) {
    return <Component {...pageProps} />;
}

额外注意事项 #

• Gutenberg颜色类命名规则：文本颜色为has-{slug}-text-color，背景色为has-{slug}-background-color，旧版可能用has-{slug}-color作为背景色类，需同时覆盖。
• 动态生成的样式要放在内容渲染之前，确保样式优先加载。
• 若使用CSS Modules，需用:global()包裹颜色类避免模块化处理：

:global(.has-purple-text-color) {
    color: #6b46c1;
}

内容的提问来源于stack exchange，提问作者Eleonora M.