Gutenbergの不要なブロックを削除し必要なブロックのみを表示させる方法

Gutenbergの不要なブロックを削除し必要なブロックのみを表示させる方法

2019/01/31
Wordpressテーマカスタマイズ
No Comments
Gutenbergの不要なブロックを削除し必要なブロックのみを表示させる方法

WordPressの新しい投稿エディタ「Gutenberg(ブロックエディタ)」では様々なブロックが用意されていますが、ブロックの数が多すぎて混乱してしまうこともあるみたいです。ブロックの数が多いのは便利である一方、Gutenbergが使いにくいと感じる一因となっていますよね。

そこで今回は、不要なブロックを削除し必要なブロックのみを表示させるようにする方法をご紹介したいと思います。PHPを使った方法とJavaScriptを使った方法の2パターンをご紹介いたします。

Gutenbergの不要なブロックを削除し必要なブロックのみを表示させる方法

PHPによるブロックの制限

最初はPHPによってブロックの表示を制限する方法です。この方法は、NxWorldさんで紹介されていました。不要なブロックを削除するというより、必要なブロックのみを再登録するという方法になります。

functions.phpに以下を追加することで、必要なブロックのみを表示させることができます。

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
add_filter( 'allowed_block_types', 'custom_allowed_block_types' );
function custom_allowed_block_types( $allowed_block_types ) {
  $allowed_block_types = array(
    // 一般ブロック
    'core/paragraph', // 段落
    'core/heading', // 見出し
    'core/image', // 画像
    'core/quote', // 引用
    'core/gallery', // ギャラリー
    'core/list', // リスト
    'core/audio', // 音声
    'core/cover', // カバー
    'core/file', // ファイル
    'core/video', // 動画
 
    // フォーマット
    'core/code', // ソースコード
    'core/freeform', // クラシック
    'core/html', // カスタムHTML
    'core/preformatted', // 整形済み
    'core/pullquote', // プルクオート
    'core/table', // テーブル
    'core/verse', // 詩
 
    // レイアウト要素
    'core/button', // ボタン
    'core/columns', // カラム
    'core/media-text', // メディアと文章
    'core/more', // 続きを読む
    'core/nextpage', // 改ページ
    'core/separator', // 区切り
    'core/spacer', // スペーサー
 
    // ウィジェット
    'core/shortcode', // ショートコード
    'core/archives', // アーカイブ
    'core/categories', // カテゴリー
    'core/latest-comments', // 最新のコメント
    'core/latest-posts', // 最新の記事
 
    // 埋め込み
    'core/embed', // 埋め込み
    'core-embed/twitter', // Twitter
    'core-embed/youtube', // YouTube
    'core-embed/facebook', // Facebook
    'core-embed/instagram', // Instagram
    'core-embed/wordpress', // WordPress
    'core-embed/soundcloud', // SoundCloud
    'core-embed/spotify', // Spotify
    'core-embed/flickr', // Flickr
    'core-embed/vimeo', // Viemo
    'core-embed/animoto', // Animoto
    'core-embed/cloudup', // Cloudup
    'core-embed/collegehumor', // CollegeHumor
    'core-embed/dailymotion', // Dailymotion
    'core-embed/funnyordie', // Funny or Die
    'core-embed/hulu', // Hulu
    'core-embed/imgur', // Imgur
    'core-embed/issuu', // Issuu
    'core-embed/kickstarter', // Kickstarter
    'core-embed/meetup-com', // Meetup.com
    'core-embed/mixcloud', // Mixcloud
    'core-embed/photobucket', // Photobucket
    'core-embed/polldaddy', // Polldaddy
    'core-embed/reddit', // Reddit
    'core-embed/reverbnation', // ReverbNation
    'core-embed/screencast', // Screencast
    'core-embed/scribd', // Scribd
    'core-embed/slideshare', // Slideshare
    'core-embed/smugmug', // SmugMug
    'core-embed/speaker-deck', // Speaker Deck
    'core-embed/ted', // TED
    'core-embed/tumblr', // Tumblr
    'core-embed/videopress', // VideoPress
    'core-embed/wordpress-tv', // WordPress.tv
  );
  return $allowed_block_types;
}

上記をそのままコピペするとすべてのブロックが表示されるので、不要なブロックの行は削除しましょう。

JavaScriptによるブロックの制限

