GutenbergのブロックスタイルをPHPで簡単に追加する

『グーテンベルク時代のWordPressノートテーマの作り方 2（ランディングページ＆ワンカラムサイト編）』ではJavaScriptファイルを用意してブロックスタイルを追加する方法を紹介しましたが、最新のGutenberg（バージョン6.2）ではPHPだけでも簡単に追加できるようになりました。

たとえば、functions.phpに次のように register_block_style() の設定を追加すると、見出しブロックに「デザイン01」と「デザイン02」の２つのブロックスタイルが追加され、見出しのデザインを切り替えることができるようになります。

register_block_style(
    'core/heading',
    array(
        'name'         => 'design01',
        'label'        => 'デザイン01',
        'inline_style' => '.is-style-design01 {
            border-left: solid 8px orange;
            padding-left: 12px;
        }',
    )
);

register_block_style(
    'core/heading',
    array(
        'name'         => 'design02',
        'label'        => 'デザイン02',
        'inline_style' => '.is-style-design02 {
            padding: 20px 10px 15px;
            border-radius: 10px;
            background: #f5d742;
        }
        .is-style-design02::before {
            content: "●";
            color: #ffffff;
            margin-right: 10px;
        }',
    )
);

register_block_style()ではJavaScriptのwp.blocks.registerBlockStyle()と同じように、nameでスタイル名を、labelでラベルを指定します。エディタでブロックスタイルを選択すると、ブロックに対して「is-style-スタイル名」という形式のクラス名が指定されますので、このクラス名に対してデザインをアレンジするCSSを適用します。

CSSの設定はCSSファイルに記述するか、inline_styleで指定します。inline_styleで指定したCSSは、エディタとフロントの両方に<style> ～ </style>で適用されます。

この他にも、Gutenberg 6.2では「カバー」および「メディアと文章」ブロック内で使用できるブロックの種類に制限がなくなるなど、ブロックをより便利に、より多様な形で活用できるようになっています。