Telex で誰でも WordPress ブロック開発者に

WordPress 開発者として 10 年以上の経験を持つ筆者は、これまで数多くのブロックを作成してきました。シンプルなコールアウトやアイコンブロックから、複数のブロックで構成されたフォームやスライドショーまでさまざまです。
ブロック開発はやりがいがありますが、WordPress の内部構造をしっかり理解していること、さらに React、JavaScript、PHP などの技術に精通していることが求められます。

WordPress の create-block のようなスキャフォールディングツールは開発を助けてくれますし、Cursor のような最新の AI コードエディタや Claude Code といった AI アシスタントも作業のスピードアップに貢献します。適切なセットアップとコンテキストを与えれば、複雑な処理の多くを抽象化できます。
とはいえ、AI に WordPress 特有のコンテキストを提供し、全体を接続する作業は必要です。開発者であれば問題ありませんが、一般ユーザーにとっては依然として高いハードルです。

では、その複雑さを完全にスキップできるとしたらどうでしょう？
そこで登場するのが Telex です。

Telex とは？

Telex は、Automattic の AI チームが開発した実験的ツールです。自然な言語で指示を入力するだけで、動作する WordPress ブロックを生成します。

Telex は次のような人におすすめ：

• サイトに合わせたカスタム機能を追加したい、または新しいアイデアを試したいサイトオーナー
• クライアント向けに素早くプロトタイプや小さなユーティリティブロックを作成したい代理店やフリーランサー
• 実際のWordPress環境で素早くスキャフォールディングを行い、後からコードを調整したい開発者
• 動作するサンプルを見てコードを読みながら学ぶのが得意な学習者

Telex は、ブロックを単一ブロックのプラグインとしてまとめ、WordPress Playground を使ってブラウザ上で結果をプレビューします。ローカル環境のセットアップは不要。端的なフォローアップのプロンプトでブロックを改善したり、コードを直接編集したりして、完成したらプラグインをダウンロードしてサイトにインストールできます。リンクとして共有することも可能です。

Telex はまだ実験段階のため、結果にばらつきがあったり、不具合に遭遇することもあります。ですがそれもプロセスの一部。AI がブロック作成における摩擦をどこまで取り除けるか、どのように役立てるか、弊社で開発を続けています。
なお、Telex は AI ウェブサイトビルダーではありません。あくまで小さな機能的ツールをブロックとして作成するための AI アシスタントと考えてください。

Telex は現在無料で使用可能。作成できるブロック数に制限はありません。この機会にぜひお試しください。

Telex でブロックを作成する方法

まずは、作りたいものを考えます。サイトに足りない機能でもいいですし、単に Telex の可能性を試すのもあり。実験的に自由に探索して見てください。Telex のホームページにある注目プロジェクトから着想を得るのもおすすめです。

今回の記事では、フードブロガーになったつもりで進めてみます。
チョコチップクッキーのレシピを共有したく、以下の要件を満たすブロックを作りたいと考えました：

• 材料リストを表示し、読者がチェックマークを付けられる
• フロントエンドに「コピー」ボタンを設置し、材料リストをクリップボードにコピー可能
• レシピの分量を2倍、3倍、4倍にスケールできる機能
• エディターでは「数量」「単位」「材料」の3列を持つテーブルで材料を入力
• ボタンで行の削除・並べ替えが可能

この要件を以下のようなプロンプトとして Telex に入力します：

材料リストのブロックを作成してください。これは、読者がチェックできる材料のリスト（フードブログを想像してください）です。フロントエンドに材料リストをクリップボードにコピーするコピーボタンを追加してください。読者がレシピを2倍、3倍、4倍にスケールできるように、内蔵のレシピスケーラーを含め、材料の数量をそれに応じて更新します。エディターでは、数量、単位、材料の3列のテーブルに材料を入力する必要があります。ボタンを使用して、テーブル内の材料を上下に削除したり並べ替えたりできる必要があります。

プロンプトの入力が終わったら「Build」をクリック。すると、Telex が作業を開始します。

初期プロンプトにはできるだけ多くのコンテキストを含めることがコツ。とはいえ、短いプロンプトから試してみるのもOKです。新しいブラウザタブで開けば、必要なだけ同時にいくつでもブロックを作成できます。

およそ2分後、リクエストしたすべての機能を備えた WordPress ブロックが完成しました。こちらは、エディター画面で材料を入力した状態のテーブル。指定した通りのアクションボタンが並んでいますね。

フロントエンドでは、すべての機能がすぐに反映されました。ただし、スタイリングには少し調整が必要なよう。ここで役立つのが追加プロンプトです。こうして細部を整えていきます。

ChatGPTによると :

