G2 组件，从头开始重新构想 WordPress 组件

更新一些东西。

这是 Automattic 的首席设计师 Jon Quach 在将 G2 Components 项目集成到 Gutenberg 并最终集成到核心 WordPress 的路线图中的目标。 该项目是对制作块编辑器的部件的重新构想，是对组件系统的“从头开始”大修。 一次更新所有东西甚至很多东西都有破坏一切的风险。

“理想情况下，应该发生的是你应该以一种非常可控和有意识的方式只更新一些东西，”Quach 在帖子中写道。 他将城市逐段过渡比作太阳能，直到传统的发电厂可以关闭。 在移至下一部分之前，您转换一件、测试、发现问题并纠正它们。

这就是将 G2 Components 集成到 Gutenberg 的计划。

“G2 Components 是一个项目，它体现了为他人打造更好的用户界面和用户体验的理念，”Quach 说。 “目前，它被具体化为一个组件系统，旨在在 Gutenberg 和 WordPress 的上下文和环境中工作。”

目标是提供资源来改进 Gutenberg 项目的 UI。 组件应该使创建更新的 UI 变得更容易，而无需将代码拼凑在一起。 Quach 表示，组件系统的一致性和体验应该可以扩展，并在整个 WordPress 平台上产生连锁反应。 这也将扩展到第三方区块开发者。

“代码组件只是起点，”他说。 “我的最终目标是超越代码和影响力并提升设计 - 创建一个统一的设计系统，使人们能够并授权人们在 WordPress 的世界中制作具有凝聚力和功能丰富的 UI 体验。”

Quach 认为，平台已从采用类似方法中受益。 他提到 Google 的 Material Design 提升了 Android 平台并为公司的产品带来了凝聚力。

Gutenberg 团队已经开始将 G2 组件集成到项目中。 此集成以受控方式替换 WordPress 组件 (@wordpress/components)，不应破坏核心编辑器或第三方项目中的现有实现。 新组件将在它们准备就绪时进行交换。 “就像打开开关一样，”Quach 说。

以下视频是 Quach 在 YouTube 上发布的长达一小时的 G2 组件演练：

他经常在 G2 Components 博客上发布更新。 除此之外，他还深入探讨了他对该项目的设计思想。 他还几乎每天都在他的 Twitch 直播中谈论这个项目。

什么是组件？

组件是从按钮到切换到复选框的所有内容。 它们是组成块编辑器 UI 的标准化部分。 它们可供核心和第三方开发人员使用，以创建最终用户所看到和与之交互的内容。 但是，原始组件系统的构建方式存在问题。

“当前组件的构建并非考虑到系统，而是为了满足即时需求，”Quach 说。 “这个特殊的设计细节至关重要。 系统优先的方法更容易支持添加新功能，更重要的是，支持定制！”

新方法是为 WordPress 构建原生设计系统。 这样的系统将允许任何人在它之上构建并创造原生体验。

Quach 说，最简单的方法之一是从后端主题的角度来看——组件系统也有一个主题子系统。 “与将 CSS 编写为顶层的‘皮肤’的传统方法不同，UI 美学可以通过配置值进行调整——类似于如何使用wp-config.php文件中的定义来配置 WordPress，”他说。 “这种区别很重要，因为这些值直接进入样式系统，允许样式在正确的位置和正确的时间正确加载。 所有这些都不会影响当前环境的风格，更重要的是不受当前环境风格的影响。”

他回答了我关于为什么组件系统应该从头开始重建的问题。 这个想法是让组件在诸如 WordPress 管理员之类的环境中“正常工作”，例如确保 WordPress 主题样式表的存在不会仅仅通过加载而破坏组件。

“为什么要重新思考、重建和增强输入、按钮、模式、下拉菜单等？” 作为回应，Quach 反驳道。 “这样开发人员就不必这样做了。”

这对开发人员意味着什么？

尊重向后兼容性是 Quach 说他在设计 G2 Components 项目的架构时非常重视的事情。 他还表示，这是他提出的整合战略的一部分。

“我曾提到这个项目'体现了为他人提供更好的用户界面和用户体验的想法'，”他说。 “考虑向后兼容性和支持第三方迁移绝对属于用户体验的范畴。”

随着 Gutenberg 团队继续集成新组件，它不应该改变开发人员已经在做的事情。 但是，它可以开辟一些新的可能性。

“新的组件系统肯定会对 UI 部门有所帮助，”Quach 说。 “我特别兴奋的一个领域是快速开发/原型设计领域。 因为这些组件是独立的单元，所以它们可以被引入像 CodeSandbox 这样的平台，它们……只是……工作。 您可以立即开始并快速构建和共享原型（从微小但强大到大型和负责）。”

他说他在测试组件设计和展示快速反馈的想法方面取得了成功。 他还从相反的方向工作，在 CodeSandbox 中构建复杂的组件并将它们带回组件系统。

“作为一名设计师和前端开发人员，我无法强调这种‘微型建筑’工作流程的效率、有效性和创造性地解放了多少，”他说。 “我很高兴其他人也能体验到这一点。”