WordPress

WordPressのGutenberg（ブロックエディタ）でスタイルを追加

  /

Gutenbergのブロックエディタをカスタムする場合、WordPress公式のチュートリアル見るとプラグイン作成になるようです。Githubから作成自体は簡単だったのですが、カスタマイズまでの学習コストが高めの印象でした。

今回は、もう少し手を軽めにしたスタイルの追加。これだと functions.phpにちょっと記載、css+JSで追加で実装可能です。

カスタムファイルを読み込む

エディター側とフロント側、それぞれにJSとCSSを当てることでカスタムできるようになります。

今回は関数名でわかりやすく、エディタ側をadd_my_block_editor()、ページ側をadd_my_block_editor_front()としました。
編集画面のエディタ側では、enqueue_block_editor_assets() というアクションフックを呼び出し、ページ（フロント）側では、wp_enqueue_scripts()というフックを呼び出して、JSとCSSを読み込みます。

//エディター側
function add_my_block_editor() {
	wp_enqueue_style(
		'block-style',
		get_template_directory_uri() . '/hoge/my_block_style.css',//CSSのパス
		array( ),
		'1.0.0'
	);
	wp_enqueue_script(
		'block-script',
		get_template_directory_uri() . '/hoge/my_block_custom.js',//JSのパス
		array( 'wp-blocks', 'wp-dom-ready', 'wp-edit-post' ),
		'1.0.0',
		true
	);
}
add_action( 'enqueue_block_editor_assets', 'add_my_block_editor' );

//フロント側
function add_my_block_editor_front() {
	wp_enqueue_style(
		'block-style',
		get_template_directory_uri() . '/hoge/my_block_style.css',//CSSのパス
		array(),
		'1.0.0'
	);
	wp_enqueue_script(
		'block-script',
		get_template_directory_uri() . '/hoge/my_block_custom.js',//JSのパス
		array(),
		'1.0.0',
		true
	);
}
add_action('wp_enqueue_scripts', 'add_my_block_editor_front');

JSでカスタムブロックを登録

my_block_custom.jsの中にregisterBlockStyle() の関数でブロックを追加していきます。

例えば、段落(core/paragraph)にfansyというスタイルを当てるには、以下のようになります。 Extending the Block Editor 。

wp.blocks.registerBlockStyle('core/paragraph', {
  name: 'fuga',//クラス名
  label: 'ふがふが'//ラベル名
});

スタイルブロック非表示の場合

既にあるブロックのスタイルを消す場合は、unregisterBlockStyle()関数で消せます。

wp.domReady(function () {
  wp.blocks.unregisterBlockStyle('core/quote', 'large');
});

CSSでスタイル付け

CSSで指定するときのクラス名は、JSで新しく追加したブロックのname.is-style-{name名}で指定できます。

.is-style-fuga{
    border: 1px dotted #CCC;
    padding:1rem;
}

gutenberg WordPress
RELATED POST