关于如何开始为 Gutenberg 项目贡献设计指南。

有关消费或维护 WordPress Design System 包的指导,
请参阅 使用 WordPress Design System 包。

讨论

Make WordPress Design 博客是获取 WordPress 设计团队最新信息的主要场所:包括公告、产品目标、会议记录、会议议程等。

设计的实时讨论在 Make WordPress Slack(需要注册)的 #design 频道中进行。设计团队的每周会议于周三 UTC 时间 19:00 举行。

设计师如何做出贡献?

Gutenberg 项目使用 GitHub 管理代码和跟踪问题。主仓库位于:https://github.com/WordPress/gutenberg。

如果您想参与设计或前端工作,欢迎对标记为 Needs Design 或 Needs Design Feedback 的问题做出贡献。我们需要您深思熟虑的回复、模型图、动画演示、草图和涂鸦。提出的更改最好是对先前工作的最小化且具体的迭代,以便我们进行比较。

WordPress 设计团队使用 Figma 进行协作和分享工作。如果您想做出贡献,请加入 Slack 中的 #design channel,并请团队为您设置一个免费的 Figma 账户。这将使您可以访问用于 WordPress 的有用组件库。

原则

本节概述了编辑器界面的设计原则和模式——以解释设计背景,告知未来的改进,并帮助人们设计出优秀的区块。

Gutenberg Logo

Gutenberg 标志由 Cristel Rossignol 制作,并根据 GPL 许可证发布。下载 SVG 标志。

Gutenberg 的目标

Gutenberg 的总体目标是提供一种文章和页面构建体验,使得创建丰富的布局变得容易。区块编辑器是根据这种处理内容的方法论推出的第一个产品。

摘自启动帖子:

编辑器将致力于创造一种新的页面和文章构建体验,使撰写丰富文章毫不费力,并通过“区块”简化今天可能需要短代码、自定义 HTML 或“神秘肉”嵌入发现才能完成的工作。

我们可以从中提取几个关键原则:

  • 撰写丰富的文章是 WordPress 的关键优势。
  • 区块将在单一界面下统一功能和交互类型。 用户不应不得不编写短代码、自定义 HTML 或粘贴 URL 来嵌入。用户只需学习区块的工作原理即可使用其所有功能。
  • 让核心功能更易于发现,减少难以找到的“Mystery meat”。WordPress 支持大量区块和 30+ 种嵌入。让我们提高它们的可见性。

为什么

WordPress 与其他系统的一个不同之处在于,它允许用户创建尽可能丰富的文章布局——只要他们懂 HTML 和 CSS 并构建自定义主题。

Gutenberg 重塑了编辑器,使其成为一个工具,让用户只需几次点击就能写出丰富的文章并构建漂亮的布局——无需技术知识。WordPress 将成为一个强大且灵活的内容工具,人人皆可访问。

愿景

Gutenberg 希望使撰写富内容变得更加容易。这意味着确保良好的默认设置,将高级布局选项捆绑到区块中,并使最重要的操作立即可用。使用 WordPress 创作内容应该对任何人都是可及的。

WordPress 网站上的所有内容都变成一个区块: 文本、图像、画廊、小部件、短代码,甚至是由插件或其他来源添加的自定义 HTML 片段。用户只需要学习一个界面——区块界面。

所有区块生而平等。 它们都存在于同一个插入器界面中。最近使用、搜索、标签页和分组确保了最常用的区块触手可及。

拖放是次要的。 为了更高的无障碍性和平台兼容性,拖放交互被用作显式操作(如点击、Tab 键和空格键)之上的附加增强功能。

占位符是关键。 如果一个区块可以有中性占位符状态,那么它应该有。图像占位符区块显示打开媒体库的按钮,文本占位符区块显示写作提示。通过采用占位符,我们可以预定义可编辑的布局,因此所有用户要做的就是填空。

直接操纵很直观。 区块界面允许用户在页面上直接操纵内容。插件和主题作者将通过构建自己的自定义区块来支持和扩展这一体验。

定制不应该需要进行代码编辑。 传统上,定制需要复杂的标记语言,而复杂的标记语言很容易出错。有了 Gutenberg,定制变得更直观——也更安全。开发者能够提供直接渲染布局部分(例如三列功能网格)的自定义区块,并明确指定用户可以直接编辑什么。这意味着用户可以更新文本、交换图像、减少列数,而无需询问开发者或担心破坏东西。