カスタムグーテンベルクブロックの構築：決定的なブロック開発チュートリアル

多くの人が、グーテンベルクのブロックとアプリの作成を開始する際のハードルについて不満を持っています。 主に開発環境のインストールと構成が難しいため、学習曲線は急です。 さらに、JavaScript、Node.js、React、およびReduxの確かな知識は、このかなり複雑なレシピの必須の要素です。

公式のWordPressブロックエディターハンドブックは、開発者に膨大な量の情報を提供しますが、その詳細の海に迷うかもしれません。

そして、グーテンベルクプロジェクトのリードアーキテクトであるマティアスベンチュラがWPタバーンとのインタビューで報告したことについて言及する価値があります。

それをすぐに学ぶことができる人々がいますが、それはまだ人々にとって大きな障壁です。 これにはいくつかの層があると思います。 ドキュメントは、組織とプレゼンテーションの両方で桁違いに優れている可能性があります。 そこでもっとたくさんのことができるといいのですが。

そのことを念頭に置いて、読者がグーテンベルクブロックの開発を開始できるようにすることを目的としたステップバイステップのチュートリアルを提供することにしました。

面白そうですか？ 飛び込みましょう！

グーテンベルクブロック開発の前提条件

このチュートリアルで必要なスキルは、WordPressプラグインの開発に関する十分な知識と、少なくともHTML、CSS、JavaScript、およびReactの基本的な知識だけです。

これは野心的なプロジェクトになるのでしょうか？ きっとそうなるでしょう！

完全性と単純さの間の適切な妥協点を見つけたり、含めるトピックと除外するトピックを決定したりするのは簡単ではありませんでした。

うまくいけば、中級および上級の読者は、React状態、Reduxストア、高次コンポーネントなどの特定の概念を深く掘り下げていないことを許してくれるでしょう。 これらのトピックには追加のスペースと注意が必要であり、おそらくブロック開発を開始するには高度すぎます（React開発者でない限り）。

同じ理由で、動的ブロックやメタボックスなど、グーテンベルクブロック開発に関連するより高度なトピックの一部については説明しません。

この記事の終わりまでに得られる知識があれば、すぐに楽しく生産的になり始めることができます。

ブロック構築に取り掛かると、スキルをさらに向上させ、さらに高度なグーテンベルクブロックを自分で構築する準備が整います。

グーテンベルクブロックの開発から始めると、最初は恐ろしいことがあります…‍しかし、恐れることはありません！ 初心者向けのこの完全なガイドでは、 クリックしてツイートする方法について説明しています。

グーテンベルクブロックとは何ですか？

2018年12月に最初にリリースされて以来、ブロックエディターは、より強力なAPI、より高度なユーザーインターフェース、使いやすさの向上、大量の新しいブロック、フルサイト編集の最初の実装など、あらゆる面で大幅に改善されました。 。

要するに、グーテンベルクがまだ大規模な開発中であるとしても、それは長い道のりを歩んできました—そして今日、ブロックエディターは信頼できる機能的なページとサイトビルダーとしての本格的な候補です。

開発者の観点から見ると、GutenbergはReactベースのシングルページアプリケーション（SPA）であり、WordPressユーザーがWordPressのコンテンツを作成、編集、削除できるようにします。 ただし、これにより、従来のコンテンツエディタの拡張バージョンについて考える必要はありません。

これを明確にしたい：

グーテンベルクでは、コンテンツはブロックに分割されています。ブロックは、ユーザーが投稿やページ、またはWebサイト全体を作成するために使用できる「ブリック」です。

しかし、技術的にはブロックとは何ですか？

私たちはWordPressの定義が好きです：

「ブロック」は、一緒に構成されてWebページのコンテンツまたはレイアウトを形成するマークアップの単位を説明するために使用される抽象的な用語です。 このアイデアは、今日のWordPressで達成されていることの概念を、ショートコード、カスタムHTMLで組み合わせ、単一の一貫したAPIとユーザーエクスペリエンスに検出を組み込みます。

タイトル、段落、列、画像、ギャラリー、およびサイドバーパネルからブロックツールバーコントロールまで、エディターのインターフェイスを構成するすべての要素は、Reactコンポーネントです。

では、Reactコンポーネントとは何ですか？ W3Schoolsは次の定義を提供します。

コンポーネントは、独立した再利用可能なコードビットです。 これらはJavaScript関数と同じ目的を果たしますが、単独で機能し、 render()関数を介してHTMLを返します。

Gutenbergが提供する編集エクスペリエンスは、従来のWordPressエディターと比較して新しいものですが、WordPressがコンテンツをデータベースに保存する方法はまったく変わりません。 これは、グーテンベルクがWordPress内で機能するアプリケーションですが、CMSのコアでの動作方法を変更しないためです。

Gutenbergで作成された投稿（およびこれには投稿、ページ、カスタム投稿タイプが含まれます）は、従来のエディターとまったく同じように、 wp_postsテーブルに保存されます。

しかし、グーテンベルクで作成された投稿では、クラシックエディターとグーテンベルクで作成された投稿の根本的な違いを表す情報が表に追加されています。

これらの情報はHTMLコメントのように見え、特定の機能があります。ブロックの区切り：

ブロック区切り文字は、画面にレンダリングされるブロックをWordPressに指示します。 また、JSONオブジェクトのブロックプロパティの値も提供します。 これらの小道具は、ブロックを画面にレンダリングする方法を指示します。

WordPress開発環境のセットアップ

最新のJavaScript開発環境をセットアップするには、Webpack、ReactとJSX、Babel、ESLintなどの高度なテクノロジーに関する確かな知識が必要です。

おびえた？ しないでください！ WordPressコミュニティは、面倒な手動構成プロセスを回避できる強力なツールを提供することで、すでに救いの手を差し伸べています。

簡単にするために、この記事ではトランスパイルについては説明しません（ただし、ブロック開発の基本を学んだら、トランスパイルについて理解することをお勧めします）。 代わりに、最新のJavaScript開発環境を数分ですばやく簡単にセットアップするために使用できる2つの代替ツールを紹介します。 プロジェクトに最も便利なものを選択するのはあなた次第です。

Gutenbergブロックを構築するためのJavaScript開発環境のセットアップは、次の3つのステップのプロセスです。

1. Node.jsとnpmをインストールします
2. 開発環境をセットアップする
3. ブロックプラグインを設定する

始めましょう。

1.Node.jsとnpmをインストールします

開発環境をインストールして最初のブロックを登録する前に、Node.jsとNodeパッケージマネージャー（npm）をインストールする必要があります。

Node.jsとnpmはいくつかの異なる方法でインストールできます。 ただし、最初に、ソフトウェアがマシンにすでにインストールされているかどうかを確認することをお勧めします。

これを行うには、ターミナルを起動して次のコマンドを実行します。

 node -v

結果がcommand not found場合は、Node.jsがコンピューターにインストールされていないため、インストールを続行できます。

この記事では、最も簡単なインストールオプションであるノードインストーラーを選択しました。 オペレーティングシステムに対応するバージョンをダウンロードして、インストールウィザードを起動するだけです。

Node.jsをインストールしたら、ターミナルでコマンドnode -vを再度実行します。 npm -vコマンドを実行して、npmパッケージが使用可能であることを確認することもできます。

これで、次のツールが装備されました。

• npx Node.jsパッケージランナー（ドキュメントを参照）。 これにより、最初にインストールせずにnpmコマンドを実行できます。
• npm Node.jsパッケージマネージャー（ドキュメントを参照）。 これは、依存関係をインストールしてスクリプトを実行するために使用されます。

次のステップは、開発環境をインストールすることです。

2.開発環境をセットアップします

ローカルマシンに最新バージョンのNode.jsとnpmをインストールしたら、WordPressの開発環境が必要になります。

DevKinstaのようなローカル開発環境を使用するか、公式のWordPressツールを使用できます。 両方のオプションを見てみましょう。

