Stylebook im Website-Editor bei Block Themes

Stylebook bei Block Themes

Beitragsdatum:

Letztes Update am:

Autor:

hgg

Kategorien: , , ,

Stylebook bei Block Themes wie Twenty Twenty-Five

Das Stylebook ist über den Website-Editor bei Block Themes wie Twenty Twenty-Five zugänglich und stellt eine benutzerfreundliche Oberfläche zur Verfügung, um z. B. eine Vorschau aller Blöcke zu erhalten und globale Stile anzupassen. In diesem Beitrag beschreibe ich einerseits die grundsätzliche Funktion des Stylebooks. Zusätzlich zeige ich, wie man z. B. beim Button-Block einen Hover-Effekt per CSS erstellt.

Das Stylebook

Das Stylebook bei Block Themes kann man über Design > Website-Editor erreichen. Anschließend klickt man links im Menü auf „Stile“, dann klickt man oben rechts auf das „Auge“:

Stylebook im Website-Editor bei Block Themes wie Twenty Twenty-Five
Stylebook im Website-Editor bei Block Themes wie Twenty Twenty-Five

Das Stylebook im Website-Editor bietet eine visuelle Oberfläche zur Anpassung dieser globalen Stile. Man kann sich direkt Änderungen ansehen und anwenden, ohne einzelne Seiten oder Blöcke bearbeiten zu müssen.

Achtung-Symbol

Achtung

Wichtig: Bevor ihr viele Änderungen im Theme durchführt, ist es sinnvoll, ein Child Theme zu erstellen. Bei Block Themes kann man das relativ einfach mit dem Plugin Create Block Theme machen. Mehr Infos zu dem Plugin findet ihr in dem folgenden Beitrag

Das Stylebook ist eine wichtige Funktion für Block Themes in WordPress, die mit Version 6.2 eingeführt wurde. Es bietet folgende Vorteile:

  1. Zentrale Verwaltung: Das Stylebook ermöglicht die Anpassung globaler Stile für die gesamte Website an einem zentralen Ort.
  2. Vorschau aller Blöcke: Das Stylebook bietet eine übersichtliche Vorschau aller verfügbaren Blöcke.
  3. Echtzeit-Anpassungen: Änderungen an Typografie, Farben, Layout und Blöcken können sofort visualisiert werden, ohne einzelne Seiten oder Beiträge bearbeiten zu müssen.
  4. Konsistentes Design: Über das Stylebook kann ich das Erscheinungsbild der gesamten Website überprüfen.
  5. Mit dem Stylebook kann man auch grundsätzliche Dinge hinsichtlich Barrierefreiheit einer Website überprüfen, wie z. B. Kontraste (Vordergrund und Hintergrund), Schriftgrößen, etc.

Globale Stile bei Block Themes

Globale Stile im Website-Editor von WordPress sind ein leistungsstarkes Werkzeug zur einheitlichen Gestaltung der gesamten Website. Sie umfassen u. a. folgende Bereiche: Layout, Farben und Typografie. Die Darstellung kann man sich über das Stylebook im Website-Editor bei einem Block Theme wie Twenty Twenty-Five ansehen. Einstellungen können über das Stylebook im Website-Editor außerdem angepasst werden.

Übersicht Stylebook bei Twenty Twenty-Five
Übersicht Stylebook bei Twenty Twenty-Five

Layout

Das Layout-System ermöglicht die Kontrolle über Abstände und Strukturen auf Ihrer Website. Wichtige Aspekte sind:

  • Padding und Margin für Blöcke und Elemente
  • Breite und Ausrichtung von Inhalten
  • Spaltenabstände in mehrspaltigen Layouts

Farben

Die Farbeinstellungen bieten eine zentrale Steuerung für das Farbschema der Website:

  • Definition einer Farbpalette für konsistente Farbverwendung
  • Festlegung von Hintergrund- und Textfarben
  • Anpassung von Akzentfarben für Links und Buttons

Typografie

Typografie-Einstellungen ermöglichen eine präzise Kontrolle über das Schriftbild:

  • Auswahl und Verwaltung von Schriftarten
  • Definition von Schriftgrößen für verschiedene Textelemente
  • Einstellung von Zeilenabständen und Buchstabenabständen

Blöcke

Im Bereich „Blöcke“ kann man das Erscheinungsbild spezifischer Blöcke global anpassen:

  • Individuelle Stileinstellungen für jeden Block-Typ
  • Konsistente Gestaltung über die gesamte Website hinweg
  • Visuelle Vorschau der Änderungen im Stylebook
  • Ggfs. Anpassungen per CSS wie z. B. Hover

CSS für die Pseudo-Klasse :hover beim Button-Block

Nachfolgend ein Beispiel für die Pseudo-Klasse :hover beim Button-Block. Hier wird die Vordergrundfarbe (color), die Hintergrundfarbe (background-color), Änderung der Größe (transform mittels scale) und ein Schatten (box-shadow) definiert:

:hover {
  color: red;
  background-color: white;
  transform: scale(1.05);
  box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}

