こんにちは、みみです。明けまして今年もGutenbergの話から。

昨年末ギリギリにようやくGutenbergへざっくり対応したこのブログのテーマですが、今度はちょっとだけ踏み込んでブロックのカスタマイズに進んでみようと思います。

新しいブロックを作ることもできますが、最初は既存のブロックに付け加えたいというケースも多いのではないでしょうか。まずは手始めに、ボタンブロックに小さいボタンを追加してみます。

テーマでブロックをカスタムするには

他にも方法があるのかも知れませんが、とりあえず公式のハンドブックを見てやってみましょう。

まずは適当なJavaScriptファイルをテーマの中に作成します。ここではwp_blocks_customed.jsとしています。このファイルに

wp.blocks.registerBlockStyle( 'core/button', {
    name: 'small',
    label: 'Small'
} );

とか書いたら、functions.phpに

function myguten_enqueue() {
  wp_enqueue_script(
      'myguten-script',
      get_template_directory_uri() . '/wp_blocks_customed.js',
      array( 'wp-blocks')
  );
}
add_action( 'enqueue_block_editor_assets', 'myguten_enqueue' );

と書き足して投稿画面をリロードすると、ボタンのスタイルにSmallが追加されています。

あとはSmall （.is-style-small）にスタイルを当ててあげれば良いだけです。nameに指定した文字列がis-style-の後に付きます。

.wp-block-button.is-style-small {
    .wp-block-button__link {
        font-size: 14px;
        padding: .3em .8em;
        font-weight: 400;
    } 
}

簡単ですね！JSはコピペで該当箇所だけゴニョゴニョすれば良いだけなので怖くない！例えばcore/buttonのところをcore/listにすれば、リストブロックに新しいスタイルを当てられます。

躓きポイントとしては、設定がキャッシュされるようになってるっぽいので、設定を変更して反映されなかったらキャッシュを消してリトライしてみてください。

参照：

• Tutorials – The new Gutenberg editing experience — WordPress … 取り敢えず先ずはここに一通り目を通すのが吉。
• Block Filters – The new Gutenberg editing experience — WordPress … ブロックフィルターについてはここ。
• 関数リファレンス/wp enqueue script – WordPress Codex 日本語版
• enqueue_block_editor_assets | Hook | WordPress Developer Resources