让 WordPress 块编辑器看起来像前端设计

我是一个 WordPress 用户，如果您和我一样，在编辑文章时总是会打开两个标签页：一个带有新的花哨的块编辑器，也就是 Gutenberg，另一个则是文章的预览，这样您就知道它在前端不会看起来很奇怪。

WordPress 主题的样式仅影响网站的前端，这并不奇怪。后端帖子编辑器通常看起来与前端结果完全不同。我们已经习惯了。但如果我说让 WordPress 编辑器几乎镜像前端外观是完全可能的呢？

这只需要一个自定义样式表。

震惊了？好吧，也许它并没有那么令人震惊，但至少可以为您节省一些时间。🙂

WordPress 为我们提供了一些关于这里可能性的提示。启动与 WordPress 捆绑在一起的默认 Twenty Twenty 主题，启动编辑器，它会显示一些简单的样式。

整个过程包括两个非常基本的更改

1. 在主题的 functions.php 文件中添加几行 PHP 代码，告诉编辑器您希望加载一个用于编辑器样式的自定义样式表
2. 即自定义样式表

好了，废话少说！让我们开始让 WordPress 编辑器看起来像前端吧，好吗？

步骤 1：打开 functions.php 文件

好吧，我撒了个小谎，再多说几句。如果您使用的是自己没有开发的 WordPress 主题，最好先设置一个 子主题，然后再对主主题进行任何更改。</pre-waffle>

启动您最喜欢的文本编辑器，并打开主题的 functions.php 文件，该文件通常位于主题文件夹的根目录中。让我们在文件末尾添加以下几行代码

// Gutenberg custom stylesheet
add_theme_support('editor-styles');
add_editor_style( 'editor-style.css' ); // make sure path reflects where the file is located

这段代码的作用是告诉 WordPress 支持使用自定义样式表与 Gutenberg 结合使用，然后指向该样式表（我们将其称为 editor-style.css）的位置。如果您想深入了解它，WordPress 有关于 add_theme_support 函数的详细文档。

步骤 2：CSS 技巧（看到我做了什么了吗？！）

现在我们进入了我们的核心领域：编写 CSS！

我们已经向主题添加了 editor-styles 支持，因此接下来要做的就是将 CSS 代码添加到我们在 functions.php 中定义的样式表中，以便我们的样式在 Gutenberg 中正确加载。

有数千个 WordPress 主题，因此我无法编写一个样式表，使其编辑器与每个主题完全一样。相反，我将向您展示一个基于我在 我的网站 上使用的主题的示例。这应该让您了解如何在您的网站上构建 stylesheet。我还将在最后包含一个模板，这应该可以帮助您入门。

好的，让我们创建一个名为 editor-style.css 的新文件，并将其放置在主题的根目录中（或者如果您正在自定义第三方主题，则将其放置在子主题中）。

为块编辑器编写 CSS 并不像使用标准 CSS 元素那样简单。例如，如果我们在编辑器样式表中使用以下代码，它不会将文本大小应用于文章中的 <h2> 元素。

h2 {
  font-size: 1.75em;
}

我们的样式表需要针对块编辑器块，而不是元素。这样，我们就可以知道格式尽可能准确。这意味着 <h2> 元素需要作用域到 .rich-text.block-editor-rich-text__editable 类才能设置样式。

h2.rich-text.block-editor-rich-text__editable {
  font-size: 1.75em;
}

我碰巧创建了一个基线 CSS 文件，它使用此模式设置常用块编辑器元素的样式。随时可以 在 GitHub 上获取它 并替换样式，使其与您的主题相匹配。

我可以在此处继续构建样式表，但我认为该模板让您了解了您需要在自己的样式表中填充的内容。一个好的起点是从您的前端样式表中复制元素，但您可能需要更改一些元素类，以便它们应用于块编辑器窗口。

如有疑问，请在浏览器的 DevTools 中尝试使用元素，以确定哪些类应用于哪些元素。上面链接的模板应该可以捕获大多数元素。

结果

首先，让我们看看没有自定义样式表时 WordPress 编辑器是什么样子

让我们将其与我的测试网站的前端进行比较

两者差别很大，对吧？在这里，我们仍然有一个简单的设计，但我到处都使用了渐变！还有一个自定义字体、按钮样式和一个块引用。即使容器也不是完全的方形边缘。

无论您喜欢与否，我想您都会同意，这与 默认的 Gutenberg 编辑器 UI 有很大不同。明白为什么我必须打开一个单独的标签页来预览我的文章了吗？

现在让我们加载我们的自定义样式并查看一下

看看！编辑器 UI 现在看起来与我的网站前端几乎完全一样。内容宽度、字体、颜色和各种元素都与前端相同。我甚至在文章标题后面添加了花哨的背景！

因此——不再需要在另一个标签页中进行预览。很酷，对吧？

---

让 WordPress 编辑器看起来像您的前端是一个很好的便利。当我编辑文章时，在标签页之间切换以查看文章在前端的样子会破坏我的状态，所以我更喜欢不这样做。

这两个简单的步骤也应该可以为您做到同样的事情！