css - 带有反应的 headless WordPress - 后端和前端 Gutenberg 的样式

Question

我想建立一个 headless 的 WordPress + React 网站。

我设法做“非古腾堡”的东西(页眉，页脚等)，它工作得很好。

我的问题是帖子内容。我可以在 JSON 中获得其 html 样式。
如果我在 react 中编写样式，那么它在前端看起来还不错。

但是我应该把我的古腾堡 css 放在哪里，这样它才能在后端和前端的古腾堡编辑器中工作？

我的 json 示例:

"content": {
"rendered": "\n<p class=\"has-text-color has-accent-color\">Some Random lorem ipsum in a paragraph</p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img src=\"http://bw.dev.local/wp-content/uploads/2020/05/Toronto.jpg\" alt=\"\" class=\"wp-image-13\" srcset=\"http://bw.dev.local/wp-content/uploads/2020/05/Toronto-1024x288.jpg 1024w, http://bw.dev.local/wp-content/uploads/2020/05/Toronto-300x84.jpg 300w, http://bw.dev.local/wp-content/uploads/2020/05/Toronto-768x216.jpg 768w, http://bw.dev.local/wp-content/uploads/2020/05/Toronto-1536x432.jpg 1536w, http://bw.dev.local/wp-content/uploads/2020/05/Toronto-1200x338.jpg 1200w, http://bw.dev.local/wp-content/uploads/2020/05/Toronto.jpg 1920w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" /></figure>\n",
"protected": false
},

所以我发送has-text-color , has-accent-color等带有JSON的类，但我不想前后写两次css

有没有一个CSS适用于两者的解决方案？

Answer 1

我现在想到的工作流程(或解决方法？)是这样的:

根据官方规范开发 block ，它为 block 生成前端样式表作为正常流程的一部分

在我的 React 应用程序中提取该样式表*

在 React 应用程序中，通过 REST API 获取 WP 内容(但首先公开 Gutenberg block ，请参阅 https://gist.github.com/brisa-pedronetto/15aa9c7a855eccf78c717a2491372074 )

将 Gutenberg block 重新创建为 React 组件(也许已经有一个包可以很好地做到这一点？)

在 React 中使用 Gutenberg block 名称作为类名(因为这些名称首先在 Gutenberg 中用作类)

所以基本上一个 block 可以保存为:

<div class="wp-block-myblocks-foo">Foo</div>

在 React 方面，它类似于:

export default function Foo({ fooContent }) => (
  <div 
    className="wp-block-myblocks-foo"
    dangerouslySetInnerHTML={{__html: fooContent}}>
  </div>
)

虽然样式表看起来像:

.wp-block-myblocks-foo {
  color: tomato;
}

* 也许该前端样式表可以在生成(或构建)过程中上传到 CDN 以进一步与 WP 解耦？
也许这个解决方案更适合 SSR 应用程序，因为您需要提取外部样式表。
无论如何，希望这可以让更多人思考这个安排的解决方案!