ワードプレス グループブロックが超便利!グループ化だけじゃない活用方法
ワードプレスGutenberg(ブロックエディター)のグループブロックの基本的な使い方~応用方法までを紹介します。
グループブロックについて、次のことがわかります。
グループブロックを使うメリット
基本的な使い方
(複数のブロックをグループ化する方法と解除の方法)
グループブロックの機能
・テーマごとに違う機能を理解する
・レイアウトの選択(横並び・縦積み)
・文字色、背景色を設定する
・パディング・マージンを設定する(単独ブロックでも便利)
・枠線を設定する
HTML構造を理解しておく
・クラスを設定する
・HTML構造を正確に把握する
(テーマや選択レイアウトによってHTML構造が異なる)
グループブロックを使ったカスタマイズ事例
本記事は、2022年5月24日のワードプレスversion6.0のリリースに伴い、2022年5月にリライトしました。
グループブロックを使うメリット
グループブロックでは、複数のブロックをグループ化することができます。
そうすると次のメリットが生まれるのです。
- グループごと複数のブロックを複製・コピー・移動ができる
(移動後にグループを解除して元に戻すこともできます) - 文字色・背景色でグループ化したブロックを統一感を持たせる
(注釈文やコラムなど、記事内にアクセントをつけて挿入するのに便利) - 単独ブロックでもレイアウト調整できる
(パディングを活用する) - グループにクラス名を設定してカスタムCSSを適用できる
(枠線やラベルをつけた装飾ブロックなどいろいろなコンテンツが作成可能です)
グループブロックの基本的な使い方を解説した後、それぞれのメリットを順番に紹介していきます。
グループブロックの基本的な使い方
複数のブロックをグループ化する
例として、段落ブロックとリストブロック、画像ブロックを1つのグループにしてみます。
グループ化する前は、次のような構成です。

リスト表示でグループ化前の構成を確認
グループ化する前に、画面左上の”アウトライン”ボタンをクリックしてリスト表示を確認してみましょう。

リスト表示は次の点で便利なので、グループブロックなど複雑な構成の確認によく使います。
・現在どのようなブロック構成なのかがわかる
・リスト表示をクリックしてブロックを選択することもできる
この記事内でも使いますので覚えておきましょう。
リスト表示を非表示するには、リスト右上の×マークをクリックします。

グループ化の手順
1.グループ化したいブロックを選択する
今回は段落・リスト・画像の3つのブロックを選択します。
複数のブロックを選択するには、SHIFTキーを押しながら先頭ブロックと最後尾のブロックをクリックします。
選択できたブロックは青く表示されます。

2.グループ化する
選択したブロックの左上表示されたツールバーから操作します。
①”ブロックのタイプ変更”アイコンをクリック
②”グループ”アイコンをクリック

または、3点メニュー(オプション)からでもグループ化可能です。
①3点メニューをクリック
②”グループ化”をクリック

私は、どちらかといえば3点メニューから操作することが多いです。
次に紹介するグループ化解除の手順と似ているからです。
グループ化後のリスト表示の確認
グループ化をした後でも画面の見た目は変わりませんが、リスト表示してみるとブロックの構成が変わったのが確認できます。

グループブロックの中に、段落・リスト・画像の3つのブロックが入っているのが確認できますね。
グループブロックの選択方法
グループブロックの選択は、グループ化後のブロックの見た目が変わらないので難しいですが、リスト表示からなら簡単です。
リスト表示の中の”グループ”をクリックするだけです。

グループブロック以外、例えば段落ブロックを選択したければ、リスト表示の”段落”をクリックします。

グループ内のブロックを選択中の場合、ツールバー左の”グループ”アイコンからでも親となるグループブロックを選択可能です。

・各ブロックの選択はリスト表示が便利
・グループ内ブロックのグループアイコンからもグループブロックを選択できる
グループ化解除の手順
グループ化の解除は、グループブロックを選択した状態で次のようにします。
①3点メニューをクリック
②”グループ解除”をクリック

