以下内容是 Gutenberg 开发过去几年中提出的一系列问题。如果您有任何希望在此得到解答并收录的问题,只需在 GitHub 上提交一个 issue即可。我们很乐意有机会回答并提供澄清那些我们可能未曾想到要回答的问题。若要回顾历史,请参阅 Matt 于 2018 年 11 月的文章 WordPress 5.0:Gutenberg 常见问题解答。
Gutenberg 项目
什么是 Gutenberg?
“Gutenberg”是创建 WordPress 新编辑器体验的项目名称——贡献者自 2017 年 1 月起一直在开发它,这是近年来对 WordPress 最重要的变更之一。它是基于使用“区块(blocks)”来撰写和设计帖子和页面的理念构建的。这将成为未来改进 WordPress 的基础,包括将区块用作不仅设计帖子和页面,而且设计整个站点的方式。总体目标是简化 WordPress 的首次用户体验——针对那些撰写、编辑、发布和设计网页的用户。编辑器体验旨在为用户提供更好的视觉表示,让他们在点击发布时看到帖子或页面的最终效果。最初,这一目标如下:
编辑器将致力于创建新的页面和帖子构建体验,使撰写丰富内容的帖子变得 effortless(毫不费力),并提供“区块”来简化今天可能需要短代码、自定义 HTML 或“神秘肉块”嵌入发现的操作。
关键要点包括以下几点:
- 创作排版丰富的帖子是 WordPress 的关键优势。
- 通过拥抱区块作为交互范式,我们可以将多个不同的界面统一为一个。与其学习如何编写短代码和自定义 HTML,或粘贴 URL 以嵌入媒体,不如采用一种通用的、可靠的流程来插入任何类型的内容。
- “神秘肉块(Mystery meat)”指的是软件中的隐藏功能,即您需要自行发现的功能。WordPress 已经支持大量区块和 30 多个嵌入项,因此让我们将它们展示出来。
Gutenberg 在 GitHub 上由 WordPress 组织开发。区块编辑器自 5.0 版本起已包含在核心 WordPress 中。如果您想测试 Gutenberg 项目的 upcoming features(即将推出的功能),它 可在插件仓库中获得。
长期路线图有哪些内容?
Gutenberg 有四个阶段,您可以在 官方 WordPress 路线图上查看。截至撰写本文时,我们正处于第二阶段:
- 更轻松的编辑——自 5.0 版本起已在 WordPress 中可用,并持续改进。
- 自定义——全站编辑、区块模式、区块目录、基于区块的主题。
- 协作——一种更直观的多人协作内容创作方式。
- 多语言——多语言站点的核心实现。
Gutenberg 是什么时候开始的?
编辑器焦点始于 2017 年初,前三个月用于设计、规划、原型制作和测试原型,以帮助我们了解如何着手这个项目。第一个插件于 2017 年 6 月在 WordCamp Europe 期间发布。
Gutenberg 是什么时候合并到 WordPress 的?
Gutenberg 首次于 2018 年 12 月合并到 WordPress 5.0中。请参阅 WordPress 中的版本页面,以获取完整的 Gutenberg 插件版本合并到 WordPress 核心发布的列表。
WordPress 已经是世界上最流行的发布平台了。为什么要改变编辑器?
编辑器是 WordPress 日常使用中发生大部分活动的位置,而且它是一个我们可以打磨和完善区块体验的封闭环境。此外,作为一个开源项目,我们认为 WordPress 必须不断创新,并继续努力使核心体验对所有用户都直观且令人愉快。作为一个社区项目,Gutenberg 有可能做到这一点,我们很高兴能共同追求这一目标。如果您想测试、贡献或提供反馈,欢迎您在 GitHub 上分享您的发现。
编辑体验
什么是“区块”,为什么我们要使用它们?
经典的 WordPress 编辑器是一个开放文本窗口——它一直是一个绝佳的写作空白画布,但当涉及使用图像、多媒体、来自社交媒体的嵌入内容、调查和其他元素构建帖子和页面时,它需要混合不同的方法,而这些方法并不总是直观的:
- 媒体库/HTML 用于图像、多媒体和已批准的文件。
- 粘贴链接用于嵌入内容。
- 短代码用于插件提供的专用资源。
- 特色图像用于帖子或页面顶部的图像。
- 摘要用于副标题。
- 小部件用于页面侧边栏的内容。
当我们思考这些用途以及如何使它们明显且一致时,我们开始拥抱“区块”的概念。上述所有项目都可以是区块:易于搜索和理解,并且可以动态地在页面上移动。区块概念非常强大,如果设计得当,可以提供出色的编辑和发布体验。最终,区块的想法是在 WordPress 之间创建一种新的通用语言,一种将用户与插件连接起来的新方式,并替换一些旧的内容类型——例如短代码和小部件——通常只有熟悉 WordPress 的怪癖才能理解。
写作体验如何?
我们使用 Gutenberg 的目标不仅仅是创建无缝的帖子和页面构建体验。我们还希望确保它提供无缝的写作体验。要亲自测试这一点,前往此演示并尝试一下!
Gutenberg 是建立在 TinyMCE 之上吗?
不。TinyMCE仅用于“经典”区块。
Gutenberg 有键盘快捷键吗?
是的。有很多!有一个帮助模态框显示所有可用的键盘快捷键。
您可以看到整个列表,只需进入新编辑器的右上角菜单并点击“键盘快捷键”(或在 Linux/Windows 上使用 Shift+Alt+H)。
以下是简要动画,说明如何查找和使用键盘快捷键:

