使用 WordPress 块编辑器构建特色框

又是新的一天,又是对那个难以捉摸的块插件的追逐,它会给我的生活带来一点快乐.今天的实验来自 Sumaiya Siddika 的 Feature Box 插件.这是一个简单的块,允许最终用户上传图像并向偏移框添加一些内容.

插件的输出是网络上的典型模式.像往常一样,我很高兴看到插件作者尝试将这些功能带给 WordPress 用户.我想看到更多,尤其是来自第一次插件贡献者.

我能够快速启动并运行块,添加我的自定义内容.以下是输入我的内容并对其进行自定义后块的样子.我设想自己成为这次测试的食谱博主.

插入和修改功能框块.

在技术层面上,该插件运行良好.我没有遇到任何错误.一切都很容易定制.但是,这从来都不是理想的用户体验.

我立即注意到的第一件事是图像上传发生在块选项侧栏中.核心 WordPress 块在工具栏中有一个专用按钮,用于添加图像和其他媒体.我还发现自己想要更直接地控制单个元素.如何更改标题字体大小?轮廓和纯色等典型按钮样式在哪里?如何插入其他块,如列表?

这些事情都不可能发生.与许多其他块一样,开发人员创建了一个具有特定参数的系统,用户无法移出它们.有时这种刚性是有意义的,例如在为客户构建自定义块时.然而,通常情况下,公开发布的插件应该更加开放.

这个严格控制的块反映了过去 WordPress 的工作方式.它通常不灵活,让用户只能选择开发人员认为最适合他们网站的主题和插件.

块系统即将抛弃这些过于僵化的概念,并赋予用户对其内容的控制权.插件和主题的工作是定义用户操作的框架.他们制定了一些规则来或多或少地防止东西被破坏,但用户必须把自己绑在驾驶座上.他们的目的地是他们自己的.

如果用户可以控制框中的所有内容,则该块会更加全面.理想情况下,他们可以将他们想要的任何块放入"内容"中.Feature Box 块的区域.设计也会更好地匹配他们的主题.

几周前,我写了一篇题为你可能不需要那个块的帖子.前提是用户可以使用当前编辑器重新创建一些块,并且主题可以通过提供模式使这更容易.

我知道如果没有至少一点自定义代码,就不可能复制这个特定的块.WordPress 的编辑器没有偏移块位置的功能.

主题作者可以轻松复制此功能.通常,我会创建一个自定义模式,并完成所有现有的部分.但是,我想用自定义块样式来解决这个问题.这将允许最终用户从侧边栏中选择内容偏移量,并在需要时进行切换.

注意:对于那些希望学习如何创建自定义块样式的人,Carolina Nymark 的教程是最好的资源.

Cover 块是一个理想的候选者.因为它有一个现有的"内部包装器".元素,这意味着我可以用 CSS 定位它并移动它.下面是我创建的Offset Left样式的截图:

Offset Left Cover 块样式.

我只是简单地复制了代码并更改了一些值,然后立即创建了 Offset Right 样式.该代码可作为 GitHub Gist 获得.这是一个简单的概念验证,而不是抛光的产品.对此有多种方法,并且有几个 Cover 块选项未处理.主题作者可以随意获取代码并运行.

这些块样式看起来好多了,因为它们符合我的主题.从间距到边框半径再到按钮,一切都看起来应该如此.

最大的胜利是我对内容框的每个方面都拥有设计控制权.我可以选择我想要的按钮样式.我可以改变我的字体大小.默认间距符合我的主题.

我在使用块样式方法时遇到的问题是允许用户控制内容框的背景颜色.Feature Box 插件在这里的用户体验类别中获胜,因为它有一个选项.我创建的块样式继承了 Cover 块父项的背景.如何改变它可能不是很明显.

另一个"问题"块样式的不同之处在于它不处理 Cover 块的宽对齐和完全对齐.那是因为我没有进行那么远的实验,只是复制了插件的布局.我会把它留给主题设计师来修补.有很多可能性可以探索; 不要等我提供所有想法.

我在这篇文章和类似文章中的目标是展示我作为用户和开发人员将如何处理这些事情.作为用户,我希望在所有事情上都具有灵活性.作为开发人员,我想提供我作为用户想要的解决方案.

我还希望看到插件和主题作者在构建块、模式、样式等时超越他们最初的用例.打好基础.然后,通过考虑用户可能想要自定义您构建的内容的所有方式来扩展最初的想法.

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