Gutenberg-Blöcke, Muster und full site editing: der vollstaendige WordPress-Leitfaden (2026)

#Warum Blöcke alles in WordPress veraendert haben

WordPress bediente das Web über fuenfzehn Jahre lang mit einem einzigen Rich-Text-Feld. Das aenderte sich im Dezember 2018, als Version 5.0 mit dem Gutenberg Block-Editor ausgeliefert wurde. Anstatt rohes HTML einzufuegen oder mit Shortcodes zu kaempfen, wurde jedes Inhaltselement zu einem eigenen Block: ein Absatz, ein Bild, eine Galerie, ein Button, eine Tabelle. Blöcke können verschoben, dupliziert, gruppiert und unabhaengig gestylt werden.

Im Jahr 2026 ist der Block-Editor nicht mehr optional. Er steuert die Beitragsbearbeitung, den Seitenaufbau und mit full site editing die gesamte Theme-Schicht. Ob Sie ein Website-Besitzer sind, der Artikel veröffentlicht, oder ein Entwickler, der Kundenprojekte liefert - das Verstaendnis von Blöcken, Mustern und dem Site Editor ist eine Kernkompetenz.

Dieser Leitfaden führt durch jede Schicht des Block-Oekosystems, vom Einfüge-Panel bis zum Erstellen eines eigenen Block-Themes von Grund auf.

#Das Block-Einfüge-Panel verstehen

Das Block-Einfüge-Panel ist der Zugang zu jedem Element, das Sie auf einer Seite platzieren können. Öffnen Sie es, indem Sie auf den blauen +-Button in der oberen linken Symbolleiste klicken oder / in einem leeren Absatz eingeben.

Das Einfüge-Panel gruppiert Blöcke in Kategorien:

• Text - Absatz, Überschrift, Liste, Zitat, Code, Vorformatiert, Pullquote, Vers
• Medien - Bild, Galerie, Audio, Video, Cover, Datei
• Design - Buttons, Spalten, Gruppe, Zeile, Stapel, Trenner, Abstandshalter
• Widgets - Shortcode, Archive, Kategorien, Neueste Beiträge, Suche, Social Icons
• Theme - Navigation, Website-Logo, Website-Titel, Query Loop, Template-Teil, Beitragstitel, Beitragsinhalt
• Einbettungen - YouTube, Twitter, Spotify, Vimeo und Dutzende weitere über oEmbed

Jeder Block bietet eine eigene Symbolleiste (Inline-Formatierung, Ausrichtung, Link) und ein Seitenleisten-Panel mit erweiterten Einstellungen (HTML-Anker, zusätzliche CSS-Klassen, Farbe, Typografie). Die Beherrschung des Einfüge-Panels bedeutet, dass Sie selten ein Page-Builder-Plugin für Standardlayouts benötigen.

#Tastenkuerzel, die Zeit sparen

Produktive Block-Bearbeitung basiert auf Kuerzeln:

• / gefolgt von einem Blocknamen fuegt ihn sofort ein
• Ctrl+Shift+D (Cmd auf macOS) dupliziert den ausgewaehlten Block
• Ctrl+Alt+T fuegt einen Block vor dem aktuellen ein
• Ctrl+Alt+Y fuegt einen Block nach dem aktuellen ein
• Shift+Alt+Z entfernt den ausgewaehlten Block
• Ctrl+Shift+K entfernt einen Link aus dem markierten Text

Kombinieren Sie diese mit dem Ziehgriff an jedem Block, und Sie können komplexe Layouts umordnen, ohne die Maus zu beruehren.

#Synchronisierte Muster erstellen und verwalten (wiederverwendbare Blöcke)

WordPress 6.3 hat “wiederverwendbare Blöcke” in “synchronisierte Muster” umbenannt, aber das Konzept bleibt gleich: Speichern Sie einen Block oder eine Gruppe von Blöcken einmal und fuegen Sie sie überall auf Ihrer Website ein. Wenn Sie eine Instanz bearbeiten, aktualisieren sich alle Platzierungen.

