Dieser Beitrag zeigt dir eine Sammlung zu der Entwicklung des Full Site Editing in WordPress, sowie der Struktur der FSE theme.json Datei.

Die experimental-theme.json Datei ist unterteilt in Sektionen, sogenannte “ contexts “ , welche einen unterschiedlichen CSS Selektor darstellen. Zum Beispiel: core/parapgrah weist auf > p, während core/group auf .wp-block-group weist. Hier weist ein Block auf einen Context.

Kirstin Schelper von den die-netzialisten hat „ context “ mit “ Bereich „übersetzt. Das lässt m.E. das Ganze noch leichter verstehn.

Es kann aber auch sein, das ein Block auf verschiedene CSS Selektoren weist, er generiert “ multiple contexts . “ Zum Beispiel generiert der Heading Block sechs verschiedene Contexts – core/heading/h2, core/heading/h2 usw. Einen für jeden Selektor ( h1, h2 usw.).

{
  "global": { ... },
  "core/paragraph": { ... },
  "core/group": { ... },
  "core/heading/h1": { ... },
  "core/heading/h2": { ... },
  "core/heading/h3": { ... },
  "core/heading/h4": { ... },
  "core/heading/h5": { ... },
  "core/heading/h6": { ... }
}

Jeder context/Bereich hat dieselbe Struktur und ist unterteilt in zwei Sektionen:

• settings
• styles

Settings:
kontrollieren den Editor ( bestimmte Features an und abschalten z. B.), sie übernehmen das, was vorher über > add_theme_support erfolgt ist.
Styles:
Mit den Styles erstellt man neue Style Regeln, welche an ein neues Stylesheet angehängt werden > global-styles-inline-css, enqueued im Front End und Post Editor.

{
  "some/context": {
    "settings": {
      "color": [ ... ],
      "custom": [ ... ],
      "spacing": [ ... ],
      "typography": [ ... ]
    },
    "styles": {
      "color": { ... },
      "typography": { ... }
    }
  }
}

Quelle: github– Themes & Block Editor: experimental theme.json

So sieht ein experimental-theme.json File aus

{
"global": {
"settings": {
"custom": {
"typo": {
"rootSize": 16,
"scale": 1.333
}
},
"color": {
"palette": [
{
"slug": "light",
"color": "#f5f7f9"
},
{
"slug": "dark",
"color": "#000"
}
],
"custom": false
},
"typography": {
"fontSizes": [
{
"slug": "small",
"size": "calc(var(--wp--preset--font-size--normal) / var(--wp--custom--typo--scale))"
},
{
"slug": "normal",
"size": "calc(var(--wp--custom--typo--root-size) * 1px)"
},
{
"slug": "medium",
"size": "calc(var(--wp--preset--font-size--normal) * var(--wp--custom--typo--scale))"
},
{
"slug": "large",
"size": "calc(var(--wp--preset--font-size--medium) * var(--wp--custom--typo--scale))"
},
{
"slug": "huge",
"size": "calc(var(--wp--preset--font-size--large) * var(--wp--custom--typo--scale))"
}
],
"customFontSize": false,
"customLineHeight": true
}
},
"styles": {
"color": {
"background": "var(--wp--preset--color--light)",
"text": "var(--wp--preset--color--dark)",
"link": "var(--wp--preset--color--dark)"
}
}
},
"core/paragraph": {
"styles": {
"typography": {
"fontSize": "var(--wp--preset--font-size--normal)",
"lineHeight": "1.55"
}
}
},
"core/heading/h1": {
"styles": {
"typography": {
"fontSize": "var(--wp--preset--font-size--huge)",
"lineHeight": "1.4"
}
}
},
"core/heading/h2": {
"styles": {
"typography": {
"fontSize": "var(--wp--preset--font-size--large)",
"lineHeight": "1.4"
}
}
},
"core/heading/h3": {
"styles": {
"typography": {
"fontSize": "var(--wp--preset--font-size--medium)",
"lineHeight": "1.55"
}
}
},
"core/heading/h4": {
"styles": {
"typography": {
"fontSize": "var(--wp--preset--font-size--normal)",
"lineHeight": "1.55"
}
}
},
"core/heading/h5": {
"styles": {
"typography": {
"fontSize": "var(--wp--preset--font-size--small)",
"lineHeight": "1.8"
}
}
},
"core/heading/h6": {
"styles": {
"typography": {
"fontSize": "var(--wp--preset--font-size--small)",
"lineHeight": "1.8"
}
}
}
}

Quelle: make.wordpress.org -new structure for FSE theme.json Files, Ari Stathopoulos

Tools:

Theme.json Creator von Q

Tools like these will be what the development community needs as it gets over the inevitable hump of moving away from the traditional theme development paradigm and into a new era where themes are made almost entirely of blocks and a config file.

Handbuch theme-json

wp-tavern