ブロックの作成 チュートリアル

WordPress ブロックエディター用のはじめてのブロックを作りましょう。ここではユーザーがメッセージを入力しスタイリングできるシンプルなブロックを作成します。

このチュートリアルには開発環境とツールのセットアップの他に、新しい開発モデルに親しむという目的が含まれています。すでに親しんでいる方は、以下のクイックスタートを試すかチュートリアルの必要な箇所にジャンプしてください。

前提ソフトウエア

最初に開発環境とツールが必要です。これには WordPress 環境、Node、NPM、コードエディターが含まれます。詳細は 開発環境のセットアップドキュメント を参照してください。

クイックスタート

@wordpress/create-block パッケージはブロックを作成する際に必要なブロックのひな形を作成します。詳細については create-block パッケージのドキュメントを参照してください。このクイックスタートは node や WordPress サイトを含む開発環境があることを仮定します。

プラグイン用ディレクトリで次のコマンド実行してブロックを作成します。

npx @wordpress/create-block starter-block

上のコマンドは新しいディレクトリ starter-block を作成し、必要なファイルをインストールし、ブロックプラグインをビルドします。対話モードを使用して詳細を1つずつ指定するには、名前 starter-block を指定せずにコマンドを実行してください。

管理画面のプラグインページでプラグインを有効化します。

有効化後、ブロックエディターに行き、インサーターを使用して新しいブロックを検索し、追加してください。

目次

「ブロックの作成 チュートリアル」は以下のセクションに分かれます。

1. WordPress プラグイン
2. Gutenberg Block の解剖
3. ブロックの属性
4. コードの実装
5. 執筆エクスペリエンス
6. 最後の仕上げ

原文

最終更新日: 2020年8月4日