css 无头WordPress与React-风格在后端和前端 gutenberg

ds97pgxw 于 2023-11-19 发布在 WordPress

关注(0)|答案(1)|浏览(175)

我想建立一个无头的WordPress + React网站。
我设法做了“非古腾堡”的东西（页眉，页脚等），它的工作都很好。
我的问题是文章的内容。我可以用JSON来设置它的HTML样式。如果我用react来写样式，那么它在前端看起来还可以。
但是，我应该把我的css为 gutenberg ，使它将工作在 gutenberg 编辑器在后端和前端以及？
我的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同时适用于两个CSS？

css

来源：https://stackoverflow.com/questions/61887968/headless-wordpress-with-react-styles-in-back-and-front-end-gutenberg

1条答案

按热度按时间

xwbd5t1u1#

我现在想到的工作流程（或变通方法？）是这样的：
1.根据官方规范开发块，该规范为块生成前端样式表，作为正常流的一部分
1.在我的React应用中拉取样式表 *
1.在React应用程序中，通过REST API获取WP内容（但首先暴露 gutenberg 块，参见https://gist.github.com/brisa-pedronetto/15aa9c7a855eccf78c717a2491372074）
1.重新创建 gutenberg 块作为React组件（也许有一个包已经做得很好了？）
1.使用 gutenberg 块名作为React中的className（因为这些名称首先被用作 gutenberg 中的类）
所以基本上一个块可以保存为这样的东西：

<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应用程序，因为你需要拉一个外部样式表。
无论如何，希望这可以达到更多的人思考解决这个安排！

展开查看全部

赞(0）回复(0）举报 2023-11-19

我来回答

css 无头WordPress与React-风格在后端和前端 gutenberg

1条答案

相关问题

热门标签

最新问答