複数のブロックをひとまとめにできるようになりました(グループブロック)
Ver. 3.2.36から、ブロックエディターで複数のブロックを1つのグループにまとめられるようになりました。
まとめたグループには背景色を付けられるので、お知らせの中の大事な数行だけを色の付いた枠で囲む、といったことが本文の中でできます。グループは1つのブロックとして上下に動かせるほか、出力するHTML要素を<section>や<aside>に変えることもできます。
次の画像は、3つの段落をグループにまとめて背景色を付け、公開側で表示したところです。最後の段落はグループの外にあります。
段落をグループにまとめる
エントリー編集画面の本文で、まとめたい段落を選びます。1つ目の段落の先頭から、最後の段落の末尾までをドラッグするか、Shiftキーを押しながら矢印キーで広げます。複数のブロックにまたがって選ぶと、上のツールバーの左から3つ目に「グループ化」のボタンが出ます。
「グループ化」を押すと、選んだ段落が1つの枠にまとまります。キーボードなら、選んだ状態でCtrl+G(MacはCommand+G)でも同じです。
検証では、段落と段落の間に水平罫線を挟んでも、前後の段落にまたがって選べば水平罫線ごとグループに入りました。
グループに背景色やHTML要素を設定する
グループの中の文字をクリックすると、ツールバーの左端に「親ブロックを選択」のボタンが出ます。押すとグループ全体が選ばれ、ツールバーがグループ用に変わります。
背景色
背景色のボタンを押すと、色を選ぶパネルが開きます。下に並ぶのは管理画面で設定しているカラーパレットの色で、カラーコードを直接入れることもできます。背景色を外すボタンは、いちばん右の矢印です。
背景色を付けたグループには、内側に余白が付きます。検証に使ったblogテーマでは20pxでした。背景色のないグループには余白が付かず、枠の中の文字は前後の段落と同じ位置に並びます。
HTML要素
ツールバーの「
」を押すと、グループを出力するHTML要素を選べます。最初から選べるのは<div>、<section>、<aside>の3つです。
<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は選べません。ツールバーのメニューに出る名前は、ラベルに書いた文字です。
「グループブロック クラス」は、スタイルの選択肢を登録する表です。クラスとラベルのほかに、編集者向けの説明を書けます。「一発グループ化」をオンにしたクラスは、複数のブロックを選んだときのツールバーに専用のボタンとして並び、そのクラスを付けた状態でグループにできます。クラスの見た目はテーマのCSSで用意しておきます。ここで登録するのはクラス名だけで、CSSは入りません。
背景色のボタンを出したくないときは、同じ画面の「グループブロックの背景色」のチェックを外します。新しくインストールしたサイトでは「表示する」がオンです。編集者が自由に色を付けられるのを避けたいサイトでは、背景色を消して、決まった見た目をスタイルとして登録しておくほうが、サイトの色が揃います。
「グループ化」が出ないとき
グループ化のボタンは、「ブロックエディター設定」の「ブロックメニュー」に「グループ」の行があるときだけ出ます。新しくインストールしたサイトなら、最初から一覧に入っています。
アップデートする前にブロックメニューを保存していたサイトでは、保存した一覧がそのまま使われるため、「グループ」が入っていないことがあります。その場合は「追加」で行を増やし、ブロックに「グループ」を選んで保存します。「グループ」の行は1つしか置けません。アップデートしたサイトでのこの操作は、今回の検証では試していません。
参考
ブロックエディターの基本ブロック。グループで選べるHTML要素と出力例があります
ブロックエディターのカスタマイズ。ブロックメニューの設定項目の説明があります
検証環境
Ver. 3.2.37で、2026-10-14に確認しました。グループブロックはVer. 3.2.36で入った機能です。管理画面の表示は、お使いのバージョンによって異なる場合があります。






