【WordPress7.1】theme.json の変更点

はじめに

この記事は、WordPress テーマの機能・レイアウト・スタイルなどの多くを一元的に管理出来る JSON ファイルである theme.json について、WordPress 7.1での変更点をまとめたものです。

theme.json 自体の全体図については、「【WordPress5.9 / 6.0版】theme.json 全解説」という記事にまとめていますので、そもそも theme.json とは何か分からない方、各セクション (プロパティ) の役割が分からない方は、ぜひ先にこちらの記事を見ていただければ幸いです。

【WordPress5.9 / 6.0】theme.json 全解説

また、WordPress 6.1から WordPress 7.0までの変更点については、それぞれ以下の記事でまとめています。

過去の解説記事のリンク一覧

【WordPress6.1】theme.json の変更点

【WordPress6.2】theme.json の変更点

【WordPress6.3】theme.json の変更点

【WordPress6.4】theme.json の変更点

【WordPress6.5】theme.json の変更点

【WordPress6.6】theme.json の変更点

【WordPress6.7】theme.json の変更点

【WordPress6.8】theme.json の変更点

【WordPress6.9】theme.json の変更点

【WordPress7.0】theme.json の変更点

前準備

この記事の内容を実践するためのオリジナルテーマを用意したいという方は、作成したテーマフォルダに以下ファイルを用意してください。ブロックテーマとして認識させ、フロントエンドでコンテンツを確認出来るようにするために必要な最低限のファイルです。

/*
Theme Name: My Theme
Text Domain: mytheme
*/

<!-- wp:query {"queryId":1,"query":{"offset":0,"postType":"post","order":"desc","orderBy":"date","author":"","search":"","sticky":""}} -->
<div class="wp-block-query">
	<!-- wp:post-template -->
	<!-- wp:post-title {"isLink":true} /-->
	<!-- wp:post-excerpt /-->
	<!-- /wp:post-template -->
</div>
<!-- /wp:query -->

<!-- wp:post-title /-->
<!-- wp:post-content {"layout":{"inherit":true}} /-->

{
	"$schema": "https://schemas.wp.org/trunk/theme.json",
	"version": 3,
	"settings": {
		"layout": {
			"contentSize": "900px"
		}
	}
}

settings

settings.background

settings.background.gradient

グラデーション背景に関する設定を有効化するかどうかをコントロールします。

※デフォルト値：false (ただし、appearanceTools を有効化すると true になります)

{
	"$schema": "https://schemas.wp.org/trunk/theme.json",
	"version": 3,
	"settings": {
		"layout": {
			"contentSize": "900px"
		},
		"background": {
			"gradient": true
		}
	}
}

グラデーションを設定するための機能はこれまでも存在しており、block.json で supports.color.gradient を持つブロックの場合、グラデーション UI を利用することが出来ていました。

しかし、backgroundプロパティを介してスタイルが適用されるため、background-image プロパティを使用する背景画像と競合し、両方同時に指定できないという制約がありました。

/* グラデーション用のスタイル */ 
background: linear-gradient(...);

/* 背景画像用のスタイル */ 
background-image: url("...");

/* > この二つのスタイルが競合する */ 

これを解決するために、新たに settings.background.gradient が theme.json に追加され、グラデーション用と背景画像用のスタイルが background-image プロパティにまとめて出力され、どちらのスタイルも正しく適用されるようになりました。

background-image: linear-gradient( ... ), url( ... );

注意点として、適用するグラデーションは少なくとも一部を半透明にする必要があります。そうでないと、グラデーションが画像を完全に隠してしまい、視覚的にグラデーションしか描画されなくなってしまいます。

WordPress 7.1の時点で、このサポートを持つコアブロックは以下の通りです。

• グループ (core/group)
• 引用 (core/quote)
• プルクオート (core/pullquote)
• 詩 (core/verse)
• アコーディオン (core/accordion)
• 投稿コンテンツ (core/post-content)

ブロックの開発者は、既存の supports.color.gradient をそのまま使い続ける事もできますし、この新しい supports.background.gradient サポートに移行することもできます。

ちなみに、WordPress 7.1 ではカラー関連 UI の表示箇所が一部変化しているのでご注意下さい。

• Color – Text > Typography – Color に移動
• Color – Background > Background – Color に移動
• Color – ドロップダウンの中の Button、Heading 等 > Elements パネルに移動

WordPress 7.0	WordPress 7.1