Gutenberg 支持列吗?
是的,Gutenberg 中有一个列区块。
Gutenberg 支持嵌套区块吗?
是的,它得到支持。您可以有多个级别的嵌套——区块内的区块内的区块。有关更多信息,请参阅 嵌套区块教程。
拖放是否可用于重新排列区块?
是的,您可以拖放区块以重新排列它们的顺序。
开发体验
如何制作自己的区块?
最好的起点是 创建区块教程。
Gutenberg 是否涉及在前端编辑帖子/页面?
不,我们主要将 Gutenberg 设计为帖子和页面编辑屏幕的替代品。话虽如此,前端编辑通常与看起来完全像前端的编辑器混淆。Gutenberg 将允许主题自定义单个区块并提供这些样式给编辑器。由于内容旨在分布在许多不同的体验中——从桌面和移动设备到全文馈送和联播文章平台——我们认为仅从一个前端体验创建或设计帖子并不理想。
鉴于 Gutenberg 是用 JavaScript 构建的,旧的元数据框(PHP)如何工作?
请参阅 元数据框教程,以了解如何使用元数据框与新区块编辑器一起使用。
插件如何扩展 Gutenberg UI?
我们要强调的主要扩展点是创建新区块。区块通过插件添加到区块编辑器中,请参阅 构建您的第一个区块教程以开始。
自定义帖子类型仍然支持吗?
确实如此。有多种方式可以让自定义帖子类型利用 Gutenberg。计划是允许它们指定支持的区块,并定义帖子的默认区块。目前尚未实现,但如果帖子类型禁用了内容字段,“高级”部分将填充页面底部。
样式
主题可以为区块设置样式吗?
是的。区块可以提供自己的样式,主题可以添加或覆盖这些样式,或者它们可以不提供任何样式并完全依赖主题提供的样式。
区块样式如何在前端和后端中工作?
区块能够提供基础结构 CSS 样式,主题可以在其上添加样式。某些区块(如分隔符 <hr/>)可能不需要任何前端样式,而其他区块(如图库)则需要一些。
其他功能,例如新的 宽屏 和 全屏宽 对齐选项,只是应用于提供该对齐功能的块的 CSS 类。我们正在研究主题如何参与此功能,例如使用 add_theme_support。
这目前仍在进行中,我们建议查阅 基于块的块主题文档 以了解更多。
什么是块变体?它们与块样式相同吗?
不,块变体 是单个基础块的版本,具有相似的功能,但在实现或设置(属性、InnerBlocks 等)方面略有不同。块变体对用户是透明的,一旦注册了块变体,它将作为新块出现。例如,embed 块注册不同的块变体以嵌入来自特定提供方的内容。
同时,块样式 允许您为现有块提供替代样式,它们通过向块的包装器添加 className 来工作。一旦块注册了块样式,其侧边栏中将出现块样式选择器,以便用户可以在不同的已注册样式中进行选择。
编辑器样式如何工作?
常规编辑器样式是可选的,并且在大多数情况下按原样工作。主题也可以使用以下钩子加载额外的样式表:
function gutenbergtheme_editor_styles() {
wp_enqueue_style( 'gutenbergtheme-blocks-style', get_template_directory_uri() . '/blocks.css');
}
add_action( 'enqueue_block_editor_assets', 'gutenbergtheme_editor_styles' );
参见: 编辑器样式
兼容性
Gutenberg 支持哪些浏览器?
Gutenberg 在现代浏览器中运行。
支持的浏览器列表可在 Make WordPress 手册中找到。“现代浏览器”通常指每个主要浏览器的 当前版本和前两个版本。
自 WordPress 5.8 以来,Gutenberg 不再支持任何版本的 Internet Explorer。
我应该担心 Gutenberg 会使我的插件过时吗?
Gutenberg 的目标不是让任何人失业。它是为了使 WordPress 进化,以便未来每个人都能有更多的业务可做。
除了启用丰富的帖子和页面构建体验外,一个元目标是 推动 WordPress 向前发展 作为一个平台。不仅通过现代化 UI,而且通过现代化基础架构。
我们意识到这是一个巨大的变化。我们也认为会有很多新的插件机会。WordPress 可能会附带一系列基本块,但将为高度定制的 premium 插件留出大量空间以增强现有块或添加新块到其中。
我可以为我的站点选择退出 Gutenberg 吗?
有一个“经典”块,它与当前编辑器几乎相同,只是以块的形式存在。
还有 Classic Editor 插件,它恢复了之前的编辑器,有关更多信息请查看该插件。WordPress Core 团队承诺支持 Classic Editor 插件 直到 2021 年 12 月。
Gutenberg 中的自定义 TinyMCE 按钮如何工作?
自定义 TinyMCE 按钮仍然在“经典”块中有效,这是您今天所知道的经典编辑器的块版本。
Gutenberg 带有一个新的通用插入器工具,它为您提供访问所有可用块的途径,可搜索、按最近性和类别排序。此插入器工具为每个向编辑器添加内容的插件提供了公平的竞争环境,并提供了一个学习如何使用它的单一界面。
短代码在 Gutenberg 中如何工作?
短代码继续像现在一样工作。
但是我们将块视为 [shortcode] 的进化。您不必输入代码,而是可以使用通用插入器托盘选择块,并获得更丰富的界面来配置块并预览它。我们建议人们最终将他们的短代码升级为块。
我应该将短代码移动到内容块吗?
我们认为应该这样做,原因包括但不限于:
- 块内置了视觉编辑,为构建您的站点创建了更丰富、动态的体验。
- 块只是 HTML,不会在前端保留浏览器不理解的内容。相比之下,如果您禁用提供短代码的插件,您最终会在前端看到奇怪的视觉效果(通常只是以纯文本显示短代码)。
- 随着块目录的推出,块将更容易被发现,而短代码则无法做到这一点,从而让更多人获得更多功能。
归根结底,块旨在在视觉上代表最终外观,并且随着 5.5 中块目录的推出,它们将成为用户发现和插入 WordPress 内容的预期方式。
杂项
Gutenberg 是否被设计为可访问?
可访问性不是事后考虑。Gutenberg 的每个方面目前都并非都可访问。您可以在此处查看已记录的 问题。我们理解 WordPress 是为所有人服务的,可访问性关乎包容性。这是我们的一项关键价值观。
如果您希望为 Gutenberg 的可访问性做出贡献,我们总是需要更多的人来测试和贡献。
数据是如何存储的?我看到过 HTML 注释。它们的目的是什么?
我们的方法——如 技术概述介绍 中所述——是以不破坏 WordPress 提供的内容的十多年的架构的方式增强现有的数据格式。换句话说,这优化了一种格式,优先考虑人类可读性(Web 的 HTML 文档)和易于在任何地方渲染,而不是机器方便的文件(post-meta 中的 JSON),后者主要有利于编辑上下文。
这也 赋予了我们灵活性,可以将那些本质上与内容流分离的块(如小部件或小型帖子类型元素的可重用部分)存储在其他地方,并仅保留它们的放置位置的令牌引用。
我们建议您查看 Gutenberg 关键概念 以了解更多关于此项目方面如何工作的信息。
如何在 PHP 或 JS 中将帖子内容解析回块?
在 JS 中:
var blocks = wp.blocks.parse( postContent );
在 PHP 中:
$blocks = parse_blocks( $post_content );