オプション1：ローカル開発環境（DevKinsta）

数回クリックするだけで、最新のローカルWordPress開発ツールであるDevKinstaを使用してWordPressをローカルにインストールできます。 または、MAMPやXAMPPなどの別のローカル開発ツールを選択することもできます。

オプション2：wp-env

また、公式のwp-envツールを選択することもできます。このツールは、コマンドラインから直接起動できるローカルのWordPress開発環境を提供します。 ノアアレンはそれを次のように定義しています。

ローカルのWordPress環境は、単一のコマンドを実行するのと同じくらい簡単になりました。 wp-envは、痛みのないローカルWordPress環境向けのゼロ構成ツールです。 ユーザーが時間を無駄にすることなくWordPressをすばやく起動できるように、オプションに関する決定を提供します。 実際、目標は、開発者、設計者、管理者、またはその他の人を問わず、すべての人がこれらの環境に簡単にアクセスできるようにすることです。

試してみることにした場合、 wp-envのインストールに必要な労力は最小限です。 次の手順に従ってください。

ステップ1：DockerとNode.jsのインストールを確認する

技術的な要件を満たすには、最初にDockerとNode.jsの両方をコンピューターにインストールする必要があります。 これは、 wp-envがWordPressWebサイトを実行するDockerインスタンスを作成するためです。 コードに加えられた変更は、WordPressインスタンスにすぐに反映されます。

ステップ2：コマンドラインから@wordpress/envをインストールする

コンピューターでDockerとNode.jsを実行すると、WordPress開発環境に移動してインストールできます。

wp-envは、グローバルまたはローカルにインストールできます。 グローバルに実行するには、pluginsディレクトリ内から次のコマンドを実行する必要があります（これについては、以下の「重要」通知ボックスで詳しく説明しています）。

 npm install -g @wordpress/env

それを分解しましょう：

• npm installはパッケージをインストールします。
• コマンドに-gを追加すると、指定したパッケージがグローバルにインストールされます。
• @wordpress/envは、インストールするパッケージです。

wp-envが正常にインストールされたことを確認するには、次のコマンドを実行します。

 wp-env --version

現在のwp-envバージョンが表示されます。これは、プラグインのフォルダーから次のコマンドを使用して環境を起動できることを意味します。

 wp-env start

次のアドレスを使用してWordPressダッシュボードにアクセスできます。

• http：// localhost：8888 / wp-admin /

デフォルトのクレデンシャルは次のとおりです。

• ユーザー名： admin
• パスワード： password

ブロックプラグインを設定する

次に、構築するスターターブロックプラグインが必要です。 ただし、必要なすべてのファイルとフォルダーを使用して開発ブロックプラグインを手動で作成する代わりに、ブロック開発を開始するために必要なすべてのファイルと構成を提供するdev-toolを実行するだけです。

繰り返しますが、いくつかのオプションから選択できます。 それぞれを見てみましょう。

オプション1：@ wordpress/create-blockを使用してブロックプラグインを設定する

@ wordpress / create-blockは、Gutenbergブロックを作成するための公式のゼロ構成ツールです。

Create Blockは、WordPressプラグインのブロックを登録するためのブロックを作成するための公式にサポートされている方法です。 構成なしの最新のビルドセットアップを提供します。 PHP、JS、CSSコード、およびプロジェクトを開始するために必要なその他すべてを生成します。

これは主にcreate-react-appに触発されています。 @gaearon、Facebookチーム全体、およびReactコミュニティへの大きな称賛。

ローカル環境が稼働したら、 npx @wordpress/create-blockコマンドを実行するだけでスターターブロックを設定できます。これにより、プラグインのスキャフォールディングを作成して新しいブロックを登録するために必要なすべてのファイルとフォルダーが提供されます。 。

テストを実行して、どのように機能するかを確認しましょう。

コマンドラインツールから、 / wp-content / plugins /ディレクトリに移動し、次のコマンドを実行します。

 npx @wordpress/create-block my-first-block

確認を求められたら、 yを入力して続行します。

このプロセスには少し時間がかかります。 完了すると、次の応答が返されます。

以上です！

次に、WordPress開発環境を起動し、WordPressダッシュボードのプラグイン画面に移動します。 「MyFirstBlock」という名前の新しいプラグインがプラグインリストに追加されているはずです。

必要に応じてプラグインをアクティブ化し、新しいブログ投稿を作成し、ブロックインサーターを下にスクロールして[ウィジェット]セクションに移動し、新しいブロックを選択します。

次に、ターミナルに戻り、現在のディレクトリをmy-first-blockに変更します。

 cd my-first-block

次に、次のコマンドを実行します。

 npm start

これにより、プラグインを開発モードで実行できます。 本番コードを作成するには、次のコマンドを使用する必要があります。

 npm run build

オプション2：create-guten-blockを使用してブロックプラグインを設定する

create-guten-blockは、グーテンベルクブロックを構築するためのサードパーティの開発ツールです。

create-guten-blockは、React、webpack、ES6 / 7/8 / Next、ESLint、Babelなどを構成せずにWordPress Gutenbergブロックを数分で開発するためのゼロ構成dev-toolkit（＃0CJS）です。

公式のcreate-blockツールと同様に、 create-guten-blockはcreate-react-appに基づいており、手間をかけずに最初のブロックプラグインを生成するのに役立ちます。

ツールキットは、以下を含む、最新のWordPressプラグインを作成するために必要なすべてを提供します。

• React、JSX、およびES6構文のサポート。
• 舞台裏でのwebpack開発/本番ビルドプロセス。
• オブジェクト拡散演算子のようなES6以外の言語エクストラ。
• 自動プレフィックス付きのCSSなので、-webkitやその他のプレフィックスは必要ありません。
• ソースマップを使用して本番用にJS、CSS、およびイメージをバンドルするビルドスクリプト。
• 単一の依存関係cgb-scriptsを使用した上記のツールの手間のかからない更新。

次の注意事項に注意してください。

トレードオフは、これらのツールが特定の方法で機能するように事前構成されていることです。 プロジェクトをさらにカスタマイズする必要がある場合は、プロジェクトを「取り出し」てカスタマイズできますが、その場合はこの構成を維持する必要があります。

ローカルのWordPressWebサイトを入手したら、コマンドラインツールを起動し、インストールの/ wp-content / pluginsフォルダーに移動して、次のコマンドを実行します。

 npx create-guten-block my-first-block

プロジェクト構造が作成され、依存関係がダウンロードされるまで、1〜2分待つ必要があります。

プロセスが完了すると、次の画面が表示されます。

次の画像は、ターミナルがVisualStudioCodeで実行されているプロジェクト構造を示しています。

次に、WordPressダッシュボードに戻ります。 プラグイン画面に新しいアイテムが表示されます—これはmy-first-blockプラグインです：

プラグインをアクティブにして、ターミナルに戻ります。 現在のディレクトリをmy-first-blockに変更してから、 npm startを実行します。

 cd my-first-block npm start

次の応答が返されます。

繰り返しますが、これによりプラグインを開発モードで実行できます。 プロダクションコードを作成するには、次を使用する必要があります。

 npm run build

プラグインをアクティブにして新しい投稿またはページを作成し、ブロックを参照して新しいGutenbergブロックを選択します。

より詳細な概要またはエラーの場合は、AhmadAwaisが提供するドキュメントを参照してください。

スターターブロック足場のウォークスルー

2つの開発ツール（ create-blockまたはcreate-guten-block ）のどちらを選択しても、ブロックプラグインを構築するための開始点として使用できるブロックスキャフォールディングができました。

しかし、ブロック足場とは正確には何ですか？

ブロックスキャフォールディングは、WordPressがブロックを認識するために必要なサポートディレクトリ構造を表す省略形です。 通常、そのディレクトリには、 index.php 、 index.js 、 style.cssなどのファイルが含まれています。これらのファイルは、 register_block_typeなどの呼び出しを保持します。