Der Hover-Effekt, den man im zusätzlichen CSS-Feld des Button-Blocks definiert, ist leider aktuell im Backend und im Stylebook nicht sichtbar. Dies ist eine Einschränkung des aktuellen WordPress-Editors. Es ist möglich, dass zukünftige WordPress-Versionen diese Funktionalität verbessern werden.

Einstellungen und Eigenschaften bei Button im Stylebook eines Block Themes
Einstellungen und Eigenschaften bei Button im Stylebook
CSS beim Stylebook (hier bei Buttons) in Twenty Twenty-Five
CSS beim Stylebook (hier bei Buttons)
Darstellung des Buttons im Backend und Frontend eines Block Themes
Darstellung des Buttons im Backend und Frontend

Diese Anpassung wird dann automatisch als CSS in der theme.json im Abschnitt des Buttons gespeichert:

	...
    "styles": {
		"blocks": {
			"core/button": {
				"css": ":hover {\n  color: red;\n  background-color: white;\n  transform: scale(1.05);\n  box-shadow: 0 5px 15px rgba(0,0,0,0.2);\n}",
				"spacing": {
					"padding": {
						"bottom": "var(--wp--preset--spacing--40)",
						"left": "var(--wp--preset--spacing--50)",
						"right": "var(--wp--preset--spacing--50)",
						"top": "var(--wp--preset--spacing--40)"
					}
				},
				"typography": {
					"fontStyle": "normal",
					"fontWeight": "400"
				}
			},
   ...

Allerdings kann man z. B. die Pseudoklassen :hover, :focus, :active auch direkt ohne CSS in der theme.json definieren. Hier ein Beispiel aus dem Theme Circles WP

		...
         "elements": {
			"button": {
				":active": {
					"color": {
						"background": "var(--wp--preset--color--base-2)",
						"text": "var(--wp--preset--color--base)"
					}
				},
				":focus": {
					"border": {
						"color": "var(--wp--preset--color--base-2)"
					},
					"color": {
						"background": "var(--wp--preset--color--base-2)",
						"text": "var(--wp--preset--color--base)"
					},
					"outline": {
						"color": "var(--wp--preset--color--contrast)",
						"offset": "4px"
					}
				},
				":hover": {
					"border": {
						"color": "var(--wp--preset--color--base)"
					},
					"color": {
						"background": "var(--wp--preset--color--base)",
						"text": "var(--wp--preset--color--base-2)"
					},
					"outline": {
						"color": "var(--wp--preset--color--base-2)",
						"offset": "4px",
						"style": "groove",
						"width": "4px"
					}
				},
				"border": {
					"color": "var(--wp--preset--color--base-2)",
					"radius": ".33rem"
				},
				"color": {
					"background": "var(--wp--preset--color--base-2)",
					"text": "var(--wp--preset--color--base)"
				},
				"spacing": {
					"padding": {
						"bottom": "0.6rem",
						"left": "1rem",
						"right": "1rem",
						"top": "0.6rem"
					}
				},
				"typography": {
					"fontFamily": "var(--wp--preset--font-family--lexend)",
					"fontSize": "var(--wp--preset--font-size--medium)",
					"fontStyle": "normal",
					"fontWeight": "600"
				}
			},
		...

Anpassungen von :hover in der theme.json oder per CSS?

Es gibt Vor- und Nachteile für beide Ansätze bei Block Themes, :hover in der theme.json oder als CSS zu definieren. Ich persönlich passe lieber im Rahmen von einem Child Theme die theme.json an und versuche CSS zu vermeiden. Das hängt einerseits mit der zentralen Verwaltung aller Stile in der theme.json zusammen und andererseits werden diese Änderungen im Backend und Frontend sofort ersichtlich. In einigen Fällen muss man aber spezifische Anpassungen per CSS vornehmen, weil (noch) nicht alle Anpassungen in der theme.json möglich sind.

Fazit

Das Stylebook bietet eine sehr schöne Übersicht, um z. B. eine Vorschau aller Blöcke zu erhalten. Wenn man globale Stile anpasst, sieht man direkt die Änderungen im Backend, die sich daraus ergeben. Man kann auch direkt bei den Blöcken CSS verwenden. Allerdings sind in dem Fall die Änderungen im Backend nicht sichtbar, sondern nur im Frontend.

Weitere Beiträge zum Thema

Wir freuen uns über eine Kontaktaufnahme

Icon Telefon

02722-6577725

0241 9551861

Icon Mail

info@haurand.com

Was hältst du davon?

Wir hoffen, dieser Beitrag hat dir gefallen und wir würden uns über einen Kommentar freuen. Auch über Erweiterungen, Korrekturen, Hinweise oder sonstige Anmerkungen freuen wir uns sehr.

  • Auf der folgenden Seite findest du weitere interessante Beiträge sortiert nach Kategorien und Schlagwörtern.
  • Wenn du über unsere neuesten Beiträge informiert werden möchtest, kannst du dich gerne bei unserem Newsletter anmelden.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert