通过 EditorPlus WordPress 插件控制块设计

已发表: 2020-06-24

上周，当我对他的 Gutenberg Forms 项目的审查进行最后编辑时，Munir Kamal 正在准备推出另一种用于块编辑器的 WordPress 插件。 这个叫做EditorPlus，它将为块创建一个设计系统。 Kamal 和他的团队悄悄地完成了 1.0 版的收尾工作，并在几天后在 WordPress 插件库中发布了该插件。

与许多其他创建自定义块以实现特定设计结果的插件不同，EditorPlus 为用户提供了使用他们手头的内容自定义页面的灵活性。 它为 WordPress 的每个现有块添加了一系列设计选项。 在前端，它通过仅动态输出该页面所需的 CSS 来留下一个轻量级的足迹。

也许这个插件现在最好的事情是它为许多与设计相关的功能奠定了基础，这些功能可能会在古腾堡找到一个永久的家，并最终成为 WordPress 的核心。 Gutenberg 团队可以借用想法、迭代和改进它们。 我们已经在 Gutenberg 8.3 中看到了实验性的填充控制领域。 开发团队在未来进行额外的设计控制是有道理的。 这些控件首先在第三方插件中推出的好处是，团队可以看到用户对它们的反应，并在做出任何承诺之前了解他们是否会直接在古腾堡工作。

对于那些喜欢在不接触代码的情况下拥有大量设计自由的人来说，EditorPlus 不乏好东西。 本质上，该插件是一个 CSS 编辑器，无需了解 CSS。 它通过块选项为最终用户提供最需要的 CSS 功能选项。 对于那些喜欢修补设计和强大到足以创建独特布局而不会使前端网站臃肿的人来说，这是一个游乐场。

EditorPlus 的工作原理

通过 EditorPlus 插件编辑图库块的背景和填充。
编辑画廊块的背景和填充。

激活 EditorPlus 插件后，最终用户可以通过前往帖子或页面编辑器立即开始使用其选项。 插入块后，插件会在块选项面板下提供以下八个选项卡（每个选项卡前面都有一个+符号）：

  • 边界
  • 盒子阴影
  • 浆纱
  • 背景
  • 利润
  • 填充
  • 边界半径
  • 附加功能

这些选项卡目前仅针对核心 WordPress 块而不是第三方插件块显示。 除了 Extras 选项卡，每个选项卡都对应其 CSS 对应项。 Extras 选项卡提供了一个更高级的“显示”选项，它允许用户更改块环绕元素在 CSS 中的display值。 此选项最好留给更高级的用户。 它还提供了一个过渡选项，可以很好地与悬停样式配合使用。

每个块选项选项卡还具有神秘的“R”和“H”按钮。 “R”按钮允许用户启用响应选项，这意味着他们可以根据桌面、平板电脑和移动屏幕更改块样式。 “H”按钮允许用户根据鼠标悬停状态更改设计。

通过 EditorPlus 插件编辑 Pullquote 块的设计选项。
在悬停时向 Pullquote 块添加阴影。

该插件在一点点空间中包含了很多选项。 所有新的设计标签一开始都会让人感到有点不知所措。 但是，只要稍加使用，就很容易获得一些肌肉记忆并快速爆发出自定义布局。

每个插件的选项都相当简单。 而且，当它们不是时，您可以通过块编辑器获得即时反馈的好处。

对于某些用户来说，有一些领域可能会出现问题，这取决于他们的主题如何设计某些块。 例如，尺寸选项卡下的宽度设置可能并不总是有效。 一些主题会为块添加最大宽度，无论大小如何，这都会限制整体宽度。 可以通过插件否决这一点，但 Kamal 在 1.0 版中选择不这样做。

小心边距。 根据主题设计，它可能会使用左右边距来放置内容。 即使只设置了上边距或下边距，插件也会自动为左右边距输出0 。 这可能会破坏某些主题的内容布局。

我在使用插件时遇到的一个问题是我的活动主题的样式通常会推翻插件的样式。 例如，默认的 Twenty Twenty 主题在其 CSS 中定位p.has-background以添加自定义填充。 因此，它以更高的特异性推翻了 EditorPlus 插件的 CSS。 这个问题是意料之中的，插件开发人员以“重要”复选框的形式为每个设计选项添加了一个解决方案。 如果用户勾选此框，它会在输出的样式规则中添加!important ，这将允许它否决主题样式。 这不是一个 100% 万无一失的解决方案。 您的里程可能会有所不同，具体取决于主题，但它应该适用于大多数用例。

我不喜欢 UI 中重要的复选框的想法。 这不是用户应该担心的事情。 然而，在这个世界的现实中，主题和插件没有真正的方式来传达哪些设计规则比其他规则更重要。 尽管不希望将其包含在 UI 中，但将其包含在内是一个明智的决定。 否则，太多主题的样式规则会覆盖插件的 CSS。

最后的想法

对于 1.0 版本，EditorPlus 有了一个良好的开端。 在我的测试中，我发现了一些缺陷。 普通用户的任何问题都可能以主题冲突的形式出现，这些冲突很可能是围绕使用高特异性或!important在他们的 CSS 中的主题。

Kamal 在插件的网页上明确表示，该插件还有更多功能。 我不确定他的想法是什么，但我期待看到它们。 我希望看到与文本相关的块（例如标题和段落）的文本阴影选项。 也很高兴看到 Gallery 块中的图像的一些设计选项，而不仅仅是包装元素。

是否应该使用 EditorPlus 取决于您是否需要额外的设计控件。 EditorPlus 面向那些需要更类似于轻量级页面构建器但又想坚持使用原生 WordPress 的人。 这个插件很好地展示了可能性，并且很好地表明了有朝一日可能会出现在 WordPress 中的潜在设计选项。