ブロックエディタハンドブックで使用されているように、公式のCreateBlockdev -toolを選択しました。 ただし、 create-guten-blockなどのサードパーティツールを使用することにした場合でも、エクスペリエンスに大きな違いはありません。

それでは、 create-blockツールについて詳しく見ていきましょう。

ブロック開発ツールの作成を詳しく見る

前述のように、Create Blockは、Gutenbergブロックを作成するための公式のコマンドラインツールです。 ターミナルで@wordpress/create-blockを実行すると、新しいブロックタイプを登録するために必要なPHP、JS、SCSSファイルとコードが生成されます。

 npx @wordpress/create-block [options] [slug]

• [slug] （オプション）—ブロックスラッグを割り当ててプラグインをインストールするために使用されます
• [options] （オプション）—利用可能なオプション

デフォルトでは、ESNextテンプレートが割り当てられています。 これは、JSX構文が追加された次のバージョンのJavaScriptを入手できることを意味します。

ブロック名を省略すると、コマンドはインタラクティブモードで実行され、ファイルを生成する前にいくつかのオプションをカスタマイズできます。

 npx @wordpress/create-block

以下の画像は、公式のブロック作成ツールで作成されたブロックプラグインのファイル構造を示しています。

それでは、新しいブロックプラグインのメインファイルとフォルダーを見ていきましょう。

プラグインファイル

メインのプラグインファイルを使用して、サーバーにブロックを登録します。

 /** * Plugin Name: My First Block * Description: Example block written with ESNext standard and JSX support – build step required. * Requires at least: 5.8 * Requires PHP: 7.0 * Version: 0.1.0 * Author: The WordPress Contributors * License: GPL-2.0-or-later * License URI: https://www.gnu.org/licenses/gpl-2.0.html * Text Domain: my-first-block * * @package create-block */ /** * Registers the block using the metadata loaded from the `block.json` file. * Behind the scenes, it registers also all assets so they can be enqueued * through the block editor in the corresponding context. * * @see https://developer.wordpress.org/block-editor/tutorials/block-tutorial/writing-your-first-block-type/ */ function create_block_my_first_block_block_init() { register_block_type( __DIR__ ); } add_action( 'init', 'create_block_my_first_block_block_init' );

register_block_type関数は、 block.jsonファイルに保存されているメタデータを使用してサーバーにブロックタイプを登録します。

この関数は2つのパラメーターを取ります。

• 名前空間を含むブロックタイプ名、 block.jsonファイルが配置されているフォルダーへのパス、または完全なWP_Block_Typeオブジェクト
• ブロック型引数の配列

上記のコードでは、ブロックタイプ引数は__DIR__マジック定数によって提供されます。 つまり、 block.jsonファイルはプラグインのファイルと同じフォルダーにあります。

package.jsonファイル

package.jsonファイルは、プロジェクトのJavaScriptプロパティとスクリプトを定義します。 ここで、プロジェクトの依存関係をインストールできます。

このファイルの意味をよりよく理解するには、お気に入りのコードエディタでファイルを開きます。

 { "name": "my-first-block", "version": "0.1.0", "description": "Example block written with ESNext standard and JSX support – build step required.", "author": "The WordPress Contributors", "license": "GPL-2.0-or-later", "main": "build/index.js", "scripts": { "build": "wp-scripts build", "format": "wp-scripts format", "lint:css": "wp-scripts lint-style", "lint:js": "wp-scripts lint-js", "start": "wp-scripts start", "packages-update": "wp-scripts packages-update" }, "dependencies": { "@wordpress/block-editor": "^7.0.1", "@wordpress/blocks": "^11.0.1", "@wordpress/i18n": "^4.2.1" }, "devDependencies": { "@wordpress/scripts": "^18.0.0" } }

scriptsプロパティは、 npm run [cmd]を使用してパッケージのライフサイクルのさまざまな時点で実行されるコマンドを含む辞書です。

この記事では、次のコマンドを使用します。

• npm run build —（圧縮された）本番ビルドを作成します
• npm run start —（非圧縮の）開発ビルドを作成します

dependenciesとdevDependenciesは、パッケージ名をバージョンにマッピングする2つのオブジェクトです。 dependenciesは本番環境で必要ですが、 devDependencesはローカル開発にのみ必要です（続きを読む）。

唯一のデフォルトの開発依存関係は@wordpress/scriptsパッケージであり、これは「WordPress開発用に調整された再利用可能なスクリプトのコレクション」として定義されています。

block.jsonファイル

WordPress 5.8以降、 block.jsonメタデータファイルはブロックタイプを登録するための標準的な方法です。

block.jsonファイルがあると、パフォーマンスの向上やWordPressプラグインディレクトリの可視性の向上など、いくつかの利点があります。

パフォーマンスの観点から、テーマが遅延読み込みアセットをサポートしている場合、 block.jsonに登録されたブロックでは、アセットのキューイングがすぐに最適化されます。 styleまたはscriptのプロパティにリストされているフロントエンドのCSSおよびJavaScriptアセットは、ブロックがページに存在する場合にのみキューに入れられるため、ページサイズが小さくなります。

@wordpress/create-blockコマンドを実行すると、次のblock.jsonファイルが生成されます。

 { "apiVersion": 2, "name": "create-block/my-first-block", "version": "0.1.0", "title": "My First Block", "category": "widgets", "icon": "smiley", "description": "Example block written with ESNext standard and JSX support – build step required.", "supports": { "html": false }, "textdomain": "my-first-block", "editorScript": "file:./build/index.js", "editorStyle": "file:./build/index.css", "style": "file:./build/style-index.css" }

デフォルトのプロパティの完全なリストは次のとおりです。

• apiVersion —ブロックで使用されるAPIのバージョン（現在のバージョンは2）
• name —名前空間を含むブロックの一意の識別子
• version —ブロックの現在のバージョン
• title —ブロックの表示タイトル
• category —ブロックカテゴリ
• icon —DashiconスラッグまたはカスタムSVGアイコン
• description —ブロックインスペクターに表示される簡単な説明
• supports —エディターで使用される機能を制御するための一連のオプション
• textdomain —プラグインのtext-domain
• editorScript —エディタースクリプトの定義
• editorStyle —エディタースタイルの定義
• style —ブロックの代替スタイルを提供します

上記のプロパティに加えて、ブロックによって保存されたデータに関する情報を提供するattributesオブジェクトを定義できます（おそらくそうなるでしょう）。 block.jsonでは、キーと値のペアで任意の数の属性を設定できます。ここで、キーは属性名であり、値は属性定義です。

次の属性定義の例を見てください。

 "attributes": { "content": { "type": "array", "source": "children", "selector": "p" }, "align": { "type": "string", "default": "none" }, "link": { "type": "string", "default": "https://kinsta.com" } },

この記事の後半でblock.jsonファイルについて詳しく説明しますが、 block.jsonのメタデータと属性の詳細については、ブロックエディターハンドブックを確認することもできます。

srcフォルダー

srcフォルダーは、開発が行われる場所です。 そのフォルダには、次のファイルがあります。

• index.js
• edit.js
• save.js
• editor.scss
• style.scss

index.js

index.jsファイルが出発点です。 ここでは、依存関係をインポートし、クライアントにブロックタイプを登録します。

 import { registerBlockType } from '@wordpress/blocks'; import './style.scss'; import Edit from './edit'; import save from './save'; registerBlockType('create-block/my-first-block', { edit: Edit, save, });

最初のステートメントは、 @wordpress/blocksパッケージからregisterBlockType関数をインポートします。 次のインポートステートメントは、 Editおよびsave機能とともにスタイルシートをインポートします。

registerBlockType関数は、コンポーネントをクライアントに登録します。 この関数は、ブロック名のnamespace/block-name （サーバーに登録されているものと同じ）とブロック構成オブジェクトの2つのパラメーターを取ります。

