開発を快適に!WordPressに登録済みのブロック一覧(名前空間)を取得して確認する方法

みなさんこんにちは!エンジニアの高澤です!
今回はWordPressに登録済みのブロック一覧(名前空間)を取得して確認する方法について解説していきたいと思います。
WordPressではカスタムブロックやブロックスタイル、ブロックパターンなど、ブロックに関連する様々な実装やカスタマイズする場面があります。
そんな時に、ブロック名(例えば、ボタンブロックの名前空間「core/button」など)が一覧で分かれば何かと便利な時があるかと思います。
このように、ブロック開発をより快適にしたい方はぜひ当記事の内容をご活用いただけましたら幸いです。
今回の内容によるメリット
今回の内容のメリットを事前に解説いたします。
WordPressではカスタムブロックやブロックスタイル、ブロックパターンなど、ブロックに関連する実装がありますが、その際に、ご自身のWordPressサイトに登録済みのブロック名(名前空間)を確認する必要が出てくる時があります。
ブロック名とは、例えばボタンブロックであれば「core/button」がブロック名になります。
このブロック名を知る方法は色々ありますが、やり方によっては不便だったりします。
また、当記事の内容のブロック名確認用の実装を行うことで、ブロック名を一覧にした管理画面ページを作成できるので、視覚性も良くブロック関連の開発を快適にしてくれて、作業に集中することができます。
当記事では下図のような画面を実装する予定です。

こちらのブロック名一覧ページを開発時のツールとしてご活用いただけましたら幸いです。
ブロック名一覧画面を実装する方法
それでは早速、ブロック名一覧画面の実装方法について解説いたします。
以下のコードをテーマファイル内のfunctions.phpにコピー&ペーストしてください。(プラグインで実装したい場合は、プラグインを構成するPHPファイルにコピー&ペーストしてください)
<?php
function display_registered_blocks_page() {
add_submenu_page(
'tools.php', // 親メニュー「ツール」
'登録済みブロック一覧', // ページタイトル
'登録済みブロック', // メニュータイトル
'manage_options', // 必要な権限
'registered-blocks', // ページスラッグ
'render_registered_blocks_page' // コールバック関数
);
}
add_action('admin_menu', 'display_registered_blocks_page');
function render_registered_blocks_page() {
// 登録されているすべてのブロックを取得
$blocklists = WP_Block_Type_Registry::get_instance()->get_all_registered();
echo '<div class="wrap">';
echo '<h1>登録済みブロック一覧</h1>';
echo '<br>';
if (empty($blocklists)) {
echo '<p>登録されているブロックがありません。</p>';
} else {
echo '<table class="widefat fixed striped">';
echo '<thead>';
echo '<tr>';
echo '<th>名前</th>';
echo '<th>タイトル</th>';
echo '<th>説明</th>';
echo '</tr>';
echo '</thead>';
echo '<tbody>';
foreach ($blocklists as $item) {
$name = isset($item->name) ? esc_html($item->name) : '名前なし';
$title = isset($item->title) ? esc_html($item->title) : 'なし';
$description = isset($item->description) ? esc_html($item->description) : '説明なし';
echo '<tr>';
echo '<td>' . $name . '</td>';
echo '<td>' . $title . '</td>';
echo '<td>' . $description . '</td>';
echo '</tr>';
}
echo '</tbody>';
echo '</table>';
}
echo '</div>';
}
ペーストが完了しましたら、管理画面を更新してください。
すると下図のように、WordPress管理画面左メニュー「ツール」に「登録済みブロック」というページ名が追加されているのが確認できるかと思います。

「登録済みブロック」をクリックしていただきましたら、下図のようにブロック名の一覧が表示されているかと思います。

これでブロック名一覧の画面の実装は完了です。お疲れ様でした!
開発が終わった後は不要になるかと思いますので、使い終わったら必ずソースコードを削除するようにしましょう。
まとめ
WordPressに登録済みのブロック一覧(名前空間)を確認する方法について解説しました。
WordPressでは、カスタムブロックやブロックスタイル、パターンを実装・カスタマイズする際にブロック名を知る必要が出てくる機会が多々あります。
このブロック名を知る方法は色々ありますが、やり方によっては不便ですし、開発時にいちいち確認するのに手間がかかるなど問題があったりします。
そんな時に、当記事の内容にあるブロック一覧画面を実装していただくことで、「core/button」などのブロック名を簡単に確認することができ、快適にブロック関連の開発に集中することができます。
よろしければ当記事をお仕事などにご活用いただき、WordPressでの良いブロック開発ライフをお過ごしください。
お気軽に皆さんのご要望をお聞かせください!
どんなに些細なことでも構いません!よろしければ記事や当サイトへの「こんな記事があったら仕事とかで役に立つな〜」や「こうだったらもっと役に立つのに!」といったようなご要望等をお気軽にお聞かせください!今後のサービス改善にお役立てさせていただきます!
例1)Reactの技術記事を書いてほしい!
例2)WordPressの使い方とかを初心者向けに解説してほしい!...など