WordPressのブロックエディタのチューニング

システム開発課の今門です。
前回はWordPressの新しいエディタ、ブロックエディタとはどんなものなのかを紹介しました。
今回はブロックエディタのチューニングについて話します。

現在、WordPressのコア開発の中心はブロックエディタになっています。アップデートがあるたびに、ブロックエディタの新しい機能が追加され、ブロックの数も増えています。
高機能・多機能になるのはもちろん喜ばしいことですが、管理画面のUIも複雑になり、一部の機能しか使わないような場合には、操作性はすこぶる悪くなってしまいます。必要なもののみを取り入れ、不必要なものを表示しないようにチューニングすることで、操作性は格段に向上します。

そのためのTipsをいくつかご紹介します。

[Tips 1] 特定の投稿タイプのみ、ブロックエディタを有効にする
[Tips 2] 必要なブロックのみを表示する
[Tips 3] ブロックエディタとフロントのビジュアルを揃える
- フロントにブロックエディタのデフォルトCSSを読み込む
- フロントとブロックエディタ共通のCSSファイルを読み込ませる
[Tips 4] ブロックスタイルを登録する
まとめ

[Tips 1] 特定の投稿タイプのみ、ブロックエディタを有効にする

特定の投稿タイプ（例えばカスタム投稿タイプ「info」）のみでブロックエディタを使い、その他の投稿タイプでは無効にしたい場合、functions.phpに次のように記載することで実現できます。

add_filter( 'use_block_editor_for_post_type', function ( $block_editor, $post_type ) {
    if ( $post_type !== 'info' )  $block_editor = false;
    return $block_editor;
  }  ,10, 2 );

ちなみに上記の場合、プラグイン「Classic Editor」をインストールする必要はありません。
（よく勘違いされますが）WordPressのコアには、ブロックエディタと旧エディタの両方が実装されており、デフォルトではブロックエディタが有効になっています。プラグイン「Classic Editor」は、（旧エディタをインストールするのではなく）ブロックエディタを無効化し、旧エディタを有効化するだけの役割を担っているということです。

プラグイン「Classic Editor」がインストール/有効化されている状態は、functions.phpに次のように設定されているのと同等になります。

add_filter( 'use_block_editor_for_post_type', '__return_false' );

[Tips 2] 必要なブロックのみを表示する

WordPressのアップデートのたびにブロックの数も増え、現在（バージョン5.5.1）で5グループ、77種類となっています。
しかし、サイト運用においてすべてのブロックを使うことはまれであり、必要なブロックのみ表示させていたほうが格段に操作性は向上します。

そのためには、functions.phpに次のように指定します。
いったんすべてを非表示にして、指定したブロックのみを表示するという仕様になっています。

add_filter( 'allowed_block_types', function($allowed_block_types) {
  $allowed_block_types = array(
    'core/paragraph',　//「段落」のブロック名
    'core/list',　//「リスト」のブロック名
    'core/image',　　//「画像」のブロック名
  );
  return $allowed_block_types;
});

下記の画像のとおり、「段落」「リスト」「画像」のみがブロック選択欄に表示されます。
すべてが表示されるデフォルトの状態とくらべ、かなり見通しがよくなっていることがわかると思います。

ブロック一覧（必要なもののみ）

上記のとおり、この指定にはブロック名が必要になります。
各ブロックのブロック名を調べるには、次のような方法があります。

（１）ブロックエディタ/フロントのコードを確認する

ブロックエディタのブロック、あるいはブロックエディタで作成されたコンテンツには、wp-block-XXXXというclassが設定されています。
core/XXXXがブロック名になります。

吐き出されたブロックのクラス名

（２）ブロック名の一覧を確認する

ブロック名を個別に調べるのではなく、WordPressに用意されてるブロックすべての名前を確認するには、投稿画面でデベロッパーツールを開き、コンソールでwp.blocks.getBlockTypes()と入力します。

ブロック一覧

現在（バージョン5.5.1）確認できるのは、77ブロックです。

[Tips 3] ブロックエディタとフロントのビジュアルを揃える

