WordPressのブロックテーマ環境でプラグインや独自機能を開発する際、「投稿本文の直後にシェアボタンやCTA枠を自動で入れたい」「ナビゲーションの末尾にログインボタンを追加したい」「管理画面に検索・並び替え付きのモダンな一覧画面を作りたい」という場面があります。こうした要件に対して現在のWordPressコアおよびGutenbergが標準提供している仕組みが「Block Hooks（ブロックフック）API」と「DataViews（@wordpress/dataviews）」です。

Block Hooksを使うと、ユーザーがテンプレートを手動で書き換えなくても指定した基準（アンカー）ブロックの前後や子要素へカスタムブロックを自動配置でき、しかもサイトエディタ上から表示のON/OFFを切り替えられます。またDataViewsを活用すれば、固定ページ一覧やパターン一覧と同じ操作感のテーブル・グリッドUIを独自の管理画面へ組み込むことが可能です。本記事では、両機能の仕組みと実装コード例を図解とともに整理します。

従来のテンプレート編集・関数フックとBlock Hooksの違い

クラシックテーマ時代には、記事の末尾に関連記事やSNSシェアボタンを追加する手段としてPHPのthe_contentフィルターが広く使われてきました。しかしブロックテーマ（フルサイト編集）では、ヘッダーやナビゲーション、クエリループなどページ全体がブロックで構成されるため、the_contentだけでは本文エリアの外側に要素を追加できません。また、the_contentで差し込んだHTMLはサイトエディタ上のキャンバスに表示されず、位置の入れ替えやデザイン調整が行いにくいという制約がありました。

Block Hooks APIは、ブロックテーマのテンプレートやテンプレートパーツ、パターンが読み込まれるタイミングで、あらかじめ指定された基準ブロック（アンカーブロック）の相対位置へ別のブロックを動的に挿入する仕組みです。サイトエディタのリストビューやインスペクターには「プラグインからのフックされたブロック」としてトグルスイッチが表示されるため、不要な場合は管理者がコードに触れることなく非表示に切り替えられます。

Block Hooksで指定できる相対位置とblock.jsonの記述方法

Block Hooksでカスタムブロックを自動挿入する一番シンプルな方法は、ブロック定義ファイルであるblock.jsonにblockHooksプロパティを追加することです。キーには基準となるアンカーブロック名（例：core/post-contentやcore/navigation）を指定し、値には4種類の相対位置のいずれかを指定します。

block.jsonでの宣言コード例

たとえば、自作の「お気に入り登録ボタン（my-plugin/favorite-button）」を投稿本文ブロック（core/post-content）の直後に自動配置したい場合は、block.jsonへ以下のように記述します。

{
  "$schema": "https://schemas.wp.org/trunk/block.json",
  "apiVersion": 3,
  "name": "my-plugin/favorite-button",
  "title": "お気に入り登録ボタン",
  "category": "widgets",
  "icon": "heart",
  "blockHooks": {
    "core/post-content": "after"
  },
  "supports": {
    "html": false
  },
  "render": "file:./render.php"
}

PHPフィルターによる条件分岐と属性のカスタマイズ

block.jsonでの宣言はすべての該当アンカーブロックに対して適用されますが、「個別投稿テンプレート（single）のときだけ挿入したい」「挿入されるブロックに初期スタイル属性（背景色やクラス名）を付与したい」といったケースでは、PHPのhooked_block_typesフィルターおよびhooked_block_{block_type}フィルターを組み合わせて制御します。

<?php
// 個別投稿テンプレート（single）の core/post-content 直後にのみブロックをフックする
add_filter(
    'hooked_block_types',
    function( $hooked_block_types, $relative_position, $anchor_block_type, $context ) {
        if (
            'core/post-content' === $anchor_block_type &&
            'after' === $relative_position &&
            $context instanceof WP_Block_Template &&
            'single' === $context->slug
        ) {
            $hooked_block_types[] = 'my-plugin/cta-box';
        }
        return $hooked_block_types;
    },
    10,
    4
);

// 挿入されるブロックの属性（attrs）を動的に調整する
add_filter(
    'hooked_block_my-plugin/cta-box',
    function( $parsed_hooked_block, $hooked_block_type, $relative_position, $parsed_anchor_block, $context ) {
        if ( null === $parsed_hooked_block ) {
            return null;
        }
        $parsed_hooked_block['attrs']['backgroundColor'] = 'contrast';
        $parsed_hooked_block['attrs']['textColor']       = 'base';
        return $parsed_hooked_block;
    },
    10,
    5
);

