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
で配置位置を指定することができます。
ここまででブロックスタイルの追加は完了です。
追加したブロックスタイルで中央揃え/両端揃えを実現
ブロックエディターで配置したカラムブロックを選択するとブロック設定の「スタイル」欄にブロックスタイルが追加されています。
JSファイルで指定したlabel
の値が表示名になっています。
目的のブロックスタイルをクリックするとカラムブロックにスタイルが適用され、中央揃えや両端揃えを実現できます。

カラムブロックを選択しにくいときは
カラムブロックを選択しにくいときは画面上部の「リスト表示」を使うと便利です。


ブロックエディターでは1つのブロックに対して個別にCSSを書くこともできますが多少手間がかかるため、何度も使う可能性があるものは再利用できる形にしておくと便利です。
最後まで読んでいただきありがとうございました。