編集する人のために構築

広いフィールドドロワー、ツールバーコントロール、エディターポリシー、管理一覧をblock.jsonとblockstudio.jsonで設定します。

あらゆるフィールドにゆとりを

リピーター、コードフィールド、ネストされたグループはサイドバーでは窮屈です。ブロックヘッダーのOpen Expanded Editorボタンを押すと、同じフィールドが右側の広いドロワーに表示されます。完了ボタン、背景、またはEscで閉じても、ブロックの選択状態は維持されます。

同じフィールドレンダラーが同じ属性を書き込むため、入力中にプレビューが更新され、block.json設定は不要です。コンテンツの横に置くフィールドは、"position": "toolbar"でブロックツールバーに移動できます。

拡張エディター

block.json

{
  "name": "my-theme/hero",
  "title": "Hero",
  "blockstudio": {
    "attributes": [
      {
        "id": "alignment",
        "type": "select",
        "label": "Alignment",
        "position": "toolbar",
        "options": [
          { "value": "left", "label": "Left" },
          { "value": "center", "label": "Center" },
          { "value": "right", "label": "Right" }
        ]
      },
      {
        "id": "title",
        "type": "text",
        "label": "Title"
      }
    ]
  }
}

CSSからの自動補完

blockEditor.cssClassesとcssVariablesにあるスタイルシートのURLを一覧表示し、クラス名やコードフィールドから各ファイルの定義内容を推測できます。

ホバーと選択の目印

blockEditor.enhanceを設定すると、エディターにBlockstudioのホバーと選択の目印が追加されます。

エディターにアクセスできるユーザー

users.idsとusers.rolesは、blockstudio.json内でBlockstudioを持つユーザーIDとロールを指定します。

クライアントの言語で

フィールドコントロール、管理画面、キャンバスは、同梱の翻訳を使い、サイトの言語または各ユーザーのプロフィール言語に従います。

エディター専用アセット

editor.assetsをblockstudio.jsonに指定すると、エディターで読み込む追加アセットを一覧表示できます。

初回ペイロード内のメディア

Filesフィールドは、メディアエンドポイントに問い合わせる前に、ネストされたグループ、タブ、リピーターを通じて、エディターの初回ペイロードから添付ファイルデータを読み取ります。

プレビューリクエストは一度に1件

ブロックへの新しいプレビューリクエストがあると、ブラウザー内で前のリクエストがキャンセルされます。その間も現在のプレビューは画面に表示されます。

各ブロックが値を保持

複数選択したブロックもそれぞれの値を保持し、元に戻す・やり直す操作にはRichTextとサイドバーフィールドが含まれます。

フィールドをオフにして値を保持

編集者はインスペクターからフィールドをオフにできます。左端にカーソルを合わせて青い枠が表示されたらクリックします。フィールドは半透明になり、値は保存されたまま、再びオンにするまでブロックに表示されません。

filesフィールド内の個別項目にも同じ操作ができます。ほかの画像を表示したまま、1枚だけ非表示にできます。フィールドに表示切り替えを付けるには"switch": trueを設定し、テンプレートで状態を確認するには$a['_disabled']を読み取ります。

属性の無効化

block.json

{
  "name": "acme/card",
  "title": "Card",
  "blockstudio": {
    "attributes": [
      {
        "id": "title",
        "type": "text",
        "label": "Title",
        "switch": true
      }
    ]
  }
}

index.php

<?php if (!empty($a['_disabled']) && in_array('title', $a['_disabled'])) : ?>
  <p>No title on this one.</p>
<?php else : ?>
  <h1><?php echo esc_html($a['title']); ?></h1>
<?php endif; ?>

インサーターでプレビュー

block.jsonにexampleキーを追加すると、編集者がブロックインサーターでカーソルを合わせたときにプレビューが表示されます。デフォルトのままで見栄えがよいブロックなら、空のオブジェクトで十分です。

example.attributesに独自フィールドのサンプル値を指定するか、example.innerBlocksで他のブロックを含むブロックの開始時のツリーを指定します。

インサーターのプレビュー

block.json

{
  "name": "my-theme/hero",
  "title": "Hero",
  "category": "text",
  "example": {
    "attributes": {
      "title": "This title will be shown in the preview"
    }
  },
  "blockstudio": true
}

index.php

<h1><?php echo esc_html($a['title']); ?></h1>

1つのファイルでエディターポリシーを設定