#So erstellen Sie ein synchronisiertes Muster

1. Wählen Sie einen oder mehrere Blöcke im Editor aus.
2. Öffnen Sie die Block-Symbolleiste und klicken Sie auf das Drei-Punkte-Menue.
3. Wählen Sie Muster erstellen.
4. Geben Sie dem Muster einen Namen und eine Kategorie.
5. Schalten Sie Synchronisiert ein. (Wenn Sie es ausgeschaltet lassen, wird ein Standard-Muster ohne Synchronisierung erstellt.)
6. Klicken Sie auf Erstellen.

Das Muster erscheint nun im Einfüge-Panel unter dem Tab Muster und in der Kategorie Synchronisiert.

#Praktische Anwendungsfaelle

• Call-to-Action-Banner - eine einzelne CTA-Blockgruppe, die auf jeder Landingpage verwendet und einmal aktualisiert wird, wenn sich die Kampagne aendert.
• Testimonial-Bereiche - ein Spaltenblock mit Kundenzitaten, der über Service-Seiten hinweg konsistent bleibt.
• Haftungsausschluss-Hinweise - Rechtstexte, die websiteweit identisch bleiben müssen.
• Newsletter-Anmeldeformulare - ein Formular-Block, der zwischen Blog-Seitenleiste und Footer synchronisiert wird.

#Muster aus dem Adminbereich verwalten

Navigieren Sie zu Design > Editor > Muster (oder dem eigenstaendigen Muster-Bildschirm unter /wp-admin/edit.php?post_type=wp_block), um Ihre Muster anzuzeigen, zu bearbeiten, zu duplizieren, zu exportieren oder zu loeschen. Sie können auch ein synchronisiertes Muster in ein regulaeres (nicht synchronisiertes) Muster umwandeln, indem Sie es öffnen und den Synchronisierungsstatus deaktivieren.

#Block-Muster und das Musterverzeichnis

Während synchronisierte Muster Ihre eigenen wiederverwendbaren Komponenten sind, sind Block-Muster vorgefertigte Layouts, die Sie einfügen und frei anpassen. WordPress wird mit eingebauten Mustern ausgeliefert (Hero-Bereiche, Testimonial-Raster, Preistabellen, Feature-Listen), und Tausende weitere sind im offiziellen Musterverzeichnis unter wordpress.org/patterns verfügbar.

#Muster aus dem Verzeichnis verwenden

1. Öffnen Sie das Einfüge-Panel und klicken Sie auf den Tab Muster.
2. Durchsuchen Sie Kategorien oder suchen Sie nach Schlagwörtern.
3. Klicken Sie auf ein Muster, um es in den Editor einzufuegen.
4. Ändern Sie Text, Bilder, Farben und Abstaende, um sie an Ihre Marke anzupassen.

Da Muster nach dem Einfügen zu unabhaengigen Kopien werden, können Sie jedes Detail ändern, ohne das Original zu beeinflussen.

#Ein benutzerdefiniertes Block-Muster in PHP registrieren

Themes und Plugins können Muster programmatisch registrieren. Hier ist ein minimales Beispiel in functions.php:

<?php
declare(strict_types=1);

add_action('init', function (): void {
    register_block_pattern(
        'wppoland/hero-with-cta',
        [
            'title'       => __('Hero mit CTA', 'wppoland'),
            'description' => __('Ein Hero-Bereich in voller Breite mit Überschrift, Absatz und Button.', 'wppoland'),
            'categories'  => ['featured', 'banner'],
            'keywords'    => ['hero', 'cta', 'banner'],
            'content'     => '
                <!-- wp:cover {"overlayColor":"contrast","isUserOverlayColor":true,"minHeight":500,"align":"full"} -->
                <div class="wp-block-cover alignfull" style="min-height:500px">
                    <span class="wp-block-cover__background has-contrast-background-color"></span>
                    <div class="wp-block-cover__inner-container">
                        <!-- wp:heading {"textAlign":"center","level":1} -->
                        <h1 class="wp-block-heading has-text-align-center">Ihre Überschrift hier</h1>
                        <!-- /wp:heading -->
                        <!-- wp:paragraph {"align":"center"} -->
                        <p class="has-text-align-center">Unterstuetzender Text, der das Wertversprechen erklaert.</p>
                        <!-- /wp:paragraph -->
                        <!-- wp:buttons {"layout":{"type":"flex","justifyContent":"center"}} -->
                        <div class="wp-block-buttons">
                            <!-- wp:button -->
                            <div class="wp-block-button"><a class="wp-block-button__link wp-element-button">Jetzt starten</a></div>
                            <!-- /wp:button -->
                        </div>
                        <!-- /wp:buttons -->
                    </div>
                </div>
                <!-- /wp:cover -->
            ',
        ]
    );
});