New Block Support in WordPress 7.1: Background Gradient (background.gradient) – Make WordPress Core

settings.blockVisibility

settings.blockVisibility.allowEditing

ブロックの表示・非表示をエディター上で編集できるかどうかをコントロールします。

※デフォルト値：true

{
	"$schema": "https://schemas.wp.org/trunk/theme.json",
	"version": 3,
	"settings": {
		"layout": {
			"contentSize": "900px"
		},
		"blockVisibility": {
			"allowEditing": false
		}
	}
}

WordPress 6.9では、フロントエンドでブロックを非表示にするための UI が導入されました。WordPress 7.0ではさらに、デスクトップ・タブレット・モバイル個別にブロックを非表示にできるようになりました。

この設定を false にすることでこの UI を非表示にできますが、あくまでも編集 UI を非表示にするためのものであり、既に非表示にされているブロックの可視状態を変更するものではない事に注意してください。

• Block visibility: add theme json opt out by ramonjd · Pull Request #76559 · WordPress/gutenberg
• Ability to Hide Blocks in WordPress 6.9 – Make WordPress Core
• Block Visibility in WordPress 7.0 – Make WordPress Core

settings.dimensions

settings.dimensions.minWidth

CSS の min-width に関する設定を有効化するかどうかをコントロールします。

※デフォルト値：false (ただし、appearanceTools を有効化すると true になります)

{
	"$schema": "https://schemas.wp.org/trunk/theme.json",
	"version": 3,
	"settings": {
		"layout": {
			"contentSize": "900px"
		},
		"dimensions": {
			"minWidth": true
		}
	}
}

有効化すると、「寸法」パネルに「最小幅」コントロールが表示されます。WordPress 7.0で追加された settings.dimensions.dimensionSizes でプリセットを定義している場合は、settings.dimensions.minHeight と同様に、そのプリセットもこのコントロールに反映されます。

WordPress 7.1の時点で、このサポートを持つコアブロックはグループブロック (core/group) のみです。

New Block Support in WordPress 7.1: Minimum Width – Make WordPress Core

settings.viewport

レスポンシブスタイル (後述の @mobile / @tablet) と、ブロックの表示・非表示で使用されるブレークポイントを定義します。

※デフォルト値：mobile: 480px、tablet: 782px

{
	"$schema": "https://schemas.wp.org/trunk/theme.json",
	"version": 3,
	"settings": {
		"layout": {
			"contentSize": "900px"
		},
		"viewport": {
			"mobile": "600px",
			"tablet": "900px"
		}
	}
}

前提知識として、WordPress 7.1 では、デスクトップ用のスタイルに加えて、タブレット用・モバイル用のスタイルを別途適用することが出来ます。レスポンシブ用のスタイルを適用したい場合は、エディター上部のドロップダウンを開いて、「レスポンシブスタイル」をチェックします。

これをチェックした状態で、タブレットまたはモバイルを選択し、ブロックサイドバーでスタイルを変更すると、そのスタイルはそのビューポートでのみ適用されます。具体的には、以下のようにメディアクエリを使用したスタイルが出力されます。

<p class="wp-states-af95ff40 wp-block-paragraph" style="font-size:40px">Hello World</p>

@media (width <= 480px) {
	.wp-states-af95ff40 {
		font-size: 18px !important;
	}
}
@media (480px < width <= 782px) {
	.wp-states-af95ff40 {
		font-size: 30px !important;
	}
}

デスクトップ・タブレット・モバイル個別にブロックを非表示にした場合は、以下のような CSS が出力されます。

@media (width > 782px) {
	.wp-block-hidden-desktop {
		display: none !important;
	}
}
@media (width <= 480px) {
	.wp-block-hidden-mobile {
		display: none !important;
	}
}
@media (480px < width <= 782px) {
	.wp-block-hidden-tablet {
		display: none !important;
	}
}

これらの CSS で出力されるメディアクエリのブレークポイントを設定するのが、settings.viewport の役割です。

利用可能な単位は、px、em、rem のいずれかです。tablet、mobileの他に新しいビューポートを追加することはできませんが、ビューポートを減らすことはできます。例えば、次の設定ではモバイルビューポートが無効になり、デバイスプレビューからも設定が消えます。

{
	"$schema": "https://schemas.wp.org/trunk/theme.json",
	"version": 3,
	"settings": {
		"viewport": {
			"tablet": "900px"
		}
	}
}

