複数のブロックをひとまとめにできるようになりました(グループブロック)


Ver. 3.2.36から、ブロックエディターで複数のブロックを1つのグループにまとめられるようになりました。

まとめたグループには背景色を付けられるので、お知らせの中の大事な数行だけを色の付いた枠で囲む、といったことが本文の中でできます。グループは1つのブロックとして上下に動かせるほか、出力するHTML要素を<section>や<aside>に変えることもできます。

次の画像は、3つの段落をグループにまとめて背景色を付け、公開側で表示したところです。最後の段落はグループの外にあります。

公開側のページ。3つの段落が薄いオレンジの背景の枠にまとまり、その下にグループの外の段落が続く
完成形

段落をグループにまとめる

  1. エントリー編集画面の本文で、まとめたい段落を選びます。1つ目の段落の先頭から、最後の段落の末尾までをドラッグするか、Shiftキーを押しながら矢印キーで広げます。複数のブロックにまたがって選ぶと、上のツールバーの左から3つ目に「グループ化」のボタンが出ます。

3つの段落を選んだ状態。ツールバーの上下移動ボタンの右にグループ化のボタンがある
複数の段落を選んだときのツールバー
  1. 「グループ化」を押すと、選んだ段落が1つの枠にまとまります。キーボードなら、選んだ状態でCtrl+G(MacはCommand+G)でも同じです。

検証では、段落と段落の間に水平罫線を挟んでも、前後の段落にまたがって選べば水平罫線ごとグループに入りました。

グループに背景色やHTML要素を設定する

グループの中の文字をクリックすると、ツールバーの左端に「親ブロックを選択」のボタンが出ます。押すとグループ全体が選ばれ、ツールバーがグループ用に変わります。

枠で囲まれたグループの下に、上下移動、「<div>」、スタイル、背景色、その他のボタンが並ぶツールバー
グループを選んだときのツールバー

背景色

背景色のボタンを押すと、色を選ぶパネルが開きます。下に並ぶのは管理画面で設定しているカラーパレットの色で、カラーコードを直接入れることもできます。背景色を外すボタンは、いちばん右の矢印です。

色を選ぶパネル。上に色の範囲、中ほどにカラーコードの入力欄「#ffe6cb」、下にカラーパレットの10色が並ぶ
背景色のパネル

背景色を付けたグループには、内側に余白が付きます。検証に使ったblogテーマでは20pxでした。背景色のないグループには余白が付かず、枠の中の文字は前後の段落と同じ位置に並びます。

編集画面で、背景色が付いたグループ。ツールバーは「<section>」になっている
背景色を付けたグループ(編集画面)

HTML要素

ツールバーの「

」を押すと、グループを出力するHTML要素を選べます。最初から選べるのは<div>、<section>、<aside>の3つです。

HTML要素の選択肢。<div>(意味を持たない汎用の入れ物)、<section>(見出しを持つひとまとまり)、<aside>(本筋から外れた補足・関連情報)
HTML要素の選択肢

<section>か<aside>を選ぶと、ツールバーに「名前(aria-label)」のボタンが増えます。スクリーンリーダーで読み上げるときの名前で、同じページに<section>が並ぶときに区別するために付けます。

背景色と<section>、名前を付けて保存すると、公開側では次のHTMLになりました。背景色はstyle属性に入ります。

<section data-tag="section" aria-label="年末年始のお知らせ" data-type="group" style="background-color:rgb(255,230,203);">
  <p>年末年始の営業について</p>
  <p>12月29日から1月3日まで、休業いたします。</p>
  <p>休業中のお問い合わせには、1月5日から順にお返事します。</p>
</section>

見た目を変えたいだけなら<div>のままで構いません。<section>は見出しを持つまとまりに使う要素なので、上の例のように見出しのないグループを<section>にするなら、名前を付けておきます。

スタイル

ツールバーの「スタイル」は、制作者が登録したクラスをグループに付けるメニューです。新しくインストールしたサイトでは選択肢が登録されていないので、このボタンはツールバーに出ません。登録のしかたは後の「制作者が設定すること」にあります。

グループを解除する

グループを選んだ状態で、ツールバーの右端の「ブロックのオプション」(縦に3つ並んだ点)を開き、「グループ解除」を押します。中のブロックは、グループに入れる前の並びに戻ります。キーボードなら、Ctrl+Shift+G(MacはCommand+Shift+G)です。

同じメニューには「グループ化」もあります。段落を1つだけグループにしたいときは、こちらを使います。

制作者が設定すること

グループで選べるHTML要素とスタイルは、管理画面の「編集画面」にある「ブロックエディター設定」で決めます。

「グループブロック HTML要素」には、最初はdiv、section、asideの3行が入っています。「追加」で行を足すと、article、header、footer、navも選べるようになります。mainは選べません。ツールバーのメニューに出る名前は、ラベルに書いた文字です。

グループブロック HTML要素の設定。div、section、asideの3行と、それぞれのラベルが並ぶ
グループブロック HTML要素の設定

「グループブロック クラス」は、スタイルの選択肢を登録する表です。クラスとラベルのほかに、編集者向けの説明を書けます。「一発グループ化」をオンにしたクラスは、複数のブロックを選んだときのツールバーに専用のボタンとして並び、そのクラスを付けた状態でグループにできます。クラスの見た目はテーマのCSSで用意しておきます。ここで登録するのはクラス名だけで、CSSは入りません。

背景色のボタンを出したくないときは、同じ画面の「グループブロックの背景色」のチェックを外します。新しくインストールしたサイトでは「表示する」がオンです。編集者が自由に色を付けられるのを避けたいサイトでは、背景色を消して、決まった見た目をスタイルとして登録しておくほうが、サイトの色が揃います。

「グループ化」が出ないとき

グループ化のボタンは、「ブロックエディター設定」の「ブロックメニュー」に「グループ」の行があるときだけ出ます。新しくインストールしたサイトなら、最初から一覧に入っています。

アップデートする前にブロックメニューを保存していたサイトでは、保存した一覧がそのまま使われるため、「グループ」が入っていないことがあります。その場合は「追加」で行を増やし、ブロックに「グループ」を選んで保存します。「グループ」の行は1つしか置けません。アップデートしたサイトでのこの操作は、今回の検証では試していません。

参考

検証環境

Ver. 3.2.37で、2026-10-14に確認しました。グループブロックはVer. 3.2.36で入った機能です。管理画面の表示は、お使いのバージョンによって異なる場合があります。

同じタグ付けがされている記事