グループブロックのコピー・複製・移動
グループブロックもコピー・複数・移動が可能です。したがって複数のブロックをまとめてコピーや移動をする際、グループ化してから実行すると確実です。
操作方法は他のブロックと同じです。
グループブロックを選択して、ツールバーから操作します。

移動に関しては、ツールバー内のアイコンからも可能です。
(このアイコンは、上下に他のブロックが存在しないと表示されません)

グループ化は単独のブロックでも可能
複数のブロックでなく、1つだけのブロックでも同じ手順でグループ化は可能です。
ブロック1つだけなのでグループ化ではなく、グループブロックの中に入れる、というのが正確なのでしょうが。
グループブロックの中に入れることで、グループブロックが持つさまざまな機能を使えるメリットが出てきます。(例えばパディング機能を使うとか。)
グループブロックの機能
ブロックエディターがリリースされた当初のグループブロックの機能は、『複数のブロックをグループ化する』だけでしたが、ワードプレスのバージョンアップに従いさまざまな機能が追加されてきました。
2022年5月24日リリースのワードプレスversion6.0で追加された機能を含み、以下の機能となっています。
(TT2はテーマTwenty Twenty-Two、TT1はテーマTwenty Twenty-One、TTはテーマTwenty Twenty)
機能項目 | 機能の説明 | TT2 | TT1 | TT |
---|---|---|---|---|
レイアウト の変換 | ブロックの配置に『横並びへ変換』『縦積みへ変換』を選択できる | 〇 | 〇 | 〇 |
レイアウト | グループブロックの横幅をカスタム設定できる | 〇 | ✖ | ✖ |
色 | グループブロック内のテキスト色、背景色を設定できる | 〇 | 〇 | 〇 |
タイポグラフィ | グループブロック内のテキストのフォントサイズ、フォント見映えを設定できる | 〇 | 〇 | 〇 |
パディング | グループブロックの内側余白を設定できる | 〇 | 〇 | ✖ |
マージン | グループブロックの上下外側の余白を設定できる | 〇 | ✖ | ✖ |
ブロックの間隔 | グループブロック内に配置したブロック間の間隔を設定できる | 〇 | ✖ | ✖ |
枠線 | グループブロックの枠線の幅、スタイル、色、角丸の設定できる | 〇 | △ | ✖ |
この表でわかるように、テーマ側が対応しないと使用できない機能もあるので注意しましょう。
以降順番に機能を紹介していきますが、タイポグラフィについては段落など他のブロックと同様なので割愛いたします。
※機能の設定にはブロック内ツールバーのほか、画面右に表示される設定パネルを使用します。表示されていない場合は、画面右上の設定(歯車マーク)をクリックして表示してください。

レイアウトの変換
デフォルトの”グループ”に加えて、レイアウトの変換機能として『横並びに変換』『縦積みに変換』を選択できます。

”グループ”を選択
”グループ”はデフォルトのレイアウトです。グループの中に配置した各ブロックがそのまま配置されます。
配置の変更を”なし”や”幅広”を選択したとき、それぞれのコンテンツ幅をカスタマイズできるレイアウト機能も使用可能です。

”横並びに変換”を選択
”横並びに変換”では、グループブロック内の各ブロックが横並びに配置されます。CSSを使う方ならばdisplay:flex;が適用されると聞けばより理解できるでしょう。
項目(各ブロック)の揃え位置や、垂直配置の変更も可能です。

”複数行に折り返す”のON/OFFで、横スペースが不足したときに自動的に改行するかどうかを指定できます。スマホ表示を比較すると、ONにしたほうが自然に改行されて見やすくなります。

