更新一些东西。

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

在帖子中,Quach 写道:“理想情况下,您应该以一种非常可控和深思熟虑的方式更新某些内容。”他将其比作将一个城市逐个部分地转换为太阳能,直到传统发电厂关闭。在继续下一部分之前,您可以转换、测试、发现问题并纠正它们。

这就是将 G2 组件集成到 Gutenberg 中的计划。

“G2 Components 是一个体现了让 UI 和 UX 变得更好的想法的项目,”Quach 说。 “目前,它被实施为在 Gutenberg 和 WordPress Component 系统的上下文和上下文中工作。”

目的是为改进 Project Gutenberg 的 UI 提供资源。组件应该可以更轻松地创建新的 UI,而无需将代码捆绑在一起。 Quach 说,使用组件系统的一致性和体验应该在整个 WordPress 平台上扩展并产生连锁反应。这也将扩展到第三方区块开发者。

“代码组件只是起点,”他说。 “我的最终目标是超越代码,影响和提升设计——创建一个统一的设计系统,使人们能够创造具有凝聚力和功能丰富的 UI 体验。”

Quach 认为类似的方法可以受益该平台。他提到谷歌的 Material Design 提升了 Android 平台并在公司产品之间创造了凝聚力。

Gutenberg 团队已经开始将 G2 组件集成到项目中。此集成以受控方式替换了 WordPress 组件 (@wordpress/components),并且不应破坏核心编辑器或第三方项目中的现有实现。准备就绪后,将换出新组件。 “这就像拨动开关,”Quach 说。

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

[嵌入内容]

p>

他定期发布有关 G2 组件的博客。除了这些,他还对项目的设计思路进行了更深入的研究。他几乎每天都在谈论他的项目 Twitch Stream

什么是组件?
组件G2组件故事书截图。

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

“当前的组件并不是为了系统而构建的,而是为了满足当前的需求,”Quach 说。 “这个特殊的设计细节至关重要。系统优先的方法更容易支持新功能的添加,更重要的是自定义!”

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

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

他回答了我为什么要从头构建组件系统的问题。这个想法是让组件在像 WordPress 管理员这样的环境中“正常工作”,例如确保 WordPress 主题样式表的存在不会仅仅通过加载它们来破坏组件。

“为什么要重新思考、重建和增强输入,按钮、模式、下拉菜单等?呼应了 Quach 的回应。“这样你就不需要开发人员了。”“

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

Quach表示,尊重向后兼容性是他在设计架构时非常重视的事情G2 组件项目。他还表示,这是他提议的集成策略的一部分。

他说:“我提到该项目‘体现了让用户界面和用户体验变得更好的想法。’考虑向后兼容性支持第三方迁移绝对属于用户体验领域。”

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

Quach 说:“新的组件系统肯定会帮助 UI 部门。”我特别兴奋的一个领域是快速开发/原型制作空间。由于这些组件是独立的单元,您可以将它们带入 CodeSandbox 之类的东西中,它们......只是......工作。您可以开始并快速构建和共享原型(从小型到大型到大型高管)。

他说他已经成功地测试了组件设计,并展示了快速反馈的想法。他也在反方向工作,在 CodeSandbox 中构建复杂的组件并将它们带回组件系统。

“作为一名设计师和前端开发人员,我怎么强调这种‘微型建筑’工作流程的效率、有效性和创造性都不为过,”他说。 "

喜欢这样:

喜欢正在加载...

资源