Edit関数は、ブロックエディターでレンダリングされたブロックインターフェイスを提供し、 save関数は、シリアル化されてデータベースに保存される構造を提供します（詳細を参照）。

edit.js

edit.jsは、ブロック管理インターフェースを構築する場所です。

 import { __ } from '@wordpress/i18n'; import { useBlockProps } from '@wordpress/block-editor'; import './editor.scss'; export default function Edit() { return ( <p {...useBlockProps()}> {__('My First Block – hello from the editor!', 'my-first-block')} </p> ); }

まず、 @wordpress/i18nパッケージ（このパッケージにはJavaScriptバージョンの翻訳関数が含まれています）、 useBlockProps Reactフック、およびeditor.scssファイルから__関数をインポートします。

その後、Reactコンポーネントをエクスポートします（インポートおよびエクスポートステートメントの詳細を参照してください）。

save.js

save.jsファイルは、データベースに保存されるブロック構造を構築する場所です。

 import { __ } from '@wordpress/i18n'; import { useBlockProps } from '@wordpress/block-editor'; export default function save() { return ( <p {...useBlockProps.save()}> {__( 'My First Block – hello from the saved content!', 'my-first-block' )} </p> ); }

editor.scssおよびstyle.scss

スクリプトとは別に、2つのSASSファイルがsrcフォルダーにあります。 editor.scssファイルには、エディターのコンテキストでブロックに適用されたスタイルが含まれ、 style.scssファイルには、フロントエンドに表示するためのブロックのスタイルが含まれています。 このガイドの後半では、これらのファイルについて詳しく説明します。

node_modulesとビルドフォルダ

node_modulesフォルダーには、ノードモジュールとその依存関係が含まれています。 この記事の範囲を超えているため、ノードパッケージについて詳しくは説明しませんが、npmがパッケージをインストールする場所については、この記事で詳しく読むことができます。

buildフォルダーには、ビルドプロセスで作成されたJSファイルとCSSファイルが含まれています。 ESNext構文およびJavaScriptビルドセットアップガイドで、ビルドプロセスをさらに深く掘り下げることができます。

プロジェクト：最初のグーテンベルクブロックの構築

手を汚す時が来ました。 このセクションでは、アフィリエイトブロックという名前のCTAブロックを提供するプラグインを作成する方法を説明します。

ブロックは2つの列で構成され、左側に画像、右側にテキスト段落があります。 カスタマイズ可能なリンクのあるボタンがテキストの下に配置されます。

これは単純な例ですが、グーテンベルクブロック開発の基本をカバーすることができます。 基本を明確に理解したら、ブロックエディタハンドブックやその他の利用可能な膨大なリソースを利用して、さらに複雑なグーテンベルクブロックを作成できます。

ローカルの開発環境で最新バージョンのWordPressを実行していると仮定すると、これから学ぶことは次のとおりです。

• スターターブロックプラグインを設定する方法
• block.json at Work
• 組み込みコンポーネントの使用：リッチテキストコンポーネント
• ブロックツールバーへのコントロールの追加
• ブロック設定サイドバーのカスタマイズ
• 外部リンクの追加とカスタマイズ
• 複数のブロックスタイルの追加
• InnerBlocksコンポーネントを使用したブロックのネスト
• 追加の改善

位置についてよーいどん！

スターターブロックプラグインを設定する方法

コマンドラインツールを起動し、 / wp-content/pluginsフォルダーに移動します。

ここで、次のコマンドを実行します。

 npx @wordpress/create-block

このコマンドは、インタラクティブモードでブロックを登録するためのPHP、SCSS、およびJSファイルを生成し、ブロックに必要なデータを簡単に追加できるようにします。 この例では、次の詳細を使用します。

• ブロックスラッグ：my-affiliate-block
• 内部名前空間：my-affiliate-plugin
• ブロック表示タイトル：アフィリエイトブロック
• 短いブロックの説明：Kinstaリーダー用のブロックの例
• ダシコン：お金
• カテゴリ名：デザイン
• プラグインの作者：あなたの名前
• ライセンス：–
• ライセンステキストへのリンク：–
• 現在のプラグインバージョン：0.1.0

プラグインとすべての依存関係のインストールには数分かかります。 プロセスが完了すると、次の応答が表示されます。

ここで、 / wp-content/pluginsフォルダーから次のコマンドを実行します。

 cd my-affiliate-block

最後に、プラグインのフォルダー（この例ではmy-affiliate-block ）内から、次のコマンドで開発を開始できます。

 npm start

次に、プラグイン画面を開いて、アフィリエイトブロックプラグインを見つけてアクティブにします。

新しい投稿を作成し、ブロックインサーターを開いて、[デザイン]カテゴリまで下にスクロールします。 クリックしてアフィリエイトブロックを追加します。

block.json at Work

前述したように、サーバー側のブロック登録はメインの.phpファイルで行われます。 ただし、 .phpファイルで設定を定義することはありません。 代わりに、 block.jsonファイルを使用します。

したがって、 block.jsonをもう一度開き、デフォルト設定を詳しく見てみましょう。

 { "apiVersion": 2, "name": "my-affiliate-plugin/my-affiliate-block", "version": "0.1.0", "title": "Affiliate Block", "category": "design", "icon": "money", "description": "An example block for Kinsta readers", "supports": { "html": false }, "textdomain": "my-affiliate-block", "editorScript": "file:./build/index.js", "editorStyle": "file:./build/index.css", "style": "file:./build/style-index.css" }

スクリプトとスタイル

editorScript 、 editorStyle 、およびstyleプロパティは、フロントエンドおよびバックエンドのスクリプトとスタイルへの相対パスを提供します。

ここで定義されたスクリプトとスタイルは、WordPressによって自動的に登録およびキューに入れられるため、手動で登録する必要はありません。 これを証明するには、ブラウザインスペクタを起動し、[ネットワーク]タブを開きます。

上の画像からわかるように、ビルドフォルダーにあるindex.jsスクリプトは、PHPコードを追加しなくても定期的にキューに入れられています。

UIラベル

titleとdescriptionのプロパティは、エディタでブロックを識別するために必要なラベルを提供します。

キーワード

前述したように、プロパティと属性を使用してブロック設定を正確に構成できます。 たとえば、ユーザーがブロックを検索するのに役立つ1つ以上のkeywordsを追加できます。

 { "keywords": [ "kinsta", "affiliate", "money" ] }

クイックインサーターに「kinsta」、「affiliate」、または「money」を入力すると、エディターはアフィリエイトブロックを提案します。

ローカリゼーション

If you are wondering how the localization of the strings in the JSON file happens, here is the answer:

In JavaScript, you can use now registerBlockTypeFromMetadata method from @wordpress/blocks package to register a block type using the metadata loaded from block.json file. All localized properties get automatically wrapped in _x (from @wordpress/i18n package) function calls similar to how it works in PHP with register_block_type_from_metadata . The only requirement is to set the textdomain property in the block.json file.

Here we are using the registerBlockType function instead of registerBlockTypeFromMetadata , as the latter has been deprecated since Gutenberg 10.7, but the mechanism is the same.

Using Built-In Components: The RichText Component

The elements that make up a Gutenberg block are React components, and you can access these components via the wp global variable. For example, try to type wp.editor into your browser's console. This will give you the full list of the components included in the wp.editor module.

Scroll through the list and guess what components are meant for by their names.

Similarly, you can check the list of components included in the wp.components module:

Now go back to the edit.js file and take a closer look at the script:

import { __ } from '@wordpress/i18n'; import { useBlockProps } from '@wordpress/block-editor'; import './editor.scss'; export default function Edit() { return ( <p {...useBlockProps()}> {__('My First Block – hello from the editor!', 'my-first-block')} </p> ); }

このコードは、編集不可能な単純なテキストを含む静的ブロックを生成します。 しかし、私たちは物事を簡単に変えることができます：