ちなみに、このレスポンシブスタイル UI 自体を無効にしたい場合は、block_editor_settings_allフックを使って、responsiveEditingEnabled を false に設定してください。

function example_disable_responsive_editing( $settings ) {
	$settings['responsiveEditingEnabled'] = false;
	return $settings;
}
add_filter( 'block_editor_settings_all', 'example_disable_responsive_editing' );

Allow setting viewport tablet and mobile values in theme.json by tellthemachines · Pull Request #79104 · WordPress/gutenberg

styles

styles.dimensions

styles.dimensions.minWidth

CSS の min-width を適用します。通常は、サイト全体ではなく特定のブロックに対して適用することになるため、styles.blocks.{blockName}.dimensions.minWidth を参照してください。

New Block Support in WordPress 7.1: Minimum Width – Make WordPress Core

styles.typography

styles.typography.textShadow

CSS の text-shadow を適用します。

{
	"$schema": "https://schemas.wp.org/trunk/theme.json",
	"version": 3,
	"settings": {
		"layout": {
			"contentSize": "900px"
		}
	},
	"styles": {
		"typography": {
			"textShadow": "2px 2px 1px rgba(0, 0, 0, 0.4)"
		}
	}
}

値は CSS の text-shadow としてそのまま出力されるため、複数の影をカンマ区切りで指定することもできます。

現時点では、theme.json でスタイルを直接記述する必要がありますが、将来的には、グローバルスタイルでプリセットを作成・編集し、そのプリセットをブロックに適用できるような取り組みも進んでいます。

• Text Shadow Support in Global Styles – Make WordPress Core
• Add textShadow typography support and UI by t-hamano · Pull Request #79584 · WordPress/gutenberg

styles.blocks

styles.blocks.{blockName}.dimensions.minWidth

CSS の min-width を特定のブロックに適用します。

{
	"$schema": "https://schemas.wp.org/trunk/theme.json",
	"version": 3,
	"settings": {
		"layout": {
			"contentSize": "900px"
		}
	},
	"styles": {
		"blocks": {
			"core/group": {
				"dimensions": {
					"minWidth": "320px"
				}
			}
		}
	}
}

New Block Support in WordPress 7.1: Minimum Width – Make WordPress Core

styles.blocks.{blockName}.typography.textShadow

CSS の text-shadow を特定のブロックに適用します。

{
	"$schema": "https://schemas.wp.org/trunk/theme.json",
	"version": 3,
	"settings": {
		"layout": {
			"contentSize": "900px"
		}
	},
	"styles": {
		"blocks": {
			"core/site-title": {
				"typography": {
					"textShadow": "2px 2px 0 #000000"
				}
			}
		}
	}
}

• Text Shadow Support in Global Styles – Make WordPress Core
• Add textShadow typography support and UI by t-hamano · Pull Request #79584 · WordPress/gutenberg

styles.blocks.{blockName}.@tablet, styles.blocks.{blockName}.@mobile

特定のブロックに対して、ビューポートごとのスタイルを適用します。

settings.viewport のセクションで述べた通り、WordPress 7.1 ではタブレット・モバイルのためのレスポンシブスタイルが適用できるようになり、さらに、メディアクエリのブレークポイントも設定できるようになりました。

タブレット・モバイルのためのスタイルを定義する場合は、@mobile / @tablet という状態 (ステート) を使用します。

{
	"$schema": "https://schemas.wp.org/trunk/theme.json",
	"version": 3,
	"settings": {
		"layout": {
			"contentSize": "900px"
		}
	},
	"styles": {
		"blocks": {
			"core/paragraph": {
				"typography": {
					"fontSize": "24px"
				},
				"@tablet": {
					"typography": {
						"fontSize": "20px"
					}
				},
				"@mobile": {
					"typography": {
						"fontSize": "16px"
					}
				}
			}
		}
	}
}

以下のような CSS が出力されます。

:root :where(p){
	font-size: 24px;
}

@media (width <= 480px){
	:root :where(p){
		font-size: 16px;
	}
}

@media (480px < width <= 782px){
	:root :where(p){
		font-size: 20px;
	}
}

@mobile / @tablet の中では、通常のブロックスタイルと同じプロパティに加えて、elements や疑似クラスもネストできます。また、ブロックスタイルバリエーションにもレスポンシブスタイルを定義できます。

