WordPress führte Gutenberg ein, um die Inhaltsbearbeitung mit Blöcken zu modernisieren, und für viele Websites erfüllt es diese Aufgabe gut. Aber wenn man einen eigenen Seitenbauer, einen SaaS-Editor oder ein visuelles Tool mit vollständiger HTML/CSS-Kontrolle baut, wird Gutenberg oft eher zur Einschränkung als zur Lösung.
Hier kommt GrapesJS ins Spiel.
In diesem Artikel vergleichen wir GrapesJS mit Gutenberg, erklären, wann jeder Punkt Sinn macht, und gehen dann einen praxisnahen, produktionsbereiten Ansatz durch, um einen individuellen WordPress-Seitenbauer mit GrapesJS zu erstellen.
Dieser Leitfaden ist verfasst für:
- WordPress-Entwickler und Agenturen
- Frontend-Ingenieure
- SaaS-Builder erstellen Seiten-, Dokumenten- oder E-Mail-Editoren
Kein Fluff. Kein Marketing-Hype. Nur praktische Architektur und echte Entscheidungen.
Gutenberg vs GrapesJS — Der Kernunterschied
Bevor man Features vergleicht, ist es wichtig zu verstehen, dass Gutenberg und GrapesJS unterschiedliche Probleme lösen.
Gutenberg in einem Satz
Gutenberg ist ein blockbasierter Inhaltseditor, der eng mit WordPress verknüpft ist.
GrapesJS in einem Satz
GrapesJS ist ein framework-agnostischer visueller HTML/CSS-Editor , der WordPress ausschließlich als Backend nutzen kann.
Dieser Unterschied prägt alles andere.
Kurzer Vergleich: GrapesJS vs Gutenberg
Wann Gutenberg die richtige Wahl ist
Gutenberg funktioniert gut, wenn:
- Du baust content-lastige Websites
- Editoren sind nicht-technische Nutzer
- Du willst eine tiefe Integration mit WordPress Core
- Layout-Flexibilität ist zweitrangig gegenüber Konsistenz
Wenn Sie einen Blog, eine Marketingseite oder ein Nachrichtenportal aufbauen – Gutenberg reicht normalerweise aus.
Wenn GrapesJS die bessere Wahl ist
GrapesJS wird zur besseren Option, wenn:
- Du brauchst vollständige HTML- und CSS-Kontrolle
- Du baust einen benutzerdefinierten Seitenbauer
- Du möchtest Inhalte außerhalb von WordPress exportieren
- Du baust einen SaaS-ähnlichen Editor
- Du möchtest Dokumente, E-Mails, Vorschläge, Landingpages entwerfen
Mit anderen Worten: Wenn WordPress dein Backend ist, nicht dein Editor, passt GrapesJS perfekt.
Reale Architektur: WordPress + GrapesJS
Schauen wir uns ein produktionsbereites Setup an, nicht eine Demo.
Architektur auf hoher Ebene
WordPress Admin ↓Custom Editor Seite ↓ GrapesJS (iframe) ↓ REST API ↓ Datenbank / Medienbibliothek
Verantwortlichkeiten aufgeteilt
- WordPress
- Authentifizierung & Berechtigungen
- Speicher (HTML, CSS, JSON)
- Medien-Uploads
- REST API
- GrapesJS
- Visuelle Bearbeitung
- Komponenten & Layout
- Stile
- Export von HTML/CSS
Diese Trennung hält Ihr System sauber und skalierbar.
Schritt 1: GrapesJS in WordPress Admin einbetten
Erstelle eine benutzerdefinierte Admin-Seite oder einen benutzerdefinierten Beitragstyp-Editor.
Skripte sicher in der Warteschlange einreihen
add_action('admin_enqueue_scripts', Funktion () {
wp_enqueue_script(
'grapesjs',
'https://unpkg.com/grapesjs',
[],
null,
true );
wp_enqueue_style(
'grapesjs-css',
'https://unpkg.com/grapesjs/dist/css/grapes.min.css' );
wp_enqueue_script(
'mein-Redakteur',
plugin_dir_url(__FILE__). 'editor.js',
['grapesjs'],
'1.0',
wahr);
wp_localize_script('mein-Editor', 'WP_EDITOR', [
'nonce' => wp_create_nonce('wp_rest'),
'api' => rest_url('custom/v1'),
]);
});
Warum iframe wichtig ist
GrapesJS rendert Inhalte innerhalb eines iframes:
- Verhindert CSS-Konflikte mit WordPress-Admins
- Hält Frontend-Stile isoliert
- Macht die Ausgabe vorhersehbar
Das ist eine Funktion, kein Nachteil.
Schritt 2: Initialisierung von GrapesJS
In editor.js:
const editor = grapesjs.init({
container: '#editor',
height: '100vh',
fromElement: false,
storageManager: false,
canvas: {
styles: [
'/wp-content/themes/your-theme/style.css'
]
}
});
Deaktiviere den Standard-Speichermanager – wir übernehmen das manuelle Speichern.
Schritt 3: Inhalte korrekt speichern
Was solltest du sparen?
Empfohlen:
- HTML → Endausgabe
- CSS → Stile
- projectData → GrapesJS JSON (zur Nachbearbeitung)
REST API-Endpunkt (PHP)
register_rest_route('custom/v1', '/save', [
'methods' => 'POST',
'permission_callback' => function () {
return current_user_can('edit_posts');
},
'callback' => Funktion ($request) {
$post_id = intval($request['post_id']);
update_post_meta($post_id, '_gjs_html', $request['html']);
update_post_meta($post_id, '_gjs_css', $request['css']);
update_post_meta($post_id, '_gjs_project', wp_json_encode($request['project']));
return ['Erfolg' => wahr];
}
]);
Speichern-Button (JS)
asynchrone Funktion savePage() {
await fetch('${WP_EDITOR.api}/save', {
method: 'POST',
Headers: {
'Content-Type': 'application/json',
'X-WP-Nonce': WP_EDITOR.nonce
},
Body: JSON.stringify({
post_id: 123,
html: editor.getHtml(),
css: editor.getCss(),
projekt: editor.getProjectData()
})
});
}
Schritt 4: Inhalte wieder in den Editor laden
editor.loadProjectData(projectJson);
Dies ermöglicht echtes Hin- und Rücken-Schneiden, mit dem Gutenberg bei komplexen Layouts Schwierigkeiten hat.
Schritt 5: Integration der WordPress-Medienbibliothek
Verwenden Sie den nativen Media Picker:
const frame = wp.media({
titel: 'Bild auswählen',
multiple: false
});
frame.on('select', () => {
const file = frame.state().get('selection').first().toJSON();
Redakteur. AssetManager.add({
src: file.url,
type: 'image'
});
});
frame.open();
Jetzt erscheinen in WordPress hochgeladene Bilder direkt in GrapesJS.
Sicherheit & Berechtigungen
Lass das niemals aus.
Checkliste:
- ✅ REST-Nonces
- ✅ current_user_can() Prüfungen
- ✅ Desinfizieren beim Render, nicht beim Speichern
- ✅ Editor-Zugriff nach Rolle einschränken
Wichtig:
Wenn Nutzer HTML exportieren, sollten Sie gespeicherte Inhalte nicht übermäßig desinfizieren – nur beim öffentlichen Rendern.
Leistungs-Best Practices
- Lazy-Load GrapesJS nur, wenn der Editor geöffnet wird
- Injizieren erforderte nur CSS in die Canvas
- Vermeiden Sie es, den Editor neu zu initialisieren
- Verwenden Sie pro Seite eine Editor-Instanz
- Cachet Assets aggressiv
Häufige Fallstricke
❌ "Meine Stile passen nicht"
Du hast vergessen, CSS in das iframe (canvas.styles) zu laden.
❌ "Redakteur ist langsam"
Zu viele Plugins oder Autosave aktiviert.
❌ "Content bricht beim Nachladen"
Du speicherst nur HTML, nicht Projekt-JSON.
Endgültige Entscheidung: GrapesJS oder Gutenberg?
Wählen Sie Gutenberg , wenn:
- Du baust content-first-WordPress-Seiten
- Du willst native WP-UX
Wählen Sie GrapesJS, wenn:
- Du baust einen benutzerdefinierten Seitenbauer
- Du brauchst vollständige HTML/CSS-Kontrolle
- WordPress ist dein Backend, nicht dein Editor
- Du baust einen SaaS- oder fortgeschrittenen Editor
Abschließende Gedanken
Gutenberg ist ein großartiger Content-Redakteur.
GrapesJS ist ein Builder-Framework.
Wenn Ihr Ziel ist, etwas zu schaffen, das Webflow, Elementor, Notion oder einen Dokumenteneditor näherkommt, ist GrapesJS in Kombination mit WordPress eine leistungsstarke und flexible Grundlage.
WordPress erledigt das, was es am besten kann – Benutzer, Berechtigungen, Speicher.
GrapesJS übernimmt das, was es am besten kann – visuelle Bearbeitung und Layout.
Diese Trennung ist der Schlüssel zu skalierbaren, professionellen Bauunternehmern.