Ab WordPress 6.0 können Sie auch Musterdateien in einem patterns/-Verzeichnis im Theme-Stammverzeichnis ablegen. Jede Datei verwendet einen Header-Kommentar für Metadaten und gibt Block-Markup zurück, was eine automatische Registrierung ohne register_block_pattern() ermöglicht.

#Full site editing: wie der Site Editor den Customizer ersetzt

Full site editing (FSE) ist der Sammelbegriff für die Verwendung von Blöcken zur Steuerung jedes Teils Ihrer Website - nicht nur des Beitragsinhalts, sondern auch von Headern, Footern, Seitenleisten, Archiv-Layouts und 404-Seiten. Es wurde schrittweise über WordPress 5.9 bis 6.5 eingeführt und ist nun der Standardansatz für Block-Themes.

#Was full site editing ersetzt

#Zugriff auf den Site Editor

Mit einem aktiven Block-Theme gehen Sie zu Design > Editor. Die Oberflaeche öffnet sich in einer visuellen Vorschau. Von der linken Seitenleiste aus können Sie navigieren zu:

• Templates - Index, Single, Seite, Archiv, 404, Suche, Startseite und beliebige benutzerdefinierte Templates
• Template-Teile - Header, Footer, Seitenleiste und benutzerdefinierte Teile
• Muster - alle registrierten und vom Benutzer erstellten Muster
• Styles - globale Typografie, Farben, Abstaende und blockspezifische Style-Überschreibungen
• Navigation - Menue-Verwaltung basierend auf dem Navigation-Block

Jede Änderung wird live vorgeschaut und in der Datenbank gespeichert. Für Theme-Entwickler können Änderungen als Theme-Dateien für die Versionskontrolle exportiert werden.

#Benutzerdefinierte Templates und Template-Teile erstellen

Templates definieren die Struktur eines Seitentyps. Template-Teile sind wiederverwendbare Fragmente (Header, Footer), die über Templates hinweg geteilt werden.

#Ein Template im Site Editor erstellen

1. Öffnen Sie Design > Editor > Templates.
2. Klicken Sie auf Neues Template hinzufügen.
3. Wählen Sie einen Template-Typ (Seite, Einzelbeitrag, Kategorie, Autor, Benutzerdefiniert).
4. Bauen Sie das Layout mit Blöcken auf: Fuegen Sie ein Header-Template-Teil oben, eine Query Loop für Beiträge und ein Footer-Template-Teil unten hinzu.
5. Speichern.

#Template-Markup-Format

Unter der Haube ist jedes Template eine Block-Markup-HTML-Datei. Hier ist ein vereinfachtes templates/single.html:

<!-- wp:template-part {"slug":"header","area":"header"} /-->

<!-- wp:group {"tagName":"main","layout":{"type":"constrained"}} -->
<main class="wp-block-group">
    <!-- wp:post-title {"level":1} /-->
    <!-- wp:post-featured-image /-->
    <!-- wp:post-content /-->
    <!-- wp:post-terms {"term":"category"} /-->
    <!-- wp:post-terms {"term":"post_tag"} /-->
</main>
<!-- /wp:group -->

<!-- wp:template-part {"slug":"footer","area":"footer"} /-->

Template-Teile befinden sich im Verzeichnis parts/. Eine parts/header.html koennte so aussehen:

