2年前に投稿

ブロックエディタ (Gutenberg) の使用しないブロックを非表示にする

2019年7月11日

DISCLAIMER: This article is more than a year old and may not be current.

この記事は約 8 分で読めます。

4.5

ブロックエディタ (Gutenberg) で
使用しないブロックを非表示にする方法です。

ブラックリストは、
使用しないブロックを登録する事、
ホワイトリストは
使用するブロックを登録する事です。

ブラックリストなんて
ネガティブなのは嫌だから
ホワイトリストにしようと思いましたが、

再利用可能ブロックの登録
つまづいてしまいました。

登録しておいた再利用可能ブロックが
表示されない
・・・。

再登録しないといけないのかな?
未確認です。

なので、ここでは
ブラックリストを作成します。

導入するにあたり

導入するにあたり
gutenberg-examples
(カスタムブロック)
のフォルダーで作業する事

前提としてお話していく事とします。
https://neco913.kirara.st/post-3485/

Blacklistを作成する方法

index.phpを編集

まず、Blacklistを
読み込む記述をします。

ここでは「wp_enqueue_script」の依存関係に
「wp-blocks」「wp-dom-ready」「wp-edit-post」
を追加しています。

gutenberg-examples/index.php
以下のコードを書きます。

// Blacklist Block
function my_plugin_blacklist_blocks() {
wp_enqueue_script( 'my-plugin-blacklist-blocks', plugins_url( 'js/blacklist.js', __FILE__ ),
array( 'wp-blocks', 'wp-dom-ready', 'wp-edit-post' )
);
}
add_action('enqueue_block_editor_assets', 'my_plugin_blacklist_blocks');

JSは上記のファイルに記述するものとします。

リストアップするjs

wp.domReady( function() {
/**
*****【 4to6 Block BLACK LIST 】
*
*****【 WARNING 】*************
*
* List blocks that are not supposed to be used
* This information is【 TOP SECRET 】.
* Remove the corresponding block from the list when using it.
* In the unlikely event that information is lost to the outside
* 【 4to6 Block Information agency 】
* will erase the data.
*
*** Below, BLACK LIST **********/
/**
* カテゴリー:一般ブロック *
*/
// 【 該当なし 】
/**
* カテゴリー:フォーマット *
*/
wp.blocks.unregisterBlockType( 'core/preformatted' ); // 整形済み
wp.blocks.unregisterBlockType( 'core/pullquote' ); // プルクオート
wp.blocks.unregisterBlockType( 'core/verse' ); // 詩
/**
* カテゴリー:レイアウト要素 *
*/
// 【 該当なし 】
/**
* カテゴリー:ウィジェット *
*/
wp.blocks.unregisterBlockType( 'core/archives' ); // アーカイブ
wp.blocks.unregisterBlockType( 'core/categories' ); // カテゴリー
wp.blocks.unregisterBlockType( 'core/latest-comments' ); // 最新のコメント
/**
* カテゴリー:埋め込み *
*/
wp.blocks.unregisterBlockType( 'core-embed/soundcloud' ); // SoundCloud
wp.blocks.unregisterBlockType( 'core-embed/spotify' ); // Spotify
wp.blocks.unregisterBlockType( 'core-embed/animoto' ); // Animoto
wp.blocks.unregisterBlockType( 'core-embed/cloudup' ); // Cloudup
wp.blocks.unregisterBlockType( 'core-embed/collegehumor' ); // CollegeHumor
wp.blocks.unregisterBlockType( 'core-embed/funnyordie' ); // Funny or Die
wp.blocks.unregisterBlockType( 'core-embed/imgur' ); // Imgur
wp.blocks.unregisterBlockType( 'core-embed/issuu' ); // Issuu
wp.blocks.unregisterBlockType( 'core-embed/kickstarter' ); // Kickstarter
wp.blocks.unregisterBlockType( 'core-embed/meetup-com' ); // Meetup.com
wp.blocks.unregisterBlockType( 'core-embed/photobucket' ); // Photobucket
wp.blocks.unregisterBlockType( 'core-embed/polldaddy' ); // Polldaddy
wp.blocks.unregisterBlockType( 'core-embed/reverbnation' ); // ReverbNation
wp.blocks.unregisterBlockType( 'core-embed/screencast' ); // Screencast
wp.blocks.unregisterBlockType( 'core-embed/scribd' ); // Scribd
wp.blocks.unregisterBlockType( 'core-embed/slideshare' ); // Slideshare
wp.blocks.unregisterBlockType( 'core-embed/smugmug' ); // SmugMug
wp.blocks.unregisterBlockType( 'core-embed/speaker-deck' ); // Speaker Deck
wp.blocks.unregisterBlockType( 'core-embed/ted' ); // TED
wp.blocks.unregisterBlockType( 'core-embed/tumblr' ); // Tumblr
wp.blocks.unregisterBlockType( 'core-embed/videopress' ); // VideoPress
wp.blocks.unregisterBlockType( 'core-embed/wordpress-tv' ); // WordPress.tv
} );

上記jsファイルを
 gutenberg-examples/js 
フォルダーに置きます。

Whitelistに関して

Using a whitelist #Using a whitelist
If you want to disable all blocks except a whitelisted list, you can adapt the script above like so:

Block Filters – The new Gutenberg editing experience … – WordPress.org

ホワイトリストを使用する
ホワイトリストを除くすべてのブロックを無効にしたい場合は、
上記のスクリプトを次のように修正します。

// whitelist.js
wp.domReady( function() {
var allowedBlocks = [
'core/paragraph',
'core/image',
'core/html',
'core/freeform'
];
wp.blocks.getBlockTypes().forEach( function( blockType ) {
if ( allowedBlocks.indexOf( blockType.name ) === -1 ) {
wp.blocks.unregisterBlockType( blockType.name );
}
} );
} );

JavaScriptを使わずに
PHP Onlyでやりたい場合
以下の記事がお役に立つと思います。

初期登録されているブロック一覧

以下の記事を参照の事。

最後に

特に埋め込みだけでも
デフォルト34ブロックもあるので、
12ブロックまで絞りましたが、
まだ要らないかな・・。

これは、
あくまでわたしの主観です。

貴重なお時間を割き、
最後まで
ご高覧いただきまして
有難うございました
ブロックエディタ (Gutenberg) の使用しないブロックを非表示にする