ブロック

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

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

ドキュメント内のサンプルコードは 「ESS」と「ESNext」の2つの形式で紹介します。「ESS」は従来の JavaScript (ECMAScript 5) であり、「ESNext」は次期バージョンの言語仕様に JSX 構文を加えたものです。ESNext のコードを使用するにはブラウザーが対応可能な形式にコンパイルするため、JavaScript ビルド手順 の実行が必要です。

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

目次

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