<!-- wp:group {"tagName":"header","layout":{"type":"flex","justifyContent":"space-between"}} -->
<header class="wp-block-group">
    <!-- wp:site-title /-->
    <!-- wp:navigation /-->
</header>
<!-- /wp:group -->

Diese Struktur eliminiert PHP-Template-Tags (get_header(), the_title(), the_content()) zugunsten von deklarativem Block-Markup. Das Ergebnis ist ein Theme, das Designer und Inhaltsredakteure direkt im Site Editor ändern können.

#Grundlagen der theme.json-Konfiguration

theme.json ist die zentrale Konfigurationsdatei, die steuert, was der Editor anzeigt und wie das Frontend aussieht. Sie befindet sich im Stammverzeichnis Ihres Block-Themes.

#Minimales theme.json-Beispiel

{
  "$schema": "https://schemas.wp.org/wp/6.7/theme.json",
  "version": 3,
  "settings": {
    "color": {
      "palette": [
        { "slug": "primary", "color": "#1e40af", "name": "Primary" },
        { "slug": "secondary", "color": "#9333ea", "name": "Secondary" },
        { "slug": "base", "color": "#ffffff", "name": "Base" },
        { "slug": "contrast", "color": "#1a1a1a", "name": "Contrast" }
      ],
      "gradients": [],
      "defaultPalette": false,
      "defaultGradients": false
    },
    "typography": {
      "fontFamilies": [
        {
          "fontFamily": "Inter, sans-serif",
          "slug": "body",
          "name": "Body"
        },
        {
          "fontFamily": "'Space Grotesk', sans-serif",
          "slug": "heading",
          "name": "Heading"
        }
      ],
      "fontSizes": [
        { "slug": "small", "size": "0.875rem", "name": "Small" },
        { "slug": "medium", "size": "1rem", "name": "Medium" },
        { "slug": "large", "size": "1.5rem", "name": "Large" },
        { "slug": "x-large", "size": "2.25rem", "name": "Extra Large" }
      ]
    },
    "spacing": {
      "units": ["rem", "vh", "vw", "%"],
      "spacingSizes": [
        { "slug": "10", "size": "0.5rem", "name": "Tiny" },
        { "slug": "20", "size": "1rem", "name": "Small" },
        { "slug": "30", "size": "1.5rem", "name": "Medium" },
        { "slug": "40", "size": "2.5rem", "name": "Large" },
        { "slug": "50", "size": "4rem", "name": "Extra Large" }
      ]
    },
    "layout": {
      "contentSize": "720px",
      "wideSize": "1200px"
    },
    "appearanceTools": true
  },
  "styles": {
    "color": {
      "background": "var(--wp--preset--color--base)",
      "text": "var(--wp--preset--color--contrast)"
    },
    "typography": {
      "fontFamily": "var(--wp--preset--font-family--body)",
      "fontSize": "var(--wp--preset--font-size--medium)",
      "lineHeight": "1.6"
    },
    "elements": {
      "heading": {
        "typography": {
          "fontFamily": "var(--wp--preset--font-family--heading)",
          "fontWeight": "700"
        }
      },
      "link": {
        "color": {
          "text": "var(--wp--preset--color--primary)"
        }
      }
    },
    "blocks": {
      "core/button": {
        "color": {
          "background": "var(--wp--preset--color--primary)",
          "text": "var(--wp--preset--color--base)"
        },
        "border": {
          "radius": "4px"
        }
      }
    }
  }
}

#Erklaerung der wichtigsten Abschnitte

• version - verwenden Sie immer 3 für WordPress 6.6 und hoeher.
• settings - definiert, welche Steuerelemente im Editor erscheinen: Farbpaletten, Schriftfamilien, Schriftgrößen, Abstands-Voreinstellungen, Layout-Breiten und Feature-Schalter.
• styles - wendet Standard-CSS-Werte auf das Root-Element, Elemente (Überschriften, Links, Buttons, Bildunterschriften) und einzelne Blöcke an.
• appearanceTools - eine Kurzform, die Rahmen-, Abstands-, Typografie- und Dimensions-Steuerelemente in der Seitenleiste aktiviert.

