以前Gutenbergのデフォルトブロックを非表示にする方法について紹介したことがありますが、その後バージョンアップによってフック変更(allowed_block_types()
→ allowed_block_types_all()
)・新ブロック追加・ブロックスラッグの変更・方法によっては一部ブロックの表示制御ができなくなるなど何かと変更がありました。
新ブロックや埋め込みブロック関連などまだ内容を把握しきれてなかったり不明点も多いんですが、現状の最新版であるVer 5.8対応版の備忘録として分かる範囲で再度まとめました。
はじめに
以下では必要ブロックを指定するホワイトリスト形式と逆に不要ブロックを指定するブラックリスト形式の2パターンを紹介しており、それぞれをPHPのみで実装する方法とJavaScriptも用いて実装する方法とで同じく2パターン紹介しています。
ただ、以前は可能だった埋め込み系ブロック(「Twitter」ならcore-embed/twitter
、「YouTube」ならcore-embed/youtube
など)の表示制御がPHPでは少し前のバージョンからできなくなってしまっており、自分が対応方法を見つけられていないだけの可能性も十分ありますが、埋め込み系ブロックも細かく制御したい場合はJavaScriptも用いた方法でまとめて表示制御を行った方が良さそうでした。
各ブロックのスラッグ
自分が把握できた限りになるので特に新しく追加されたブロックが足りてないですが、各ブロックのスラッグ名についてはそれぞれ下記になっているので、紹介するコード内のブロック指定部分を書き換える際の参考にしてください。
// テキスト
'core/paragraph' // 段落
'core/heading' // 見出し
'core/list' // リスト
'core/quote' // 引用
'core/code' // コード
'core/freeform' // クラシック
'core/preformatted' // 整形済み
'core/pullquote' // プルクオート
'core/table' // テーブル
'core/verse' // 詩
// メディア
'core/image' // 画像
'core/gallery' // ギャラリー
'core/audio' // 音声
'core/cover' // カバー
'core/file' // ファイル
'core/media-text' // メディアとテキスト
'core/video' // 動画
// デザイン
'core/buttons' // ボタン
'core/columns' // カラム
'core/group' // グループ
'core/more' // 続き
'core/nextpage' // ページ区切り
'core/separator' // 区切り
'core/spacer' // スペーサー
'core/site-logo' // サイトロゴ
'core/site-tagline' // サイトのキャッチフレーズ
'core/site-title' // サイトのタイトル
'core/query-title' // アーカイブタイトル
'core/post-terms' // 投稿カテゴリー, 投稿タグ
// ウィジェット
'core/shortcode' // ショートコード
'core/archives' // アーカイブ
'core/calendar' // カレンダー
'core/categories' // カテゴリー
'core/html' // カスタムHTML
'core/latest-comments' // 最新のコメント
'core/latest-posts' // 最新の投稿
'core/page-list' // 固定ページリスト
'core/rss' // RSS
'core/social-links' // ソーシャルアイコン
'core/tag-cloud' // タグクラウド
'core/search' // 検索
// テーマ
'core/query' // クエリーループ, 投稿一覧
'core/post-title' // 投稿タイトル
'core/post-content' // 投稿コンテンツ
'core/post-date' // 投稿日
'core/post-excerpt' // 投稿の抜粋
'core/post-featured-image' // 投稿のアイキャッチ画像
'core/loginout' // ログイン/ログアウト
// 埋め込み
'core/embed'
また、各埋め込みブロックの表示制御にはそれぞれ下記になっています。
'twitter' // Twitter
'youtube' // YouTube
'wordpress' // WordPress
'soundcloud' // SoundCloud
'spotify' // Spotify
'flickr' // Flickr
'vimeo' // Vimeo
'animoto' // Animoto
'cloudup' // Cloudup
'crowdsignal' // Crowdsignal
'dailymotion' // Dailymotion
'imgur' // Imgur
'issuu' // Issuu
'kickstarter' // Kickstarter
'meetup-com' // Meetup.com
'mixcloud' // Mixcloud
'reddit' // Reddit
'reverbnation' // ReverbNation
'screencast' // Screencast
'scribd' // Scribd
'slideshare' // Slideshare
'smugmug' // SmugMug
'speaker-deck' // Speaker Deck
'tiktok' // TikTok
'ted' // TED
'tumblr' // Tumblr
'videopress' // VideoPress
'wordpress-tv' // WordPress.tv
'amazon-kindle' // Amazon Kindle
PHP:ホワイトリスト形式
PHPのみで必要なブロックのみ表示されるようにする方法です。
実装にはfunctions.php
へ下記のように記述し、このサンプルコードの場合は「段落」「見出し」「リスト」ブロックのみが表示されます。
対象ブロックは$allowed_block_types
内にカンマ区切りでスラッグを指定し、core/embed
を指定した場合は、埋め込みブロックだけでなく「Twitter」や「YouTube」などの埋め込み系ブロックがすべて表示されます。
add_filter( 'allowed_block_types_all', function( $allowed_block_types, $block_editor_context ) {
$allowed_block_types = [
'core/paragraph',
'core/heading',
'core/list',
];
return $allowed_block_types;
}, 10, 2 );
PHP:ブラックリスト形式
PHPのみで不要なブロックを非表示にする方法です。
実装にはfunctions.php
へ下記のように記述し、このサンプルコードの場合は「クラシック」「プルクオート」「詩」ブロックが非表示になります。
対象ブロックは$unregister_blocks
内にカンマ区切りでスラッグを指定し、core/embed
を指定した場合は、埋め込みブロックだけでなく「Twitter」や「YouTube」などの埋め込み系ブロックがすべて非表示になります。
add_filter( 'allowed_block_types_all', function( $allowed_block_types, $block_editor_context ) {
$default_blocks = [];
$blocks = WP_Block_Type_Registry::get_instance()->get_all_registered();
foreach ( $blocks as $block ) {
$default_blocks[] = $block->name;
}
$unregister_blocks = [
'core/freeform',
'core/pullquote',
'core/verse',
];
$allowed_block_types = array_values( array_diff( $default_blocks, $unregister_blocks ) );
return $allowed_block_types;
}, 10, 2 );
JavaScript:ホワイトリスト形式
JavaScriptを用いて必要なブロックのみ表示されるようにする方法で、冒頭にもあるように埋め込み系ブロックを細かく表示制御したい場合はこちらを利用します。
実装には読み込んでいるJSファイルへ下記のように記述し、このサンプルコードの場合は「段落」「見出し」「リスト」「埋め込み」ブロックと埋め込み系ブロックの「Twitter」「YouTube」「WordPress」のみが表示されます。
対象ブロックは「Twitter」や「YouTube」などの埋め込み系ブロックをregisterEmbedBlocks
内に、それ以外のブロックをregisterBlocks
内にそれぞれカンマ区切りでスラッグを指定します。
その際、埋め込み系ブロックについてはregisterEmbedBlocks
の指定に加えてregisterBlocks
でcore/embed
も指定しておく必要があり、指定がないと埋め込み系ブロックはすべて非表示になってしまいます。
wp.domReady( () => {
const registerBlocks = [
'core/paragraph',
'core/heading',
'core/list',
'core/embed',
];
wp.blocks.getBlockTypes().forEach( block => {
if ( ! registerBlocks.includes( block.name ) ) {
wp.blocks.unregisterBlockType( block.name );
}
} );
const registerEmbedBlocks = [
'twitter',
'youtube',
'wordpress',
];
wp.blocks.getBlockVariations( 'core/embed' ).forEach( block => {
if ( ! registerEmbedBlocks.includes( block.name ) ) {
wp.blocks.unregisterBlockVariation( 'core/embed', block.name );
}
} );
} );
JavaScript:ブラックリスト形式
JavaScriptを用いて不要なブロックを非表示にする方法で、同じく埋め込み系ブロックを細かく表示制御したい場合はこちらを利用します。
実装には読み込んでいるJSファイルへ下記のように記述し、このサンプルコードの場合は「クラシック」「プルクオート」「詩」ブロックと埋め込み系ブロックの「Twitter」「YouTube」「WordPress」が非表示になります。
対象ブロックは「Twitter」や「YouTube」などの埋め込み系ブロックをunregisterEmbedBlocks
内に、それ以外のブロックをunregisterBlocks
内にそれぞれカンマ区切りでスラッグを指定します。
ここでは一部の埋め込み系ブロックを非表示にしていますが、unregisterBlocks
内でcore/embed
を指定した場合はunregisterEmbedBlocks
での指定関係なくすべての埋め込み系ブロックを非表示にできます。
wp.domReady( () => {
const unregisterBlocks = [
'core/freeform',
'core/pullquote',
'core/verse',
];
unregisterBlocks.forEach( blockName => {
wp.blocks.unregisterBlockType( blockName );
} );
const unregisterEmbedBlocks = [
'twitter',
'youtube',
'wordpress',
];
unregisterEmbedBlocks.forEach( blockName => {
wp.blocks.unregisterBlockVariation( 'core/embed', blockName );
} );
} );