WordPress Gutenberg Entwickler.
Custom Blocks, FSE & Speed.
Professionelle Entwicklung nativer Block-Themes (Full Site Editing) und maßgeschneiderter Gutenberg-Blöcke (React & ACF Pro) für Unternehmen und Agenturen.
Warum mit uns?
12+ Jahre Gutenberg-Expertise
Wir entwickeln native Gutenberg-Blöcke (React/JSX) seit der ersten Beta-Version. Über 50 erfolgreiche Enterprise-Projekte zeigen: Wir beherrschen die Block-API im Schlaf.
Einfach selbst pflegen
Wir programmieren Gutenberg-Editoren so intelligent, dass du die Seiten problemlos selbst pflegen kannst, ohne dass das Layout zerschießt. Durch maßgeschneiderte Template-Sperren und Rollen-Rechte schützen wir deine Marken-Identität zuverlässig, so bleibt die Inhaltspflege für dich und dein Team sicher und unkompliziert.
Marketing- & Conversion-Fokus
Unsere Gutenberg-Komponenten laden blitzschnell und integrieren GA4, GTM und Marketing-Tools nahtlos. Dein Marketingteam kann Landingpages in Minuten veröffentlichen, ohne Ladezeit-Verlust.
Fester Partner auf Augenhöhe
Wir verschwinden nicht nach dem Livegang. Als dein Web-Operations-Partner sorgen wir für regelmäßige Updates, Security und direkten Entwickler-Support auf Augenhöhe.
Clean Code
Natives HTML (Kein Bloat)
React & ACF
Custom Block Development
< 1.0s
Durchschnittliche Ladezeit
Safe Updates
Unzerstörbare Design-CI
Pixelperfekte
Design-zu-Gutenberg Umsetzung.
Anspruchsvolles Webdesign duldet keine Kompromisse. Als technischer White-Label-Partner für Agenturen übersetzen wir deine Designs aus Figma, Adobe XD, Sketch, Photoshop oder Canva originalgetreu und präzise in sauberen, nativen Gutenberg-Code, ohne Design-Abweichungen und mit optimalen Ladezeiten.
Design- & Token-Analyse
Wir analysieren deine Designtokens und Styles in Figma, Sketch oder XD und überführen Farben, Abstände und Schriften direkt in globale Design-Tokens innerhalb der theme.json-Architektur.
Responsive Blocks
Die Blöcke werden vollständig responsive und flexibel umgesetzt. Wir stellen sicher, dass mobile und Tablet-Versionen genauso flüssig und stimmig aussehen wie die Desktop-Ansichten.
Qualitätssicherung & QA
Vor der Übergabe erfolgt eine strenge Endkontrolle. Wir vergleichen die fertig programmierte Seite direkt mit dem Original-Design-Overlay auf Pixel-Abweichungen.
Layouts im Fokus
Inspirationen und UI-Konzepte, die zeigen, was im modernen Webdesign möglich ist.
React/JSX (Native Blocks) vs. ACF Blocks
Als spezialisierte WordPress Gutenberg Entwickler verwenden wir je nach Projektanforderung und Budget zwei unterschiedliche Implementierungsmethoden:
Native React-Blöcke: Werden in Javascript/JSX geschrieben, nutzen die UI-Komponenten von WordPress und werden über das Build-System @wordpress/scripts in optimierte JS/CSS-Bundles transpiliert. Da die Layoutdaten als HTML-Kommentare in der Datenbank abgelegt werden, ist die Ausführungszeit im Frontend ungeschlagen schnell. Sie sind ideal für interaktive Applikationen oder Plugins.
Advanced Custom Fields (ACF) Blocks: Nutzen PHP-Templates für das Rendern im Backend und Frontend, gekoppelt mit benutzerdefinierten Eingabefeldern. ACF-Blöcke ermöglichen eine extrem flexible Inhaltserfassung und schnelle Entwicklungszyklen bei komplexen Datenstrukturen, ideal für strukturierte Corporate Websites.
Das theme.json-Designsystem
Moderne WordPress Block-Themes werden über die zentrale Datei theme.json konfiguriert. Hier definieren wir Schriftfamilien, Standard-Abstandsmaße und Farbpaletten. WordPress generiert daraus automatisch performante CSS Custom Properties und bindet diese sowohl in den Editor im Admin-Bereich als auch ins Frontend ein. Ad-hoc-Stylesheets entfallen komplett.
Wartbarkeit & Langlebigkeit
Da wir auf native Webstandards und Core-Komponenten setzen, entfallen Update-Konflikte. Während Elementor-Updates oft Layout-Verschiebungen verursachen, bleiben Gutenberg-Websites stabil. Falls sich Blöcke ändern, programmieren wir saubere Block-Deprecations (Migrations-Schemas), damit alte Inhalte nicht ungültig werden.
// Nur definierte Blöcke im Editor erlauben
add_filter( 'allowed_block_types_all', function( $allowed_blocks ) {
return [
'core/paragraph',
'core/heading',
'runbycode/custom-teaser',
'runbycode/feature-grid'
];
});
?>Unzerstörbare Design-Vorgaben durch Block Locking
Bei klassischen Page-Buildern haben Redakteure im Backend oft Zugriff auf detaillierte CSS-Optionen (z.B. Abstände, Farben, Schriftarten). Dies führt in der Praxis häufig dazu, dass Corporate-Designs schleichend verwässert werden und die Konsistenz der Website verloren geht.
Unser Sicherheits-Schutzschirm: Wir beschränken die Redaktionsumgebung auf die für die Inhaltspflege wesentlichen Parameter. Über die API-Schnittstelle von Gutenberg sperren wir das Verschieben oder Löschen von strukturellen Grid-Blöcken (template_lock => 'all') und erlauben nur freigegebene Block-Typen (allowed_block_types).
Redakteure füllen so nur noch strukturierte Text-, Bild- und Videomasken aus. Sie arbeiten intuitiver, schneller und ohne das Risiko, das Layout der Website aus Versehen zu beschädigen.
Partner für Web- & Designagenturen (White-Label)
Suchst du als Agentur nach einem verlässlichen technischen Partner, der deine Figma- oder Sketch-Entwürfe in performanten WordPress-Code übersetzt? Viele Agenturen haben exzellente Designer, aber keine React/Javascript-Entwickler für die native Gutenberg-Entwicklung im Haus.
Wir fungieren als deine verlängerte Werkbank. Wir entwickeln maßgeschneiderte Gutenberg-Blocks und native Block-Themes komplett im Hintergrund (White-Label) unter Verwendung deiner Versions- und Deployment-Infrastruktur.
Unsere Qualitätsstandards: modularer CSS/JS-Aufbau, vollständige PHP-Namespacing-Strukturen, Composer für Dependency-Management und Webpack/Vite zur optimalen Kompilierung der Assets.
import { TextControl, InspectorControls } from '@wordpress/components';
import { useBlockProps } from '@wordpress/block-editor';
registerBlockType( 'runbycode/teaser-block', {
edit: ( { attributes, setAttributes } ) => {
return (
<div { ...useBlockProps() }>
<TextControl value={attributes.text} />
</div>
);
},
});
Gutenberg vs. klassische Page-Builder
Warum zukunftsorientierte Unternehmen und Agenturen von Elementor, Divi & Co. zu nativem Gutenberg wechseln.
Elementor, Divi & Co.
- Enormer Code-Overhead (Bloat) verringert Pagespeed & Core Web Vitals.
- Hohes Risiko für Editor- und Layout-Fehler nach großen Plugin-Updates.
- Ohne klare Leitplanken können zu viele Layout-Freiheiten das Design-System verwässern.
- Abhängigkeit von teuren Drittanbieter-Lizenzen und unsauberem Code.
Natives Gutenberg + ACF Pro
- Extrem schlanker HTML-Code für Ladezeiten unter einer Sekunde.
- Nahezu wartungsfrei, da voll im WordPress-Core integriert und unterstützt.
- Strukturierte Eingabefelder verhindern ungewollte Design-Veränderungen.
- Volle Code-Freiheit nach deinen Figma-Designvorgaben ohne Middleware.
„Ich baue dir echte Gutenberg-Blocks, mit denen dein Team intuitiv arbeitet, statt Shortcode-Wildwuchs oder Page-Builder-Ballast. Nativ, schnell und sauber im Code, nicht hinter einem Page-Builder versteckt.“
Florian Salman
Inhaber RunByCode · Gutenberg- & Block-Entwicklung · 12+ Jahre Erfahrung · München
Referenzen & Fallstudien
Ausgewählte E-Commerce- und WordPress-Projekte, die wir für unsere Kunden umgesetzt haben.
Brauchst du Gutenberg-Blocks, die dein Team wirklich bedienen kann?
Native, performante Custom-Blöcke statt Page-Builder-Ballast. Für Unternehmen und Agenturen, sauber im Code und ohne Lizenz-Abhängigkeit.
Was unsere Kunden auf Google schreiben
Echte Stimmen von Unternehmen und Partnern, die unsere Zuverlässigkeit, Geschwindigkeit und Fachkompetenz schätzen.
"Die Zusammenarbeit mit Helmut und Florian war bisher sehr gut. Wir benötigten Unterstützung im Bereich Fehlerbehebung auf unserer Wordpress-Seite. Hier konnten alle Fehler schnell und zuverlässig behoben werden. Die vorgeschlagenen Lösungsansätze und entsprechenden Stundenaufwände waren für uns transparent und gut nachvollziehbar."
"Florian arbeitete sehr gewissenhaft und zielgerichtet die Anforderungen für einen erweiterten WooCommerce-Shop auf. Wir sind super zufrieden gewesen."
"Gute Zusammenarbeit, schnelle Antworten und sehr freundlich. Bis jetzt gab es kein Problem, was wir nicht zusammen lösen konnten. Ich kann Florian Salman wärmstens weiter empfehlen."
"Ich möchte meine äußerst positive Erfahrung mit Florian Salman und seinem IT-Wordpress-Shop-Betreuungsservice teilen. Florian ist für mich ein absolut zuverlässiger Partner, der stets mit Fachkompetenz und Freundlichkeit überzeugt."
"Sehr gute Zusammenarbeit und reibungslose Lösung der Programmieraufgaben. Würden wir jederzeit wieder in Anspruch nehmen. Unbedingt zu empfehlen. Bücherbaukasten Motzet GmbH."
"Wir sind vom Ergebnis überzeugt. Es wurde unsere bestehende Seite neu in Wordpress erstellt und alles funktioniert einwandfrei. Absolute Empfehlung!"
"Die Zusammenarbeit mit Helmut und Florian war bisher sehr gut. Wir benötigten Unterstützung im Bereich Fehlerbehebung auf unserer Wordpress-Seite. Hier konnten alle Fehler schnell und zuverlässig behoben werden. Die vorgeschlagenen Lösungsansätze und entsprechenden Stundenaufwände waren für uns transparent und gut nachvollziehbar."
"Florian arbeitete sehr gewissenhaft und zielgerichtet die Anforderungen für einen erweiterten WooCommerce-Shop auf. Wir sind super zufrieden gewesen."
"Gute Zusammenarbeit, schnelle Antworten und sehr freundlich. Bis jetzt gab es kein Problem, was wir nicht zusammen lösen konnten. Ich kann Florian Salman wärmstens weiter empfehlen."
"Ich möchte meine äußerst positive Erfahrung mit Florian Salman und seinem IT-Wordpress-Shop-Betreuungsservice teilen. Florian ist für mich ein absolut zuverlässiger Partner, der stets mit Fachkompetenz und Freundlichkeit überzeugt."
"Sehr gute Zusammenarbeit und reibungslose Lösung der Programmieraufgaben. Würden wir jederzeit wieder in Anspruch nehmen. Unbedingt zu empfehlen. Bücherbaukasten Motzet GmbH."
"Wir sind vom Ergebnis überzeugt. Es wurde unsere bestehende Seite neu in Wordpress erstellt und alles funktioniert einwandfrei. Absolute Empfehlung!"
Was kostet Gutenberg-Entwicklung?
Die ehrliche Antwort: Das kommt ganz auf dein Vorhaben an. Wir rechnen nach tatsächlichem Aufwand statt mit starren Paketpreisen, weil jedes Projekt anders zugeschnitten ist.
Was den Aufwand bestimmt, sind vor allem drei Dinge: der Umfang deines Projekts, die Anzahl der individuell entwickelten Blocks und wie eure Inhalte später gepflegt werden sollen. Das schauen wir uns vorab gemeinsam an, und du bekommst ein klares, verbindliches Angebot, bevor wir starten.
Unverbindlich anfragenWovon es konkret abhängt
Maßgeschneiderte Plattform
Komplexe Web-Plattform mit eigener Logik, Custom Blocks und Schnittstellen, komplett auf deine Anforderungen entwickelt. Hier liegt der Fokus auf Performance, sauberem Code und voller gestalterischer Freiheit.
Sicher redaktionell pflegbar
Saubere Block-Struktur mit Template-Locking, damit auch Werkstudierende oder Praktikant*innen Inhalte zuverlässig pflegen können, ohne das Layout versehentlich zu zerschießen.
Design selbst pflegen?
Wenn du Layout und Design lieber selbst per Drag-and-drop anpasst, ist oft ein Page Builder die bessere Wahl. Dann arbeiten wir mit dir an einer sauberen Elementor-Lösung.
Fragen & Antworten zu WordPress Gutenberg
Warum ist Gutenberg klassischen Page-Buildern (Elementor, Divi) überlegen?
Der Hauptvorteil liegt in der Performance und der Code-Sauberkeit. Während Page-Builder Hunderte von DIV-Verschachtelungen und schwere JS/CSS-Bibliotheken laden, erzeugt Gutenberg sauberen, semantischen HTML5-Code direkt im WordPress-Core. Dadurch erreichen Gutenberg-Websites hervorragende Scores bei Googles Core Web Vitals (Ladezeiten meist < 1,0 Sekunde). Zudem ist Gutenberg durch die tiefe Integration im WordPress-Core extrem wartungsarm und unempfindlich gegenüber Core-Updates.
Was ist der genaue Unterschied zwischen React-basierten Blöcken und ACF Blocks?
React/JSX-basierte Blöcke sind native Gutenberg-Blöcke. Sie werden über Javascript erstellt, binden sich tief in das WordPress-Editor-Framework ein und speichern ihren gerenderten HTML-Code direkt im Inhaltsfeld der Datenbank ab. Das macht sie im Frontend rasend schnell. ACF Blocks hingegen nutzen PHP-Templates zur Ausgabe und laden Felder über das bekannte Advanced Custom Fields Plugin. Sie sind perfekt für Entwickler, die schnell komplexe, dynamisch konfigurierbare Layouts für klassische Websites erstellen möchten, da hier kein NodeJS/Webpack-Build-Prozess im Frontend benötigt wird.
Was ist die theme.json und warum ist sie so wichtig?
Die theme.json ist die zentrale Steuerungseinheit für das Design von WordPress Block-Themes. Hier legen wir alle visuellen Design-Tokens (Farbpaletten, Schriftgrößen, Abstands-Presets und Standardwerte für Blöcke) fest. WordPress liest diese Datei aus, generiert daraus optimierten CSS-Code und reicht diese CSS-Variablen an den Editor und das Frontend weiter. Dadurch stellen wir sicher, dass Layouts anwendungsweit konsistent bleiben und Editoren keine markenfremden Style-Modifikationen durchführen können.
Können wir unsere bestehende Website (z. B. Elementor) verlustfrei migrieren?
Ja. Im Rahmen einer Migration extrahieren wir dein bestehendes Frontend-Design und programmieren alle Komponenten als native Gutenberg Blocks und Block-Pattern neu. Die Inhalte werden aus der alten Datenbankstruktur ausgelesen und sauber in die neuen Blöcke übertragen. Das Design und deine SEO-URLs bleiben erhalten, während sich die Ladezeiten signifikant verringern und du keine teuren Page-Builder-Lizenzen mehr bezahlen musst.
Wie funktioniert das Design-Locking (Template Lock) für Redakteure?
Über die Block-Editor-API können wir Sperren einrichten. Mit template_lock => 'all' sperren wir das Hinzufügen, Verschieben oder Löschen von Blöcken auf bestimmten Seitentemplates komplett. Der Redakteur kann dann ausschließlich vorgegebene Text- und Bildblöcke ausfüllen. Mit dem Filter allowed_block_types_all schränken wir zudem ein, welche Blöcke überhaupt in WordPress geladen werden. So wird verhindert, dass Editoren eigenmächtig unpassende Elemente platzieren.
Bietet ihr White-Label-Gutenberg-Entwicklung für Design-Agenturen an?
Ja. Wir arbeiten eng mit Kreativ-, Marketing- und Designagenturen zusammen, die keine eigenen Gutenberg/React-Entwickler beschäftigen. Du lieferst uns die Screendesigns (Figma, Adobe XD) und wir übernehmen die technische Realisierung als natives WordPress-Block-Theme und programmieren die Custom Blocks. Die Entwicklung erfolgt vollständig unter deiner Marke und auf Wunsch direkt in deinen Repositorys.
Lass uns dein Projekt besprechen.
Ob akuter Notfall, Ladezeiten-Optimierung oder langfristige WooCommerce-Betreuung - wir freuen uns auf deine Nachricht.
“Ich stehe hinter jedem Projekt persönlich mit meinem Namen. Ein strukturiertes Ticket-System sorgt für den Überblick, dazu direkte Kommunikation und schnelle Hilfe auf Augenhöhe.
Florian Salman Gründer & Lead Developer