Die Engine konvertiert theme.json in benutzerdefinierte CSS-Eigenschaften (wie --wp--preset--color--primary), die durch die gesamte Website kaskadieren. Das bedeutet, eine Datei verwaltet die Design-Tokens sowohl für den Editor als auch für das Frontend.

#Die besten Block-Plugins für WordPress im Jahr 2026

Der Core-Editor deckt die meisten Beduerfnisse ab, aber Block-Plugins von Drittanbietern fuellen die Luecken mit erweiterten Layouts, Design-Steuerelementen und spezialisierten Blöcken.

#Spectra (frueher Ultimate Addons for Gutenberg)

Entwickelt von Brainstorm Force (dem Team hinter dem Starter Templates Plugin), fuegt Spectra über 30 Blöcke hinzu: Countdown-Timer, Sternebewertungen, Icon-Listen, Preislisten, Modals, Tabs und einen vollwertigen Formular-Block. Es enthaelt einen Container-Block mit Flex- und Grid-Layout-Modi, was es für komplexe Seitendesigns ohne traditionellen Page Builder geeignet macht. Die Preise werden individuell je nach Funktionsumfang festgelegt.

#GenerateBlocks

Vom GeneratePress-Team entwickelt, verfolgt GenerateBlocks einen minimalistischen Ansatz: vier Kernblöcke (Container, Überschrift, Buttons, Bild), die auf flexible Einstellungen statt Dutzender Einzweck-Blöcke setzen. Das Ergebnis ist eine schlanke Ausgabe mit minimalem CSS. Fortgeschrittene Benutzer schätzen die Query-Loop-Integration und das dynamische Datensystem, das Post-Meta, benutzerdefinierte Felder und Taxonomie-Daten in Block-Layouts einfuegt.

#Stackable

Stackable bietet über 40 Blöcke mit einer visuellen Design-Bibliothek von über 200 vorgefertigten Layouts. Sein herausragendes Merkmal ist ein einheitliches Designsystem, bei dem globale Typografie, Farbpaletten und Abstandsskalen automatisch auf jeden Stackable-Block übertragen werden. Die kostenlose Version deckt die meisten Anwendungsfaelle ab, während die Premium-Stufe dynamische Inhalte, bedingte Anzeige und Bewegungseffekte hinzufuegt.

#Kadence Blocks

Kadence Blocks bietet ein Zeilen-/Spalten-Layoutsystem, einen erweiterten Überschriften-Block, Info-Boxen, Icon-Listen, ein Inhaltsverzeichnis und einen Formular-Block. Die Design-Bibliothek umfasst ganzseitige und Abschnittsmuster. Kadence harmoniert besonders gut mit dem Kadence Theme und teilt ein Design-Token-System. Die Preise für die Pro-Version werden individuell festgelegt und variieren je nach Anzahl der Websites.

#Das richtige Plugin wählen

Wählen Sie GenerateBlocks für performancekritische Projekte, Spectra oder Stackable für designlastige Seiten und Kadence Blocks, wenn Sie neben Layout-Tools einen starken Formular-Builder benötigen.

#Ein einfaches Block-Theme von Grund auf erstellen

Alles oben Genannte zusammenfassend, folgt hier eine Schritt-für-Schritt-Anleitung zur Erstellung eines minimalen Block-Themes.

#Schritt 1: Ordnerstruktur

my-block-theme/
  style.css
  theme.json
  functions.php
  templates/
    index.html
    single.html
    page.html
    404.html
  parts/
    header.html
    footer.html
  patterns/
    hero-banner.php

#Schritt 2: style.css-Header

/*
Theme Name: My Block Theme
Theme URI: https://wppoland.com
Author: wppoland.com
Author URI: https://wppoland.com
Description: Ein minimales Block-Theme zum Erlernen von full site editing.
Version: 1.0.0
Requires at least: 6.4
Tested up to: 6.7
Requires PHP: 8.0
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: my-block-theme
*/

