使用 Gutenberg 的 Products 块可以更轻松地将产品添加到帖子和页面

Products 块代表了我们亲切地称为“Wootenberg”的项目的第一阶段——WooCommerce 为 Gutenberg 编辑器的到来做准备。

古腾堡？

如果您错过了，Gutenberg 是一个全新的、视觉驱动的内容编辑器，专为 WordPress 构建并计划包含在 5.0 版本中。 阅读所有相关信息并下载最新版本的 Gutenberg 功能插件。

什么是产品块？

从本质上讲，产品块是产品简码的现代版本，专为我们即将进入的古腾堡世界而构建。

Products 块提供了一个直观的用户界面，用于插入来自各种来源的产品，然后准确预览该选择在发布时的外观。 您还可以通过调整布局和排序来微调这些产品的外观。

使用产品块，您可以快速轻松地将产品添加到帖子和页面，包括：

• 个性化、精心挑选的产品
• 特定类别的产品
• 特色产品
• 销售产品
• 具有特定属性或术语的产品
• 最畅销
• 顶级产品

或者简单地添加您的所有产品。

观看这段简短的视频，了解 Products 块的工作原理：

对现有短代码体验的显着改进，你不觉得吗？ 我们的确是！

获取产品块

一个功能插件

现在，产品块是一个新概念，依赖于古腾堡。 由于 Gutenberg 本身仍然是一个功能插件，我们也将 Products 块作为功能插件发布。 通过这种方式，我们能够独立于 WooCommerce 核心快速构建功能 - 阅读有关功能插件的更多信息。 最重要的是，它为大家提供了一种方便的方式来安装和使用它。

一旦我们对设计和代码的稳定性感到满意。 我们会将这些功能合并到 WooCommerce 核心中，以便所有 WooCommerce 商店都可以访问它们。 此时，您可以停用和删除功能插件，并且您使用功能插件插入的任何产品块都将保持活动状态。

我们的方法

Gutenberg 为 WooCommerce 这样的大型插件创造了许多令人兴奋的可能性。 就目前而言，重要的是限制我们最初探索的范围，以确保我们在 Gutenberg 的设计模式和快速发展的代码库中建立了坚实的基础，然后再继续执行更复杂的任务，例如添加产品。 事实证明，即使是我们规模较小的项目也发现了我们没有预料到的机会。

研究

在开始设计之前，我们进行了几轮研究，以确保我们朝着正确的方向前进。 这包括花费大量时间与 Gutenberg 一起玩，与设计团队交谈，以及查看 WordPress 社区中的其他人现在正在使用 Gutenberg 做什么。

由于我们专注于产品短代码，我们分析了它在 10,000 个 WooCommerce 网站上的使用情况。 我们了解到，短代码最流行的应用是显示特定产品、产品类别和特色产品。 有趣的是，似乎很少有商店用它来展示顶级产品、畅销产品或具有特定属性的产品。

产品简码最流行的应用是显示特定产品、产品类别和特色产品。

看到人们如何实际使用一个功能是很有趣的，而这种洞察力是帮助我们弄清楚哪些流程最重要的关键。 它还挑战了我们的假设，因此我们可以就下一个设计阶段要解决的问题做出明智的决定。

主持测试，第一轮

我们的第一轮设计探索了店主可能希望在页面或帖子上展示产品的方式。 我们采访了商店建设者和商店所有者/经理，创建了一些嵌入产品的测试场景，然后让他们试用插件并讨论他们的反应和反馈。

在开始开发之前，在设计过程的早期捕获这些反馈，为下一次设计迭代提供信息，以更好地与客户期望插入和展示其产品的方式保持一致。 这使我们有信心继续使用功能插件的第一个版本进行进一步测试。

我们从这一轮测试中得到的主要收获是，虽然我们的流程非常好，但人们在与块设置交互时遇到了麻烦。 这部分是可发现性问题，但也是设置过载的结果。 所以我们删除了一些选项（比如产品数据可见性切换——我们很快就能通过 Gutenberg 核心更好地处理这些选项）并将其他选项（比如产品范围选择器）移到主块设置部分，使它们在块之后立即可见被插入。

适度测试，第二轮

一旦功能插件准备好并且我们更新了我们的设计，我们就安排了第二轮可用性测试。 这次我们准备了一个实时测试环境，以便测试参与者可以与实际的古腾堡界面进行交互，而不是原型。 看着人们使用实际产品令人大开眼界，而且非常宝贵。

其中两个关键教训不是专门针对 Products 块，而是关于 Gutenberg 本身。 每个测试参与者（其中大多数以前从未使用过 Gutenberg）在添加块时都会卡住，并且无法找到高级设置。 我们与 Gutenberg 团队分享了我们的测试结果，已经为第二个问题部署了修复程序，我们目前正在探索解决第一个问题的设计选项。

至于产品块本身，我们进行了一些微调，例如在显示产品时删除一个无关步骤，在选择过程中不需要用户进一步输入 - 如果您选择显示特色产品，我们不需要额外的在选择类别时确认喜欢的操作。 我们还注意到，更改展示产品的范围并没有一致的流程，并且测试参与者都在不同的地方查看这些设置，因此我们添加了更多回到初始块设置的路径。

结果？ 此功能插件可立即下载。

获取产品块

有兴趣与我们一起测试 WooCommerce 原型吗？

如果您对最新的 WooCommerce 开发感兴趣，请注册我们的设计反馈小组，以便您塑造 WooCommerce 的未来。 我们会定期与成员联系，以帮助他们研究新项目并测试我们的原型和 MVP。