WEBOPIXEL

Gutenbergで投稿タイプによって使用するブロックを制限する方法

Posted: 2020.03.03 / Category: WordPress / Tag: 

あるカスタム投稿タイプ専用のブロックを作成した場合、他の投稿や固定ページでは使用できないようにしたいですよね。
ということで投稿タイプによって使用するブロックを制限する方法をご紹介します。

Sponsored Link

条件

WordPress 5.3 でお送りします。
「works」というカスタム投稿タイプに「myblocks/block」というブロックを登録したいとします。

unregisterBlockType(JavaScript版)

registerBlockTypeで登録したブロックは、unregisterBlockTypeで解除できます。
domReadyの中に、getCurrentPostTypeで投稿タイプを取得できるので、指定投稿タイプ以外のときに解除します。

import { registerBlockType, unregisterBlockType } from '@wordpress/blocks';

registerBlockType('myblocks/block', {
	// ブロックの処理
});

wp.domReady(() => {
    if (wp.data.select('core/editor').getCurrentPostType() !== 'works') {
        unregisterBlockType( 'myblocks/block' );
    }
});

そもそも指定した投稿タイプのときregisterBlockTypeすればいい気がしますが、 registerBlockTypedomReadyの後では登録できないようなので、こんな感じになりました。

allowed_block_types(PHP版)

allowed_block_typesフックを使えば使用するブロックをホワイトリストで指定することができます。
使用するブロックを配列で指定して、投稿タイプの条件で追加すればいけます。
全ての投稿ページで使用するブロックをコントロールしたい場合はこの方法がいいかもしれませんが、公式で追加された場合とかメンテが必要なのが難点です。

add_filter( 'allowed_block_types', function($allowed_block_types, $post) {
	$allowed_block_types = array(
		'core/paragraph',
		'core/heading',
		'core/image',
		// その他の使うブロックも指定する
	);

	if ( $post->post_type === 'works' ) {
		$allowed_block_types[] = 'myblocks/block';
	}

	return $allowed_block_types;
}, 10, 2 );

特定の投稿タイプのみ読み込む(PHP版)

ブロックのJSファイルはenqueue_block_editor_assetsフックで読み込むと思いますが、この部分で指定した投稿タイプで読み込まないようにする方法です。
もしinitで読み込んでる場合は、enqueue_block_editor_assetsに変えても問題ないと思います。

create-guten-blockのように複数のブロックをまとめてビルドしているようなプラグインだと、全て使えなくなるので上記の方法がいいと思いますが、専用のプラグインで作っている場合はこの方法がスマートかもしれません。

add_action( 'enqueue_block_editor_assets', function($allowed_block_types, $post) {
	global $post_type;

    if ($post_type !== 'works') {
        return;
	}
	
	wp_register_style(
		// ...
	);

	wp_register_script(
		// ...
	);
});

もっとスマートの方法があるかもしれませんが、以上になります。