ディフォルトで多くのブロックが設定されている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