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

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

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

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：ブラックリスト形式

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

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：ブラックリスト形式

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

関数カンファレンス

allowed_block_types

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

フック / allowed_block_types

allowed_block_types_all

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

フック / allowed_block_types_all

参考資料

Related Tags