FSE Theme Basics

Du willst ein Block Theme nutzen/entwickeln? Cool.

Vorteile gegenüber Classic Themes? Für 80% alle Settings und Styles bist du viel schneller und effizienter. Wenn du es sauber aufsetzt, ist ein FSE Block Theme sehr mächtigst.

Wenn du bisher immer auf Page Builder angewiesen warst und du WordPress ohne Page Builder nicht kennst – und du nicht bereit bist etwas mehr über WordPress Entwicklung kennenzulernen, dann lass die Finger von FSE Themes und bleibe bei deinem Ansatz.

Warum ich FSE Themes immer mehr liebe? Ich schaue ständig darauf, wie Kunden Inhalte bearbeiten können. Page Builder sind dazu schlicht nicht brauchbar. Alle 2-3 Jahre musst du wieder alles updaten und teilweise den Kunden wieder alles neu aufnehmen.

Der Core Block Editor mit Extended Core Blocks macht das perfekt. Du kannst Settings einblenden, ausblenden und pro Block Stile definieren. Dabei wird immer nur das pro Seite geladen, was der Kunde auswählt.

Du kannst Presets generieren, wobei Kunden keine eigenen Schriftarten, Farben und Grössen hinzufügen können. Du bestimmst am Anfang mit dem Kunden den Style Guide. Wenn der mal gesetzt ist, ist es sehr einfach mit FSE Themes zu arbeiten.

Aber fangen wir mal einfach an.

Aufbau eines FSE Themes

Du brauchst einen Ordner im wp-content/themes/

Wir nennen ihn mal „testtheme“.
Dort drin brauchst du mindestens drei Files.

Bash
/templates/index.html
theme.json
style.css

style.css

Definiert wie zuvor die Theme Anzeige.

CSS
/*
Theme Name: Testtheme
Author: michu
Description: Block Test Theme
Requires at least: 6.9
Tested up to: 6.9
Requires PHP: 5.7
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: testtheme
Tags: 
*/

Viele fragen sich schon hier, warum die Styles denn nicht angezeigt werden! Wo soll man den die custom styles reinschreiben?

Du kannst wie bei classic themes weiter auf die functions.php setzen. Wir ergänzen das Theme nun damit, so dass der Aufbau wie folgt aussieht:

Bash
/templates/index.html
theme.json
style.css
functions.php

functions.php

Hier kannst du nun die style.css einbinden.

PHP
<?php 

function testtheme_enqueue_styles() {
    wp_enqueue_style(
        'testtheme',
        get_stylesheet_uri()
    );
}
add_action( 'wp_enqueue_scripts', 'testtheme_enqueue_styles' );

Voila. Nun zeigt es all deine Styles korrekt an. Aber warte noch, bevor du da dein Basic Boilerplate CSS einfügst, wie du es zuvor vielleicht mit classic themes gemacht hast.

Der neue Ansatz ist nun die theme.json Datei. Dort kannst du global alle UI-Settings steuern und Style Standards pro Block anlegen.

theme.json

