第 11 章 古腾堡项目、区块和自定义区块类型 古腾堡项目、块和自定义块类型
本作品已使用人工智能进行翻译。欢迎您提供反馈和意见:translation-feedback@oreilly.com
在 2017 年 1 月提出新的 WordPress 编辑器时,马特-穆伦维格(Matt Mullenweg)写道:
编辑器将努力创造一种全新的页面和帖子构建体验,让撰写内容丰富的帖子变得毫不费力,并通过 "区块 "轻松实现今天可能需要简码、自定义 HTML 或 "神秘肉 "嵌入发现的功能。
不到两年后,WordPress 5.0 版本中加入了块编辑器(又名古腾堡编辑器) ,带来了编辑帖子的新方式和开发 WordPress 体验的新方法。
备注
最初构建块编辑器的项目代号为 "古腾堡"。我们现在更喜欢使用块编辑器或简单的WordPress 编辑器,但你遇到的许多人和文章都会将编辑器本身称为古腾堡。
Gutenberg 团队编写了《区块编辑器手册》(Block Editor Handbook ),以帮助用户和开发人员快速掌握 Gutenberg 的使用方法。块编辑器手册》是一份严谨、精心撰写、不断发展的文档,你应该读一读。比如,现在就去读一读,然后再回来。我们稍后会参考手册中的具体章节。
在本章中,我们将简要介绍程序块编辑器的一般功能,构建一个最小程序块作为起点,然后深入探讨与应用程序开发最相关的功能。
区块编辑器主要用 JavaScript 构建(使用 UI),并作为 Node.js 项目管理。 虽然 Gutenberg 手册会帮你编写区块代码,但可能很难分清示例代码中哪些部分是 JavaScript、React 或 Gutenberg。了解各种技术如何协同工作将有助于您扩展 WordPress。我们已尽力在示例中说明代码的来源。
WordPress 编辑器
当前的 WordPress 编辑器 是围绕块单元构建的。这些块代表段落、标题、列表、图片和更复杂的组件,它们被放置在一个系列中。有些块,如组块和列块,可以嵌套其他块。你可以在编辑器中拖放块来重新排序(见图 11-1)。
图 11-1. WordPress 块编辑器
点击用户界面上的 "+",或在编辑器空白处输入/ ,然后输入段落块名称,即可添加段落块。在段落块中按回车键可创建一个新的段落块。当你在空白区块中输入某些基于 Markdown 的字符时,某些区块会自动出现。*字符将启动一个无序列表。##字符将启动二级标题。1
一次只能编辑一个图块。点击一个区块可使其成为焦点,并切换到编辑器视图。在焦点区块中,右侧边栏的 "区块 "选项卡包含该区块的特定设置。点击另一个区块或编辑器的空白区域,焦点区块就会进入前端视图。
WordPress 编辑器尽可能与前台相仿。有些区块会使用占位符或略有不同的样式,以方便编辑,但开发人员应尽可能使其区块的编辑器视图与前台视图相似。
Become an O’Reilly member and get unlimited access to this title plus top books and audiobooks from O’Reilly and nearly 200 top publishers, thousands of courses curated by job role, 150+ live events each month,
and much more.
Read now
Unlock full access