通过 EditorPlus WordPress 插件控制块设计

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

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

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

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

EditorPlus 的工作原理

编辑图库块的背景和填充.

激活 EditorPlus 插件后,最终用户可以通过转到帖子或页面编辑器立即开始使用其选项.插入块后,插件会在块选项面板下提供以下八个选项卡(每个选项卡前面都有一个 + 符号):

  • 边框
  • 框阴影
  • 大小调整
  • 背景
  • 边距
  • 填充
  • li>

  • 边界半径
  • 附加

这些选项卡目前仅针对核心 WordPress 块而不是第三方插件块显示.除了 Extras 选项卡之外,每个选项卡都对应于它的 CSS 对应项.附加选项卡提供了更高级的"显示"选项卡.选项,它允许用户在 CSS 中更改块包装元素的 display 值.此选项最好留给更高级的用户使用.它还提供了一个适合悬停样式的过渡选项.

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

在悬停时向 Pullquote 块添加阴影.

该插件在一点点空间中包含了很多选项.所有的新设计标签一开始都会让人觉得有些不知所措.不过,稍加使用,很容易获得一些肌肉记忆,并快速炸出自定义布局.

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

对于某些用户来说,有几个方面可能存在问题,这取决于他们的主题如何设计某些块.例如,"大小调整"选项卡下的宽度设置可能并不总是有效.某些主题会为块添加最大宽度,无论大小如何,这都会限制整体宽度.可以通过插件否决这一点,但 Kamal 在 1.0 版本中选择不这样做.

注意边距.根据主题设计,它可能使用左右边距来放置内容.即使只设置顶部或底部边距,插件也会自动为左右边距输出 0.这可能会破坏某些主题的内容布局.

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

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

最后的想法

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

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

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

0
订阅评论
提醒
0 评论
内联反馈
查看所有评论