ブロックスタイルを追加してカラムブロックを中央揃え・両端揃えにする【WordPress】

ブロックスタイルの追加について

ブロックスタイルとは段落や見出し、カラム等のブロック毎に装飾を選べる機能です。オリジナルのものを追加する方法や仕組みについては次の記事を参考にしてみてください。

カラムブロックについて

カラムブロックとは

内包するカラムの配置設定は無い

通常、カラムブロックが内包するカラム幅は自動的に調整されるため、このまま利用する場合は配置位置を気にすることはあまりありませんが、個々のカラム幅を小さくした場合に中央揃えや両端揃えにしたくても設定項目は無く、左揃えになってしまいます。

カラムの配置を指定するには

中央揃えや両端揃えを実現するにはカラムブロックにCSSを書き足す必要があります。

そこでカラムブロック用のブロックスタイルを追加し、中央揃えや両端揃えとなるCSSをあらかじめ用意しておくことで1クリックでの切り替えを実現しようと思います。

カラム用のブロックスタイルを追加する

ファイルの編集

/js/myguten.js

wp.blocks.registerBlockStyle( 'core/columns', {
  name: 'justify',
  label: '両端揃え',
});
wp.blocks.registerBlockStyle( 'core/columns', {
  name: 'center',
  label: '中央揃え',
});

JavaScriptでブロックスタイルを登録します。カラムブロックのブロック名core/columns、CSSセレクター名に利用されるname、表示名のlabelを指定します。

---

functions.php

function myguten_enqueue() {
	wp_enqueue_script( 'myguten-script', get_theme_file_uri( '/js/myguten.js' ), array(), wp_get_theme()->get( 'Version' ), false );
}
add_action( 'enqueue_block_editor_assets', 'myguten_enqueue' );

アクションフックenqueue_block_editor_assetsでブロックエディター使用時に先程のJSファイルを読み込みます。

---

style.scss

.wp-block-columns {
  &.is-style-justify {
    justify-content: space-between;
  }
  &.is-style-center {
    justify-content: center;
  }
}

セレクター.is-style-〇〇に適用されるCSSを書きます。〇〇にはJSファイルで指定したnameの値が入ります。カラムブロックにはdisplay: flex;が指定されているので、justify-contentで配置位置を指定することができます。

ここまででブロックスタイルの追加は完了です。

追加したブロックスタイルで中央揃え/両端揃えを実現

カラムブロックを選択しにくいときは

---