テキストを編集可能にするには、現在の<p>タグを、入力コンテンツを編集可能にするコンポーネントに置き換える必要があります。 そのために、グーテンベルクは組み込みのリッチテキストコンポーネントを提供します。

組み込みコンポーネントをブロックに追加するのは、5つのステップのプロセスです。

1. WordPressパッケージから必要なコンポーネントをインポートします
2. 対応する要素をJSXコードに含めます
3. block.jsonファイルで必要な属性を定義します
4. イベントハンドラーを定義する
5. データを保存する

ステップ1：WordPressパッケージから必要なコンポーネントをインポートする

次に、 edit.jsファイルを開き、次のimportステートメントを変更します。

 import { useBlockProps } from '@wordpress/block-editor';

…に：

 import { useBlockProps, RichText } from '@wordpress/block-editor';

このようにして、 useBlockProps関数とRichTextコンポーネントを@wordpress/block-editorパッケージからインポートします。

useBlockProps

useBlockProps Reactフックは、ブロックのラッパー要素をマークします。

APIバージョン2を使用する場合は、ブロックのedit関数で新しいuseBlockPropsフックを使用して、ブロックのラッパー要素をマークする必要があります。 フックは、ブロックの動作を有効にするために必要な属性とイベントハンドラーを挿入します。 ブロック要素に渡したい属性はすべてuseBlockPropsを介して渡され、戻り値が要素に拡散される必要があります。

簡単に言うと、 useBlockPropsは属性とクラスをラッパー要素（この例ではp要素）に自動的に割り当てます。

ラッパー要素からuseBlockPropsを削除すると、ブロックの機能とスタイルにアクセスできない単純なテキスト文字列が作成されます。

後で説明するように、プロパティのオブジェクトをuseBlockPropsに渡して、出力をカスタマイズすることもできます。

リッチテキスト

リッチテキストコンポーネントは、コンテンツ編集可能な入力を提供し、ユーザーがコンテンツを編集およびフォーマットできるようにします。

コンポーネントは、GitHubのgutenberg / packages / block-editor / src / components / rich-text/README.mdに記載されています。

ステップ2：対応する要素をJSXコードに含める

... const blockProps = useBlockProps(); return ( <RichText { ...blockProps } tagName="p" onChange={ onChangeContent } allowedFormats={ [ 'core/bold', 'core/italic' ] } value={ attributes.content } placeholder={ __( 'Write your text...' ) } /> );

コードについて1行ずつコメントしましょう。

• tagName —編集可能なHTML要素のタグ名
• onChange —要素のコンテンツが変更されたときに呼び出される関数
• allowedFormats —許可されたフォーマットの配列。 デフォルトでは、すべての形式が許可されています
• value —編集可能にするHTML文字列
• placeholder —要素が空のときに表示するプレースホルダーテキスト

ステップ3：block.jsonファイルで必要な属性を定義する

属性は、リッチコンテンツ、背景色、URLなど、ブロックによって保存されたデータに関する情報を提供します。

キーと値のペアでattributesオブジェクト内に任意の数の属性を設定できます。ここで、キーは属性名であり、値は属性定義です。

次に、 block.jsonファイルを開き、次のattributes propを追加します。

 "attributes": { "content": { "type": "string", "source": "html", "selector": "p" } },

content属性を使用すると、ユーザーが入力したテキストを編集可能なフィールドに保存できます。

• typeは、属性によって格納されるデータのタイプを示します。 enumプロパティを定義しない限り、この型は必須です。
• sourceは、投稿コンテンツから属性値を抽出する方法を定義します。 この例では、HTMLコンテンツです。 ソースプロパティを指定しない場合、データはブロック区切り文字に格納されることに注意してください（詳細を参照）。
• selectorは、HTMLタグ、またはクラス名やid属性などの他のセレクターです。

Edit関数にプロパティのオブジェクトを渡します。 したがって、 edit.jsファイルに戻り、次の変更を加えます。

 export default function Edit( { attributes, setAttributes } ) { ... }

ステップ4：イベントハンドラーを定義する

RichText要素にはonChange属性があり、要素のコンテンツが変更されたときに呼び出す関数を提供します。

その関数を定義して、 edit.jsスクリプト全体を見てみましょう。

 import { __ } from '@wordpress/i18n'; import { useBlockProps, RichText } from '@wordpress/block-editor'; import './editor.scss'; export default function Edit( { attributes, setAttributes } ) { const blockProps = useBlockProps(); const onChangeContent = ( newContent ) => { setAttributes( { content: newContent } ) } return ( <RichText { ...blockProps } tagName="p" onChange={ onChangeContent } allowedFormats={ [ 'core/bold', 'core/italic' ] } value={ attributes.content } placeholder={ __( 'Write your text...' ) } /> ); }

次に、ファイルを保存して、ターミナルウィンドウでnpm run startします。 次に、WordPressダッシュボードに戻り、新しい投稿またはページを作成して、アフィリエイトブロックを追加します。

テキストを追加して、コードビューに切り替えます。 コードは次のようになります。

 <!-- wp:my-affiliate-plugin/my-affiliate-block --> <p class="wp-block-my-affiliate-plugin-my-affiliate-block">This is my first editable Gutenberg block </p> <!-- /wp:my-affiliate-plugin/my-affiliate-block -->

ここでページを保存してフロントエンドの結果を確認すると、変更がサイトに影響を与えないため、少しがっかりする可能性があります。 これは、投稿が保存されるときにユーザー入力をデータベースに保存するようにsave.jsファイルを変更する必要があるためです。

ステップ5：データを保存する

次に、 save.jsファイルを開き、スクリプトを次のように変更します。

 import { __ } from '@wordpress/i18n'; import { useBlockProps, RichText } from '@wordpress/block-editor'; export default function save( { attributes } ) { const blockProps = useBlockProps.save(); return ( <RichText.Content { ...blockProps } tagName="p" value={ attributes.content } /> ); }

それが私たちがここで行っていることです：

• block-editorパッケージからRichTextコンポーネントをインポートします。
• オブジェクト引数を介していくつかのプロパティをsave関数に渡します（この例では、 attributesプロパティのみを渡します）
• RichTextコンポーネントのコンテンツを返す

RichTextコンポーネントの詳細については、ブロックエディターハンドブックを参照してください。Githubで小道具の完全なリストを見つけることができます。

それでは、さらに一歩進んでみましょう。 次のセクションでは、ブロックツールバーにコントロールを追加する方法を学習します。

ブロックツールバーへのコントロールの追加

ブロックツールバーには、ユーザーがブロックコンテンツの一部を操作できるようにする一連のコントロールが含まれています。 ツールバーコントロールごとに、次のコンポーネントがあります。

たとえば、ブロックにテキスト配置コントロールを追加できます。 @wordpress/block-editorパッケージから2つのコンポーネントをインポートするだけです。

前の例と同じ手順を実行します。

1. WordPressパッケージから必要なコンポーネントをインポートする
2. 対応する要素をJSXコードに含める
3. block.jsonファイルで必要な属性を定義します
4. イベントハンドラーの定義
5. データを保存

ステップ1：@ wordpress/block-editorからBlockControlsとAlignmentControlコンポーネントをインポートする

ブロックツールバーに配置コントロールを追加するには、次の2つのコンポーネントが必要です。

• BlockControlsは、コントロールの動的ツールバーをレンダリングします（文書化されていません）。
• AlignmentControlは、選択したブロックの配置オプションを表示するドロップダウンメニューを表示します（続きを読む）

edit.jsファイルを開き、以下に示すようにimportステートメントを編集します。

 import { useBlockProps, RichText, AlignmentControl, BlockControls } from '@wordpress/block-editor';

ステップ2：BlockControlsとAlignmentControl要素を追加する