DataViews（@wordpress/dataviews）による管理画面UIの構築

フロントエンドやテンプレート側の拡張を担うのがBlock Hooksであるのに対し、管理画面側のデータ一覧表示を近代化するReactコンポーネントパッケージがDataViews（@wordpress/dataviews）です。WordPressのサイトエディタにおける「固定ページ一覧」「テンプレート一覧」「パターン一覧」で採用されており、従来のWP_List_Table（PHPによるテーブル描画）に代わる標準UIレイヤーとして機能します。

DataViewsを導入すると、プラグインの独自管理画面やカスタム投稿のデータ管理画面において、以下の機能を少ない記述量で統一的に提供できます。

• 複数の表示レイアウト切替：表形式（table）、カード型のグリッド形式（grid）、リスト形式（list）を画面右上のスイッチャーから即座に切り替えられます。
• 検索・フィルター・ソート：キーワード検索窓、ステータスやカテゴリーなどの絞り込み条件、各カラムの昇順・降順ソートが標準UIとして組み込まれています。
• アクション定義（actions）：行ごとの「編集」「複製」「削除」メニューや、複数選択時の一括操作（バルクアクション）を配列定義で追加できます。

@wordpress/dataviewsの基本実装コード例

プラグインのReact管理画面でDataViewsコンポーネントを描画する際は、データ配列（data）、各列の定義（fields）、現在の表示状態（view）、およびページネーション情報を渡します。

import { useState, useMemo } from '@wordpress/element';
import { DataViews, filterSortAndPaginate } from '@wordpress/dataviews';

const INITIAL_DATA = [
  { id: 1, title: '記事末尾のCTA枠', anchor: 'core/post-content', position: 'after', status: 'active' },
  { id: 2, title: 'ナビ末尾の相談ボタン', anchor: 'core/navigation', position: 'last_child', status: 'active' },
  { id: 3, title: '本文先頭の告知枠', anchor: 'core/post-content', position: 'before', status: 'paused' },
];

export function HookedBlocksAdminTable() {
  const [ view, setView ] = useState( {
    type: 'table',
    perPage: 10,
    page: 1,
    search: '',
    fields: [ 'title', 'anchor', 'position', 'status' ],
    layout: {},
  } );

  const fields = useMemo( () => [
    { id: 'title', label: 'ブロック名称', enableGlobalSearch: true, enableSorting: true },
    { id: 'anchor', label: '基準ブロック（アンカー）', enableSorting: true },
    { id: 'position', label: '挿入位置' },
    {
      id: 'status',
      label: '状態',
      elements: [
        { value: 'active', label: '有効' },
        { value: 'paused', label: '停止中' },
      ],
    },
  ], [] );

  const { data: shownData, paginationInfo } = useMemo( () => {
    return filterSortAndPaginate( INITIAL_DATA, view, fields );
  }, [ view, fields ] );

  return (
    <DataViews
      data={ shownData }
      fields={ fields }
      view={ view }
      onChangeView={ setView }
      paginationInfo={ paginationInfo }
      defaultLayouts={ { table: {}, grid: {} } }
    />
  );
}

Block HooksとDataViewsを導入する実務ステップと注意点

最後に、プラグインやブロックテーマの拡張機能としてBlock HooksとDataViewsを組み込む際の手順と、実運用で気をつけたい仕様上のポイントを整理します。

特にBlock Hooksを使用する際、理解しておくべき重要な仕様が「ユーザーが保存したテンプレートへの配慮」です。WordPressのBlock Hooksは、テーマのファイル上に定義された未変更のテンプレートやパターンだけでなく、ユーザーが変更を加えたテンプレートに対しても一定のルールで動作しますが、サイトエディタ側で一度そのフックブロックを明示的にオフにして保存したテンプレートでは、ユーザーの意思を尊重して再挿入されない仕組みになっています。動作確認を行う際は、サイトエディタの「テンプレートをリセット」または新規テンプレート上で挙動を確かめるとスムーズです。

まとめ

WordPressの「Block Hooks API」と「DataViews（@wordpress/dataviews）」は、ブロックテーマ時代のプラグイン・サイト拡張において、フロント側の配置自動化と管理画面側のUI統一をそれぞれ支える基盤技術です。

テーマを切り替えても崩れにくい共通パーツの自動配置や、視認性の高いプラグイン管理画面を作る際に、ぜひ両機能を組み合わせて活用してみてください。