Zusaetzliches CSS wird hier nicht benötigt. Alle Styles fließen durch theme.json und das globale Style-System.

#Schritt 3: theme.json

Verwenden Sie das Beispiel aus dem frueheren Abschnitt. Passen Sie die Farbpalette und Typografie an Ihre Marke an.

#Schritt 4: Templates

templates/index.html (das Fallback-Template):

<!-- wp:template-part {"slug":"header","area":"header"} /-->

<!-- wp:group {"tagName":"main","layout":{"type":"constrained"}} -->
<main class="wp-block-group">
    <!-- wp:query {"queryId":1,"query":{"perPage":10,"pages":0,"offset":0,"postType":"post","order":"desc","orderBy":"date","inherit":true}} -->
    <div class="wp-block-query">
        <!-- wp:post-template -->
            <!-- wp:post-title {"isLink":true} /-->
            <!-- wp:post-excerpt /-->
            <!-- wp:post-date /-->
        <!-- /wp:post-template -->
        <!-- wp:query-pagination -->
            <!-- wp:query-pagination-previous /-->
            <!-- wp:query-pagination-numbers /-->
            <!-- wp:query-pagination-next /-->
        <!-- /wp:query-pagination -->
    </div>
    <!-- /wp:query -->
</main>
<!-- /wp:group -->

<!-- wp:template-part {"slug":"footer","area":"footer"} /-->

templates/404.html:

<!-- wp:template-part {"slug":"header","area":"header"} /-->

<!-- wp:group {"tagName":"main","layout":{"type":"constrained"}} -->
<main class="wp-block-group">
    <!-- wp:heading {"level":1} -->
    <h1 class="wp-block-heading">Seite nicht gefunden</h1>
    <!-- /wp:heading -->
    <!-- wp:paragraph -->
    <p>Die gesuchte Seite existiert nicht. Versuchen Sie die Suche oder kehren Sie zur Startseite zurueck.</p>
    <!-- /wp:paragraph -->
    <!-- wp:search {"label":"Suche","buttonText":"Suchen"} /-->
</main>
<!-- /wp:group -->

<!-- wp:template-part {"slug":"footer","area":"footer"} /-->

#Schritt 5: Template-Teile

parts/header.html:

<!-- wp:group {"tagName":"header","style":{"spacing":{"padding":{"top":"var:preset|spacing|20","bottom":"var:preset|spacing|20"}}},"layout":{"type":"constrained"}} -->
<header class="wp-block-group" style="padding-top:var(--wp--preset--spacing--20);padding-bottom:var(--wp--preset--spacing--20)">
    <!-- wp:group {"layout":{"type":"flex","justifyContent":"space-between"}} -->
    <div class="wp-block-group">
        <!-- wp:site-title /-->
        <!-- wp:navigation {"layout":{"type":"flex"}} /-->
    </div>
    <!-- /wp:group -->
</header>
<!-- /wp:group -->

parts/footer.html:

<!-- wp:group {"tagName":"footer","style":{"spacing":{"padding":{"top":"var:preset|spacing|30","bottom":"var:preset|spacing|30"}}},"backgroundColor":"contrast","textColor":"base","layout":{"type":"constrained"}} -->
<footer class="wp-block-group has-base-color has-contrast-background-color has-text-color has-background" style="padding-top:var(--wp--preset--spacing--30);padding-bottom:var(--wp--preset--spacing--30)">
    <!-- wp:paragraph {"align":"center","fontSize":"small"} -->
    <p class="has-text-align-center has-small-font-size">Erstellt mit WordPress und Bloecken.</p>
    <!-- /wp:paragraph -->
</footer>
<!-- /wp:group -->

#Schritt 6: automatisch registriertes Muster

patterns/hero-banner.php:

<?php
/**
 * Title: Hero-Banner
 * Slug: my-block-theme/hero-banner
 * Categories: featured, banner
 * Keywords: hero, cta, landing
 */
?>