Edit機能に移動し、 <RichText />と同じレベルに<BlockControls />要素を挿入します。 次に、 <BlockControls /> <AlignmentControl />を追加します。

 export default function Edit( { attributes, setAttributes } ) { const blockProps = useBlockProps(); return ( <> <BlockControls> <AlignmentControl value={ attributes.align } onChange={ onChangeAlign } /> </BlockControls> <RichText { ...blockProps } tagName="p" onChange={ onChangeContent } allowedFormats={ [ 'core/bold', 'core/italic' ] } value={ attributes.content } placeholder={ __( 'Write your text...' ) } style={ { textAlign: attributes.align } } /> </> ); }

上記のコードでは、 <>と</>はReactフラグメントを宣言するための短い構文であり、Reactで複数の要素を返す方法です。

この例では、 AlignmentControlには2つの属性があります。

• valueは、要素の現在の値を提供します
• onChangeは、値が変更されたときに実行するイベントハンドラーを提供します

また、 RichText要素の追加の属性を定義しました（例を使用して属性の完全なリストを確認してください）

ステップ3：block.jsonでalign属性を定義します

次に、 block.jsonファイルに移動し、 align属性を追加します。

 "align": { "type": "string", "default": "none" }

ターミナルに戻り、 ^Cで現在のプロセスを停止し、 npm run startスクリプトを再開します。 次に、ブロックエディタに戻り、ページを更新してブロックを選択します。 配置コントロール付きのブロックツールバーが表示されます。

ここで、新しい配置コントロールを使用してブロックコンテンツをフォーマットしようとすると、何も起こらないことがわかります。 これは、イベントハンドラーをまだ定義していないためです。

ステップ4：イベントハンドラーを定義する

次に、 onChangeAlignを定義します。

 const onChangeAlign = ( newAlign ) => { setAttributes( { align: newAlign === undefined ? 'none' : newAlign, } ) }

newAlignがundefinedの場合、 newAlignをnoneに設定します。 それ以外の場合は、 newAlignを使用します。

edit.jsスクリプトは（今のところ）完全である必要があります。

 export default function Edit( { attributes, setAttributes } ) { const blockProps = useBlockProps(); const onChangeContent = ( newContent ) => { setAttributes( { content: newContent } ) } const onChangeAlign = ( newAlign ) => { setAttributes( { align: newAlign === undefined ? 'none' : newAlign, } ) } return ( <> <BlockControls> <AlignmentControl value={ attributes.align } onChange={ onChangeAlign } /> </BlockControls> <RichText { ...blockProps } tagName="p" onChange={ onChangeContent } allowedFormats={ [ 'core/bold', 'core/italic' ] } value={ attributes.content } placeholder={ __( 'Write your text...' ) } style={ { textAlign: attributes.align } } /> </> ); }

これで、エディターに戻ってブロックの内容を揃えることができます。

ブロックの内容と属性をデータベースに保存するために、保存機能を変更する必要があります。

ステップ5：データを保存する

save.jsを開き、 save機能を次のように変更します。

 export default function save( { attributes } ) { const blockProps = useBlockProps.save(); return ( <RichText.Content { ...blockProps } tagName="p" value={ attributes.content } style={ { textAlign: attributes.align } } /> ); }

最後に、コードを読みやすくするために、非構造化代入構文を使用して、 attributeオブジェクトから個々のプロパティを抽出できます。

 export default function save( { attributes } ) { const blockProps = useBlockProps.save(); const { content, align } = attributes; return ( <RichText.Content { ...blockProps } tagName="p" value={ content } style={ { textAlign: align } } /> ); }

ファイルを保存し、プロセスを再開して、コードエディタモードでエディタに戻ります。 コードは次のようになります。

 <!-- wp:my-affiliate-plugin/my-affiliate-block {"align":"right"} --> <p class="wp-block-my-affiliate-plugin-my-affiliate-block">This is my first editable <strong><em>Gutenberg</em></strong> <em>block</em> </p> <!-- /wp:my-affiliate-plugin/my-affiliate-block -->

以上です！ ブロックツールバーに配置コントロールを追加しました

ブロックツールバーコントロールの詳細については、ブロックエディタハンドブックを参照してください。

ブロック設定サイドバーのカスタマイズ

ブロック設定サイドバーにコントロールを追加することもできます（または、アプリケーション用に新しいサイドバーを作成することもできます）。

APIは、そのためのInspectorControlsコンポーネントを提供します。

ブロックエディタハンドブックでは、設定サイドバーの使用方法について説明しています。

設定サイドバーは、あまり使用されない設定や、より多くの画面スペースを必要とする設定を表示するために使用されます。 設定サイドバーは、ブロックレベルの設定にのみ使用する必要があります。

ブロック内の選択されたコンテンツにのみ影響する設定がある場合（例：段落内の選択されたテキストの「太字」設定）：設定サイドバー内に配置しないでください。 設定サイドバーは、HTMLモードでブロックを編集している場合でも表示されるため、ブロックレベルの設定のみを含める必要があります。

また：

1. WordPressパッケージから必要なコンポーネントをインポートする
2. 対応する要素をJSXコードに含める
3. block.jsonファイルで必要な属性を定義します
4. イベントハンドラーの定義
5. データを保存

手順1.@wordpress/block-editorからInspectorControlsおよびPanelColorSettingsコンポーネントをインポートします

いくつかのコントロールを追加して、ユーザーがブロックの特定の側面をカスタマイズできるようにすることができます。 たとえば、カラーコントロールパネルを提供できます。 そのためには、 block-editorモジュールからInspectorControlsコンポーネントとPanelColorSettingsコンポーネントをインポートする必要があります。

 import { useBlockProps, RichText, AlignmentControl, BlockControls, InspectorControls, PanelColorSettings } from '@wordpress/block-editor';

ステップ2：対応する要素をJSXコードに含める

これで、 Edit関数によって返されるJSXに対応する要素を追加できます。

 export default function Edit( { attributes, setAttributes } ) { const blockProps = useBlockProps(); const onChangeContent = ( newContent ) => { setAttributes( { content: newContent } ) } const onChangeAlign = ( newAlign ) => { setAttributes( { align: newAlign === undefined ? 'none' : newAlign, } ) } return ( <> <InspectorControls> <PanelColorSettings title={ __( 'Color settings', 'my-affiliate-block' ) } initialOpen={ false } colorSettings={ [ { value: textColor, onChange: onChangeTextColor, label: __( 'Text color', 'my-affiliate-block' ), }, { value: backgroundColor, onChange: onChangeBackgroundColor, label: __( 'Background color', 'my-affiliate-block' ), } ] } /> </InspectorControls> <BlockControls> <AlignmentControl value={ attributes.align } onChange={ onChangeAlign } /> </BlockControls> <RichText { ...blockProps } tagName="p" onChange={ onChangeContent } allowedFormats={ [ 'core/bold', 'core/italic' ] } value={ attributes.content } placeholder={ __( 'Write your text...', 'my-affiliate-block' ) } style={ { textAlign: align, backgroundColor: backgroundColor, color: textColor } } /> </> ); }

RichText要素のstyle属性も更新したことに注意してください。

 <RichText { ...blockProps } tagName="p" onChange={ onChangeContent } allowedFormats={ [ 'core/bold', 'core/italic' ] } value={ content } placeholder={ __( 'Write your text...', 'my-affiliate-block' ) } style={ { textAlign: align, backgroundColor: backgroundColor, color: textColor } } />

ステップ3：block.jsonで必要な属性を定義する

次に、 block.jsonファイルでbackgroundColor属性とtextColor属性を定義します。

 "attributes": { "content": { "type": "string", "source": "html", "selector": "p" }, "align": { "type": "string", "default": "none" }, "backgroundColor": { "type": "string" }, "textColor": { "type": "string" } },

ステップ4：イベントハンドラーを定義する

