开始使用 WordPress Gutenberg 所需的一切

已发表: 2018-01-23

2018 年,WordPress 旨在现代化和简化 Gutenberg 的内容创建体验。 它的名字来自印刷机的创始人约翰内斯·古腾堡。 这被认为是 WordPress 用户体验和主题开发工作流程的最大变化之一。

什么是古腾堡?

我们大多数人都认为古腾堡只是一个新编辑,但不仅如此。 虽然编辑器现在是重点,但该项目最终将影响包括定制在内的整个发布体验。

到目前为止,编辑页面意味着调整其标题、正文和自定义字段。 有了古腾堡,这个逻辑完全改变了,它引入了块的概念。 块是通过 wp-admin 动态添加的独立、隔离和动态的用户界面组件。 我不会详细说明这一点,因为下面的视频会详细解释所有内容。

Matt Mullenweg Gutenberg 关于 2017 年世界现状的演讲

Gutenberg 已经作为插件提供,并将集成到计划于 2018 年 4 月推出的 WordPress 5.0 中。其背后的团队目前专注于后期编辑体验。 但从那时起,它将扩展他们的方法,包括模板创建、站点创建等。 为了使向 Gutenberg 的过渡更加顺畅,有一个名为 Classic Editor 的插件,它允许团队在进行迁移时使用当前的编辑器。

为什么古腾堡对我有好处,这对 WordPress 的未来意味着什么?

Gutenberg 无疑是一个重大变化,许多开发人员将不得不适应它。 但是,在我看来,这是 WordPress 经历过的最好的变化之一。 因为它使主题开发过程现代化,并通过更简洁的代码库、更好的维护和编辑使其更加模块化。 它提供了更高的可靠性,并且摆脱了旧的单片可破解方法。

通过使用块,它优化并简化了我们构建页面的所有方式(短代码、小部件、自定义 HTML、媒体、文本格式、嵌入和元框)。 正如马特在他的帖子中解释的那样:

  • 开发人员和代理商将能够创建交互式模板,客户可以轻松更新这些模板,而无需破坏或处理自定义帖子类型。
  • 插件开发人员将能够完全集成到 WordPress 的每个部分。 包括帖子、页面、自定义帖子类型和侧边栏,而无需破解 TinyMCE 或将其整个功能压缩在工具栏按钮后面。
  • 主题开发人员不需要捆绑大量插件或创建自己的页面构建器。 将有一种标准的、可移植的方式来为帖子创建丰富的布局,并在界面中引导人们完成设置。 不需要 20 步教程或长视频。
  • 核心开发人员将能够使用现代技术工作,而不必担心 15 年的向后兼容性。
  • 用户最终将能够创建他们用想象力构建的网站。 他们将能够在移动设备上做他们以前从未做过的事情。 他们再也不用看到简码了。 从 Word 粘贴的文本将被清理并立即自动转换为块。

演示和示例

在 WordCamp US 2017 的这次演讲中,Morten 解释了 WordPress 开发人员需要关注的内容以及 WordPress 将如何与 Gutenberg 一起转型。

Morten Rand-Hendriksen:古腾堡和明天的 WordPress

在这个截屏视频中,Human Made 演示了 Gutenberg 块的一系列高级实现。

如何开始

玩 Frontenberg ,这是 Gutenberg 编辑器的有限前端现场演示,它将帮助您熟悉 Gutenberg 编辑环境。

Frontenberg - 用于即时测试的登出古腾堡游乐场

阅读以下来自Gutenberg 背后的首席工程师之一Matias Ventura Bausero 的文章

古腾堡,或忒​​修斯之船——一个系统如何在不发生剧烈变化的情况下从根本上发展?

玩转这些 Sketch 符号并尝试设计您自己的自定义块。

Automattic/gutenberg-themes-sketch – gutenberg-themes-sketch – 一组帮助您设计块驱动的 WordPress 主题的 Sketch 文件

阅读wordpress.org 上的官方开发人员手册。 它干净,易于阅读,并且不断发展。 您还应该订阅他们的邮件列表以接收他们的更新。

简介——“古腾堡”是 2017 年 WordPress 编辑器焦点的代号。

深入研究 ReactJS,因为 Gutenberg 是建立在它之上的。

React – 用于构建用户界面的 JavaScript 库 – 用于构建用户界面的 JavaScript 库

查看这些由 WordPress 核心团队构建的Gutenberg 示例

WordPress/gutenberg-examples = gutenberg-examples – 使用块扩展 WordPress/Gutenberg 的示例

阅读Human Made(最好的 WP 开发机构之一)的这本详细的电子书

Gutenberg,新的 WordPress 编辑器(白皮书)——这份白皮书涵盖了实施和采用方面的主要挑战,以及关于企业现在如何行动的建议。

查看 Zac Gordon 的开发课程,他是一些最受欢迎的教育平台 FrontendMasters、Treehouse 和 Udemy 的教育家。

Zac Gordon 的古腾堡发展课程 – Gutenberg Courses

最后,安装这个零配置开发工具包,用于构建 Ahmad Awais 的 WordPress Gutenberg 块插件

ahmadawais/create-guten-block – 用于构建 WordPress Gutenberg 块的零配置 #0CJS 开发人员工具包。

到此为止,非常感谢您阅读这篇文章,如果您有任何想法、问题或建议,请发表评论。

如果您是希望提升网站性能、安全性和托管体验的代理机构、企业或 WordPress 开发人员,请与我们的工程团队联系。 我们托管的 WordPress 托管平台被认为是业内最好的平台之一,具有无与伦比的性能、可靠性和技术客户支持。

我们团队的使命是重新定义 WordPress 开发人员构建、托管和扩展其网站的方式,因此请保持联系并随时与我们交谈。