最後の仕上げ

このチュートリアルでは、基本的なブロックを作る場合の一般的なコンセプトと構造を説明しました。

追加のコンポーネント

ブロックエディターでは コンポーネントパッケージ を提供しています。ブロックを作成する際に利用可能な多くのビルド済みコンポーネントが含まれています。

コンポーネントやその実装がどのように見えるかは https://wordpress.github.io/gutenberg で公開されている Storybook ツールを使用してビジュアルに確認できます。

追加のチュートリアル

RichText コンポーネント を使用すると通常のテキストだけでなく、太字、斜体、リンク、その他のインラインフォーマットも可能なリッチな入力フィールドを作成できます。このコンポーネントの使い方については RichText リファレンス を参照してください。

ブロックの右側にある設定 InspectorPanel と、ツールバーコントロールのブロックコントロールには標準の実装方法があります。追加の情報については ブロックコントロール チュートリアル を参照してください。

プラグインのサイドバーを作成する際には サイドバー チュートリアル が良いリソースになります。

追加のブロックを含むブロック「ネストしたブロック」はカラム、カバー、ソーシャルリンクなどさまざまなブロックで使用される共通パターンです。この機能を実装する InnerBlocks コンポーネント については InnerBlocks の使用 ドキュメント を参照してください。

Gutenberg チームはどうやっているのかを調べる

情報やリファレンスの中で最小のものの1つがブロックエディター自身でしょう。すべてのコアブロックは同じ方法で構築されています。どのように実装されているのか学ぶにあたって良い方法は自分の興味に近いコアブロックのコードを調べ、同じアプローチを作成中のブロックに対しても行うことです。

すべてのコアブロックのソースは Github 上のブロックライブラリーパッケージ にあります。

原文

最終更新日: