WordPressブロックテーマのフォントプリセットサイズからカスタムで追加した時のtheme.jsonの関係を検証

WordPress 6.7.1での検証です。

前提

Create Block Themeで空テーマを作っています。

WordPress.org 日本語

Create Block Theme ブロックテーマを作るための WordPress プラグイン。

検証

外観→エディター→スタイル→タイポグラフィ→フォントサイズ→フォントサイズプリセット

カスタムのプラスアイコンからフォントサイズを追加する。

「新規フォントサイズ 1」というフォントサイズが追加される。これを編集します。右上の3点メニューから名前を変更できます。「My Large」という名前にしてみました。

サイズにフォントサイズを指定できます。次に紹介するフルードタイポグラフィにするにしても、ここにはPCのサイズを入れてくと良いでしょう。フルードタイポグラフィが使えない場合のデフォルトのフォントサイズとして定義されることと、フルードタイポグラフィを設定するときに自動的にこの値が入ります。

フルードタイポグラフィで最小値と最大値を指定します。固定値だとスマホの時に大きすぎることが多いのですが、ウインドウサイズに応じて最小値と最大値の間で変動してもらうように設定ができます。

フルードタイポグラフィとカスタムフルード値にチェックを入れます。最小値と最大値を入力しましょう。この時にサイズに値が入ってたら、その値が入っています。

最小値の方をスマホ時のサイズというイメージで変更しておきます。

忘れずに保存します。

theme.jsonに出力

では、theme.jsonに出力してみましょう。

「ブロックテーマを作成」アイコンから「テーマへの変更を保存」します。

変更点は以下の通りです（※変更点が分かりやすくなるように事前にGitを入れています）

コードの抜粋。

"fontSizes": [
	{
		"fluid": {
			"max": "32px",
			"min": "24px"
		},
		"name": "My Large",
		"size": "32px",
		"slug": "custom-1"
	}
]

fontSizesが配列でオブジェクトを持っています。そのオブジェクトの中に、fluidとname、size、slugが格納されています。

fluidのmaxが最大値、minが最小値ですね。nameに設定したフォントサイズの名前が入っています。sizeは標準のサイズですね。仮に古いWordPressのバージョンだとfluidが使えないケースもある（と思う）ので、sizeもズレがない形で設定しておけると無難だと思います。

そしてslugですが、ここは追加した順番に自動的にcustom-xが入るようです。将来的には変わる可能性はあると思われます。

カスタムフォントサイズのfontSizesは、一括で上書きされる

カスタムフォントサイズは追加というよりは一括の上書きのイメージとなります。先ほどtheme.jsonに書き出したので「My Large」は管理画面上ではテーマの方に移動したのですが、別のフォントサイズを追加しようと思ってカスタムフォントサイズを追加するとテーマのフォントサイズが上書きされてなくなります。

この特性を覚えておかないと、以前定義したフォントが消えていく、ということが起きてしまいそうです。つまり、新しいフォントサイズを追加する際は、すでに定義したフォントサイズも改めて追加するようなイメージだと思います。

これで保存してtheme.jsonに出力すると、上書きされずに意図通りに追加されます。

theme.jsonの仕組みが分かっている場合は、管理画面から追加するよりtheme.jsonから追加する方が簡単かもしれません。

追加したカスタムフォントを使ってみる

フォントサイズの選択肢を確認すると、追加した「My Large」「My Small」が選択可能になっています。数字の部分はsizeの値が入っています。さらに、デフォルトのフォントサイズもあることが分かります。

念の為、デフォルトのフォントの定義も見ておきましょう。wp-inludes/theme.jsonにあります。

"fontSizes": [
	{
		"name": "Small",
		"slug": "small",
		"size": "13px"
	},
	{
		"name": "Medium",
		"slug": "medium",
		"size": "20px"
	},
	{
		"name": "Large",
		"slug": "large",
		"size": "36px"
	},
	{
		"name": "Extra Large",
		"slug": "x-large",
		"size": "42px"
	}
],

このデフォルトのフォントが不要な場合は、theme.jsonの直接編集する形になりますが、settings.typography.defaultFontSizesをfalseにすればOKです。

これで2種類になりました。「S」が「My Large」、「M」が「My Small」が適応されています。この「S」や「M」はどこから来ているのだろうか…。

指定の仕方は不明。

カスタムフォントを削除したい場合

管理画面からカスタムフォントを削除する機能はなさそうです。なので、削除したい場合はtheme.jsonから削除する必要がありそうです。

不要なフォントサイズの以下の塊を削除するイメージだと思います。

{
	"fluid": {
		"max": "32px",
		"min": "24px"
	},
	"name": "My Large",
	"size": "32px",
	"slug": "custom-1"
}