Photosynthesic blog

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

2019-01-07

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

こんにちは、みみです。明けまして今年も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にすれば、リストブロックに新しいスタイルを当てられます。

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

参照:


この記事を書いた人

mimi

主に書いている人。愚痴が多いです。悲観的。 フロントエンド側のアレコレをイジるのが好きみたいです。 編み物と写真と珈琲とオヤツ作りが趣味。 イラストも、最近描いてないけど描きます。 Twitter