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

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

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

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

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

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

npx @wordpress/create-block gutenpride --template @wordpress/create-block-tutorial-template

注意: Node.js v14 が必要です。その他のバージョンではターミナルにエラーが出力される場合があります。詳細については Node 開発ツールを参照してください。

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

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

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

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

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

原文

最終更新日: 2023年3月26日