Der Workshop von Benjamin Zekavica erklärt die Entwicklung von Gutenberg-Block-Themes in WordPress und bietet praktische Übungen zur Erstellung und Anpassung solcher Themes. Die Teilnehmer lernen die Struktur von Block-Themes, die Nutzung von theme.json und CSS-Variablen sowie wichtige Tipps und Tricks zur Theme-Gestaltung. Der Workshop richtet sich sowohl an Anfänger als auch an erfahrene Entwickler und enthält wertvolle Ressourcen und Unterstützungsmöglichkeiten.

1. Gutenberg Theme
Entwicklung leicht
gemacht.
Benjamin Zekavica
Workshop

2. WLAN / WIFI
WCDE
Passwort: *WordCamp2023*

3. SOFTWARE
Dein Laptop
MAMP
Visual Studio Code

4. • 25 Jahre aus Aachen
• Webentwickler bei onOffice GmbH
• WordPress Core Entwickler für den Gutenberg Editor
• Contributor im WordPress Universum
Das bin ich.

5. Neu in Gutenberg?

6. Und so begann es …

8. Und das kannst du auch! 😊

9. Wir bauen heute unser
Gutenberg Block Theme!

10. Unsere Agenda für heute.
• Evolution von WordPress Themes
• Strukturen von Block Themes
• Eintauchen in theme.json
• Praktische Übungen
• Hilfreiche Tipps & Tricks
• Fragen und Antwort Runde

11. Evolution von
WordPress Themes

13. Block Themes?
• Keine Abhängigkeiten mit Plugins
• Einfacher Aufbau
• Eigene Themes können schnell gebaut werden
• Variation & Pattern Support
• Theme.json – Manipulation im Editor
• Keine ausgeprägte Code Kenntnisse notwendig

14. Was sind die
Unterschiede?
• Es wird kaum PHP mehr benötigt
• Alle Templates basieren auf HTML und sind im
Editor vorzubauen
• Aktualisierung können nachträglich nur bedingt
gemacht werden
?

15. Strukturen
von Block Themes

16. Wie ist ein Block
Theme aufgebaut?
• Bisherige Struktur bleibt erhalten
• Block Themes können mittels dem
„templates“ Ordner und einer
„index.html“ Datei aktiviert werden
• Im Ordner „Parts“ können einzelne
Bereiche definiert werden, die man
später global anpassen kann. Diese
werden in den Templates
• „Patterns“ können deutlich einfacher
direkt im Ordner definiert werden
• Separate theme.json können im
Ordner „Styles“ definiert werden. Die
Haupt theme.json liegt direkt im
Hauptverzeichnis

