ブロック

このチュートリアルでは、新しいブロックタイプを作成する基本の流れを紹介します。できるだけシンプルな例から始め、各セクションではその前のセクションに対してブロックタイプの実装で必要となる一般的な機能を追加していきます。

このチュートリアルのサンプル WordPress プラグインをダウンロードできます。サンプルには実際にサイトで試すことができるプラグインが含まれています。手順を確認しながらサンプルを自由に拡張して、ブロックの動きに与える効果を確認しましょう。

.zip ファイルの最新バージョンを取得するには、リポジトリのリリースページにアクセスし、「Assets」の下の最新リリースを参照してください。

ドキュメント内のサンプルコードは 「JSX」と「Plain」の2つの形式で紹介します。「JSX」は、JSX 構文を使用し、ビルドの必要な JavaScript コードを指します。「Plain」は、ビルドの不要な「クラシック」な JavaScript を指します。JSX のコードを使用するにはブラウザーが対応可能な形式にコンパイルするため、JavaScript ビルド手順 の実行が必要です。

注意: ブロックの作成やエディターの拡張に「JSX」は必須ではなく、従来の JavaScript でも可能です。ただし JSX とビルド手順 に親しむと開発者はコードの読み書きがラクになります。このためほとんどのサンプルでは JSX 構文を使用しています。

目次

  1. 初めてのブロックタイプ
  2. スタイルシートによるスタイルの適用
  3. 属性と編集可能フィールド
  4. ブロックコントロール: ブロックツールバーと設定サイドバー
  5. ダイナミックブロックの作成
  6. WP-CLI を使用したブロックの生成
  7. ネストしたブロック: InnerBlocks の使用

原文

s
検索
c
新規投稿を作成する
r
返信
e
編集
t
ページのトップへ
j
次の投稿やコメントに移動
k
前の投稿やコメントに移動
o
コメントの表示を切替
esc
投稿やコメントの編集をキャンセル