JSON
{
	"$schema": "https://schemas.wp.org/trunk/theme.json",
	"version": 3,
	"settings": {
		"appearanceTools": true,
		"useRootPaddingAwareAlignments": true,
		"border": {
			"color": false,
			"radius": true,
			"style": true,
			"width": true
		},
		"color": {
			"background": false,
			"custom": false,
			"customDuotone": false,
			"customGradient": false,
			"defaultDuotone": false,
			"defaultGradients": false,
			"defaultPalette": false,
			"gradients": [],
			"link": true,
			"text": true,
			"palette": [
				{
					"color": "#ffffff",
					"name": "Weiss",
					"slug": "white"
				},
				{
					"color": "#000000",
					"name": "Schwarz",
					"slug": "black"
				},
				{
					"color": "#666666",
					"name": "Grau",
					"slug": "gray"
				}
			]
		},
		"dimensions": {
			"minHeight": true
		},
		"layout": {
			"contentSize": "620px",
			"wideSize": "1200px",
			"allowEditing": true,
			"allowCustomContentAndWideSize": true
		},
		"lightbox": {
			"enabled": true,
			"allowEditing": true
		},
		"position": {
			"sticky": false
		},
		"shadow": {
			"defaultPresets": false,
			"presets": []
		},
		"spacing": {
			"blockGap": true,
			"margin": true,
			"padding": true,
			"units": [
				"px"
			],
			"customSpacingSize": false,
			"defaultSpacingSizes": false,
			"spacingSizes": [
				{
					"name": "XS",
					"size": "4px",
					"slug": "xs"
				},
				{
					"name": "S",
					"size": "8px",
					"slug": "s"
				},
				{
					"name": "M",
					"size": "16px",
					"slug": "m"
				},
				{
					"name": "L",
					"size": "22px",
					"slug": "l"
				},
				{
					"name": "XL",
					"size": "32px",
					"slug": "xl"
				},
				{
					"name": "XXL",
					"size": "46px",
					"slug": "xxl"
				}
			]
		},
		"typography": {
			"customFontSize": false,
			"defaultFontSizes": false,
			"dropCap": false,
			"fluid": true,
			"fontFamilies": [],
			"fontSizes": [
				{
					"fluid": {
						"min": "0.875rem",
						"max": "1rem"
					},
					"name": "Small",
					"size": "0.875rem",
					"slug": "small"
				},
				{
					"fluid": {
						"min": "1rem",
						"max": "1.125rem"
					},
					"name": "Medium",
					"size": "1rem",
					"slug": "medium"
				},
				{
					"fluid": {
						"min": "1.25rem",
						"max": "1.5rem"
					},
					"name": "Large",
					"size": "1.5rem",
					"slug": "large"
				},
				{
					"fluid": {
						"min": "2rem",
						"max": "2.5rem"
					},
					"name": "X-Large",
					"size": "2.5rem",
					"slug": "x-large"
				}
			],
			"fontStyle": false,
			"fontWeight": false,
			"letterSpacing": false,
			"lineHeight": false,
			"textDecoration": false,
			"textTransform": false,
			"writingMode": false,
			"textColumns": true
		}
	},
	"styles": {
		"typography": {
			"fontFamily": "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif"
		}
	}
}

Du kannst die Version 3 nutzen, damit stehen dir bisher alle möglichen Settings zur Verfügung.

Wenn du das so einfügst wirst du sehen, dass sehr viele Standardeinstellungen im Block Editor verschwunden sind. Und das nur, indem du gewisse Settings einschaltest oder eben deaktivierst. So easy. Ohne PHP und React.

Was ich am coolsten finde. Du kannst in .json Files eigene Stile pro Block definieren. So können Kunden auf eine richtig einfache Weise Blöcke bearbeiten und selbst verwalten. Simpler geht es nicht. Sie können nichts zerschiessen, es passt einfach alles.

Füge dazu neue Ordner im Theme dazu. Einen styles/blocks Ordner. Dort kannst du dann Blockstile festlegen.

Bash
/templates/index.html
theme.json
style.css
functions.php
styles/blocks/button-test.json

button-test.json

JSON
{
  "$schema": "https://schemas.wp.org/wp/6.7/theme.json",
  "version": 3,
  "title": "Button Test",
  "slug": "button-test",
  "blockTypes": [
    "core/button"
  ],
  "styles": {
    "color": {
      "background": "var(--wp--preset--color--black)",
      "text": "var(--wp--preset--color--white)"
    },
    "border": {
      "radius": "4px"
    },
    "spacing": {
      "padding": {
        "top": "12px",
        "right": "24px",
        "bottom": "12px",
        "left": "24px"
      }
    }
  }
}

Gehe nun in den Editor und füge einen core/button hinzu. Du siehst, unter Stile hat es ein neues Feld hinzugefügt und wenn du dieses anklickst, dann übernimmt es deine Stiles aus der .json Datei.

Vielleicht merkst du schon jetzt: „Mooooment, das ist ja mega easy!“. Willkommen im Club. Aber warte, es wird noch besser.

