WordPress 古登堡(Gutenberg)编辑器体验

12月6日这天 WordPress 5.0 发布,其中最大的改变在于默认自带的 Gutenberg 编辑器,旧编辑器目前以插件的形式存在,将在2021年停止更新。老实说,一开始接触到 Gutenberg 的时候对此很难受,之前对传统编辑器进行了很多改造让我十分满意,我完全不明白为什么要新出这么个反人类的东西,但随着接触时间的增加,开始改变原先的印象,于是有了这篇文章。

古登堡的最大改变在于万物皆可为块,但就目前为止最直观的感受而言,大多数块的功能是传统编辑器都能轻易完成的,而引语、引文、封面、栏目、画廊等块的功能是新加的,除了对写作方式带来极大的改变之外,对于很多人来说并没有带来更深层次的改变。

实际上对于古登堡编辑器,更值得期待的是它的未来,因为它的底层设计就是让块变得可维护、可扩展,从而让开发者能够大有所为。比如想要开发一个 TOC(Table of content)展示文章结构,并以灵活的方式进行展现,在以前是根本难以想象的,而现在这一切却很轻松(但显然目前还没有发展处完整的生态,甚至增强旧编辑器的许多插件处于失效状态)。

说起古登堡编辑器的优点,就不得不和传统编辑器进行比较。传统编辑器完全是以 HTML 为基础的,所以使用传统编辑器写文章,实际上就是在直接的使用 HTML,只是通过一些手段让你的编辑过程是所见即所得的。

对于熟悉 HTML 和 CSS 样式的人来说,它可以使用传统编辑器对内容和样式进行及其细微的调整,当然绝大多数人并不会选择使用 HTML 直接编辑文章,因为它太原始而使用费力,可读性和可维护性很差。

而古登堡则抽象出了块,这个块的概念是以用户角度的常用样式组合而抽象出来的。做个形象的比喻,你想要制作一份个人简历,传统编辑器是让你自己设计这一切,而古登堡编辑器则类似于你从网上下载一个个人简历模版,自己填充内容。

得出结论,古登堡能做的传统编辑器都能达到同样的效果,但是为什么要使用古登堡编辑器,那是因为它让内容和样式进行了更深层次的分离,从而让一般用户不需要了解任何前端技术就能设计出更加优美、灵活的页面。

说白了,技术的发展方向一直都是傻瓜化,让人们能够用最少的成本去发挥自己最大的创意!我很看好古登堡编辑器的后续发展。

常用用法

用鼠标选择块对于习惯于纯键盘操作的使用者来说是很不悦的一件事情,我们可以使用 Shift+Alt+H 查看常用快捷键,我们输入内容默认使用的是段落区块,而当我们需要插入其他区块的时候,可以按 /,就会出来窗口让我们快捷的选择,比如输入 /代码 然后回车,我们就能插入一个代码区块。

代码高亮

古登堡编辑器的代码区块,插入的代码并没有高亮也没什么样式,高亮功能还是需要自己实现,我对于 PHP 语言是不熟悉的,所以在主题中引入一个 js,判断当前页面是否存在代码块,如果存在就动态加载 highlightjs 用于高亮代码。

highlightjs 的自动判断编程语言功能太鸡肋了,因为根本不准只能说比没有强一点点,我们可以在区块的左边选项栏中–高级–额外的css类中自己标注是什么语言。

提示框

古登堡编辑器可以对段落设定颜色和背景颜色,所以我们可以用不同的背景颜色标注不同的信息,比如:

注意:这条信息是注意

警告:这条信息是警告

成功:这条信息是成功

提示:这条信息是提示

可以根据自己的使用习惯,标注不同情景的信息,我觉得这是很不错的,尽其所能的利用编辑器原有的功能。

吐槽

Gutenberg 的中文翻译基本完善,但是编辑器表格功能的列和行搞反了,所以对于目前的翻译来说,列是纵列,行是横列,一开始使用的时候我是蒙圈的。

另外对于古登堡编辑器最先做适配的两款官方年度主题 Twnentwseventeen、Twentynineteen,对于段落展现的颜色设定竟然是不同的,这种编辑器和主题的耦合除非是使用者自定义的,否则我认为这是一种设计缺陷。

发表评论

电子邮件地址不会被公开。 必填项已用*标注