WordPress Editor: Gutenberg, Classic Editor & Alternativen

Ein WordPress Editor ist das zentrale Werkzeug, mit dem du Inhalte (Texte, Bilder, Videos) auf deiner WordPress-Website erstellst, bearbeitest und veröffentlichst. Seit WordPress 5.0 (Dezember 2018) ist der Block-Editor „Gutenberg“ der Standard-Editor, der das klassische WYSIWYG-Interface durch ein blockbasiertes System ersetzt hat.

Die Evolution der WordPress-Editoren

Classic Editor: Das bewährte Original (2003-2018)

Der Classic Editor war über 15 Jahre lang der Standard in WordPress und ähnelte einer klassischen Textverarbeitung wie Microsoft Word. Er basierte auf TinyMCE, einem etablierten WYSIWYG-Editor (What You See Is What You Get), der dir ermöglichte, Texte zu formatieren, Bilder einzufügen und HTML-Code direkt zu bearbeiten.

Hauptmerkmale des Classic Editors:

• Einheitliche Textfläche ähnlich einem Textverarbeitungsprogramm
• Formatierungs-Toolbar mit Buttons für Fett, Kursiv, Links, Listen etc.
• Umschalter zwischen visueller Ansicht und HTML-Code-Ansicht
• Meta-Boxen für Kategorien, Tags und Beitragsbilder außerhalb des Editors
• Erweiterbar durch Plugins wie „Advanced Custom Fields“ oder „Shortcode Ultimate“

Der Classic Editor ist weiterhin über das offizielle Classic Editor Plugin verfügbar und wird bis mindestens 2027 offiziell unterstützt. Viele Websites nutzen ihn noch, insbesondere wenn komplexe Content-Workflows bereits etabliert sind.

Gutenberg: Der moderne Block-Editor (seit 2018)

Gutenberg (benannt nach Johannes Gutenberg, dem Erfinder des Buchdrucks) revolutionierte die Content-Erstellung in WordPress durch das Konzept der „Blöcke“. Jedes Inhaltselement – ein Absatz, ein Bild, eine Überschrift, eine Tabelle – ist ein eigenständiger Block, den du unabhängig gestalten und positionieren kannst.

Was macht Gutenberg besonders:

• Blockbasierte Architektur: Jeder Inhaltstyp ist ein eigener Block mit spezifischen Einstellungen
• Visuelles Layout direkt im Editor: Du siehst während der Bearbeitung, wie die Seite später aussieht
• Drag & Drop: Blöcke lassen sich per Maus verschieben und neu anordnen
• Wiederverwendbare Blöcke: Erstelle einmal, nutze mehrfach (z.B. Call-to-Action-Boxen)
• Block-Patterns: Vorgefertigte Block-Kombinationen für schnelleres Arbeiten
• Einheitliche Oberfläche: Seiten und Beiträge werden identisch bearbeitet

Verfügbare Block-Typen (Auswahl):

• Text-Blöcke: Absatz, Überschrift, Liste, Zitat, Code, Tabelle
• Medien-Blöcke: Bild, Galerie, Video, Audio, Datei, Cover
• Design-Blöcke: Spalten, Gruppe, Separator, Spacer, Buttons
• Widget-Blöcke: Kategorien, Archiv, Suche, Neueste Beiträge
• Embed-Blöcke: YouTube, Twitter, Instagram, Spotify, Google Maps
• Theme-Blöcke: Navigationsmenü, Template-Parts, Post-Content

Full Site Editing (FSE): Die nächste Evolution

Seit WordPress 5.9 (2022) ermöglicht Full Site Editing, nicht nur Inhalte, sondern auch Theme-Elemente wie Header, Footer und Seitenvorlagen mit dem Block-Editor zu gestalten. Du benötigst dafür ein FSE-kompatibles Theme wie „Twenty Twenty-Four“ oder „Kadence“.

Vorteile von FSE:

• Konsistente Bearbeitungserfahrung für alle Website-Bereiche
• Keine Notwendigkeit für separate Theme-Customizer-Optionen
• Globale Styles für einheitliches Design
• Template-Verwaltung direkt im Editor

Page Builder: Die Alternative zum Standard-Editor

Page Builder sind Plugins, die eine eigene Editor-Oberfläche über oder neben dem WordPress-Editor legen. Sie bieten oft mehr Designfreiheit und visuelle Kontrolle als der Standard-Editor.