18. Theme Supports
Für den Gutenberg sind zwei Einstellungen
sehr empfehlenswert:
• add_theme_support('wp-block-styles‘ );
• add_theme_support('align-wide‘ );

19. WordPress Gutenberg
Syntax – Einstieg
• Gutenberg Code ist im Endeffekt
reiner statischer HTML Code
• In der Datenbank wird dieser
Quellcode direkt als String (einfacher
Text) abgespeichert.

20. Eintauchen in
theme.json

21. Full Site Editor /
Theme.json
● Grundlagen werden hier für die Entwicklung definiert und angelegt
● Theme Ordner kann erstellt werden oder im Backend generiert werden
● Seiten Templates / globale Templates werden als HTML Dateien im System erkannt
● Patterns sowie Template Parts können hier generiert werden
● theme.json überschreibt direkt alle bereits angelegten theme_supports in der
functions.php

22. Theme.json generieren
• Derzeit in Beta und ist derzeit kostenlos
• Auch geeignet für Personen ohne Coding
Kenntnisse
• Derzeit sind nur die Grundlagen als Funktion
gegeben, später sollen noch erweiterte
Einstellungen angeboten werden
• Code kann direkt in die theme.json eingefügt
werden.
Link: bit.ly/wp-gen

23. Theme.json Struktur
• theme.json definiert in deren Schema eine
Vorgabe für die Einhaltung der theme.json
• Für den Custom Bereich ist es möglich
eigene CSS-Variablen vom WordPress
System zu generieren und diese von
Gutenberg zu interpretieren.
• Theme Supports, Standard Blocks sowie
auch Patterns können hier zugänglich
gemacht werden

24. CSS Variablen definieren
• Die Variable --wp—custom—deinname wird
generiert
• Ebenfalls kann man in den Werten
der Variablen eine andere CSS-Variable
definieren

25. CSS Variablen
verwenden
• WordPress generiert automatisch die
notwendigen CSS-Variablen
• Auch alle Anpassungen aus dem Full-
Site-Editor werden hier als CSS-
Variablen gespeichert

26. CSS Variablen anwenden
• Einfacher Einsatz der Variablen
color: var(---variable)

27. Praktische Übungen

28. Theme vorbereiten
• Theme Ordner selber anlegen und
Dateien erstellen (style.css, index.php)
• Plugin nutzen:
1. Create Block Theme installieren
2. Felder ausfüllen (leeres Theme erstellen)
3. Theme aktivieren

29. Schriften auswählen
1. Schriftschnitte auswählen
2. Schriften zuweisen im Website Editor
3. CSS Variablen anpassen

30. Inhaltsbereiten definieren
1. Website Editor öffnen -> Layout
2. Inhalt auf 768px begrenzen
3. Container auf 1280px begrenzen

31. Header erstellen
1. Website Editor öffnen -> Vorlagen
2. Template-Teile erstellen mit Header
3. Blöcke platzieren und definieren

32. Footer erstellen
1. Website Editor öffnen -> Vorlagen
2. Template-Teile erstellen mit Footer
3. Blöcke platzieren und definieren

33. Page/Post Vorlage erstellen
1. Website Editor öffnen -> Templates
2. Seiten/ Beitrag / Startseite auswählen
3. Blöcke platzieren und definieren

34. Sync Pattern/Vorlage erstellen
1. Website Editor öffnen -> Vorlagen
2. Vorlage erstellen
3. Blöcke platzieren und definieren
4. Seite erstellen und Pattern auswählen

35. Mittels CSS Anpassungen vornehmen
1. Stile -> zusätzliches CSS
2. (Body soll einen schwarzen Border erhalten)
5. Styling anwenden, Seite neuladen

36. PHP Pattern/Vorlage erstellen
1. Seite im Editor erstellen und Code kopieren
2. Patterns Ordner erstellen
3. dein-pattern.php Datei anlegen
4. PHP Comments hinzufügen
/**
* Title: Meetup
* Slug: wpmeetup/meetupsection
* Categories: wpmeetup
* Inserter: yes
*/

37. Für Experten: do_blocks
1. Erstelle ein Template im Hauptverzeichnis names: post-wordcamp.php
2. Schalte das Block Theme aus. => index.html
3. Gebe den Header/Footer aus.
4. Erstelle ein Block deiner Wahl und kopiere den Code
5. Gebe den Code in der Funktion do_blocks aus

38. Für Experten: block_template_part
1. Erstelle ein Template im Hauptverzeichnis names: page-wordcamp.php
3. Nutze die Funktion: block_template_part
4. Erstelle ein Block deiner Wahl und kopiere den Code
5. Zeige dein Block Template Part dynamisch an

39. Tipps & Tricks

40. Gutenberg Erweiterungen / Hilfen
• Kadence blocks
• Gutenberg Block Generator (create-wp-blocks.com)
• Gutenberg Handbuch (gutenberg-handbook.com)
• Lazy Blocks (wordpress.org/plugins/lazy-blocks)

41. Noch Fragen?

42. Credits
• WordPress.org YouTube channel
• WordPress.org Dokumentation
• themegen.app

43. Vielen Dank für Eure
Aufmerksamkeit!
Kontaktiere mich:
Website: bz-ac.de
E-Mail: mail@bz-ac.de
WordPress: benjamin_zekavica