【JavaScript】Gutenbergの不要ブロックを非表示にする #JavaScript

PHPとJavaScriptの違い

PHPとJavaScriptのどちらを使ってもブロックを非表示にできますが、PHPでは埋め込み系のブロックは個別に非表示にできません。
YouTubeやTwitterは使う場面があっても、その他のブロックはなかなか出番がありません。

PHPでは埋め込み系のブロックが個別に非表示にできないので、JavaScriptを使うのをおすすめします。

管理画面用のみにJavaScriptを適用させる

PHPはfunctions.phpに直接書き込めますが、JavaScriptの場合は外部ファイルを読み込ませます。

管理画面用にJSやCSSファイルを読み込ませる場合以下をfunctions.phpに記述する。

function my_admin_script()
{
    wp_enqueue_script('my_admin_script', get_template_directory_uri() . '/js/wp_editor.js', '', '', true);
}
add_action('admin_enqueue_scripts', 'my_admin_script');

ファイル名はwp_editor.jsというファイルを作りました。

ホワイトリスト形式

registerBlocks内にカンマ区切りで、表示させたいブロックのスラッグを指定します。
「段落」「見出し」「リスト」ブロックのみが表示されます。

埋め込み系のブロックはregisterEmbedBlocks内に指定します。
「youtube」ブロックのみが表示されます。

wp.domReady( () => {
  const registerBlocks = [
    'core/paragraph',
    'core/heading',
    'core/list',
  ];
  wp.blocks.getBlockTypes().forEach( block => {
    if ( ! registerBlocks.includes( block.name ) ) {
      wp.blocks.unregisterBlockType( block.name );
    }
  } );

  const registerEmbedBlocks = [
    'youtube',
  ];
  wp.blocks.getBlockVariations( 'core/embed' ).forEach( block => {
    if ( ! registerEmbedBlocks.includes( block.name ) ) {
      wp.blocks.unregisterBlockVariation( 'core/embed', block.name );
    }
  } );
} );

ブラックリスト形式

不要なブロックのみ非表示にする方法です。

unregisterBlocks内にカンマ区切りで、非表示にさせたいブロックのスラッグを指定します。
埋め込み系のブロックはunregisterEmbedBlocks内に指定。

「クラシック」「プルクオート」「詩」「twitter」ブロックが非表示になります。

wp.domReady( () => {
  const unregisterBlocks = [
    'core/freeform',
    'core/pullquote',
    'core/verse',
  ];
  unregisterBlocks.forEach( blockName => {
    wp.blocks.unregisterBlockType( blockName );
  } );

  const unregisterEmbedBlocks = [
    'twitter',
  ];
  unregisterEmbedBlocks.forEach( blockName => {
    wp.blocks.unregisterBlockVariation( 'core/embed', blockName );
  } );
} );

各ブロックのスラッグ

表示・非表示に指定するスラック一覧です。

// テキスト
'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'

まとめ

以上、使わないブロックをJavaScriptで非表示にする方法でした。
PHPだと埋め込み系の非表示は個別にできないので、JavaScriptで非表示にする方法がおすすめです！