3ヶ月前に投稿

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

2019年2月3日

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

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) の使用しないブロックを非表示にする