次に、ユーザー入力でbackgroundColorとtextColorを更新する2つの関数を定義する必要があります。

 const onChangeBackgroundColor = ( newBackgroundColor ) => { setAttributes( { backgroundColor: newBackgroundColor } ) } const onChangeTextColor = ( newTextColor ) => { setAttributes( { textColor: newTextColor } ) }

ステップ5：データを保存する

最後のステップ： save.jsファイルを開き、スクリプトを次のように変更します。

 export default function save( { attributes } ) { const blockProps = useBlockProps.save(); const { content, align, backgroundColor, textColor } = attributes; return ( <RichText.Content { ...blockProps } tagName="p" value={ content } style={ { textAlign: align, backgroundColor: backgroundColor, color: textColor } } /> ); }

ここでプロセスを停止し（^ C）、 npm run startします。 ページを更新し、ブロックのインスタンスを削除して、投稿に再度追加します。

変更を加え、投稿を保存して、フロントエンドで表示します。 ブロックエディタで行った変更は、フロントサイトに反映されている必要があります。

外部リンクの追加とカスタマイズ

このセクションでは、ブロックタイプに新しいコンポーネントを追加します。

• ユーザーがアフィリエイトブロックにカスタマイズ可能なリンクを追加できるようにするExternalLinkコンポーネント
• ユーザーがリンク設定をカスタマイズできるようにするいくつかのサイドバーコントロール

ステップ1.@wordpress/componentsからコンポーネントをインポートします

次に、 @wordpress/componentsからいくつかのコンポーネントをインポートする必要があります。 edit.jsファイルを開き、次のimportステートメントを追加します。

 import { TextControl, PanelBody, PanelRow, ToggleControl, ExternalLink } from '@wordpress/components';

• PanelBodyは、折りたたみ可能なコンテナを設定サイドバーに追加します。
• PaneRowは、サイドバーコントロール用の汎用コンテナを生成します。
• TextControlは、テキスト入力コントロールを提供します。
• ToggleControlは、ユーザーが特定のオプションを有効/無効にできるようにするトグルを提供します
• ExternalLinkは、外部リンクを追加するためのシンプルなコンポーネントです。

ステップ2.対応する要素をJSXコードに含める

最初に、 divコンテナ内の同じレベルのRichTextにExternalLink要素を追加します。

 <div { ...blockProps }> <RichText ... /> <ExternalLink href={ affiliateLink } className="affiliate-button" rel={ hasLinkNofollow ? "nofollow" : "" } > { linkLabel } </ExternalLink> </div>

ExternalLinkコンポーネントは文書化されていないため、使用可能な属性のリストを取得するためにコンポーネント自体を参照しました。 ここでは、 href 、 className 、およびrel属性を使用しています。

デフォルトでは、 rel属性値はnoopener noreferrerに設定されています。 このコードは、トグルコントロールがオンのときに、結果aタグのrel属性にnofollowキーワードを追加します。

これで、ブロックサイドバーにリンク設定を追加できます。

まず、 PanelColorSettingsと同じレベルのInspectorControls内にPanelBody要素を追加します。

 <InspectorControls> <PanelColorSettings ... /> <PanelBody title={ __( 'Link Settings', 'my-affiliate-block' )} initialOpen={true} > ... </PanelBody> </InspectorControls>

これで私たちがしていることは次のとおりです。

1. title属性は、パネルのタイトルを提供します。
2. initialOpenは、パネルが最初に開いているかどうかを設定します。

次に、PanelBody内に2つのPanelRow要素を追加し、各PanelBody内にTextControl要素を追加しPanelRow 。

 <PanelBody title={ __( 'Link Settings', 'my-affiliate-block' )} initialOpen={true} > <PanelRow> <fieldset> <TextControl label={__( 'Affiliate link', 'my-affiliate-block' )} value={ affiliateLink } onChange={ onChangeAffiliateLink } help={ __( 'Add your affiliate link', 'my-affiliate-block' )} /> </fieldset> </PanelRow> <PanelRow> <fieldset> <TextControl label={__( 'Link label', 'my-affiliate-block' )} value={ linkLabel } onChange={ onChangeLinkLabel } help={ __( 'Add link label', 'my-affiliate-block' )} /> </fieldset> </PanelRow> </PanelBody>

上記のコードは非常に単純に見えるはずです。 2つのテキストコントロールを使用すると、ユーザーはリンクラベルとURLを設定できます。

また、 ToggleControl PanelRow追加し、属性を含めるかどうかなど、特定のオプションのオン/オフを切り替えます。

 <PanelRow> <fieldset> <ToggleControl label="Add rel = nofollow" help={ hasLinkNofollow ? 'Has rel nofollow.' : 'No rel nofollow.' } checked={ hasLinkNofollow } onChange={ toggleNofollow } /> </fieldset> </PanelRow>

ステップ3：block.jsonで必要な属性を定義する

次に、 block.jsonファイルでaffiliateLink 、 linkLabel 、およびhasLinkNofollow属性を定義します。

 "affiliateLink": { "type": "string", "default": "" }, "linkLabel": { "type": "string", "default": "Check it out!" }, "hasLinkNofollow": { "type": "boolean", "default": false }

ここに追加するものはありません！ イベント処理関数の定義に移りましょう。

ステップ4：イベントハンドラーを定義する

edit.jsファイルに戻り、次の関数を追加します。

 const onChangeAffiliateLink = ( newAffiliateLink ) => { setAttributes( { affiliateLink: newAffiliateLink === undefined ? '' : newAffiliateLink } ) } const onChangeLinkLabel = ( newLinkLabel ) => { setAttributes( { linkLabel: newLinkLabel === undefined ? '' : newLinkLabel } ) } const toggleNofollow = () => { setAttributes( { hasLinkNofollow: ! hasLinkNofollow } ) }

これらの関数は、ユーザー入力の対応する属性値を更新します。

ステップ5：データを保存する

最後に、 save.jsのsave機能を更新する必要があります。

 export default function save( { attributes } ) { const { align, content, backgroundColor, textColor, affiliateLink, linkLabel, hasLinkNofollow } = attributes; const blockProps = useBlockProps.save(); return ( <div { ...blockProps }> <RichText.Content tagName="p" value={ content } style={ { backgroundColor: backgroundColor, color: textColor } } /> <p> <a href={ affiliateLink } className="affiliate-button" rel={ hasLinkNofollow ? "nofollow" : "noopener noreferrer" } > { linkLabel } </a> </p> </div> ); }

ここでは、 ExternalLinkの代わりに通常a要素を使用していることに注意してください。

次に、データを保存して環境を再起動します。

複数のブロックスタイルの追加

前のセクションでは、ユーザーがユーザー入力を調整できるようにするブロックツールバーコントロールを追加する方法を学びました。 ブロックツールバーにスタイルコントロールを追加することもできますが、ユーザーがシングルクリックで選択できる事前定義されたブロックスタイルのセットを提供することもできます。

この目的のために、BlockAPIの便利な機能であるBlockStylesを使用します。

あなたがする必要があるのは、 block.json stylesプロパティを定義し、スタイルシートで対応するスタイルを宣言することだけです。

たとえば、次のスタイルの配列を追加できます。

 "styles": [ { "name": "default", "label": "Default", "isDefault": true }, { "name": "border", "label": "Border" } ],

これで、デフォルトのスタイルとborderと呼ばれる追加のスタイルを追加しました。 次に、ブロックエディタに戻ります。

ブロックスイッチャーをクリックし、ブロック設定サイドバーで[スタイル]パネルを探すと、ユーザーはスタイルを利用できるようになります。

スタイルを選択し、 p要素に適用されているクラスを確認します。 ブロックを右クリックして検査します。 次のように構成された名前の新しいクラスが追加されました。

 is-style-{style-name}

「Border」スタイルをチェックした場合、 is-style-borderクラスがp要素に追加されます。 「デフォルト」スタイルをチェックした場合、代わりにis-style-defaultクラスが追加されます。