テーマの接着コードなしで、インサーターに表示する内容を決められます。blockEditor.blocksでは、core/*などのワイルドカードを使った許可リストと拒否リスト、カテゴリー名と順序の変更、PHPで登録されたブロックスタイルの削除、旧式ウィジェットの非表示、ブロックディレクトリの無効化ができます。

blockEditor.patternsでは、コア、リモート、テーマ、Blockstudioのパターンソースを有効または無効にし、カテゴリーを絞り込めます。blockEditor.mediaではOpenverseを無効にし、編集者が選べる画像サイズを制限します。

ブロックエディターの設定

blockstudio.json

{
  "blockEditor": {
    "blocks": {
      "allow": ["core/*", "my-theme/*"],
      "deny": ["core/embed", "core/freeform"],
      "directory": false,
      "categories": {
        "rename": { "text": "Writing" },
        "order": ["my-theme", "text", "media"]
      },
      "styles": {
        "deny": { "my-theme/card": ["outline"] }
      },
      "legacyWidgets": { "hide": ["archives", "calendar"] }
    },
    "patterns": {
      "core": false,
      "remote": false,
      "categories": { "deny": ["gallery"] }
    },
    "media": {
      "openverse": false,
      "imageSizes": { "allow": ["thumbnail", "large"] }
    }
  }
}

初回表示を高速化

Blockstudioブロックはサーバーでレンダリングされます。エディターは、投稿内にあるブロックのレンダリング結果を事前に読み込みます。同期パターン内のネストされたブロックも含まれます。保存済みブロックごとにレンダラーへリクエストする代わりに、その結果を初回表示に再利用します。

コード、クラス、属性、WYSIWYGコントロールは、初めて表示されたときにダウンロードされるため、未選択のブロックでは読み込まれません。ライブプレビューが不要なブロックはdisableLoadingを設定してプレースホルダーを表示でき、すべてのフィールドを編集できます。

エディターの読み込み

block.json

{
  "name": "my-theme/map",
  "title": "Map",
  "blockstudio": {
    "blockEditor": {
      "disableLoading": true
    }
  }
}

blockstudio.json

{
  "blockEditor": {
    "disableLoading": true
  }
}

ページのように動作するプレビュー

Interactivity APIはエディターのiframe内で読み込まれるため、data-wp-context、バインディング、イベントハンドラー、ストアアクションがキャンバス内で動作します。組み込みのbsui/*コンポーネントもこれを基盤としているため、編集中にダイアログを開いたり、セレクトを展開したりできます。

プレビュー内のリンクは、クリック、修飾キーを使ったオープン、キーボードからの操作のいずれでもページ遷移せず、クリックするとブロックが選択されます。assets.reset.enabledを使うと、テーマのbodyクラスがキャンバスにコピーされるため、.brand-a .site-cardなどのセレクターもそこで一致します。

インタラクティビティ

block.json

{
  "name": "my-theme/disclosure",
  "title": "Disclosure",
  "blockstudio": {
    "interactivity": true
  }
}

functions.php

<?php
add_filter('blockstudio/editor/canvas/body_class', function (array $classes) {
  return array_values(array_diff($classes, ['logged-in']));
});

ツール > Blockstudioにある一覧

管理画面には、Blockstudioがファイルシステムから登録したブロック、拡張機能、フィールド、同期状態付きのページ、db.phpスキーマが、標準のWordPressDataViewsテーブルに一覧表示されます。Databasesビューでは各スキーマのレコードを閲覧でき、RESTAPIを通じて取得とページ分割が行われます。

テーマのblocks.jsonがレジストリを指定すると、Registryビューにそのブロックが一覧表示され、wp-adminからブロックディレクトリにインポートできます。画面はmanage_optionsを持つユーザーに公開され、blockstudio/admin/enabledフィルターで無効にできます。

管理画面

blocks.json

{
  "$schema": "https://blockstudio.dev/schema/blocks.json",
  "directory": "blockstudio",
  "registries": {
    "ui": "https://blocks.example.com/registry.json"
  }
}

functions.php

<?php
add_filter('blockstudio/admin/enabled', '__return_false');

Plus

公式拡張キット

プレミアムサイトテンプレート、AIシステム指示、会員限定Discordコミュニティ。買い切りで、アップデートは生涯無料です。

500+のサイトテンプレート
AIシステム向け指示
無期限アップデート
非公開Discordコミュニティ

Plusを入手