Beliebte Page Builder im Überblick

Elementor (Free & Pro):

• Über 12 Millionen aktive Installationen
• Live-Preview mit Frontend-Editing
• Widget-Bibliothek mit 100+ Elementen
• Theme Builder für globale Layouts
• Responsive Design-Kontrollen

Divi Builder:

• Teil des Divi-Themes von Elegant Themes
• Visual Builder mit Inline-Editing
• 46 Content-Module
• Split-Testing-Funktionalität
• Umfangreiche Layout-Bibliothek

Kadence Blocks (Pro):

• Erweitert Gutenberg statt ihn zu ersetzen
• Performance-optimiert (sauberer Code)
• Fortgeschrittene Block-Einstellungen
• Dynamic Content-Integration
• Custom CSS pro Block

WPBakery Page Builder:

• Einer der ältesten Page Builder
• Frontend- und Backend-Editor
• Template-System
• Viele Theme-Integrationen

Page Builder vs. Block-Editor: Die Unterschiede

Welcher Editor ist der richtige für dich?

Nutze den Classic Editor, wenn du:

• Mit dem bisherigen Workflow zufrieden bist und keinen Änderungsbedarf hast
• Hauptsächlich textlastige Inhalte ohne komplexe Layouts erstellst
• Blogs oder News-Websites betreibst
• Viele bestehende Inhalte hast, die im Classic Editor erstellt wurden

Nutze Gutenberg (Block-Editor), wenn du:

• Mit WordPress-Standards arbeiten möchtest (zukunftssicher)
• Performance und schnelle Ladezeiten priorisierst
• Barrierefreie Websites erstellen möchtest (BITV 2.0, BFSG-konform)
• Keine zusätzlichen Plugin-Abhängigkeiten willst
• Full Site Editing nutzen möchtest

Nutze einen Page Builder, wenn du:

• Komplexe, pixelgenaue Layouts ohne Code erstellen möchtest
• Landing Pages mit hoher visueller Anspruch brauchst
• Bereits Erfahrung mit einem bestimmten Builder hast
• Bereit bist, Performance-Einbußen in Kauf zu nehmen
• Professionelle Design-Anforderungen hast

Praktische Tipps für effizientes Arbeiten im Editor

Gutenberg-Shortcuts für Power-User

• / (Slash): Öffnet Block-Auswahl (z.B. „/bild“ für Bild-Block)
• Strg/Cmd + Shift + D: Block duplizieren
• Strg/Cmd + Alt + T: Block vor dem aktuellen einfügen
• Strg/Cmd + Alt + Y: Block nach dem aktuellen einfügen
• Strg/Cmd + Shift + Z: Vorwärts wiederholen
• Shift + Alt + O: Listen-Ansicht öffnen/schließen

Wiederverwendbare Blöcke erstellen

1. Erstelle einen Block (z.B. eine Call-to-Action-Box)
2. Klicke auf die drei Punkte im Block-Toolbar
3. Wähle „Zu wiederverwendbaren Blöcken hinzufügen“
4. Benenne den Block
5. Füge ihn in anderen Beiträgen über den Block-Inserter ein

Wichtig: Änderungen an einem wiederverwendbaren Block wirken sich auf alle Instanzen aus. Für individuelle Anpassungen wähle „In normale Blöcke konvertieren“.

Barrierefreiheit im Editor beachten

Überschriften-Hierarchie einhalten:

• Nutze H2 für Hauptkapitel, H3 für Unterkapitel
• Überspringe keine Ebenen (nicht von H2 zu H4)
• Nutze Überschriften für Struktur, nicht für Formatierung

Alt-Texte für Bilder:

• Beschreibe den Bildinhalt präzise (für Screenreader)
• Füge Alt-Text im Bild-Block unter „Erweitert“ hinzu
• Lasse Alt-Text bei rein dekorativen Bildern leer

Aussagekräftige Link-Texte:

• Vermeide „hier klicken“ oder „mehr erfahren“
• Nutze beschreibende Texte: „Barrierefreies Webdesign-Angebot“

Kontrastverhältnisse prüfen:

• Achte bei farbigen Hintergründen auf ausreichenden Kontrast
• Mindestens 4,5:1 für normalen Text (WCAG AA)
• 7:1 für erhöhte Anforderungen (WCAG AAA)

Migration zwischen Editoren

Vom Classic Editor zu Gutenberg wechseln

Schritt 1: Vorbereitung

