带有反应的无头 WordPress - 后端和前端的样式古腾堡

Posted

技术标签:

【中文标题】带有反应的无头 WordPress - 后端和前端的样式古腾堡【英文标题】:headless WordPress with react - styles in back and front-end Gutenberg 【发布时间】:2020-09-05 08:04:05 【问题描述】:

我想建立一个无头 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
,

所以我用JSON发送has-text-colorhas-accent-color等类,但我不想前后写两次css

是否有任何解决方案可以让一个 css 对两者都适用?

【问题讨论】:

我刚刚遇到了同样的问题。你找到解决办法了吗? 您尝试过 WordPress 主题中的add_editor_style 功能吗? developer.wordpress.org/reference/functions/add_editor_style @PedroNetto 不,我们没有找到任何解决方案并放弃了 WordPress + React 连接。我们仍将使用 React 构建前端,但目前我们正在寻找后端的最佳解决方案 @gael 这个解决方案不适合块编辑器,谢谢! 我迟到了,但目前正在开发一个无头 WordPress + vuejs 网站,我面临同样的问题。您是否考虑过在古腾堡保存方法中保存内联样式?我正在考虑布局样式,然后才将样式添加到前端应用程序,但由于目的是分离后端和前端,我被减轻了,而这根本不是这样做的。 【参考方案1】:

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

    根据官方规范开发块,作为正常流程的一部分生成块的前端样式表 将该样式表拉入我的 React 应用程序* 在 React 应用程序中,通过 REST API 获取 WP 内容(但首先公开 Gutenberg 块,请参阅 https://gist.github.com/brisa-pedronetto/15aa9c7a855eccf78c717a2491372074) 将 Gutenberg 块重新创建为 React 组件(也许已经有一个包可以很好地做到这一点?) 在 React 中使用 Gutenberg 块名称作为类名(因为这些名称首先在 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 解耦?

也许这个解决方案更适合 s-s-r 应用,因为您需要拉取外部样式表。

无论如何,希望这可以让更多人考虑解决这种安排!

【讨论】:

以上是关于带有反应的无头 WordPress - 后端和前端的样式古腾堡的主要内容,如果未能解决你的问题,请参考以下文章

分离 graphql/relay 后端和前端

试图让一个无头 WordPress 在纱线启动命令上进行热重载

带有JavaScript后端和前端的多人游戏。什么是最佳做法?

如何将 Docusign 的电子签名 API 与 .NET 后端和 Angular + Devextreme 前端集成?

前端后端和全栈到底不该学什么

带有反应前端的播放框架java后端不返回正确的http响应