WPブロックをホワイトリストで指定して、一部のブロックのみを使う方法

便利で楽しいブロックエディタですが、クライアントに納品するCMSとする時、WPのブロックが多すぎたり、全てのブロックのスタイリングをするのがしんどい場合があります。
必要なブロック以外は表示したくない!!その方法を解説します。

技術もコード書くのも不要!最もお手軽な方法

不要なブロックを表示させない最も簡単な方法は「ブロックマネージャー」で必要なブロックにのみチェックを入れていく方法です。
ブロックマネージャーは、投稿編集画面の右上にある歯車マークをクリックし、「ブロックマネージャー」のリンクをクリックすると現れます。

この方法でも、ブラウザに依存しないで、管理画面のログインユーザごとに設定が可能だった記憶…。クライアントに引き渡す前に、クライアントのログインアカウントで設定するなどすれば、そのまま不要なブロックを隠した状態で運用できるはずです。(ごめんなさい、未検証です!)

テーマの functions.php などで制御する場合

ブロックマネージャーからもブロックを削除しておきたい場合、allowed_block_types_all フィルタを使って、使いたいWPブロックだけをホワイトリスト形式で指定することができます。不要なものを削除ではなく、使いたいものだけ許可する。テーマの functions.php に書くほか、プラグイン化もできると思います。

サンプルコードはこんな感じ

function whitelist_block_types( $allowed_block_types, $block_editor_context ) {
	$allowed_block_types = array(
		'core/paragraph',
		'core/heading',
		'core/image',
	);
	return $allowed_block_types;
}
add_filter( 'allowed_block_types_all', 'whitelist_block_types', 10, 2 );

サンプルコードは以下の記事を参考にしました。参考記事には、投稿タイプごとにブロックの表示を制御する方法が書いてあります、これもよく使いそう。
https://qiita.com/TetsuakiHamano/items/421746f7c6429ac54282#allowed_block_types_all-

以前は「allowed_block_types」だった

allowed_block_types_all は、WordPress 5.8 から新たに実装されたフィルターです。以前は同じことを allowed_block_types というフィルターで行っていましたが、こちらは5.8で非推奨になったそうです。 allowed_block_types フィルターを使っている場合は、5.8にすると警告が出ますのでご注意を。

私は、よく使っていたので、Deprecated エラーが多発しています…( ꒪⌓꒪)

注意!!セットで許可しないと使えないものがある

ボタンやカラムなど別のブロックを内包するタイプのブロックは外身と中身(言い方…)をセットで許可しないと動かないです。

'core/button', //ボタン
'core/buttons', //ボタン

'core/column', //カラム
'core/columns', //カラム

'core/social-link', //ソーシャルアイコン
'core/social-links', //ソーシャルアイコン

余談 ブロックの一覧を知りたい

ブロックエディタが登場して数年、最初よりもずいぶんブロックが増えたはず。ホワイトリストで指定するときはブロックの「名前(core/hogehoge)」が必要になりますが、以前からそれを知る術とは…となっていました。ちょいちょい探しているものの、見つからない・・・。

したらば、今回、allowed_block_types_all を調べる過程で、下記の記事を発見。
https://wemo.tech/4010
「PHP側で特定のブロックをオフにする方法」という見出しにあるサンプルコードですが、不要なものだけを消したいが、刻々と追加される新しいブロックはそのままホワイトリストに追加されるようにしたいという思いで書かれたコードと読み取りました。削除したいブロックの名前を配列にしておき、全てのブロックの一覧の配列と比べて、差分だけを取得し、ホワイトリスト用の配列にしようという方法と思われます。
なので、サンプルコードにあった「全てのブロック取得」の部分を参考に、全ブロックの名前とついでにタイトルを取得できるコードを書いてみました。

$all_block = '';
$block_types = WP_Block_Type_Registry::get_instance()->get_all_registered();
foreach ($block_types as $block ){
	$all_block = $all_block . "\n" . "'" . $block->name . "'" . ', //' . $block->title . ' (' . $block->category . ')';
}
var_dump( $all_block );

出力が var_dump なのはお許しください…。
でもできた。
(2021−12−24 カテゴリも出力しました)

これを使って今日時点のブロック一覧を取得したものが以下になります。ホワイトリストを作成する際などに、お役立てください。

(以下、2022-02-14 時点のブロック一覧)

