theme.json (wp 6.2)

テーマをカスタマイズする場合にtheme.jsonの編集が必要になる場合があるかもしれないので、WordPress 6.2で私が気になった設定についてメモします。

6.2の変更を網羅したものではありませんのでお許しください。

theme.jsonファイルは非常にデリケートなので、あまり触ってほしくない部分です。

正しいjsonであることは必須ですが、CSSの設定値に誤りがあるような場合、サイトエディタの動作に大きな影響が出ることがあります。しかし、そのような間違いを発見する自動的な方法はありません。

• “$schema”: “https://schemas.wp.org/trunk/theme.json”,
• “version”: 2,
• “title”: “default”,
• “patterns”: [“our-team-team-member-our-client-section-desing-with-image-social-media”],
• patternsは、emulsion では上記の設定があります。これは、patterns directory に含まれるパターンの中から、テーマであらかじめ許可しているパターンのリストになります。
  https://wordpress.org/patterns/pattern/our-team-team-member-our-client-section-desing-with-image-social-media/ を許可しているという意味です。
• “settings”: {
  • “appearanceTools”: true,
  • “custom”: {
  • customは、WordPress 6.2から、Style Variation で項目を上書きできるようになりましたので、theme.jsonが柔軟に使用できるようになりました。
    • “width”: {
    • }
    • “color”: {
    • }
  • }
  • “color”: {
    •  "duotone": [
    • ]
    • “gradients”: [
    • ]
    • “palette”: [
    • ]
  • }
  • “shadow”:{
  • WordPress 6.2 で追加されました。
  • }
  • “layout”:{
  • WordPress 6.1 で追加されました。ここで、is-layout-constrained is-layout-flowでのスタイルの詳細を指定することができます。emulsion テーマは一部customizeしています。
  • }
  • “typography”: {
    • “fontFamilies”:[
    • ]
    • “fontSizes”: [
    • ]
  • }
  • “spacing”: {
  • }
  • “border”: {
  • }
  • “blocks”: {
  • }
• “styles”:{
  • “elements”: {
    • “link”: {
      • “color”: {
      • },
      • “:hover”: {
      • },
      • “:link”: {
        • WordPress 6.2 で追加
      • }
      • “:any-link” {
        • WordPress 6.2 で追加
      • }
    • },
    • “
  • }
  • “blocks”: {
    • “core/[block name]”: {
      • “css”:{
      • WordPress 6.2から　CSS を記述できるようになりました。
        できるだけ、editorの設定を使用してください。
        jsonファイルは、改行を含んだりすることも出来ませんし、スタイルを直接記述する場所としては、あまり適していません
        • }
    • }
    • “core/image: {
      • “variations”: {
      • WordPress 6.2で追加されました。block_styleを変更します。theme.jsonで反映しますが、style variationではtheme.jsonを上書きしたりすることはできませんでした。(?私の環境では、、、）
      • • “rounded”: {
          • “border”: {
          • • “width”: “10px”,
            • “style”: “solid”,
            • “color”: “red”
          • }
        • }
      • }
    • }
      
  • }
• }
• “customTemplates”:{
• }
• “templateParts”:{
• }

{
	"version": 2,
	"settings": {
         "shadow": {
			"defaultPresets": true,
			"presets": [
				{
					"name": "Natural",
					"slug": "natural",
					"shadow": "6px 6px 9px rgba(0, 0, 0, 0.2)"
				},
				{
					"name": "Deep",
					"slug": "deep",
					"shadow": "12px 12px 50px rgba(0, 0, 0, 0.4)"
				},
				{
					"name": "Sharp",
					"slug": "sharp",
					"shadow": "6px 6px 0px rgba(0, 0, 0, 0.2)"
				},
				{
					"name": "Outlined",
					"slug": "outlined",
					"shadow": "6px 6px 0px -3px rgba(255, 255, 255, 1), 6px 6px rgba(0, 0, 0, 1)"
				},
				{
					"name": "Crisp",
					"slug": "crisp",
					"shadow": "6px 6px 0px rgba(0, 0, 0, 1)"
				}
			]
		}
    }
}