旧エディタの入力項目が基本的にHTMLのform要素で構成されていたのに対し、ブロックエディタのデフォルト表示は、（例えば Microsoft Wordのような）直感的なインターフェースとなっています。
サイトの運用者にとっては、フロント（出力されるWebページ）とブロックエディタのビジュアルが極力近いほうが迷わずに済むのは言うまでもありません。
そのためにフロントとブロックエディタに同一のCSS指定をしていくことになるわけですが、ひとつの指定で両方に反映させたいものです。
そのためには、次の２つの指定が必要になります。

フロントにブロックエディタのデフォルトCSSを読み込む

ブロックエディタには、フォントサイズやボックス幅など、デフォルトのCSSがあらかじめ適用されています。それらをフロントにも適用させることで、ビジュアルのベースを揃えてあげます。
functions.phpに次のように指定します。

add_action( 'after_setup_theme', function() {
    add_theme_support( 'wp-block-styles' );
} );

フロントとブロックエディタ共通のCSSファイルを読み込ませる

フロントとブロックエディタにベースとなるCSSを指定したら、両方のビジュアルの整合性を保ちながらビジュアルを拡張していきます。
その時、ひとつの共有CSSファイルを読み込み、そこへのCSS指定が両方へ反映されるようにします。
functions.phpへ下記のとおり指定します。ここでは、front-editor.cssというファイルを作成し、フロント/ブロックエディタの両方に読み込ませます。
front-editor.cssへ記載したCSS指定は、フロント/ブロックエディタの両方に反映されます。

add_action('enqueue_block_assets', function() {
        wp_enqueue_stye(
            'both-css',
            get_template_directory_uri() . '/css/front-editor.css' 
        );
});

フロントとブロックエディタに同一のCSSファイルやJSファイルを読みこむには、フックにenqueue_block_assetsを指定します。
ちなみにフロントのみ読み込む場合は、おなじみのwp_enqueue_scripts、ブロックエディタのみ読み込む場合は、enqueue_block_editor_assetsを指定します。

[Tips 4] ブロックスタイルを登録する

ブロックスタイルとは、ブロックごとに用意されるスタイルパターンです。
デフォルトの状態では、ブロックスタイルは設定されていません。

独自のブロックスタイルを作成する

ブロックスタイルは、独自のものを作成し、登録することができます。
ブロックスタイルは、JavaScriptファイルで指定します。

ここでは、myblockstyle.jsファイルにスタイルを下記のとおり指定します。
この指定は、見出しブロック(core/heading)に、headBoldというスタイルを登録し、ブロックエディタでは「斜体」というラベルで表示させるという意味になります。

wp.domReady( funciton() {

　//見出しブロックにスタイルを追加
    wp.blocks.registerBlockStyle( 'core/heading', {
        name: 'headItalic';
        label: '斜体'
    });

});

このJavaScriptファイルを、functions.phpに次のように指定し、ブロックエディタに読み込ませます。

add_action( 'enqueue_block_editor_assets', function() {
        wp_enqueue_script(
            'my-bstyle',
            get_template_directory_uri(). '/js/myblockstyle.js'
        );
});

スタイルをCSSファイルに指定する

前述の「ブロックエディタとフロントのビジュアルを揃える」で作成したfront-editor.cssに次のとおり指定します。
class名は、myblocstyle.jsで指定したスタイル名 headItalicから自動的に割り当てられます。

@charset "UTF-8";

.is-style-headItalic {
    font-style: italic;
}

ブロックエディターへスタイルが登録されていることを確認する

ブロックエディターの右サイドバー内、ブロック設定「スタイル」に次のように設定されます。

ブロックスタイルの登録

まとめ

以上、よく使われるチューニング方法を説明しましたが、その他にもさまざまな設定が可能です。
詳しく知りたい方は、ブロックエディタに関する公式ドキュメントである下記URLをご参照ください。

Block Editor Handbook
https://developer.wordpress.org/block-editor/

シナプス技術者ブログ

シナプスの技術者公式ブログ。インターネットで、鹿児島の毎日を笑顔にします。