<!-- wp:cover {"overlayColor":"primary","isUserOverlayColor":true,"minHeight":480,"align":"full"} -->
<div class="wp-block-cover alignfull" style="min-height:480px">
    <span class="wp-block-cover__background has-primary-background-color"></span>
    <div class="wp-block-cover__inner-container">
        <!-- wp:heading {"textAlign":"center","level":1,"textColor":"base"} -->
        <h1 class="wp-block-heading has-text-align-center has-base-color has-text-color">Willkommen bei My Block Theme</h1>
        <!-- /wp:heading -->
        <!-- wp:paragraph {"align":"center","textColor":"base"} -->
        <p class="has-text-align-center has-base-color has-text-color">Ein schlankes, blockbasiertes WordPress-Theme.</p>
        <!-- /wp:paragraph -->
        <!-- wp:buttons {"layout":{"type":"flex","justifyContent":"center"}} -->
        <div class="wp-block-buttons">
            <!-- wp:button {"backgroundColor":"base","textColor":"primary"} -->
            <div class="wp-block-button"><a class="wp-block-button__link has-primary-color has-base-background-color has-text-color has-background wp-element-button">Mehr erfahren</a></div>
            <!-- /wp:button -->
        </div>
        <!-- /wp:buttons -->
    </div>
</div>
<!-- /wp:cover -->

#Schritt 7: functions.php (optionale Erweiterungen)

<?php
declare(strict_types=1);

add_action('after_setup_theme', function (): void {
    add_theme_support('wp-block-styles');
    add_theme_support('editor-styles');
    add_editor_style('style.css');
});

add_action('wp_enqueue_scripts', function (): void {
    wp_enqueue_style(
        'my-block-theme-style',
        get_stylesheet_uri(),
        [],
        wp_get_theme()->get('Version')
    );
});

Laden Sie den Ordner nach wp-content/themes/ hoch, aktivieren Sie ihn und öffnen Sie Design > Editor. Sie haben nun ein voll funktionsfaehiges Block-Theme, bei dem jedes Template, Muster und jeder Style über den Browser bearbeitbar ist.

#Fortgeschrittene Tipps für blockbasierte Entwicklung

#Blöcke sperren, um versehentliche Bearbeitungen zu verhindern

Beim Erstellen von Templates für Kunden sperren Sie Blöcke, um Verschieben und Entfernen einzuschraenken:

<!-- wp:group {"lock":{"move":true,"remove":true}} -->
<div class="wp-block-group">
    <!-- wp:paragraph -->
    <p>Dieser Block kann von Redakteuren nicht verschoben oder geloescht werden.</p>
    <!-- /wp:paragraph -->
</div>
<!-- /wp:group -->

Inhalte innerhalb gesperrter Blöcke bleiben bearbeitbar, aber die strukturelle Integritaet bleibt erhalten.

#Block-Variationen für Konsistenz nutzen

Registrieren Sie Block-Variationen, um vorkonfigurierte Instanzen von Core-Blöcken bereitzustellen. Zum Beispiel eine “Teammitglied”-Variation des Media-and-Text-Blocks:

<?php
add_action('enqueue_block_editor_assets', function (): void {
    wp_add_inline_script(
        'wp-blocks',
        "wp.blocks.registerBlockVariation('core/media-text', {
            name: 'team-member',
            title: 'Team Member',
            attributes: {
                mediaPosition: 'left',
                verticalAlignment: 'center',
            },
            scope: ['inserter'],
        });"
    );
});

Variationen erscheinen als eigene Blöcke im Einfüge-Panel und teilen den Code des übergeordneten Blocks.

#Das create-block-Paket nutzen

Für benutzerdefinierte Blöcke, die über das hinausgehen, was Muster und Variationen bieten, verwenden Sie das offizielle Scaffolding-Tool @wordpress/create-block:

npx @wordpress/create-block my-custom-block --variant dynamic

Dies generiert ein Plugin mit Build-Tooling (webpack, Babel, ESLint), einer React-basierten edit-Funktion und einem PHP-render_callback für dynamisches serverseitiges Rendering. Es ist der empfohlene Weg für jeden Block, der Daten abrufen, Abfragen ausführen oder dynamische Inhalte anzeigen muss.

