Contents
はじめに
この記事は、WordPress テーマの機能・レイアウト・スタイルなどの多くを一元的に管理出来る JSON ファイルである theme.json について、WordPress 7.0での変更点をまとめたものです。
theme.json 自体の全体図については、「【WordPress5.9 / 6.0版】theme.json 全解説」という記事にまとめていますので、そもそも theme.json とは何か分からない方、各セクション (プロパティ) の役割が分からない方は、ぜひ先にこちら記事を見ていただければ幸いです。
また、WordPress 6.1から WordPress 6.9までの変更点については、それぞれ以下の記事でまとめています。
前準備
この記事の内容を実践するためのオリジナルテーマを用意したいという方は、作成したテーマフォルダに以下ファイルを用意してください。ブロックテーマとして認識させ、フロントエンドでコンテンツを確認出来るようにするために必要な最低限のファイルです。
/*
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.typography
settings.typography.textIndent
CSSの text-indent に関する設定を有効化するかどうかをコントロールします。
※デフォルト値：subsequent
{
"$schema": "https://schemas.wp.org/trunk/theme.json",
"version": 3,
"settings": {
"layout": {
"contentSize": "900px"
},
"typography": {
"textIndent": "subsequent"
}
}
}いわゆる「字下げ」を設定するためのものですが、言語・文化によって字下げのルールが異なるため、subsequent と all のどちらかを指定することができ、それによってインデントの動作が変わります。
subsequent: 二つめ以降の段落を字下げする。これは、西洋圏の伝統的な出版物で用いられるようです。
all: すべての段落を字下げする。これは、日本語でよく見られるルールです。
また、この設定はグローバルスタイルから変更することもできます。段落ブロックのみがこの機能をサポートしており、グローバルスタイル > ブロック > 段落 > タイポグラフィセクションで設定できます。
New Block Support: Text Indent (textIndent) – Make WordPress Core
settings.dimensions
settings.dimensions.width
CSSの widthに関する設定を有効化するかどうかをコントロールします。
※デフォルト値：false (ただし、アイコンブロックではデフォルト値が true)
WordPress 7.0の時点では、新しく追加されたアイコンブロックのみがこれをサポートしています。
{
"$schema": "https://schemas.wp.org/trunk/theme.json",
"version": 3,
"settings": {
"layout": {
"contentSize": "900px"
},
"dimensions": {
"width": true
}
}
}
Dimensions Support Enhancements in WordPress 7.0 – Make WordPress Core
settings.dimensions.height
CSSの height に関する設定を有効化するかどうかをコントロールします。
※デフォルト値：false
WordPress 7.0の時点では、これをサポートしているコアブロックは存在しないため、以下を定義しても UI に変化はありません。実際にこの機能を利用するためには、コアブロックをフィルターしてサポート追加するか、カスタムブロックでこのサポートを追加する必要があります。
{
"$schema": "https://schemas.wp.org/trunk/theme.json",
"version": 3,
"settings": {
"layout": {
"contentSize": "900px"
},
"dimensions": {
"height": true
}
}
}
Dimensions Support Enhancements in WordPress 7.0 – Make WordPress Core
settings.dimensions.dimensionSizes
「寸法」コントロールのプリセットを定義します。つまり、以下3つのコントロールで使用できるプリセットを定義できます。
heightminHeightwidth
プリセットの定義方法は、他のプリセット (typography.fontSizes, color.palette, border.radiusSizes ) などと同じで、name / slug / value プロパティを持ったオブジェクトを配列内に指定します。また、プリセットが 8 個未満の場合はスライダーが表示され、8個以上の場合はドロップダウンとなります。
{
"$schema": "https://schemas.wp.org/trunk/theme.json",
"version": 3,
"settings": {
"appearanceTools": true,
"layout": {
"contentSize": "900px"
},
"dimensions": {
"dimensionSizes": [
{
"name": "Small",
"slug": "small",
"size": "240px"
},
{
"name": "Medium",
"slug": "medium",
"size": "480px"
},
{
"name": "Large",
"slug": "large",
"size": "720px"
},
{
"name": "Extra Large",
"slug": "x-large",
"size": "960px"
},
{
"name": "Full",
"slug": "full",
"size": "100%"
}
]
}
}
}
Dimensions Support Enhancements in WordPress 7.0 – Make WordPress Core
styles
styles.typography
styles.typography.textIndent
CSSの text-indent を適用します。
settings.typography.textIndent のセクションで説明した通り、段落ブロックのみがこの機能をサポートしているため、styles.blocks.{blockName}.typography.textIndent を参照してください。
styles.dimensions
styles.dimensions.width, styles.dimensions.height
CSSの width, height を適用します。通常は、サイト全体ではなく特定のブロックに対して適用することになるため、styles.blocks.{blockName}.dimensions.width, styles.blocks.{blockName}.dimensions.height を参照してください。
styles.blocks
styles.blocks.{blockName}.typography.textIndent
CSSの text-indent を特定のブロックに適用します。 settings.typography.textIndent のセクションで説明した通り、段落ブロックのみがこの機能をサポートしており、CSS セレクターも段落ブロックで使用されることを前提されて設計されているため、基本的には以下のように段落ブロックに対してデフォルトのインデント値を定義します。
{
"$schema": "https://schemas.wp.org/trunk/theme.json",
"version": 3,
"settings": {
"layout": {
"contentSize": "900px"
}
},
"styles": {
"blocks": {
"core/paragraph": {
"typography": {
"textIndent": "3em"
}
}
}
}
}New Block Support: Text Indent (textIndent) – Make WordPress Core
styles.blocks.{blockName}.dimensions.width, styles.blocks.{blockName}.dimensions.height
CSSの width, height を特定のブロックに適用します。このスタイルをデフォルトで適用したいブロックは限られていると思いますが、以下はアイコンブロックにスタイルを適用する例です。
{
"$schema": "https://schemas.wp.org/trunk/theme.json",
"version": 3,
"settings": {
"layout": {{
"$schema": "https://schemas.wp.org/trunk/theme.json",
"version": 3,
"settings": {
"layout": {
"contentSize": "900px"
}
},
"styles": {
"blocks": {
"core/icon": {
"dimensions": {
"width": "64px",
"height": "64px"
}
}
}
}
}Dimensions Support Enhancements in WordPress 7.0 – Make WordPress Core
ボタンブロックで、:hover、:focus、:focus-visible、:active の4つの疑似クラスのためのスタイルを適用します。
ボタン要素に関しては、既に様々な疑似クラスをサポートしていますが、7.0ではボタン「要素」に加えてボタン「ブロック」でも疑似クラスがサポートされました。
{
"$schema": "https://schemas.wp.org/trunk/theme.json",
"version": 3,
"settings": {
"layout": {
"contentSize": "900px"
}
},
"styles": {
"blocks": {
"core/button": {
":hover": {
"color": {
"text": "#ff0000"
}
},
":focus": {
"color": {
"text": "#00ff00"
}
},
":focus-visible": {
"color": {
"text": "#00ffff"
}
},
":active": {
"color": {
"text": "#0000ff"
}
}
}
}
}
}Pseudo-element support for blocks and their variations in theme.json – Make WordPress Core
templateParts
area プロパティとして、navigation-overlay を指定できるようになりました。
templateParts プロパティそのものについてはこの記事を参照していただきたいのですが、テーマがバンドルするテンプレートパーツをどのエリアに割り当てるかを定義するためのものです。
これまでは、General (undefined)、Header ("header")、Footer ("footer") の三つのエリアがありましたが、WordPress 7.0 で導入される「カスタマイズ可能なナビゲーションオーバーレイ」のために、navigation-overlay 新しくというエリアが追加されました。
このエリアが指定されたテンプレートパーツは、通常のインサーターからは挿入できず、ナビゲーションブロックに割りあてるための専用のテンプレートパーツとして選択できるようになります。
ナビゲーションオーバーレイそのものについてや使い方等については、以下 Dev Note を参照してください。
Customisable Navigation Overlays in WordPress 7.0 – Make WordPress Core
コメントを残す