Jamie Marsland 使用块编辑器在 20 分钟内重新创建 WordPress.org 主页

针对最近关于 WordPress.org 的新主页和下载页面设计需要多长时间才能实施的争议，Gutenberg YouTuber Jamie Marsland 决定尝试使用块编辑器重新创建它。

Matt Mullenweg 对新设计进入开发阶段的计划发表了评论，称它应该“花费数小时而不是数周来实施”。 他最具煽动性的评论引发了随后关于使用块编辑器的现实的对话，引用了 WordPress 的竞争对手。

“这是一个如此基本的布局，很难想象一个人在 Squarespace、Wix、Webflow 或其中一个 WP 页面构建器上花费超过一天的时间，”Mullenweg 说。

Marsland 决定使用古腾堡来迎接挑战。 在这个练习中，他使用了 WordPress 最新的默认主题，二十二十二。 他的结果与 WordPress 的新设计不同，但非常接近，他能够在大约 20 分钟内打开主页。

在视频（嵌入下方）中，Marsland 介绍了主页每个部分的创建过程。 他是块编辑器的高级用户。 他可以快速移动行、列和组，根据需要调整填充和边距，并为每个部分分配相应的设计颜色。 在这一点上，这不是大多数普通 WordPress 用户可以做的事情，这就是视频在观众中反应如此强烈的原因。 Marsland 的 YouTube 频道专注于帮助用户掌握使用 Gutenberg 构建页面和使用 WooCommerce 的商店。

“我的结论是，快速完成 95% 的设计非常容易，但在我的经验中，最后的 5% 总是花费最多的时间，”Marsland 说。 “我的猜测是，导致延误的更多是内部流程，但如果不参与，很难确定。 我真的很想表明，构建设计不是 Gutenberg 问题（正如 Matt Mullenweg 提到的 Wix 和 Squarespace 以及其他 WP 页面构建器。）”

由 Automattic 赞助的项目贡献者 Alex Shiels 引用了一些与块编辑器无关的项目，这些项目导致了延误，包括努力制定“a11y、响应能力、浏览器兼容性、搜索引擎优化和性能的合理标准”，以及与不同大陆的贡献者合作。

为了回应 Marsland 的尝试，WordPress 开发人员 Patrick Boehner 评论了小细节如何仍然非常重要。 “你绝对可以分辨出什么是设计驱动的，什么是编辑器中设计的，”Boehner 说。

在古腾堡在 WordPress 中首次亮相五年后，主题开发人员仍然面临着将设计变为现实的挑战，而这些设计并不是以块优先的方法创建的。

WordPress 开发人员 Jon Brown 说：“今天，要采用传统的模拟页面设计并使用块执行该设计，从根本上来说仍然是不可能的。” “这是个问题。

“当然，块可以‘在浏览器中设计一个页面’并接受你从块中得到的东西，但块仍然缺乏基于模型生成响应式、可访问、像素完美布局所需的灵活性和控制。 .

“过去需要一天、十几行 php 和十几行 css 的工作，现在需要数周的时间来构建自定义块，因为核心块不能通过钩子轻松调整，并且缺乏必要的基本控件。”

Gutenberg 的贡献者通过引入流畅的排版取得了长足的进步，并正在跟踪与提高设计工具一致性相关的许多问题。 与此同时，随着块编辑器的成熟以适应那些希望让他们的设计立即响应的人，主题开发人员正在忍受必要的成长痛苦。

“我一直在从头开始构建一个完整的 FSE 主题，我很惊讶我能够使用编辑器、theme.json 和最小到无自定义 CSS 成功复制我的设计，”资深主题开发人员 Mike McAlister 说. “当然，这需要很多修补，但我仍然印象深刻。

“然而，正如 Jon 所提到的，第二次你需要为更小的屏幕（或者如果你敢在编辑器中尝试移动优先设计，则需要更大的屏幕）进行调整，你就碰壁了。 边距、填充和块间隙尤其明显，它们还没有响应控件。 你可以在 .org 的新主题中看到通过 CSS 进行的调整。”

响应性是 Shiels 提到的问题之一，为什么实施设计比简单地在块编辑器中重新创建设计需要更多时间。

“然而，有迹象表明响应能力会有所改进，”麦卡利斯特评论道。 “流畅的排版和clamp() 确实有助于检查排版，但总会有需要更好控制的情况。 所有其他网站建设者都解决了这个问题，没有理由认为 WordPress 不能或不会。 （我当然希望如此，因为如今约 50-60% 的流量来自移动设备！）

“克服这些成长痛苦的最佳方法之一是尽可能多地吃狗粮——使用编辑器和 FSE 构建尽可能多的现实生活场景，以发现这些盲点。”

Marsland 的简短练习表明，如果您熟悉块编辑器，您可以在短时间内重新创建 WordPress.org 的设计。 他成功地证明了 Gutenberg 页面构建 UI 不是复制在其他应用程序中创建的设计的障碍。 相反，它是开发人员通常必须在编辑器之外解决的所有其他相关清单项目——包括可访问性、响应性和 SEO 考虑因素。 Gutenberg 越能减少与响应性和可访问性相关的额外工作，对于尝试自行制作他们梦想的设计的普通用户来说，就越容易接近。