これで、CSSプロパティを宣言するだけで済みます。 editor.scssファイルを開き、現在のスタイルを次のように置き換えます。

 .wp-block-my-affiliate-plugin-my-affiliate-block { padding: 2px; &.is-style-default{ border: 0; } &.is-style-border{ border: 1px solid #000; } }

これで、 style.scssでも同じことができます。

 .wp-block-my-affiliate-plugin-my-affiliate-block { &.is-style-default{ border: 0; } &.is-style-border{ border: 1px solid #000; } }

プロセスを停止し（^ C）、 npm run startします。

以上です！ ページを更新して、新しいブロックスタイルを楽しんでください。

InnerBlocksコンポーネントを使用したグーテンベルクブロックのネスト

完全に機能していますが、私たちのアフィリエイトブロックはまだあまり魅力的ではありません。 視聴者にとってより魅力的なものにするために、画像を追加することができます。

これにより、ブロックが複雑になる可能性がありますが、幸いなことに、グーテンベルクはネストされたブロックの構造を作成するために使用できる特定のコンポーネントを提供しているため、車輪の再発明を行う必要はありません。

InnerBlocksコンポーネントは、次のように定義されています。

InnerBlocksは、ネストされたブロックコンテンツを有効にするために、ブロック実装で使用できるコンポーネントのペアをエクスポートします。

まず、 srcフォルダーに新しい.jsファイルを作成する必要があります。 この例では、このファイルをcontainer.jsと呼びます。

次に、新しいリソースをindex.jsファイルにインポートする必要があります。

 import './container';

container.jsに戻り、必要なコンポーネントをインポートします。

 import { registerBlockType } from "@wordpress/blocks"; import { __ } from "@wordpress/i18n"; import { useBlockProps, InnerBlocks } from "@wordpress/block-editor";

次のステップは、ブロックが配置される構造を提供するテンプレートを定義することです。 次の例では、コアImageブロックとカスタムAffiliateブロックを含む2つの列で構成されるテンプレートを定義します。

 const TEMPLATE = [ [ 'core/columns', { backgroundColor: 'yellow', verticalAlignment: 'center' }, [ [ 'core/column', { templateLock: 'all' }, [ [ 'core/image' ], ] ], [ 'core/column', { templateLock: 'all' }, [ [ 'my-affiliate-plugin/my-affiliate-block', { placeholder: 'Enter side content...' } ], ] ], ] ] ];

テンプレートは、blockTypes（ブロック名とオプションの属性）の配列として構造化されています。

上記のコードでは、いくつかの属性を使用してColumnsブロックとColumnブロックを構成しました。 具体的には、 templateLock: 'all'属性は、ユーザーが既存のブロックを追加、並べ替え、または削除しないように、列ブロックをロックします。 templateLockは、次のいずれかの値を取ることができます。

• all — InnerBlocksはロックされており、ブロックを追加、並べ替え、または削除することはできません。
• insert —ブロックは並べ替えまたは削除のみが可能です。
• false —テンプレートはロックされていません。

次に、テンプレートがInnerBlocks要素に割り当てられます。

 <InnerBlocks template={ TEMPLATE } templateLock="all" />

互換性の問題を防ぐために、 InnerBlocksコンポーネントにtemplateLock属性も追加しました（問題＃17262およびプル＃26128も参照）。

これが最終的なcontainer.jsファイルです。

 import { registerBlockType } from "@wordpress/blocks"; import { __ } from "@wordpress/i18n"; import { useBlockProps, InnerBlocks } from "@wordpress/block-editor"; const TEMPLATE = [ [ 'core/columns', { backgroundColor: 'yellow', verticalAlignment: 'center' }, [ [ 'core/column', { templateLock: 'all' }, [ [ 'core/image' ], ] ], [ 'core/column', { templateLock: 'all' }, [ [ 'my-affiliate-plugin/my-affiliate-block', { placeholder: 'Enter side content...' } ], ] ], ] ] ]; registerBlockType('my-affiliate-plugin/my-affiliate-container-block', { title: __( 'Container', 'my-affiliate-block' ), category: 'design', edit( { className } ) { return( <div className={ className }> <InnerBlocks template={ TEMPLATE } templateLock="all" /> </div> ) }, save() { const blockProps = useBlockProps.save(); return( <div { ...blockProps }> <InnerBlocks.Content /> </div> ) }, });

追加の改善

私たちのブロックは完全に機能していますが、いくつかの小さな変更を加えることで少し改善することができます。

RichTextコンポーネントによって生成された段落にbackgroundColor属性を割り当てました。 ただし、コンテナdivに背景色を割り当てることをお勧めします。

したがって、 edit.jsファイルとsave.jsdivをdivのように変更します。

 <div { ...blockProps } style={ { backgroundColor: backgroundColor } } > ... </div>

これにより、ユーザーはブロック全体の背景を変更できます。

一方、より関連性の高い変更には、 useBlockPropsメソッドが含まれます。 元のコードでは、定数blockPropsを次のように定義しました。

 const blockProps = useBlockProps();

ただし、 useBlockPropsを使用して、一連のプロパティをより効果的に渡すことができます。 たとえば、 classnamesモジュールからclassnames名をインポートし、それに応じてラッパークラス名を設定できます。

次の例では、 align属性（ edit.js ）の値に基づいてクラス名を割り当てます。

 import classnames from 'classnames'; ... export default function Edit( { attributes, setAttributes } ) { ... const blockProps = useBlockProps( { className: classnames( { [ `has-text-align-${ align }` ]: align, } ) } ); ... }

save.jsファイルでも同じ変更を行います。

 import classnames from 'classnames'; ... export default function save( { attributes } ) { ... const blockProps = useBlockProps.save({ className: classnames( { [ `has-text-align-${ align }` ]: align, } ) }); ... }

そして、それは終わりです！ これで、本番用のビルドを実行できます。

グーテンベルクブロック開発を開始するための詳細なガイドをお探しの場合は、この大規模なガイドが最適です。 それをチェックして、今日グーテンベルクブロックの構築を始めましょう！ クリックしてツイート

概要

そして、この信じられないほどの旅の終わりに、私たちはここにいます！ 開発環境の構成から始めて、完全なブロックタイプを作成することになりました。

冒頭で述べたように、Node.js、Webpack、Babel、およびReactに関する確かな知識は、高度なGutenbergブロックを作成し、プロのGutenberg開発者として市場に参入するために不可欠です。

ただし、ブロック開発を楽しみ始めるためにReactの経験を確立する必要はありません。 ブロック開発は、グーテンベルクブロックの背後にあるテクノロジーでますます幅広いスキルを習得するための動機と目標を与える可能性があります。

したがって、このガイドは完全ではありません。 これは、最初のグーテンベルクブロックの構築を開始するのに役立つさまざまなトピックの紹介にすぎません。

このため、オンラインのドキュメントとガイドを注意深く読んで知識を深めることをお勧めします。 利用可能な多くのリソースの中で、次のことをお勧めします。

• 初心者向けの公式ブロックチュートリアルの作成
• 中級開発者向けの公式ブロックチュートリアル
• 動的ブロック
• メタボックス
• プラグインのサイドバーを作成する

WordPress開発を始めたばかりの場合は、フロントエンド開発の基本的な概念を理解することをお勧めします。 始めるのに役立つ可能性のあるリソースのクイックリストは次のとおりです。

• WordPressをローカルにインストールする方法（無料の電子ブック）
• マネージドワードプレスホスティングの真の価値（無料の電子ブック）
• JavaScriptとは何ですか？
• HTMLとHTML5
• WordPressでCSSを編集する方法
• PHPとは何ですか？
• WordPressフックブートキャンプ：アクション、フィルター、カスタムフックの使用方法

また、このガイドの例の完全なコードはGistで入手できることを忘れないでください。

今度はあなたの番です。グーテンベルクのブロックを開発しましたか？ これまでに経験した主な問題は何ですか？ コメントであなたの経験を教えてください！