レシポンシブ対応を考慮すると、ONにしておくほうが無難ですね。
”縦積みに変換”を選択
”縦積みに変換”は、一見”グループ”を選択した場合と見映えが同じに見えますが、実際は異なります。”横並びに変換”を縦に並べたものと考えてください。
CSSでいえば、グループはdisplay:block;、縦積みに変換はdisplay:flex; flex-direction:column;となります。

”項目の揃え位置を変更”で各ブロックの横方向の揃え位置を変更することができます。
例えば中央揃えとすると、グループ内の全ブロックが中央に配置されます。

文字色・背景色を設定する
グループ全体の文字色や背景色を設定すれば、同じグループ内のコンテンツであることが明確にできます。
画面右の設定パネル内の”色”で設定します。

試しに、背景色にグラデーションを設定してみました。

グループ化した範囲がひと目でわかるようになります。
ブログ記事の中でも効果的に使えば、アクセントに使えますね。
パディング・マージンとブロックの間隔
パディング・マージンおよびブロックの間隔の設定は、下記図の赤字部分の設定です。

パディング(グループブロック内側の余白)とブロックの間隔の設定画面です(画面右の設定パネル)。

マージン設定は次のように操作すると設定が表示されます。上下のマージン設定のみです。

※マージン設定は、theme.jsonで有効になっていないと表示されないので、theme.jsonのない従来テーマでは使えません。
パディング機能が表示されない場合
パディングは、ワードプレスversion5.7から導入された比較的新しい機能なので、テーマによってはこの機能が表示されないかもしれません。
その場合はfunctions.phpのafter_setup_themeフックに次の関数を追記します。
add_theme_support( 'custom-spacing' );
もし子テーマを使用しているなら、子テーマのfunctions.phpに次のコードを記述すればよいでしょう。
function wpdc_enable_gutenberg_custom_spacing() {
add_theme_support( 'custom-spacing' );
}
add_action( 'after_setup_theme', 'wpdc_enable_gutenberg_custom_spacing' );
パディングの設定方法
ここまで作成したグループブロック事例(レイアウトは”グループ”)ですが、リストが左に寄り過ぎなので左に3文字分の余白設定をしようと思います。(リストブロックだけ、左に余白を3文字分入れる)

手順としては次のように、リストブロックを新たなグループブロックに入れて操作します。
1.リストブロックをグループ化する
2.リストブロックの入ったグループのパディング設定をする
1.リストブロックをグループ化する
リストブロック単独でグループ化すると次のようになります。
リスト表示で、リストブロック直上に新たなグループブロックが確認できます。

2.リストブロックの入ったグループのパディング設定をする
リストブロック直上のグループブロックを選択した状態で画面右の情報パネルからパディングの設定をします。
次のようにすれば、左のみに3文字分の余白が挿入できます。
(上下左右、単位もpx,%,REM,EM,VWから選択可能)
①”個別設定”のボタンをクリック
②”px”をクリックして
③単位を”EM"に変更(EMは文字単位を表す)
④左のパディング設定欄に3を入力(3EM)

リストの左に余白が設定できました。

このように、複数ブロックをグループ化して使うだけでなく、単独ブロックでもレイアウト調整に使えるのがグループブロックのメリットの1つです。
枠線(幅、スタイル、色、角丸)
枠線の設定も、画面右の設定パネルで実施します。

試しに幅3pxのドット枠線をつけて、角丸半径20pxとしてみました。

グループブロックへのクラス付与とHTML構造
カスタムCSSの適用などグループブロックをカスタマイズする場合は、HTML構造に注意が必要です。
グループブロックのHTML構造は、テーマや選択したレイアウト(グループまたは横並び・縦積み)によって異なるからです。
実際にクラスを付与してHTML構造がどうなるか確認しておきましょう。
グループブロックにクラスを設定する
グループブロックの情報パネルの”高度な設定”でクラス名を入力します。
①”高度な設定”をクリック
②”追加CSSクラス”にクラス名を入力