{
	"$schema": "https://schemas.wp.org/trunk/theme.json",
	"version": 3,
	"settings": {
		"layout": {
			"contentSize": "900px"
		}
	},
	"styles": {
		"blocks": {
			"core/button": {
				"color": {
					"text": "#000000"
				},
				"@mobile": {
					"color": {
						"text": "#ff0000"
					},
					":hover": {
						"color": {
							"text": "#ff9900"
						}
					}
				},
				"variations": {
					"outline": {
						"color": {
							"text": "#0000ff"
						},
						"@mobile": {
							"color": {
								"text": "#00aa00"
							},
							":hover": {
								"color": {
									"text": "#aa00aa"
								}
							}
						}
					}
				}
			}
		}
	}
}

以下のような CSS が出力されます。

/* デフォルト */
:root :where(.wp-block-button .wp-block-button__link) {
	color: #000000;
}
/* モバイル */
@media (width <= 480px) {
	:root :where(.wp-block-button .wp-block-button__link) {
		color: #ff0000;
	}
}
/* モバイル + ホバー */
@media (width <= 480px) {
	:root :where(.wp-block-button .wp-block-button__link:hover) {
		color: #ff9900;
	}
}
/* バリエーション */
:root :where(.wp-block-button.is-style-outline--1 .wp-block-button__link) {
	color: #0000ff;
}
/* モバイル + バリエーション */
@media (width <= 480px) {
	:root :where(.wp-block-button.is-style-outline--1 .wp-block-button__link) {
		color: #00aa00;
	}
}
/* モバイル + バリエーション + ホバー */
@media (width <= 480px) {
	:root :where(.wp-block-button.is-style-outline--1 .wp-block-button__link:hover) {
		color: #aa00aa;
	}
}

Try responsive global block styles with states by tellthemachines · Pull Request #77513 · WordPress/gutenberg

styles.blocks.core/navigation-link.-current

現在の、またはアクティブなアイテムのためのスタイルを適用します。プレフィックスとしてハイフン (-) がついていますが、これはカスタム状態を意味します。これはナビゲーションリンクブロック core/navigation-link のみで利用可能であり、今のところ他のブロックではオプトインできません。

-current を介して適用されたスタイルには、CSS セレクターとして.wp-block-navigation .current-menu-item が使われます。

-current を疑似クラスと組み合わせる事もできます。

{
	"$schema": "https://schemas.wp.org/trunk/theme.json",
	"version": 3,
	"settings": {
		"layout": {
			"contentSize": "900px"
		}
	},
	"styles": {
		"blocks": {
			"core/navigation-link": {
				"color": {
					"text": "#000000"
				},
				":focus": {
					"color": {
						"text": "#00aa00"
					}
				},
				"-current": {
					"color": {
						"text": "#0000ff"
					},
					":focus": {
						"color": {
							"text": "#aa00aa"
						}
					}
				}
			}
		}
	}
}

以下のような CSS が出力されます。

/* デフォルト */
:root :where(.wp-block-navigation-link) {
	color: #000000;
}
/* フォーカス */
:root :where(.wp-block-navigation-link:focus) {
	color: #00aa00;
}
/* カレント */
:root :where(.wp-block-navigation .current-menu-item) {
	color: #0000ff;
}
/* カレント + フォーカス */
:root :where(.wp-block-navigation .current-menu-item:focus) {
	color: #aa00aa;
}

Navigation link: add support to style current menu item via theme.json by MaggieCabrera · Pull Request #75736 · WordPress/gutenberg

styles.blocks.core/navigation-link.{:hover | :focus | :focus-visible | :active}

ナビゲーションリンクブロックで、:hover、:focus、:focus-visible、:active の4つの疑似クラスのためのスタイルを適用します。

WordPress 7.0ではボタンブロックのみが疑似クラスをサポートしていましたが、7.1ではナビゲーションリンクブロックでもサポートされるようになりました。

{
	"$schema": "https://schemas.wp.org/trunk/theme.json",
	"version": 3,
	"settings": {
		"layout": {
			"contentSize": "900px"
		}
	},
	"styles": {
		"blocks": {
			"core/navigation-link": {
				":hover": {
					"color": {
						"text": "#ff0000"
					}
				},
				":focus": {
					"color": {
						"text": "#00ff00"
					}
				},
				":focus-visible": {
					"color": {
						"text": "#00ffff"
					}
				},
				":active": {
					"color": {
						"text": "#0000ff"
					}
				}
			}
		}
	}
}

Navigation link: add support to style current menu item via theme.json by MaggieCabrera · Pull Request #75736 · WordPress/gutenberg