【WordPress】エディターの不要ブロックを非表示にする方法

WordPressブロックエディタの使用しないブロックを非表示にする方法。不要なブロックを削除するというより、必要なブロックのみを再登録するという方法をとる。functions.phpにコードを追記することで実現する。

コンテンツ

PHPによる制御とJavaScriptによる制御の2種類の方法がある
各ブロックのスラッグ
PHP：ホワイトリスト形式
PHP：ブラックリスト形式
JavaScript：ホワイトリスト形式
JavaScript：ブラックリスト形式
関数カンファレンス

PHPによる制御とJavaScriptによる制御の2種類の方法がある

不要なブロックを非表示にする方法は、必要ブロックを指定するホワイトリスト形式と、逆に不要ブロックを指定するブラックリスト形式の2パターンある。

また、PHPによる制御とJavaScriptによる制御の2種類の方法がある。

ただ、埋め込み系ブロックを細かく制御したい場合は、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

allowed_block_typesは非推奨になったため、allowed_block_types_allを使用すること。

PHP：ホワイトリスト形式

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のみで不要なブロックを非表示にする方法。

非表示対象ブロックは$unregister_blocks内にカンマ区切りでスラッグを指定する。core/embedを指定した場合は、埋め込みブロックだけでなく「Twitter」や「YouTube」などの埋め込み系ブロックがすべて非表示になる。

サンプルコードの場合は「プルクオート」「詩」ブロックが非表示になる。

function allowed_block_types_all( $allowed_block_types ) {
	$allowed_block_types = array(
		// テキスト
		'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',                  // Embed

		// 再利用ブロック
		'core/block',                  // 再利用ブロック
	);
	return $allowed_block_types;
}
add_filter( 'allowed_block_types', 'allowed_block_types_all' );

JavaScript：ホワイトリスト形式

JavaScriptを用いて必要なブロックのみ表示する方法。埋め込み系ブロックを細かく表示制御できる。

表示対象ブロックは「Twitter」や「YouTube」などの埋め込み系ブロックをregisterEmbedBlocks内に、それ以外の非表示ブロックをregisterBlocks内にそれぞれカンマ区切りでスラッグを指定する。

その際、埋め込み系ブロックについてはregisterEmbedBlocksの指定に加えてregisterBlocksでcore/embedも指定しておく必要があり、指定がないと埋め込み系ブロックはすべて非表示になってしまう。

サンプルコードの場合は「段落」「見出し」「リスト」「埋め込み」ブロックと埋め込み系ブロックの「Twitter」「YouTube」「WordPress」のみが表示される。

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を用いて不要なブロックを非表示にする方法。埋め込み系ブロックを細かく表示制御できる。

対象ブロックは「Twitter」や「YouTube」などの埋め込み系ブロックをunregisterEmbedBlocks内に、それ以外のブロックをunregisterBlocks内にそれぞれカンマ区切りでスラッグを指定する。

ここでは一部の埋め込み系ブロックを非表示にしているが、unregisterBlocks内でcore/embedを指定した場合はunregisterEmbedBlocksでの指定関係なくすべての埋め込み系ブロックを非表示にできる。

サンプルコードの場合は「クラシック」「プルクオート」「詩」ブロックと埋め込み系ブロックの「Twitter」「YouTube」「WordPress」が非表示になる。

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 );
  } );
} );

関数カンファレンス

allowed_block_types

（bool | array）ブロックタイプのスラッグの配列、またはすべてを有効/無効にするブール値。デフォルトはtrue（登録されているすべてのブロックタイプがサポートされています）

フック / allowed_block_types

allowed_block_types_all

すべてのエディタタイプに対して、許可されるブロックタイプをフィルタリングします。

フック / allowed_block_types_all

参考資料

WordPress：Gutenbergのデフォルトブロックを非表示にする方法（Ver 5.8対応）

ペンギンスタート