• Erstelle ein vollständiges Backup deiner Website
• Teste die Umstellung zunächst auf einer Staging-Umgebung
• Deaktiviere das Classic Editor Plugin temporär

Schritt 2: Conversion

• Bestehende Inhalte werden automatisch in einen „Classic“-Block konvertiert
• Dieser Block enthält den gesamten bisherigen Inhalt
• Du kannst ihn in einzelne Blöcke umwandeln über „Zu Blöcken konvertieren“

Schritt 3: Schulung

• Nutze die offizielle Gutenberg-Dokumentation
• Teste die neuen Blöcke in Entwurfsbeiträgen
• Erstelle interne Richtlinien für dein Team

Von Page Buildern zu Gutenberg migrieren

Herausforderungen:

• Page Builder verwenden oft Shortcodes oder Custom Markup
• Layouts werden nicht 1:1 übertragbar sein
• Manuelle Neuerstellung kann notwendig sein

Empfohlener Ansatz:

1. Erstelle neue Seiten parallel in Gutenberg
2. Kopiere Texte und Medien schrittweise
3. Recreate Layouts mit passenden Blocks oder Block Patterns
4. Leite alte URLs per 301-Redirect um (falls URLs geändert werden)
5. Behalte alte Seiten als Referenz

Tools für die Migration:

• Plugin: Import WP Page Builder to Gutenberg (für WPBakery)
• Kadence Conversion: Elementor-Inhalte zu Kadence Blocks

Editor-Erweiterungen und Optimierungen

Empfehlenswerte Plugins für Gutenberg

Kadence Blocks (Free & Pro):

• Erweitert Gutenberg um 30+ fortgeschrittene Blöcke
• Custom Block Styles und Spacing-Kontrollen
• Dynamic Content und Custom CSS
• Performance-optimiert

GenerateBlocks:

• Container-, Grid- und Headline-Blöcke
• Volle CSS-Kontrolle ohne Inline-Styles
• Globale Styles-System
• Lightweight (unter 20 KB)

EditorsKit:

• Zusätzliche Block-Optionen
• Writing Tools (Markdown, Text-Highlights)
• Block Visibility-Kontrollen
• User Role Management

PublishPress Blocks:

• Content-Display-Blöcke (neueste Beiträge, Autorbox)
• Advanced Grid-System
• Schema Markup-Integration

Performance-Optimierung

Block-Styles selektiv laden:

// In functions.php
add_action('wp_enqueue_scripts', function() {
    // Entferne ungenutzte Block-Styles
    wp_dequeue_style('wp-block-library');
    wp_dequeue_style('wp-block-library-theme');
    
    // Lade nur benötigte Blocks
    wp_enqueue_style('wp-block-paragraph');
    wp_enqueue_style('wp-block-heading');
});

Lazy Loading für Block-Scripts:

• Nutze Plugins wie „Asset CleanUp“ oder „Perfmatters“
• Deaktiviere ungenutzte Blöcke
• Lade Block-Scripts nur auf Seiten, wo sie benötigt werden

Editor-Anpassungen für Teams

Custom Block Patterns erstellen:

// In functions.php oder eigenes Plugin
register_block_pattern(
    'mein-theme/call-to-action',
    array(
        'title'       => 'Mein Call-to-Action',
        'description' => 'Standard CTA-Box mit Button',
        'content'     => '<!-- wp:group {"backgroundColor":"primary"} -->
            <div class="wp-block-group has-primary-background-color">
                <h2>Jetzt starten!</h2>
                <p>Kontaktiere uns für ein unverbindliches Angebot.</p>
                <!-- wp:buttons -->
                <div class="wp-block-buttons">
                    <div class="wp-block-button">
                        <a class="wp-block-button__link">Mehr erfahren</a>
                    </div>
                </div>
                <!-- /wp:buttons -->
            </div>
        <!-- /wp:group -->',
        'categories'  => array('call-to-action'),
    )
);

Benutzerrechte einschränken:

// Bestimmte Blöcke für Redakteure deaktivieren
add_filter('allowed_block_types_all', function($allowed_blocks, $editor_context) {
    if (!current_user_can('administrator')) {
        return array(
            'core/paragraph',
            'core/heading',
            'core/list',
            'core/image',
            'core/quote',
        );
    }
    return $allowed_blocks;
}, 10, 2);

Häufige Probleme und Lösungen

„Der Editor lädt nicht“ oder zeigt nur weißen Bildschirm