基本的に、ブロックがテーマのスタイルを継承するほうが好みです。さらに、チェック済みの材料には取り消し線を表示したいと思いました。また、材料の分量は可能な限り整数や分数で表示したいとも考えました。最後に、すべての材料がチェックされたときには、画面に紙吹雪のアニメーションが出ると楽しいはずです。

これらの変更は、それぞれ短いフォローアップのプロンプトで順番に対応しました：

スタイリングを簡素化して、この材料リストが現在のテーマスタイルを継承するようにしましょう。

フロントエンドでは、読者が材料にチェックを入れたときに、取り消し線も適用してください。

可能な限り、フロントエンドで材料の数量を整数または分数に変換してください。小数点は不要です。

楽しみのために、読者が材料リストのすべてのアイテムにチェックを入れたときに、画面にコンフェッティアニメーションを降らせてください。

Telex には、フォローアップのプロンプトで一度に1つのタスクを与えることをお勧めします。上記の各タスクについて4回の反復を行った後、私の材料リストブロックは次のようになりました：

コードを直接編集することも可能です。素早くピンポイントで変更したいときに便利ですし、ブロックがどのように構成されているかを学ぶ良い方法にもなります。

私の場合、スケールボタンのデザインを少し変え、エディター内のテーブルも更新したかったため、コードビューに切り替えて、style.scss と editor.scss ファイルを手動で調整しました。

こちらが最終結果です。合計で所有時間は約10分：

注意： Telex は決定論的ではありません。本記事で紹介したプロンプトを試しても、毎回まったく同じ結果にはなりません。ビルドが完全に一致することはないとご理解ください。

もちろん、さらに改良を重ねることもできます。たとえば、検索エンジン最適化のために JSON-LD 構造化データを追加したり、単位をメートル法に変換できる機能を加えたりすることも可能です。アイデアは無限大です。

ブロックに満足したら、次の 2 つの方法で共有できます。「ダウンロード」ボタンを使ってプラグインの zip ファイルを取得するか、「共有」ボタンをクリックします。後者はクリップボードに一意のリンクをコピーします。このリンクを持つ方は、ログイン不要で Telex 上でブロックを確認できます。

こちらが、このブログ投稿のために私が作成したブロックへのリンクです：

上記のプレビューリンクをクリックすると、材料リストのブロックをZIPファイルとしてダウンロードできるようになります。これは、あなたがブロックを自分で作成したかのように行えます。その後、プラグインのアップロードをサポートする任意の WordPress サイトにインストールするか、WordPress Studio を使用してローカルでテストできます。

注意： Telex のインターフェースおよび紹介ページは、現時点では英語でのみご利用いただけます。ただし、ご希望の言語でプロンプトを入力することは可能です。

トラブルシューティングと既知の課題

Telex は実験的なツールであるため、時折エラーや予期せぬ挙動に遭遇することがあります。AI が誤った前提でコードを生成したり、実行できないコードを出力することもありますが、これはあらゆる AI ツールで起こり得る一般的な現象です。もし、以下のようなエラーが表示されたら、あきらめずに繰り返し試してみてください。特定のエラーを修正するよう Telex に依頼するか、エラーメッセージを新しいプロンプトにコピーして、期待する結果をより詳しく伝えます。フォローアップの質問は何度でも可能です。状況が複雑になった場合は、新しいセッションを開始してブロックの要件を再度伝え直すことをおすすめします。

WordPress のブロックにはさまざまな作り方があり、この実験の目的のひとつは Telex における改善点を見つけることです。たとえば、現在はインナーブロックが必要なブロックには対応していません。親ブロック「スライドショー」と子ブロック「スライド」で構成されるスライドショーは一般的な使用例ですが、現在の Telex では実装が難しいです。

もし Telex がリクエストを何度試しても完了できない場合は、コメント欄やアプリ内のフィードバックフォームからお知らせください。使用したプロンプト、エラーメッセージ、作ろうとした内容を簡単に共有いただくことで、チームが Telex の改善に役立てることができます。

利用し続けることが大切

Telex は、AI がどのようにブロック開発のハードルを下げられるかを探る、初期段階の取り組みです。みなさんが作ったブロックや共有してくださるフィードバックをもとに、弊社チームが継続的に改善を進めていきます。ぜひブロックを作成し、プレビュ―リンクを投稿して、うまくいった点・課題だった点を共有してください。

今後は、バージョン履歴の追加、プロジェクト一覧をより視覚的にするためのビジュアル表示、既存ブロックのアップロードとカスタマイズ機能など、大規模なものから小規模なものまでさまざまな改善を検討しています。

WordPress のブロック開発を、もっと速く、もっと使いやすく、そして誰にでも開かれたものにしていきましょう。