ブロックフィルターを使って Gutenberg のブロックをカスタムしてみよう


ボタンブロックに小さいボタンを
追加する方法

こんにちは、みみです。明けまして今年も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が追加されています。
編集画面のボタンブロックのスタイル部分。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にすれば、リストブロックに新しいスタイルを当てられます。

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

参照:



この記事を書いた人