Ursachen und Lösungen:

1. Plugin-Konflikt: Deaktiviere alle Plugins und reaktiviere sie einzeln
2. Theme-Inkompatibilität: Wechsle temporär zu einem Standard-Theme (Twenty Twenty-Four)
3. JavaScript-Fehler: Öffne die Browser-Konsole (F12) und prüfe auf Fehlermeldungen
4. PHP-Version zu alt: Gutenberg benötigt mindestens PHP 7.4
5. Memory Limit: Erhöhe das PHP-Memory-Limit in wp-config.php auf mindestens 256 MB

Blöcke werden nicht richtig angezeigt

Block Validation Error:

• Tritt auf, wenn Block-Code geändert wurde
• Klicke auf „Attempt Block Recovery“ oder „Convert to HTML“
• Erstelle bei Bedarf den Block neu

CSS-Konflikte:

• Theme-Styles überschreiben Block-Styles
• Prüfe die Browser-Entwicklertools
• Füge spezifischere CSS-Selektoren hinzu

Classic Editor-Plugin funktioniert nicht mehr

Für langfristige Nutzung:

• Classic Editor wird bis mindestens 2027 unterstützt
• Danach empfiehlt sich der Wechsel zu Gutenberg
• Alternative: „Disable Gutenberg“ Plugin (eingeschränkter Support)

Editor und SEO: Best Practices

Strukturierte Daten im Editor

RankMath Integration:

• FAQ-Block mit automatischer FAQ-Schema-Ausgabe
• How-to-Schema über spezielle Blöcke
• Review-Schema für Produktbewertungen

Manuelle Schema-Implementierung:

<!-- wp:html -->
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "FAQPage",
  "mainEntity": [{
    "@type": "Question",
    "name": "Was ist der WordPress Editor?",
    "acceptedAnswer": {
      "@type": "Answer",
      "text": "Der WordPress Editor ist das Werkzeug zur Erstellung und Bearbeitung von Website-Inhalten..."
    }
  }]
}
</script>
<!-- /wp:html -->

Content-Optimierung im Editor

RankMath Content AI:

• Integriert direkt in den Editor
• SEO-Score in Echtzeit
• Keyword-Dichte-Analyse
• Content-Verbesserungsvorschläge

Interne Verlinkung:

• Nutze den Link-Block für kontextuelle Verlinkungen
• Verlinke zu verwandten Glossar-Einträgen
• Achte auf aussagekräftige Anchor-Texte

Zukunft der WordPress-Editoren

Kommende Features (Roadmap)

Gutenberg Phase 3: Collaboration (laufend):

• Multi-User-Editing in Echtzeit
• Kommentare und Vorschläge direkt im Editor
• Versionskontrolle und Änderungsverfolgung

Gutenberg Phase 4: Multilingual (geplant):

• Native Mehrsprachigkeit ohne Plugins
• Übersetzungsworkflows im Editor
• Language Switcher als Block

Performance-Verbesserungen:

• Lazy Loading von Blöcken
• Verbesserte Speicher-Effizienz
• Schnellere Block-Ladezeiten

KI-Integration in Editoren

WordPress Playground & AI:

• Experimentelle AI-Features in Gutenberg
• Text-Generierung über APIs (OpenAI, Claude)
• Bildgenerierung direkt im Editor

Jetpack AI Assistant:

• Content-Erstellung per Prompt
• Ton- und Stil-Anpassungen
• Übersetzungen und Zusammenfassungen

Fazit: Der Editor macht deine Website

Die Wahl des richtigen Editors beeinflusst nicht nur deine tägliche Arbeit, sondern auch Performance, Barrierefreiheit und Zukunftssicherheit deiner WordPress-Website. Gutenberg ist mittlerweile ausgereift und bietet für die meisten Anwendungsfälle die beste Balance aus Funktionalität, Performance und Zukunftssicherheit.

Unsere Empfehlung:

• Standard-Websites: Gutenberg + Kadence Blocks
• Landing Pages: Gutenberg oder Elementor (je nach Anforderung)
• Blogs: Gutenberg oder Classic Editor
• Enterprise: Gutenberg + Custom Blocks + FSE

Du benötigst Unterstützung bei der Editor-Auswahl, Schulung oder Migration? Wir helfen dir gerne weiter – von der WordPress-Schulung bis zur technischen Umsetzung.

Jetzt kostenlosen Website-Check buchen →