続いてJavaScriptによるブロックの制限方法ですが、こちらはShare-Snippet-Codeさんで紹介されていました。PHPと同様に必要なブロックを再登録しています。

まずは、functions.phpに以下を追加し、JSファイルを読み込みます。

1
2
3
4
function block_allow_list() {
  wp_enqueue_script( 'allow-block-list', get_theme_file_uri('/assets/js/allow-block-list.js'), array( 'wp-blocks' ), '', true );
}
add_action( 'enqueue_block_editor_assets', 'block_allow_list' );

続いて、allow-block-list.jsを作成し、テーマフォルダ内の「/assets/js/」配下にアップします。
※ファイルパスは変更してOKです。

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
const { _wpLoadBlockEditor } = window;
const { unregisterBlockType } = wp.blocks;
_wpLoadBlockEditor.then( () => {
  var allowedBlocks = [
    // 一般ブロック
    'core/paragraph', // 段落
    'core/heading', // 見出し
    'core/image', // 画像
    'core/quote', // 引用
    'core/gallery', // ギャラリー
    'core/list', // リスト
    'core/audio', // 音声
    'core/cover', // カバー
    'core/file', // ファイル
    'core/video', // 動画
 
    // フォーマット
    'core/code', // ソースコード
    'core/freeform', // クラシック
    'core/html', // カスタムHTML
    'core/preformatted', // 整形済み
    'core/pullquote', // プルクオート
    'core/table', // テーブル
    'core/verse', // 詩
 
    // レイアウト要素
    'core/button', // ボタン
    'core/columns', // カラム
    'core/media-text', // メディアと文章
    'core/more', // 続きを読む
    'core/nextpage', // 改ページ
    'core/separator', // 区切り
    'core/spacer', // スペーサー
 
    // ウィジェット
    'core/shortcode', // ショートコード
    'core/archives', // アーカイブ
    'core/categories', // カテゴリー
    'core/latest-comments', // 最新のコメント
    'core/latest-posts', // 最新の記事
 
    // 埋め込み
    'core/embed', // 埋め込み
    'core-embed/twitter', // Twitter
    'core-embed/youtube', // YouTube
    'core-embed/facebook', // Facebook
    'core-embed/instagram', // Instagram
    'core-embed/wordpress', // WordPress
    'core-embed/soundcloud', // SoundCloud
    'core-embed/spotify', // Spotify
    'core-embed/flickr', // Flickr
    'core-embed/vimeo', // Viemo
    'core-embed/animoto', // Animoto
    'core-embed/cloudup', // Cloudup
    'core-embed/collegehumor', // CollegeHumor
    'core-embed/dailymotion', // Dailymotion
    'core-embed/funnyordie', // Funny or Die
    'core-embed/hulu', // Hulu
    'core-embed/imgur', // Imgur
    'core-embed/issuu', // Issuu
    'core-embed/kickstarter', // Kickstarter
    'core-embed/meetup-com', // Meetup.com
    'core-embed/mixcloud', // Mixcloud
    'core-embed/photobucket', // Photobucket
    'core-embed/polldaddy', // Polldaddy
    'core-embed/reddit', // Reddit
    'core-embed/reverbnation', // ReverbNation
    'core-embed/screencast', // Screencast
    'core-embed/scribd', // Scribd
    'core-embed/slideshare', // Slideshare
    'core-embed/smugmug', // SmugMug
    'core-embed/speaker-deck', // Speaker Deck
    'core-embed/ted', // TED
    'core-embed/tumblr', // Tumblr
    'core-embed/videopress', // VideoPress
    'core-embed/wordpress-tv', // WordPress.tv
  ];
 
  wp.blocks.getBlockTypes().forEach( function( blockType ) {
    if ( allowedBlocks.indexOf( blockType.name ) === -1 ) {
      wp.blocks.unregisterBlockType( blockType.name );
    }
  } );
} );

こちらも不要なブロックの行は削除してください。

あとがき

JavaScriptだとファイルを追加しないといけないので、PHPを使った制御の方が楽ですかね。

ちなみに、「段落」「画像」「見出し」のブロックのみにすると、以下のように超絶シンプルになります。こんな感じで、不要なブロックを表示させたくない場合は、必要なブロックのみを表示するようにカスタマイズしちゃいましょう。

この記事が気に入ったら
いいね！してね♪

シェアする
ツイートする
Twitter で

コメントを残す

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