Sagen wir, du bist ein richtiger Designer oder hast gute Designer im Team. Du kannst nun alle Variablen global via theme.json steuern und diese dann in den block.json Dateien reinziehen. Das ist richtige wiederverwendung von Blöcken. Musst du aber nicht, du kannst auch hier custom css reinpacken!

Schau dir das an – ein Blockstil für den Listenblock.

JSON
{
  "$schema": "https://schemas.wp.org/wp/6.7/theme.json",
  "version": 3,
  "title": "Checkmarks",
  "slug": "checkmarks",
  "blockTypes": [
    "core/list"
  ],
  "styles": {
    "css": "list-style: none; padding-left: 0; & li { padding-left: 1.8em; position: relative; margin-bottom: 4px; line-height: 1.2; } & li::before { content: ''; position: absolute; left: 0; top: 0; width: 1em; height: 1em; background-image: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 384 512\"><path d=\"M249.9 66.8c10.4-14.3 7.2-34.3-7.1-44.7s-34.3-7.2-44.7 7.1l-106 145.7-37.5-37.5c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l64 64c6.6 6.6 15.8 10 25.1 9.3s17.9-5.5 23.4-13.1l128-176zm128 136c10.4-14.3 7.2-34.3-7.1-44.7s-34.3-7.2-44.7 7.1l-170 233.7-69.5-69.5c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l96 96c6.6 6.6 15.8 10 25.1 9.3s17.9-5.5 23.4-13.1l192-264z\"/></svg>'); background-repeat: no-repeat; background-size: contain; }"
  }
}

Und da geht es immer tiefer und tiefer. Du fragst dich nun, kann man nur für einzelne Blöcke Stile anlegen? Nö – du kannst auch für eine group Stile definieren welche besagen, wie nested Elemente in der group angezeigt werden.

Schau mal hier

JSON
{
	"$schema": "https://schemas.wp.org/wp/6.7/theme.json",
	"version": 3,
	"title": "Hero Section",
	"slug": "hero",
	"blockTypes": ["core/group"],
	"styles": {
		"color": {
			"background": "var(--wp--preset--color--black)"
		},
		"spacing": {
			"padding": {
				"top": "var(--wp--preset--spacing--xl)",
				"bottom": "var(--wp--preset--spacing--xl)"
			}
		},
		"elements": {
			"heading": {
				"color": {
					"text": "var(--wp--preset--color--white)"
				},
				"typography": {
					"fontSize": "var(--wp--preset--font-size--x-large)"
				}
			},
			"p": {
				"color": {
					"text": "var(--wp--preset--color--white)"
				}
			}
		},
		"blocks": {
			"core/button": {
				"color": {
					"background": "var(--wp--preset--color--white)",
					"text": "var(--wp--preset--color--black)"
				}
			}
		}
	}
}

Oder alles mit custom css.

JSON
{
	"$schema": "https://schemas.wp.org/wp/6.7/theme.json",
	"version": 3,
	"title": "Hero Section",
	"slug": "hero",
	"blockTypes": ["core/group"],
	"styles": {
		"css": "/* dein CSS */",
			"elements": {
				"heading": {
					"css": "text-transform: uppercase;"
			}
		},
		"blocks": {
			"core/button": {
				"css": "transition: all 0.3s;"
		}	
	}
}

Adobe Fonts nutzen

In theme.json registrieren. fontFamily und slug müssen gleich sein wie im typekit css File. Das name Feld gibt an, wie die Schrift im Editor angezeigt wird.

JSON
"typography": {
	"fontFamilies": [
		{
			"fontFamily": "'my-adobe-font', sans-serif",
			"name": "My Adobe Font",
			"slug": "my-adobe-font"
		}
	]
}

functions.php

PHP
function mein_theme_adobe_fonts() {
	wp_enqueue_style(
		'adobe-fonts',
		'https://use.typekit.net/DEIN-KIT-ID.css',
		array(),
		null
	);
}
add_action( 'wp_enqueue_scripts', 'mein_theme_adobe_fonts' );
add_action( 'enqueue_block_editor_assets', 'mein_theme_adobe_fonts' );