WordPressの実験的AIツール「Telex」を使ったブロック構築方法

Telexは、Automattic社による実験的なブラウザベースの無料ツールです。AIを使って自然言語のプロンプトからWordPressブロックを生成することができます。

ローカルの開発環境をセットアップし、ビルドツールを設定し、ブロックを一つずつ手作業で組み立てる代わりに、Telexなら作りたいものを入力するだけで結果をプレビューでき、そのままインストール可能なプラグインとしてダウンロードできます。

そこで今回は、Telexを使ったブロック構築方法を掘り下げます。実際にどのようなワークフローになるのか、どのような種類のブロックを作成するのに適しているのかなど、より複雑なエディター専用ブロックを含む2つの実例を使ってご紹介していきます。

Telexの使い方

Telexは、決まった手順に沿ってブロックを生成する仕組みになっています。自然言語で作りたいブロックの内容を入力すると、そのリクエストを標準のcreate-blockツールをベースにしたWordPressブロックのテンプレートへ変換します。

その後、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

ChatGPTを埋め込むブロックをVibe Codingで作る

以前はウェブページにGoogleの検索ボックスを埋め込み、サイト内やウェブ全体を検索できるようにするのが一般的でした。同じような体験をChatGPTの入力で提供したい場合は、以下の手順で実行可能です。

この例は、TelexのUIに慣れるための良い出発点になります。プロンプトの細かな調整や何度も試行錯誤することにあまり気を取られず、基本的な流れをつかむことができます。

まずはWordPress.comのアカウントでログインし、最初のプロンプトを入力します。今回は以下のプロンプトを使います。

We would like to create a block that embeds the ChatGPT prompt to allow users to use it on the frontend.
フロントエンドでChatGPTプロンプトを利用できるように、プロンプトを埋め込むブロックを作成したいです。

これにより、Telexがプロンプト入力ボックス、メッセージ履歴の表示、そしてChatGPTのデザインに合わせたスタイリングを含むChatGPTの埋め込みブロックを生成します。

現時点では、このブロックはエディターのUI上でエラーメッセージを表示します。

私たちは Telex にこの問題の解決を依頼し、ChatGPTのAPIキーを生成して、Inspectorサイドバーからブロックに追加する手順について案内を受けました。今回は、外部APIを利用しても安全面で心配はないと判断しました。

最後に、フロントエンドで簡単なテストを行い、すべて正常に動作していることを確認します。

Social Draftブロックをバイブコーディングする

2つ目の例として、Telexをもう少し活用し、SNS投稿の下書きを作成するための社内向けブロックを構築してみます（別のコラボレーションツールや有料のチームプランを使わずに、コンテンツの作成・レビュー・スケジュール用エクスポートまで行えるもの）。

まずは、以下のセットアップ用プロンプトから始めます。

Build a custom WordPress block named ‘Social Draft’. We will give you further instructions after you set up.（「Social Draft」というカスタムWordPressブロックを作成してください。設定後、詳細な手順を伝えます）

過剰な指示を出す代わりに、別の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.

-------
目的
エディタ専用の WordPress ブロックを作成し、ソーシャルメディア投稿の下書き用社内コンテンツ準備ツールとして機能させる。軽量な Google Docs のようなワークフローを想定する。ブロックはテキスト、リンク、画像、動画埋め込みをサポートし、プラットフォーム選択、コピーの代替バージョン、投稿ステータス、ノート、そしてソーシャル投稿プラットフォームへコピーしやすい形式で書き出せるエクスポートパネルを備えること。

ブロックはフロントエンドには何もレンダリングしてはならない。エディタ専用とし、save() は null を返すこと。

Editor UI メインの下書きエリア（「Copy」）は、単一の RichText フィールドではなく InnerBlocks を使用して実装する。これにより、段落、画像、埋め込み、リストを扱えるようにする。コピーの代替バージョンを2つ追加できるオプションを用意し、それぞれメイン下書きと同様の柔軟性を持たせること。必要に応じてセクション間でコンテンツをコピーできる、シンプルな一回限りの複製コントロールを用意すること。追加コントロールとして、チェックボックスによるプラットフォーム選択、単一のステータスフィールド（Draft、Ready for review、Scheduled、Not used）、およびプレーンテキストのノート欄を含めること。

エクスポートパネルは、選択した下書きまたは代替バージョンからプレーンテキストを抽出し、メディアを無視し、ワンクリックでコピーできる機能を提供すること。検出されたメディア（画像および埋め込み）は参照用に一覧表示してもよいが、コピー出力には含めないこと。すべてのデータは attributes および InnerBlocks を使用してブロック内に保存すること。外部 API は不要。

Telexにこれを渡したところ、UIは想定どおりでしたが、Social Draftブロックがコンテンツエリアに表示されませんでした。

バイブコーディングでは、何度も反復が必要になることが多く、今回もまさにそうでした。

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.

ご不満はよく理解していますし、はい、これは確実に対応できます。問題も把握しています。useBlockProps は適用されていますが、ブロックがキャンバス上に表示されていません。現在はコントロールや構造自体はそろっているものの、ブロックのラッパーが可視コンテナとして正しくレンダリングされていないことが原因です。適切な構造と表示が確保されるよう修正します。

これでようやくUIが表示されたため、簡単な動作確認を始めました。

他にも改良を重ねた結果、MVP（実用最小限の製品）を達成する機能ブロックが完成しました。

欠点と回避策

Telexは短期間で大きく進化してきましたが、単なる実験を超えて本格的に使い始めると、今回ご紹介したとおり、いくつかの制限が見えてきます。致命的なものではないものの、Telexをどのように、そしてどのタイミングで活用するのが最適かを考えるうえで影響はあります。

AIを使ったブロック構築の次の課題

Bud Kraus

Bud Kraus has been working with WordPress as an in-class and online instructor, site developer, and content creator since 2009. He has produced instructional videos and written many articles for WordPress businesses.