#Häufige Fehler und wie man sie vermeidet

Klassische und Block-Templates mischen. Ein Theme ist entweder ein Block-Theme oder ein klassisches Theme. Das Platzieren von index.php neben templates/index.html erzeugt unvorhersehbares Fallback-Verhalten. Entscheiden Sie sich für einen Ansatz pro Theme.

theme.json mit Inline-CSS überschreiben. Inline-Styles umgehen die globale Style-Kaskade und brechen die Style-Steuerelemente des Site Editors. Verwenden Sie immer theme.json-Voreinstellungen und benutzerdefinierte CSS-Eigenschaften.

Das patterns-Verzeichnis ignorieren. Viele Entwickler registrieren Muster weiterhin ausschließlich über PHP. Das patterns/-Verzeichnis mit Datei-Headern ist einfacher, erfordert keine Hook-Registrierung und trennt Muster-Markup von der Logik.

Vergessen, mit verschiedenen Benutzerrollen zu testen. Redakteure und Autoren sehen eine gefilterte Version des Block-Editors. Template-Bearbeitung, globale Styles und bestimmte Blöcke können je nach Berechtigungen verborgen sein. Überprüfen Sie immer das Bearbeitungserlebnis für jede Rolle, die es nutzen wird.

Site-Editor-Änderungen nicht exportieren. Im Browser vorgenommene Änderungen werden in der Datenbank gespeichert. Wenn Sie das Theme erneut bereitstellen, ohne diese Änderungen in Dateien zu exportieren, gehen sie verloren. Verwenden Sie die Exportfunktion des Site Editors oder den WP-CLI-Befehl wp theme export, um Änderungen in die Versionskontrolle zurückzusynchronisieren.

#Die Zukunft der Blöcke in WordPress

Das Gutenberg-Projekt ist in vier Phasen organisiert: einfachere Bearbeitung (ausgeliefert), Anpassung (aktuell, FSE), Zusammenarbeit (in Arbeit) und Mehrsprachigkeit (geplant). Phase 3, Echtzeit-Zusammenarbeit, wird gleichzeitige Bearbeitung im Google-Docs-Stil in den Block-Editor bringen. Phase 4 zielt darauf ab, WordPress ohne Plugins nativ mehrsprachig zu machen.

Block-Themes sind bereits der Standard für neue WordPress-Installationen. Klassische Themes werden weiterhin unterstützt, aber die neue API-Entwicklung und Design-Tooling konzentrieren sich auf das Block-Paradigma. Jetzt in blockbasierte Faehigkeiten zu investieren, bereitet Ihr Team auf jedes größere WordPress-Release bis 2028 und darüber hinaus vor.

#Wie wppoland.com Block-Entwicklung angeht

Bei wppoland.com bauen wir jedes Kundenprojekt auf blockbasierter Architektur auf. Unser Workflow beginnt mit theme.json-Design-Tokens, geht weiter zu benutzerdefinierten Block-Mustern für wiederkehrende Abschnitte und endet mit gesperrten Templates, die Inhaltsredakteuren Freiheit ohne strukturelles Risiko geben.

Für Projekte, die Blöcke über das hinaus benötigen, was Core und vorhandene Plugins bieten, entwickeln wir benutzerdefinierte Blöcke mit dem @wordpress/create-block-Toolchain, mit serverseitigem Rendering für dynamische Inhalte und vollstaendiger Integration in die globalen Styles des Site Editors.

Wenn Sie ein benutzerdefiniertes Block-Theme, eine Migration von einem klassischen Theme zu full site editing oder massgeschneiderte Block-Entwicklung für Ihren Content-Workflow benötigen, kontaktieren Sie das wppoland.com-Team. Wir liefern Block-Lösungen, die auf Ihre redaktionellen und geschaeftlichen Anforderungen zugeschnitten sind, mit individueller Preisgestaltung je nach Projektumfang.