今回は、段落~画像の入ったグループブロックにdesk-list-groupというクラス名を付けてみました。
HTML構造を確認する
HTML構造は次のようになっています。
従来テーマ(theme.jsonなし)+ レイアウト”グループ”
従来テーマ(theme.jsonなし)でレイアウトに”グループ”を選択している場合、<div>タグが2重構造となります。

wp-block-groupとwp-block-group__inner-container は、グループブロックの中に自動的に付与されるクラス名です。
ブロックテーマ、従来テーマ(theme.jsonあり)および”横並び”・”縦積み”
ややこしいですが、次の場合HTML構造がシンプル化します。
- 従来テーマ(theme.jsonなし)でもレイアウトを”横並び”・”縦積み”とする
- 従来テーマ(theme.jsonあり)
- ブロックテーマ
ようは、従来テーマ(theme.jsonなし)の”グループ”レイアウト以外はすべてHTML構造が以下の通りとなります。

2022年5月現在は、従来テーマ(theme.jsonなし)を使っている方がほとんどだと思います。この場合、選択するレイアウトによってHTML構造が変わることには注意が必要ですね。
グループブロックのカスタマイズ事例
全幅対応テーマなら背景色を広げたコンテンツをつくれる
テーマが全幅対応しているならば、グループブロックのツールバーで全幅配置が選択できます。

全幅配置を利用すると、ページ内のあるセクションだけ横広がりで別の背景色を指定することができます。
例えば以下のコンテンツ例は、白い背景色のページ内に黒の背景色を設定したものです。

具体的には以下のように設定して作成しています。
- グループブロックの中にスペーサー・カラム・スペーサーの順にブロックを配置してコンテンツを作成
- グループブロックの背景色を黒に設定
- グループブロックを全幅配置

このようにグループブロックを使えば、いろいろなレイアウト調整が可能ですね。
おしゃれな装飾ボックス
例えばこのような、おしゃれな装飾ボックスを作成することが可能です。

こちらの記事で作り方を解説しています。
グループブロックに独自のスタイルを追加する
このほかに、応用編としてグループブロックそのものに独自のスタイルを追加する方法もあります。
ブロックのパネル内にデフォルトスタイル以外のスタイルを追加して選択できるようにする方法です。

上記では、独自スタイルとして3種類の枠線スタイルを追加しています。方法は次の記事を参照ください。
ブロックバリエーションを使ってボックスを作成
グループブロックにグループバリエーションを適用すると次のようなボックスを作成することができます。


ブロックエディターで本文欄に段落やさまざまなブロックを配置できるほか、タイトル部のテキストも自由に入力できます。
まとめ
グループブロックは多機能になってしまったので、本来の特徴がわかりにくくなってしまいましたが、最後にもう一度グループブロックを使うシンプルなメリットをあげておきたいと思います。
- グループごと複数のブロックを複製・コピー・移動ができる
(移動後にグループを解除して元に戻すこともできます) - 文字色・背景色でグループ化したブロックを統一感を持たせる
(注釈文やコラムなど、記事内にアクセントをつけて挿入するのに便利) - 単独ブロックでもレイアウト調整できる
(パディングを活用するときに便利) - グループブロックのカスタマイズでいろいろなコンテンツを作成できる
(枠線やラベルをつけた装飾ブロックなど)
ワードプレスversion6.0で横並びや縦積みなど、グループブロックでレイアウト選択の幅が広がりましたが、個人的にはあまり使わないかな、なんて思います。横並びを使いたければグループ内にカラムブロックを使えばよいと思いますし、さらに複雑なレイアウト(例えばずらしレイアウトなど)とする場合はカスタムCSSを使ったほうが簡単だからです。特にレシポンシブ対応は、カスタムCSSなしだと難しいですね。
なので、上記4つの特徴を頭に入れてグループブロックを使っていくとよいでしょう。
なおカスタマイズする場合は、HTML構造に気をつけてくださいね。