EBISUCOM エビスコム
  1. 著者NOTE

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

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

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

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

グーテンベルク時代のWordPressノート テーマの作り方

入門編 + ランディングページ&ワンカラムサイト編