テーマで使われているブロック一覧を表示する方法

はじめに

テーマで使われているGutenbergエディターのブロック名を一覧表示するための管理画面サブメニューを追加します。

この記事では、この方法について説明します。

完成イメージ

実装手順

以下のコードをfunctions.phpに追加します。

// 管理画面にメニューを追加
add_action('admin_menu', function () {
  add_submenu_page(
    'tools.php',
    '登録済みブロック一覧',
    '登録済みブロック',
    'manage_options',
    'block-list',
    'render_block_list'
  );
});


/**
 * 管理画面ページを出力
 *
 * @return void
 */
if (!function_exists('render_block_list')):
function render_block_list() {
  // 登録されているブロックを取得
  $blocks = WP_Block_Type_Registry::get_instance()->get_all_registered();
  ?>
  <div class="wrap">
    <h1>登録済みブロック一覧</h1>

    <?php if (empty($blocks)) : ?>
      <p>登録されているブロックがありません。</p>
    <?php else : ?>
      <table class="widefat fixed striped">
        <thead>
          <tr>
            <th>名前</th>
            <th>タイトル</th>
            <th>説明</th>
          </tr>
        </thead>
        <tbody>
        <?php foreach ($blocks as $block) : ?>
          <tr>
            <td><?= esc_html($block->name); ?></td>
            <td><?= esc_html($block->title); ?></td>
            <td><?= esc_html($block->description); ?></td>
          </tr>
        <?php endforeach; ?>
        </tbody>
      </table>
    <?php endif; ?>
  </div>
  <?php
}
endif;

さいごに

今回紹介した方法を使えば、管理画面の「ツール」メニュー内にテーマで使用されているGutenbergブロックの一覧を簡単に表示できます。
この一覧を活用してテーマやプラグインのブロック利用状況を把握しやすくなり、開発や管理がスムーズになります。