Gutenberg Theme Entwicklung leicht gemacht

Gutenberg Theme
Entwicklung leicht
gemacht.
Benjamin Zekavica
Workshop

WLAN / WIFI
WCDE
Passwort: *WordCamp2023*

SOFTWARE
Dein Laptop
MAMP
Visual Studio Code

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

Wir bauen heute unser
Gutenberg Block Theme!

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

Evolution von
WordPress Themes

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

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
?

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

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

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.

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

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

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

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

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

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

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

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

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

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

Footer erstellen
2. Template-Teile erstellen mit Footer

Page/Post Vorlage erstellen
1. Website Editor öffnen -> Templates
2. Seiten/ Beitrag / Startseite auswählen

Sync Pattern/Vorlage erstellen
2. Vorlage erstellen
4. Seite erstellen und Pattern auswählen

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

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
*/

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

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

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

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

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

Gutenberg Theme Entwicklung leicht gemacht

Recommended

Recommended

More Related Content

Similar to Gutenberg Theme Entwicklung leicht gemacht

Similar to Gutenberg Theme Entwicklung leicht gemacht (20)

Gutenberg Theme Entwicklung leicht gemacht