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 カテゴリも出力しました)

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

(以下、2021-12-24 時点のブロック一覧)

'core/archives', //アーカイブ (widgets)
'core/block', //再利用ブロック (reusable)
'core/calendar', //カレンダー (widgets)
'core/categories', //カテゴリー (widgets)
'core/file', //ファイル (media)
'core/latest-comments', //最新のコメント (widgets)
'core/latest-posts', //最新の投稿 (widgets)
'core/legacy-widget', //従来のウィジェット (widgets)
'core/loginout', //ログイン / ログアウト (theme)
'core/page-list', //固定ページリスト (widgets)
'core/post-content', //投稿コンテンツ (theme)
'core/post-date', //投稿日 (theme)
'core/post-excerpt', //投稿の抜粋 (theme)
'core/post-featured-image', //投稿のアイキャッチ画像 (theme)
'core/post-terms', //投稿タグ (design)
'core/post-title', //投稿タイトル (theme)
'core/post-template', //投稿テンプレート (design)
'core/query', //クエリーループ (theme)
'core/query-pagination', //クエリーのページ送り (design)
'core/query-pagination-next', //次のページネーションのクエリー (design)
'core/query-pagination-numbers', //ページネーション数のクエリー (design)
'core/query-pagination-previous', //前のページネーションのクエリー (design)
'core/query-title', //クエリータイトル (design)
'core/rss', //RSS (widgets)
'core/search', //検索 (widgets)
'core/shortcode', //ショートコード (widgets)
'core/site-tagline', //サイトのキャッチフレーズ (design)
'core/site-logo', //サイトロゴ (layout)
'core/site-title', //サイトのタイトル (design)
'core/social-link', //ソーシャルアイコン (widgets)
'core/tag-cloud', //タグクラウド (widgets)
'core/audio', //音声 (media)
'core/button', //ボタン (design)
'core/buttons', //ボタン (design)
'core/code', //コード (text)
'core/column', //カラム (text)
'core/columns', //カラム (design)
'core/cover', //カバー (media)
'core/embed', //埋め込み (embed)
'core/freeform', //クラシック (text)
'core/gallery', //ギャラリー (media)
'core/group', //グループ (design)
'core/heading', //見出し (text)
'core/html', //カスタム HTML (widgets)
'core/image', //画像 (media)
'core/list', //リスト (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)

コメントをどうぞ

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