Contents
はじめに
この記事は、WordPress テーマの機能・レイアウト・スタイルなどの多くを一元的に管理出来る JSON ファイルである theme.json について、WordPress 6.1での変更点をまとめたものです。
theme.json 自体の全体図については、「【WordPress5.9 / 6.0版】theme.json 全解説」という記事にまとめていますので、そもそも theme.json とは何か分からない方、各セクション (プロパティ) の役割が分からない方は、ぜひ先にこちら記事を見ていただければ幸いです。
変更点一覧
とりあえず変更点をざっくりと知っておきたいという方のために、WordPress6.1 での変更点をリストアップしておきます。より詳しく理解してみたい方は、以降の各セクションの解説を参照ください。
settings.useRootPaddingAwareAlignmentsプロパティが追加された (解説)settings.spacingプロパティでプリセット値の設定が追加された (解説)settings.typographyプロパティがfluidをサポートした (解説)stylesプロパティのborderプロパティで、4方向個別にスタイルを指定出来るようになった (解説)stylesプロパティで指定出来るスタイルとして、outline、filter、shadowの3つが追加された (解説)stylesプロパティで、疑似クラスとしてボタン・リンク要素に:active/:focus/:hover/:visitedの4つが指定出来るようになった (解説1 / 解説2)styles.elementsプロパティで指定出来る要素として、button、caption、heading、citeの4つが追加された (解説)
備考・注意点
マイナーリリースにより、仕様が若干変わる可能性があります。最新の仕様は、WordPress の開発リポジトリまたは WordPress.org のリリースニュース (Make WordPress Core) などで確認してください。
前準備
この記事の内容を実践するためのオリジナルテーマを用意したいという方は、作成したテーマフォルダに以下ファイルを用意してください。ブロックテーマとして認識させるために必要な最低限のファイルです。
/*
Theme Name: My Theme
Text Domain: mytheme
*/<!-- 空ファイルでOK -->{
"$schema": "https://schemas.wp.org/trunk/theme.json",
"version": 2,
"settings": {
"appearanceTools": true,
"layout": {
"contentSize": "900px"
}
}
}settings
このセクションに関する変更は以下3点です。
useRootPaddingAwareAlignmentsプロパティが追加されたspacingプロパティでプリセット値の設定が追加されたtypographyプロパティがfluidをサポートした
settings.useRootPaddingAwareAlignments
ルートに設定した padding を、ルートではなく全幅をもつブロックに適用します。
このプロパティが導入された経緯はかなり分かりにくいと思うので、例を示しながら順番に説明したいと思います。
まず、これまでの (theme.json を持っていない) クラシックテーマでは、例えば以下のようにコンテンツエリアに最大幅を指定する事が多かったと思います。
/*
Theme Name: My Theme
Text Domain: mytheme
*/
.entry-content {
max-width: 900px;
margin: 0 auto;
}
そして、コンテンツ内のブロックが全幅であった場合に、親コンテナを超えて画面幅で表示させるために、以下のような CSS を書いていました。
/*
Theme Name: My Theme
Text Domain: mytheme
*/
.entry-content {
max-width: 900px;
margin: 0 auto;
}
.alignfull {
width: 100vw;
margin-left: calc( ( 100% - 100vw ) / 2 );
}
これで全幅のスタイルには対応できてはいますが、以下の問題が発生します。
- 横スクロールバーが発生する
- 縦スクロールバーがある時に、実際の
body幅より大きくなり、コンテンツが見切れる
body 要素に overflow-x:hidden; を指定したり、縦スクロールバーを考慮した値を計算する方法もありますが、別のアプローチとして、Twenty Twenty One では以下のようなアプローチが取られています。
- コンテンツ幅 (
.entry-content)にはmax-widthを指定しない (＝画面幅) .entry-content直下の要素で、.align{XXX}クラスが無いもののみ、コンテンツ幅を指定する
実際には、画面幅が狭くなった時に左右に余白を持たせるために min() 関数や calc() 関数を使っていたり、より複雑な CSS が組まれていますが、基本的な考え方は上記の通りです。
さらに、ブロックテーマである Twenty Twenty Two では、より進んだアプローチが取られています。
- テンプレートの起点となる
div.wp-site-blocksに、コンテンツの左右余白となるpaddingを適用する
.entry-content直下の要素には、theme.jsonのsettings.layout.contentSizeから生成される CSS カスタムプロパティである--wp--style--global--content-sizeをmax-widthとして付与している
- 全幅ブロックの左右にあるコンテンツ余白を打ち消すために、左右に同じ値でマイナスマージンを付与している
ですが、theme.json での機能として、ルート (body 要素) の padding を変更出来てしまう事が問題となります (styles.spacing.padding)。
{
"$schema": "https://schemas.wp.org/trunk/theme.json",
"version": 2,
"settings": {
"appearanceTools": true,
"layout": {
"contentSize": "900px"
}
},
"styles": {
"spacing": {
"padding": {
"left": "1rem",
"right": "1rem"
}
}
}
}これと同じ機能はサイトエディター上でも存在します。
そうすると、全幅ブロックにはコンテンツの左右余白となる padding を打ち消すための左右マイナスマージンは適用されているが、より上位の body 要素に適用された左右 padding は考慮していないので、結果的に全幅だとしても左右余白が空いてしまうというケースが起こってしまいます。
この問題を解決するために導入されたのが、この useRootPaddingAwareAlignments というプロパティです。
もう一度このプロパティの定義を書いておくと、「ルートに設定した padding を、ルートではなく全幅をもつブロックに適用する」となります。
このプロパティをオプトインしている、WordPress6.1 のデフォルトテーマである Twenty Twenty Three を有効にしてみると、以下のようなHTML・マークアップに変わっている事が分かります。
- ルート (
body要素) にはpaddingは適用されず、--wp--style--root--padding-{top|right|bottom|left}という CSS カスタムプロパティが出力されている
- いくつかの要素に、
.has-global-paddingというクラスが付与されており、ルートに適用した左右のpaddingが代わりに適用されている (＝コンテンツの左右に余白が出来る)
- 全幅ブロックには、ルートに適用した同じ左右
paddingが、左右マイナスマージンとして適用されている (＝画面幅一杯に表示される)
- 全幅ブロックの子ブロックには、ルートに適用した同じ左右
paddingが適用されている (全幅ブロックの子ブロックにも、コンテンツの左右に余白が出来る)
以上のような挙動により、CSS を一切書かずに、以下の事が実現出来るようになります。
- コンテンツに幅を持たせたい
- コンテンツの左右に
paddingを入れたい - コンテンツの左右
paddingは、サイトエディターのグローバルスタイルパネルから変更も出来る - コンテンツの左右
paddingの値に関わらず、全幅ブロックはちゃんと画面幅一杯まで広がる - 画面幅を狭めた時に、通常のブロックも全幅ブロックとも、左右に同じ
paddingがデフォルトで適用される
settings.spacing
スペース (margin / padding / blockGap) に関する設定ですが、プリセット値が導入されました。例えば、全てのスペースをサポートしたグループブロックでは以下のように表示されます。
またデフォルトでは、(ゼロを除いて) 7つのプリセットが生成され、プリセットを選択した時に CSS カスタムプロパティが適用されます。デフォルトの CSS カスタムプロパティ名とその値は以下の通りです。
--wp--preset--spacing--20: 0.44rem;
--wp--preset--spacing--30: 0.67rem;
--wp--preset--spacing--40: 1rem;
--wp--preset--spacing--50: 1.5rem;
--wp--preset--spacing--60: 2.25rem;
--wp--preset--spacing--70: 3.38rem;
--wp--preset--spacing--80: 5.06rem;- Introduction of presets across padding, margin and block gap – Make WordPress Core
- Theme.json: Add spacing size presets by glendaviesnz · Pull Request #41527 · WordPress/gutenberg
以下3つのプロパティは、このプリセットをカスタマイズするためのものです。
settings.spacing.customSpacingSizes
カスタム値を指定出来るようにするかどうかを設定します。
※デフォルト値：true
false に設定すると、カスタム値入力に切り替えるボタンが非表示となります。
settings.spacing.spacingSizes
プリセットのバリエーションを設定します。
name / slug / size プロパティを持ったオブジェクトを配列内に指定します。
{
"$schema": "https://schemas.wp.org/trunk/theme.json",
"version": 2,
"settings": {
"appearanceTools": true,
"layout": {
"contentSize": "900px"
},
"spacing": {
"spacingSizes": [
{
"size": "20px",
"slug": "small",
"name": "Small"
},
{
"size": "30px",
"slug": "medium",
"name": "Medium"
},
{
"size": "40px",
"slug": "large",
"name": "Large"
}
]
}
}
}
size プロパティには clamp や calc なども使えますが、具体的なプリセットの設計方法は、WordPress6.1 のデフォルトテーマである Twenty Twenty Three の定義が参考になると思います。
settings.spacing.spacingScale
各プロパティのオプションに従って、プリセット値を自動生成します。
settings.spacing.spacingSizes では、プリセットを全て手動で指定しますが、このプロパティでは、配下の operator / increment / steps / mediumStep / unit の5つのプロパティから、プリセットを自動生成します。
デフォルト値は以下の通りです。
{
"$schema": "https://schemas.wp.org/trunk/theme.json",
"version": 2,
"settings": {
"appearanceTools": true,
"layout": {
"contentSize": "900px"
},
"spacing": {
"spacingScale": {
"mediumStep": 1.5,
"unit": "rem",
"increment": 1.5,
"operator": "*",
"steps": 7
}
}
}
}これらのプロパティは少し分かりづらいため、各プロパティをどのように設定していけばよいか一例を示します。
まずは、プリセットバリエーションの中間にあたる値を検討します。mediumStep プロパティでその値を、unit プロパティで単位を指定します。ここでは、中間値を 2rem としてみます。
{
"spacingScale": {
"mediumStep": 2,
"unit": "rem"
}
}次にこの中間値から、どんなステップで値を増減させたいかを考えます。increment プロパティでその量を、operator プロパティで乗算 (除算)・加算 (減算)させるかを決定します。ここでは、0.2rem ずつ加算・減算させたいとします。
{
"spacingScale": {
"mediumStep": 2,
"unit": "rem",
"increment": 0.2,
"operator": "+"
}
}最後に、いくつのステップ (プリセット) を生成するかを検討します。steps プロパティで定義しますが、ここでは5つのプリセットを生成したいとします。
{
"spacingScale": {
"mediumStep": 2,
"unit": "rem",
"increment": 0.2,
"operator": "+",
"steps": 5
}
}この定義から生成される UI (+ CSS カスタムプロパティ) は、以下のようになります。
なお、steps を 0 とすると、プリセット UI は表示されず、CSSカスタムプロパティも出力されず、WordPress6.0 以前と同様にカスタム値のみを入力出来ます。
{
"$schema": "https://schemas.wp.org/trunk/theme.json",
"version": 2,
"settings": {
"appearanceTools": true,
"layout": {
"contentSize": "900px"
},
"spacing": {
"spacingScale": {
"steps": 0
}
}
}
}settings.typography
このセクションに関する変更は以下2点です。
fluidプロパティが追加されたfontSizesプロパティにfluidプロパティが追加された
settings.typography.fluid
Fluid typography をオプトインします。
「Fluid typography」とは、画面幅に応じてフォントサイズが自動的に変わる機能の事で、いわゆる clamp() 関数と同じです。このプロパティで機能をオプトインすると、フォントサイズのバリエーションを定義する settings.typography.fontSizes プロパティで指定した値が、 clamp() 関数を用いたものに変換されます。
{
"$schema": "https://schemas.wp.org/trunk/theme.json",
"version": 2,
"settings": {
"appearanceTools": true,
"layout": {
"contentSize": "900px"
},
"typography": {
"fluid": true
}
}
}settings.typography.fontSizes
Fluid typography のための fluid プロパティが追加されました。
これまでも、以下のようにclamp() 関数を直接値に指定する事で、fluid typography と同様の事は実現出来ました。
{
"$schema": "https://schemas.wp.org/trunk/theme.json",
"version": 2,
"settings": {
"appearanceTools": true,
"layout": {
"contentSize": "900px"
},
"typography": {
"fontSizes": [
{
"name": "Large",
"size": "clamp(1rem, 2.5vw, 2rem)",
"slug": "medium"
}
]
}
}
}新しい fluid プロパティを使うと、以下のように最小値 (min) と 最大値 (max) を指定するだけで、clanp() 関数を使用したいい感じの式を出力してくれます。
{
"$schema": "https://schemas.wp.org/trunk/theme.json",
"version": 2,
"settings": {
"appearanceTools": true,
"layout": {
"contentSize": "900px"
},
"typography": {
"fluid": true,
"fontSizes": [
{
"fluid": {
"max": "4rem",
"min": "1rem"
},
"size": "2rem",
"slug": "medium",
"name": "Medium"
}
]
}
}
}このように定義した上で、ブロックにこのフォントサイズを適用すると、まず以下のようなスタイルが設定されます。
.has-medium-font-size {
font-size: var(--wp--preset--font-size--medium) !important;
}そして値に使用されている CSS カスタムプロパティは、以下のように生成されています。
--wp--preset--font-size--medium: clamp(1rem, 1rem + ((1vw - 0.48rem) * 3.846), 3rem);clamp() 関数の引数は、最小値、推奨値、最大値の3つですが、最小値と最大値は theme.json でそれぞれ定義した値 (min / max) が適用され、間の推奨値は自動的に生成されていることが分かります。
size プロパティの値は、ソースを見る限り clamp() 関数の生成では考慮されていないようですが、このプロパティが無いと Notice エラーが発生します。ただし、min, max でサポートしている単位 (px / em / rem) 以外が付かれていた場合に、フォールバック値として使用されるようです。
フォントサイズのバリエーションのうち、特定のバリエーションでは fluid typography を使わない (固定値にしたい) 場合は、fluid プロパティを false に設定します(もちろん、fluid typography をオプトインしていない時は、fluid プロパティ自体を定義する必要はありません)。
{
"$schema": "https://schemas.wp.org/trunk/theme.json",
"version": 2,
"settings": {
"appearanceTools": true,
"layout": {
"contentSize": "900px"
},
"typography": {
"fluid": true,
"fontSizes": [
{
"fluid": false,
"size": "2rem",
"slug": "fixed",
"name": "Fixed"
}
]
}
}
}styles
このセクションに関する変更は以下4点です。
borderプロパティで4方向個別にスタイルを指定出来るようになった- 定義出来るスタイルとして、
outline/filter/shadowの3つが追加された elementsプロパティで指定出来る要素として、button/caption/heading/citeの4つが追加されたelementsプロパティで、疑似クラスとしてボタン・リンク要素に:active/:focus/:hover/:visitedの4つが指定出来るようになった
またこれらの変更点を理解するために、以下のようなルールを知っている必要があります。
styles直下にスタイルに関するプロパティ (border/color等) を定義した場合は、サイト全体 (bodyタグ) にスタイルが適用される- 特定のブロックにスタイルを適用する時は、
styles.blocks.{blockName}プロパティに定義する - 特定の要素にスタイルを適用する時は、
styles.elements.{elementName}プロパティに定義する
このセクションについては別記事にて詳しく解説していますので、ぜひご参照ください。
styles.border
ブロックサポートとグローバルスタイルのボーダーパネルに、新しい BorderBoxControl コンポーネントが使われるようになり、4方向個別にボーダーを指定出来るようになりました。これに伴い、theme.json の border プロパティでも4方向個別に指定するためのプロパティ (color / style / width) が追加されました。
styles プロパティ直下で border を指定した場合、body タグにスタイルが適用されます。実際は、特定のブロックや特定の要素に適用する事が多いと思うので、コード例は styles.blocks.{blockName}.border セクションと styles.elements.{elementName}.border セクションに記載します。
styles.outline / styles.filter / styles.shadow
定義出来るスタイルとして、outline / filter / shadow の三つが追加されました。
styles プロパティ直下で これらのプロパティを指定した場合、body タグにスタイルが適用されます。実際は特定のブロックや特定の要素に適用する事が多いと思うので、コード例は styles.blocks.{blockName}.{outline | filter | shadow} と styles.elements.{elementName}.{outline | filter | shadow} セクションに記載します。
- add box-shadow support for blocks via theme.json by madhusudhand · Pull Request #41972 · WordPress/gutenberg
- added outline support for blocks via theme.json by MaggieCabrera · Pull Request #43526 · WordPress/gutenberg
- Add schema support for styles.filter.duotone by georgeh · Pull Request #41920 · WordPress/gutenberg
styles.blocks
特定のブロックにスタイルを適用するセクションですが、このセクションに関する変更は以下3点です。
borderプロパティで4方向個別にスタイルを指定出来るようになった- 定義出来るスタイルとして、
outline、filter、shadowの3つが追加された - 疑似クラスとして、ボタン・リンク要素に
:active、:focus、:hover/:visitedの4つが指定出来るようになった
styles.blocks.{blockName}.border
4方向個別にスタイルを指定出来るようになりました。
radius に関するプロパティはborder プロパティ直下に指定します。color / style / width に関するプロパティは、指定したい方向に応じて border.top / border.right / border/bottom / border.left プロパティに指定します。
{
"$schema": "https://schemas.wp.org/trunk/theme.json",
"version": 2,
"settings": {
"appearanceTools": true,
"layout": {
"contentSize": "900px"
}
},
"styles": {
"blocks": {
"core/button": {
"border": {
"radius": {
"topLeft": "40px",
"topRight": "30px",
"bottomRight": "20px",
"bottomLeft": "10px"
},
"top": {
"color": "#ff0000",
"style": "solid",
"width": "2px"
},
"right": {
...
},
"bottom": {
...
},
"left": {
...
}
}
}
}
}
}styles.blocks.{blockName}.{outline | filter | shadow}
定義出来るスタイルとして、outline / filter / shadow の3つが追加されました。filter プロパティについては、現状 duotone プロパティのみ対応しています。
{
"$schema": "https://schemas.wp.org/trunk/theme.json",
"version": 2,
"settings": {
"appearanceTools": true,
"layout": {
"contentSize": "900px"
}
},
"styles": {
"blocks": {
"core/image": {
"outline": {
"color": "#ff0000",
"offset": "10px",
"style": "dotted",
"width": "5px"
},
"shadow": "5px 5px 5px #999",
"filter": {
"duotone": "var(--wp--preset--duotone--blue-orange)"
}
}
}
}
}
filter.duotone に関しては、WordPress コアがデフォルトで出力しているデュオトーン用の CSS カスタムプロパティを指定しています。実際は、Twenty Twenty Three の実装で見られるように、settings.color.duotone から生成された CSS カスタムプロパティを指定する事が多いのではないかと思います。
- 注: WordPress6.1 Beta3 では、Gutenberg プラグインを有効化しないと
outlineプロパティが適用されませんでした。正式版リリース後改めて確認してみます。
疑似クラスとして、 ボタン・リンク要素に :active / :focus / :hover / :visited の4つが指定出来るようになりました。注意点として、ブロック内の要素を element プロパティで指定する必要があるという事です。
例えば、「グループブロックの中のテキストリンクにホバーした時のスタイル」は、以下のように定義します。
{
"$schema": "https://schemas.wp.org/trunk/theme.json",
"version": 2,
"settings": {
"appearanceTools": true,
"layout": {
"contentSize": "900px"
}
},
"styles": {
"blocks": {
"core/group": {
"elements": {
"link": {
":hover": {
"color": {
"text": "red"
}
}
}
}
}
}
}
}この定義から、以下のようなインライン CSS が出力されます。:where:not(.wp-element-button) が付与されているのは、ボタンブロックを除外するためです。
.wp-block-group a:where(:not(.wp-element-button)):hover {
color: red;
}styles.elements
特定の要素にスタイルを適用するセクションですが、このセクションに関する変更は以下4点です。
borderプロパティで4方向個別にスタイルを指定出来るようになった- 定義出来るスタイルとして、
outline/filter/shadowの3つが追加された - 指定出来る要素として、
button/caption/heading/citeの4つが追加された - 疑似クラスとして ボタン・リンク要素に
:active/:focus/:hover/:visitedの4つが指定出来るようになった
styles.elements.{elementName}.border
4方向個別にスタイルを指定出来るようになりました。
設定方法は、styles.blocks.{blockName}.border セクションと同じです。
{
"$schema": "https://schemas.wp.org/trunk/theme.json",
"version": 2,
"settings": {
"appearanceTools": true,
"layout": {
"contentSize": "900px"
}
},
"styles": {
"elements": {
"h2": {
...
}
}
}
}styles.elements.{elementName}.{outline | filter | shadow}
定義出来るスタイルとして、outline / filter / shadow の3つが追加されました。filter プロパティについては、現状 duotone プロパティのみ対応しています。設定方法は、styles.blocks.{blockName}.{outline | filter | shadow} セクションと同じです。
{
"$schema": "https://schemas.wp.org/trunk/theme.json",
"version": 2,
"settings": {
"appearanceTools": true,
"layout": {
"contentSize": "900px"
}
},
"styles": {
"elements": {
"h2": {
"outline": {
"color": "#ff0000",
"offset": "10px",
"style": "dotted",
"width": "5px"
},
"shadow": "5px 5px 5px #999",
"filter": {
"duotone": "var(--wp--preset--duotone--blue-orange)"
}
}
}
}
}
- 注: WordPress6.1 Beta3 では、Gutenberg プラグインを有効化しないと
outlineプロパティが適用されませんでした。またfilterプロパティについては、 Gutenberg プラグインを有効化しても適用されませんでした。正式版リリース後改めて確認してみます。
疑似クラスとして、ボタン・リンク要素に :active / :focus / :hover / :visited の4つが指定出来るようになりました。
{
"$schema": "https://schemas.wp.org/trunk/theme.json",
"version": 2,
"settings": {
"appearanceTools": true,
"layout": {
"contentSize": "900px"
}
},
"styles": {
"elements": {
"button": {
":hover": {
"color": {
"background": "#ff0000"
}
},
":active": {
"color": {
"background": "#00ff00"
}
},
":focus": {
"color": {
"background": "#0000ff"
}
}
}
}
}
}この定義から、以下のようなインライン CSS が出力されます。
.wp-element-button:visited,
.wp-block-button__link:visited {
background-color: #00ffff;
}
.wp-element-button:hover,
.wp-block-button__link:hover {
background-color: #ff0000;
}
.wp-element-button:focus,
.wp-block-button__link:focus {
background-color: #0000ff;
}
.wp-element-button:active,
.wp-block-button__link:active {
background-color: #00ff00;
}指定出来る要素として、button / caption / heading / cite の4つが追加されました。これまで指定出来たプロパティと合わせると、以下の要素を指定出来る事になります。
buttoncaptionheadingciteh1/h2/h3/h4/h5/h6link
{
"$schema": "https://schemas.wp.org/wp/6.1/theme.json",
"version": 2,
"settings": {
"appearanceTools": true,
"layout": {
"contentSize": "900px"
}
},
"styles": {
"elements": {
"button": {
"color": {
"background": "#ff0000"
}
},
"caption": {
"color": {
"background": "#00ff00"
}
},
"heading": {
"color": {
"background": "#0000ff"
}
},
"cite": {
"color": {
"background": "#00ffff"
}
}
}
}
}この定義から、以下のようなインライン CSS が出力されます。ポイントは、要素名そのものがセレクタとなるのではなく、各ブロック内で対応する要素のセレクタに変換されるプロパティもあるという点です。
h1, h2, h3, h4, h5, h6 {
background-color: #0000ff;
}
.wp-element-button,
.wp-block-button__link {
background-color: #ff0000;
}
.wp-element-caption,
.wp-block-audio figcaption,
.wp-block-embed figcaption,
.wp-block-gallery figcaption,
.wp-block-image figcaption,
.wp-block-table figcaption,
.wp-block-video figcaption {
background-color: #00ff00;
}
cite {
background-color: #00ffff;
}
コメントを残す