Gutenberg（ブロックエディター）でパディングやマージン、ブロック間の間隔を調整できるようにするには、テーマなら theme.json の settings.spacing、自作ブロックなら block.json の supports.spacing で余白の機能を有効にします。CSS で余白を後から上書きするより、エディター上で値を選べて、表示側にも同じ値がそのまま出力されるのが利点です。この記事では、テーマ全体での有効化、余白の段階（プリセット）の定義、自作ブロックへの追加、反映されないときの確認方法までを順に説明します。
Gutenbergの余白設定の仕組み
ブロックエディターの余白は、主に次の3種類です。
- パディング: ブロックの内側の余白
- マージン: ブロックの外側の余白（上下・左右）
- ブロックの間隔（blockGap）: グループやカラムの中に並ぶ子ブロック同士の間隔
ブロックを選ぶと、右側の設定サイドバーの「スタイル」タブにある寸法（Dimensions）のパネルに、これらの入力欄が表示されます。ただし、表示されるかどうかは「ブロックがその機能に対応しているか」と「テーマがその機能を許可しているか」の両方で決まります。コアのグループブロックはパディングやマージンに対応していますが、テーマが許可していなければ入力欄は出ません。「余白の項目が見つからない」という相談の多くは、テーマ側で有効になっていないことが原因です。
選んだ値はブロックのコメント内の属性として保存され、表示時にはインラインの style 属性や CSS 変数として出力されます。テーマの CSS を書き換えなくても、ブロックごとに余白を変えられるのはこのためです。
テーマ全体で余白の設定を有効にする
ブロックテーマ、または theme.json を持つテーマでは、settings.spacing で余白の機能を個別に有効にします。作業前に、編集するテーマのファイルをバックアップしてください。配布テーマを直接編集すると更新で上書きされるため、子テーマで行うのが安全です。
{
"$schema": "https://schemas.wp.org/trunk/theme.json",
"version": 3,
"settings": {
"spacing": {
"padding": true,
"margin": true,
"blockGap": true,
"units": [ "px", "rem", "%", "vw" ]
}
}
}padding・margin・blockGap を true にすると、対応するブロックで入力欄が表示されます。units は入力欄で選べる単位の一覧です。指定しない単位は選べなくなるので、サイトで使う単位だけに絞っておくと、編集する人によって単位がばらつくのを防げます。
余白だけでなく枠線や色関係の項目もまとめて有効にしたい場合は、settings.appearanceTools を true にする方法もあります。ただし有効になる項目が多いため、編集画面をシンプルに保ちたいサイトでは、上の例のように必要な項目だけを個別に指定するほうが管理しやすくなります。
theme.json を持たないクラシックテーマでは、functions.php でテーマサポートを宣言します。
add_action( 'after_setup_theme', function () {
add_theme_support( 'custom-spacing' );
} );クラシックテーマに theme.json を新しく追加すると、余白以外のレイアウトや既定スタイルの出力も変わることがあります。既存のサイトで試す場合は、ステージング環境で表示崩れがないか確認してから本番に反映してください。
余白の段階（プリセット）を決める
入力欄に自由な数値を入れられる状態だと、ページごとに 18px、20px、22px といった微妙に違う余白が混ざり、デザインがそろわなくなります。spacingSizes で段階を定義しておくと、エディターではスライダーで段階を選ぶ形になり、サイト全体の余白をそろえやすくなります。
{
"$schema": "https://schemas.wp.org/trunk/theme.json",
"version": 3,
"settings": {
"spacing": {
"padding": true,
"margin": true,
"blockGap": true,
"customSpacingSize": false,
"spacingSizes": [
{ "name": "極小", "slug": "20", "size": "0.5rem" },
{ "name": "小", "slug": "30", "size": "1rem" },
{ "name": "中", "slug": "40", "size": "1.5rem" },
{ "name": "大", "slug": "50", "size": "clamp(2rem, 4vw, 3rem)" },
{ "name": "特大", "slug": "60", "size": "clamp(3rem, 6vw, 5rem)" }
]
}
},
"styles": {
"spacing": {
"blockGap": "var:preset|spacing|40"
}
}
}各プリセットは --wp--preset--spacing--40 のような CSS 変数として出力されます。slug を数字にしておくと、段階の大小が名前から分かり、あとで間に段階を足したいときも 35 のように挿入できます。clamp() を使えば、画面幅に応じて余白が伸び縮みするので、スマートフォン向けに別の値を用意する手間を減らせます。
customSpacingSize を false にすると、プリセット以外の値を直接入力する欄が出なくなります。自由入力を残したい場合は true のままにしてください。
styles.spacing.blockGap は、サイト全体の既定のブロック間隔です。var:preset|spacing|40 は theme.json 内でプリセットを参照する書き方で、出力時に CSS 変数へ置き換わります。WordPress には既定の余白スケールもあり、テーマのプリセットとどちらが表示されるかはバージョンによって扱いが変わってきました（2026年10月現在）。意図しない段階が並ぶ場合は、利用中のバージョンの theme.json リファレンスで spacingSizes と既定スケールの関係を確認してください。
自作ブロックに余白の設定を追加する
自分で作ったブロックで余白の入力欄を出すには、block.json の supports に spacing を書きます。
{
"$schema": "https://schemas.wp.org/trunk/block.json",
"apiVersion": 3,
"name": "my-plugin/notice-box",
"title": "お知らせボックス",
"category": "text",
"supports": {
"spacing": {
"margin": [ "top", "bottom" ],
"padding": true
}
},
"editorScript": "file:./index.js"
}margin に [ "top", "bottom" ] のように辺を指定すると、上下だけを調整できるようになります。左右のマージンはレイアウトの中央寄せと競合しやすいため、上下に限定しておくと崩れを防げます。
supports を書いただけでは、値がブロックの要素に付きません。エディター側の edit では useBlockProps()、保存側の save では useBlockProps.save() の戻り値を外側の要素に渡す必要があります。
import { registerBlockType } from '@wordpress/blocks';
import { useBlockProps, InnerBlocks } from '@wordpress/block-editor';
import metadata from './block.json';
registerBlockType( metadata.name, {
edit() {
const blockProps = useBlockProps( { className: 'notice-box' } );
return (
<div { ...blockProps }>
<InnerBlocks />
</div>
);
},
save() {
const blockProps = useBlockProps.save( { className: 'notice-box' } );
return (
<div { ...blockProps }>
<InnerBlocks.Content />
</div>
);
},
} );PHP で表示する動的ブロック（render や render_callback を使うブロック）では、外側の要素に get_block_wrapper_attributes() の戻り値を出力します。これを忘れると、エディターでは余白が付いているのに公開画面では付かない、という状態になります。
なお blockGap は子ブロック同士の間隔なので、InnerBlocks を持ち、レイアウト機能（supports.layout）にも対応したブロックでないと効果が出ません。単体のブロックで使うのはパディングとマージンが中心になります。
ちょっとした余白なら「スペーサー」ブロック
特定の場所だけ少し間を空けたい場合は、コアの「スペーサー」ブロックを挟む方法もあります。手軽ですが、多用すると余白の管理がページごとにばらばらになり、デザインを変えるときに1つずつ直すことになります。繰り返し使う余白はプリセットやブロックの設定で表現し、スペーサーは例外的な調整にとどめると保守しやすくなります。
反映されないときの確認方法
設定したのに入力欄が出ない、または値が画面に反映されないときは、次の順で確認します。
- JSON の書式: カンマの過不足や閉じ括弧の抜けがあると、
theme.json全体が読み込まれません。エディターで$schemaを指定しておくと、書式の誤りに気づきやすくなります。 - キャッシュ:
theme.jsonの内容はキャッシュされることがあります。開発中はwp-config.phpでdefine( 'WP_DEVELOPMENT_MODE', 'theme' );を設定するとテーマ関連のキャッシュが抑えられます。本番環境ではこの設定を外してください。ページキャッシュや CDN を使っている場合は、それらも削除します。 - 出力されたHTML: ブラウザの開発者ツールでブロックの要素を調べ、
style="padding-top:var(--wp--preset--spacing--40)"のような指定が付いているか確認します。付いているのに見た目が変わらない場合は、テーマの CSS がより強い指定で上書きしています。 - テーマのCSSとの競合:
!importantや詳細度の高いセレクターでマージンを固定しているテーマでは、ブロックの設定が効きません。テーマ側の該当する CSS を外すか、詳細度を下げます。
まとめ
- 余白の入力欄は、ブロックの対応とテーマの許可がそろったときに表示されます。
- テーマでは
theme.jsonのsettings.spacingでpadding・margin・blockGapを有効にし、クラシックテーマではadd_theme_support( 'custom-spacing' )を使います。 spacingSizesで段階を決め、customSpacingSizeで自由入力を制限すると、サイト全体の余白がそろいます。- 自作ブロックは
block.jsonのsupports.spacingに加え、useBlockProps()やget_block_wrapper_attributes()で値を要素に渡します。 - 反映されないときは、JSON の書式、キャッシュ、出力された HTML、テーマの CSS の順に確認します。