使用Telex构建WordPress区块

Telex 是 Automattic 出品的一款基于浏览器的实验性免费工具，它利用人工智能技术，根据自然语言提示生成 WordPress 区块。

Telex 无需搭建本地开发环境、配置构建工具或手动搭建区块，只需描述所需内容、预览结果，即可下载即用型插件。

本文将探讨 Telex 的实际工作流程，以及它目前适用于哪些类型的区块。我们将通过两个真实案例（包括一个更复杂的纯编辑器区块）来分析 Telex 的功能，以及哪些环节仍然需要人工干预。

Telex 用户界面

温馨提示：Telex 并不能取代对 WordPress 区块编辑器或区块架构的理解。相反，它起到加速器的作用。

Telex的实际工作原理

Telex 遵循流水线式的工作流程。您可以使用自然语言描述所需的区块，然后 Telex 会根据标准的创建区块工具，将该请求映射到预定义的 WordPress 区块框架上。

Telex 的工作原理

首先，AI 会根据这些限制条件填充细节，例如区块元数据、编辑器 UI、渲染逻辑和基本样式。然后，区块会在托管的 Node.js 环境中构建，在 WordPress Playground 中预览，并打包成可上传的 ZIP 插件。

生成的插件底层遵循熟悉的结构，与 create-block 非常相似：

block-name/
├── build/
├── src/
│   ├── edit.js
│   ├── save.js
│   ├── index.js
│   ├── style.scss
│   └── editor.scss
├── block.json
├── package.json
├── readme.md
└── .gitignore

由于 Telex 会自动处理脚手架搭建、构建和打包，因此无需安装 Node.js、配置构建工具或运行 WP-CLI 命令即可上手。

虽然我们仍然建议使用本地开发环境进行生产环境的优化，但生成区块也无需本地开发环境。

让我们来构建两个区块中的第一个。

Vibe编码嵌入式ChatGPT区块

您可能还记得，以前网页中经常会嵌入 Google 搜索框，方便用户搜索网站或网络内容。如果您需要为用户提供类似的体验，但这次使用 ChatGPT 输入，以下是具体步骤。

这是一个很好的起点，您可以专注于熟悉 Telex 的用户界面，而无需过多关注提示信息的优化或多次迭代。

首先，使用 wordPress.com 凭据登录，然后您可以描述初始提示信息。以下是我们使用的提示信息：

We would like to create a block that embeds the ChatGPT prompt to allow users to use it on the frontend.

请参见下方用户界面：

Telex 初始输入提示

Telex 创建 ChatGPT 嵌入区块，其中包括提示输入框、消息历史记录显示以及与 ChatGPT 美学风格相匹配的样式。

此时，该区块会在编辑器界面中输出错误消息。

区块显示错误信息

我们请求 Telex 解决此问题，并按照他们的指导生成了 ChatGPT API 密钥，并通过“插入器”侧边栏将其添加到区块中。在这种情况下，我们认为使用外部 API 不会引入不必要的安全风险。

ChatGPT API 密钥已添加到区块插入器

最后，我们在前端进行了快速测试，以确认一切运行正常。

前端显示初始提示和响应

警告：此方法仅适用于实验。不建议在生产环境中将 API 密钥存储在区块属性或“插入器”控件中。

Vibe编码社交草稿区块

在第二个示例中，让我们进一步探索 Telex 的功能，构建一个用于撰写社交媒体文章的内部区块（该区块允许用户编写、审核内容并导出以进行日程安排，而无需单独的协作工具或付费团队计划）。

我们可以从以下设置提示开始：

Build a custom WordPress block named ‘Social Draft’. We will give you further instructions after you set up.

与其直接向 Telex 发送大量指令，不如先使用其他 AI 工具（例如 ChatGPT）来梳理出一套完善的需求。这包括定义目标、前端界面、数据存储方式、用户与系统的交互方式等等。以下是 ChatGPT 返回结果的摘录：

Goal
Build an editor-only WordPress block that acts as an internal content-prep tool for drafting social media posts, similar to a lightweight Google Docs workflow. The block should support text, links, images, and video embeds, along with platform selection, alternative versions of the copy, post status, notes, and an export panel optimized for copying content into a social publishing platform.
The block must not render anything on the frontend. It should exist solely for editor workflows, with save() returning null.
Editor UI
The main draft area (“Copy”) should be implemented using InnerBlocks rather than a single RichText field, allowing paragraphs, images, embeds, and lists. An option to add two alternative versions of the copy should be available, each with the same flexibility as the main draft. Simple one-time duplication controls should allow content to be copied between sections when needed.
Additional controls include platform selection via checkboxes, a single status field (Draft, Ready for review, Scheduled, or Not used), and a plain-text notes field.
An export panel should extract plain text from the selected draft or alternative, ignore media, and provide a one-click way to copy the result. Detected media (images and embeds) can be listed for reference, but are not included in the copied output.
All data should be stored within the block using attributes and InnerBlocks. No external APIs are required.

当我们把这个交给 Telex 时，结果是用户界面符合预期，但是社交草稿区块无法在内容区域中显示。

内容区域中缺少区块 UI

在 Vibe 编码过程中，经常需要多次迭代，而我们遇到的情况正是如此。

Telex 发现问题与 InnerBlocks 的初始化方式有关，并尝试重构区块结构以修复渲染问题。但这些早期尝试并未成功，区块在编辑器中仍然无法正确显示。

此时，我们开始对 Telex 失去信心，于是询问他们是否可以处理我们的请求。我们重申，除了我们需要的功能（添加和显示区块的功能）之外，所有 UI 都已公开。

Telex 回复：

I completely understand your frustration, and yes, I can absolutely do this.I can see the problem - the useBlockProps is being applied but the block isn't rendering visible content in the canvas. The issue is that while we have all the controls and structure, the block wrapper isn't being properly rendered as a visible container. Let me fix this by ensuring the block has proper structure and visibility.

我们终于拿到了用户界面，并开始进行快速测试。

社交媒体帖子数据区块

经过多次改进，最终我们得到了一个功能齐全的区块，实现了我们的最小可行产品 (MVP)。

社交草稿区块的可用 MVP

缺点和解决方法

Telex 在短时间内取得了长足的进步，但一旦你开始将其用于更复杂的用途，一些局限性就会显现出来。虽然大多数局限性并非致命，但它们确实会影响 Telex 的最佳使用方式和时机。

1. Telex 没有内置的回滚提示的方法。你可以让 Telex 撤销更改，但更可靠的方法是将提示保存为文本或 Markdown 格式，对下载的 ZIP 文件进行版本控制，或者在将区块移动到本地后使用 Git 进行管理。
2. 提交提示后，Telex 会立即（重新）生成区块，无法撤销或恢复之前的版本。为了避免不必要的操作，在构建、重试或执行类似命令之前，请先询问 Telex “你会怎么做……”。
3. Telex 不是一个集成开发环境 (IDE)。虽然您可以查看生成的源代码，但无法在 Telex 中直接编辑它。
4. Telex 最适合用于头脑风暴和原型设计。对于生产环境，最安全的做法是将其限制在非常简单的区块中，避免考虑外部集成、复杂逻辑或安全性和性能方面的敏感问题。

AI构建区块的未来发展方向

Telex 展示了人工智能如何融入现代 WordPress 开发。它降低了实验成本，缩短了从想法到原型的距离，并使区块脚手架的构建更加易于上手。

同时，本文的示例也表明，理解区块编辑器仍然至关重要。