如何在 wordpress 中同时设置 blockeditor 和前端的样式?

How to style blockeditor and frontend together in wordpress?

在开发主题时,我从来没有真正关心过 WordPress 编辑器是否与前端看起来相似。随着 5.9 中完整站点编辑的实施,我想改变这一点,并在块编辑器中看到一些更接近前端外观的东西。

你把不同的风格放在哪里?如果我将我的完整前端 css 也加载到后端,它会搞砸很多事情。

示例:

我认为方向很明确 ;) 你如何处理样式,对此有什么有效的解决方案?

感谢提示、经验、链接或任何可能有助于消除我的困惑的东西。

干杯, Piit

经过数周的搜索,现在我的方法是:

  • 网站背景、字体类型和颜色的一般样式由 theme.json 处理。
  • 页脚、cookienotice、页眉的样式以及我不需要加载到编辑器的所有内容都在正常加载 style.css。
  • 我想要两边的样式,我放入一个单独的 editor-style。css 并将其加载到 functions.php 到前面和 back-end。为了不 运行 遇到通用 wordpress 界面的问题,我总是直接处理这些块。因此,我不只是在 css 中写 table,而是写 .wp-block-table table.
  • 之前我大量使用 ACF 插件来创建自定义块。 (非常强大,但在编辑器中看起来很杂乱)多亏了新的块模式功能,我可以非常容易地替换几乎所有的 ACF 块。

让编辑器看起来或多或少与最终网站完全一样,这是一个非常小的额外工作量,而且非常迷人。