Gutenberg editor (Block editor)で利用するブロックを制限する。

ディフォルトで多くのブロックが設定されているGutenberg editorのブロックを制限する方法です。

functions.phpで該当の enqueue_block_editor_assets にフックする関数を作成し、そこから wp_enqueue_script を利用してjsを読み込み設定を行います。今回は利用するブロックのみを指定する方法です。

functions.phpの設定

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

allow-block-list.jsの設定

// ブロックの利用を許可したものだけにする
const { _wpLoadBlockEditor } = window;
const { unregisterBlockType } = wp.blocks;
_wpLoadBlockEditor.then( () => {
  var allowedBlocks = [
    'core/paragraph',
    'core/image',
    'core/html',
    'core/heading',
    'core/list',
    'core-embed/twitter'
  ];

  wp.blocks.getBlockTypes().forEach( function( blockType ) {
    if ( allowedBlocks.indexOf( blockType.name ) === -1 ) {
      wp.blocks.unregisterBlockType( blockType.name );
    }
  } );
} );

ブロックの名前一覧

未検証なので名前が異なっている場合があります。参考までに

# 一般ブロック
段落	core/paragraph
画像	core/image
見出し	core/heading
リスト	core/list
カバー	core/cover
ギャラリー	core/gallery
引用	core/quote
音声	core/audio
ファイル	core/file
動画	core/video

# フォーマット
詩	core/verse
整形済み	core/preformatted
ソースコード	core/code
クラシック	core/freeform
カスタム HTML	core/html
プルクオート	core/pullquote
テーブル	core/table

# レイアウト
ボタン	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/embed
Twitter	core-embed/twitter
YouTube	core-embed/youtube
Facebook	core-embed/facebook
Instagram	core-embed/instagram
WordPress	core-embed/wordpress
SoundCloud	core-embed/soundcloud
Spotify	core-embed/spotify
Flickr	core-embed/flickr
Vimeo	core-embed/vimeo
Animoto	core-embed/animoto
Cloudup	core-embed/cloudup
CollegeHumor	core-embed/collegehumor
Dailymotion	core-embed/dailymotion
Funny or Die	core-embed/funnyordie
Hulu	core-embed/hulu
Imgur	core-embed/imgur
Issuu	core-embed/issuu
Kickstarter	core-embed/kickstarter
Meetup.com	core-embed/meetup-com
Mixcloud	core-embed/mixcloud
Photobucket	core-embed/photobucket
Polldaddy	core-embed/polldaddy
Reddit	core-embed/reddit
ReverbNation	core-embed/reverbnation
Screencast	core-embed/screencast
Scribd	core-embed/scribd
Slideshare	core-embed/slideshare
SmugMug	core-embed/smugmug
Speaker Deck	core-embed/speaker-deck
TED	core-embed/ted
Tumblr	core-embed/tumblr
VideoPress	core-embed/videopress
WordPress.tv	core-embed/wordpress-tv























参考

投稿日:
カテゴリー: WordPress