WordPressテックラボ

WordPressのブロックに独自のスタイルを適用

ブロックエディタ用スタイルとは

Gutenbergのブロックには、見栄えを設定するためのスタイルを追加する機能があります。テーマ側であらかじめスタイルを用意していない場合はこの機能が使えませんが、テーマをカスタマイズすることでスタイルを選択できるようになります。スタイルが追加されている場合、[設定]アイコンから[ブロック]タブをクリックすると、現在選択されたブロックのスタイルが表示されます(下の図参)。

ここで用意されたスタイルを選択すると、そのブロックに選択したスタイルが適用されます。上の図では「構文」や「コメント」が独自に追加したスタイルです。

ブロックエディタ用スタイルを追加する

全体の流れとしては、まずはfunctions.phpにJavaScriptファイルとCSSファイルの読み込み処理を追加し、指定したJavaScriptファイルと、CSSファイルを順番に作成していきます。

CSSファイルの読み込み処理

それでは、まずfunctions.phpにブロックエディタに適用したいCSSファイルの読み込みを指定します。手順としては、add_theme_support関数でeditor-styleを指定し、ブロックエディタ用スタイル機能をテーマに追加します。これでブロックエディタ用スタイル機能が有効になったので、add_editor_style関数でブロックエディタ用のCSSファイルを読み込みます。

functions.php
/* ========================================================
管理画面ブロックエディタ用CSSの追加
=========================================================*/
add_action( 'after_setup_theme', function(){
	// ブロックエディタ用スタイル機能をテーマに追加
	add_theme_support( 'editor-styles' );
	// ブロックエディタ用CSSの読み込み
	add_editor_style('/common/css/editor-style.css');
});

上記コードでは、add_editor_style関数で /common/css/editor-style.css ファイルの読み込みを指定しています。これでファイルを作成する準備が整いました。

CSSファイルの作成

ブロック用のCSSには、他の要素に影響が出ないように、editor-styles-wrapperクラスが自動的に追加されます。たとえばP要素に直接スタイルを設定しても下記のように自動的に変換されます。

.editor-styles-wrapper p{
   ...
}

上記の自動変換以外、通常のCSS設定と異なる点はありません。add_editor_style関数で指定したCSSファイルを作成し、必要なスタイルを設定してください。ここでは背景黒の段落スタイルを追加します。

/common/css/editor-style.css
// 背景黒の段落スタイル
p.p-bg-black{
	color: #fff;
	background-color: #000;
}

JavaScriptファイルの読み込み処理

引き続きfunctions.phpで、JavaScriptを読み込む処理を追加しましょう。add_action関数とwp_enqueue_script関数を使って、スタイル用のJavaScriptを読み込みます。

functions.php

/* ========================================================
管理画面ブロックエディタ用のJSを追加
enqueue_block_editor_asset:ブロックエディタ用のフック
=========================================================*/
add_action( 'enqueue_block_editor_assets', function () {
	// ブロック用のJSは第3引数を指定する必要がある
	wp_enqueue_script( 'new-theme-editor-js', get_theme_file_uri( 'common/js/editor.js' ), [
		'wp-element',
		'wp-rich-text',
		'wp-editor',
	] );
} );

add_action関数で読み込みを実行するタイミングを指定します。これから用意するJavaScriptは投稿画面のブロックエディタで実行したいので、add_action関数の第1引数にenqueue_block_editor_assetsフックを指定します。enqueue_block_editor_assetsは、投稿画面のブロックエディタで実行するためのフックです。enqueue_block_editor_assetsフックは、投稿画面でのみトリガされます。 サイトの前面を表示しているときも対象にしたい場合はenqueue_block_assetsフックを指定してください。

フックの指定のあとは、add_action関数の第2引数にスクリプトのパス、第3引数にこのスクリプトより前に読み込まれる必要があるスクリプトの配列を指定します。これで、投稿画面のブロックエディタが表示されたタイミングで、wp_enqueue_script関数の第2引数に指定した common/js/editor.js が読み込まれます。

JavaScriptファイルの作成

add_action関数で実行のタイミングを指定したので、つぎはwp_enqueue_script関数を使ってJavaScriptファイルを読み込みます。JavaScriptファイルには、追加したいスタイルごとに、registerBlockStyleメソッドを使ってクラス名やラベル名を指定してください。

wp.blocks.registerBlockStyle( 'ブロック名', {
	name: 'ブロックに付与するクラス',
	label: 'ラベル名'
});

ブロック名には次のようなものがあります。

'core/paragraph',		// 段落
'core/heading',		// 見出し
'core/list',			// リスト
'core/image',			// 画像
'core/video',			// 動画
'core/quote',			// 引用
'core/code',			// ソースコード
'core/html',			// カスタムHTML
'core/preformatted',	// 整形済み
'core/table',			// テーブル

ブロック名の一覧は下記サイトを参考にしてください。

https://wemo.tech/2166

それでは、CSSで用意したp-bg-blackクラスをブロックのスタイルで選択できるようにしましょう。editor.jsにregisterBlockStyleを定義します。追加したいスタイルが複数ある場合は、registerBlockStyleを必要なだけ定義してください。下記ではh-syntaxというタイトル用のクラスを追加しています。

common/js/editor.js
(function () {

	// 背景黒の段落スタイル
	wp.blocks.registerBlockStyle("core/paragraph", {
		name: "h p-bg-black",
		label: "背景黒の段落",
	});
	// 構文タイトル
	wp.blocks.registerBlockStyle("core/heading", {
		name: "h h-syntax",
		label: "構文タイトル",
	});

})();

ここまでで必要なファイルの作成と設定が完了しました。あとは投稿画面で再読み込みすればブロックのスタイルに新しく追加されていると思います。

関連記事