'core/legacy-widget', //従来のウィジェット (widgets)
'core/widget-group', // (widgets)
'core/archives', //アーカイブ (widgets)
'core/avatar', //アバター (theme)
'core/block', //再利用ブロック (reusable)
'core/calendar', //カレンダー (widgets)
'core/categories', //カテゴリー一覧 (widgets)
'core/comment-author-name', //コメントの投稿者名 (theme)
'core/comment-content', //コメント本文 (theme)
'core/comment-date', //コメント日付 (theme)
'core/comment-edit-link', //コメント編集リンク (theme)
'core/comment-reply-link', //コメント返信リンク (theme)
'core/comment-template', //コメントテンプレート (design)
'core/comments', //コメント (theme)
'core/comments-pagination', //コメントのページネーション (theme)
'core/comments-pagination-next', //コメントの次のページ (theme)
'core/comments-pagination-numbers', //コメントのページ番号 (theme)
'core/comments-pagination-previous', //コメントの前のページ (theme)
'core/comments-title', //コメントタイトル (theme)
'core/cover', //カバー (media)
'core/file', //ファイル (media)
'core/gallery', //ギャラリー (media)
'core/home-link', //ホームへのリンク (design)
'core/image', //画像 (media)
'core/latest-comments', //最新のコメント (widgets)
'core/latest-posts', //最新の投稿 (widgets)
'core/loginout', //ログイン / ログアウト (theme)
'core/navigation', //ナビゲーション (theme)
'core/navigation-link', //カスタムリンク (design)
'core/navigation-submenu', //サブメニュー (design)
'core/page-list', //固定ページリスト (widgets)
'core/pattern', //パターン (theme)
'core/post-author', //投稿者 (theme)
'core/post-author-biography', //投稿者の経歴 (theme)
'core/post-comments-form', //投稿コメントフォーム (theme)
'core/post-content', //投稿コンテンツ (theme)
'core/post-date', //投稿日 (theme)
'core/post-excerpt', //投稿の抜粋 (theme)
'core/post-featured-image', //投稿のアイキャッチ画像 (theme)
'core/post-navigation-link', //投稿ナビゲーションリンク (theme)
'core/post-template', //投稿テンプレート (theme)
'core/post-terms', //投稿タグ (theme)
'core/post-title', //投稿タイトル (theme)
'core/query', //クエリーループ (theme)
'core/query-no-results', //結果なし (theme)
'core/query-pagination', //ページ送り (theme)
'core/query-pagination-next', //次のページ (theme)
'core/query-pagination-numbers', //ページ番号 (theme)
'core/query-pagination-previous', //前のページ (theme)
'core/query-title', //クエリータイトル (theme)
'core/read-more', //続きを読む (theme)
'core/rss', //RSS (widgets)
'core/search', //検索 (widgets)
'core/shortcode', //ショートコード (widgets)
'core/site-logo', //サイトロゴ (theme)
'core/site-tagline', //サイトのキャッチフレーズ (theme)
'core/site-title', //サイトのタイトル (theme)
'core/social-link', //ソーシャルアイコン (widgets)
'core/tag-cloud', //タグクラウド (widgets)
'core/template-part', //テンプレートパーツ (theme)
'core/term-description', //タームの説明 (theme)
'core/audio', //音声 (media)
'core/button', //ボタン (design)
'core/buttons', //ボタン (design)
'core/code', //コード (text)
'core/column', //カラム (text)
'core/columns', //カラム (design)
'core/embed', //埋め込み (embed)
'core/freeform', //クラシック (text)
'core/group', //グループ (design)
'core/heading', //見出し (text)
'core/html', //カスタム HTML (widgets)
'core/list', //リスト (text)
'core/list-item', //リスト項目 (text)
'core/media-text', //メディアとテキスト (media)
'core/missing', //非サポート (text)
'core/more', //続き (design)
'core/nextpage', //ページ区切り (design)
'core/paragraph', //段落 (text)
'core/preformatted', //整形済みテキスト (text)
'core/pullquote', //プルクオート (text)
'core/quote', //引用 (text)
'core/separator', //区切り (design)
'core/social-links', //ソーシャルアイコン (widgets)
'core/spacer', //スペーサー (design)
'core/table', //テーブル (text)
'core/text-columns', //テキストカラム (非推奨) (design)
'core/verse', //詩 (text)
'core/video', //動画 (media)
'core/post-comments', // (theme)

2022-11-16追記
公式でコアブロックの一覧を見つけたので、記載しておきます。

https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/archives

コメントをどうぞ

メールアドレスが公開されることはありません。 が付いている欄は必須項目です