2018 führte WordPress mit der Version 5.0 den Gutenberg-Editor ein, mit dem sich Seiten und Beiträge mithilfe von „Blöcken“ erstellen lassen. Anfangs waren diese Blöcke recht einfach, aber im Laufe der Jahre haben sie sich weiterentwickelt und bieten nun mehr Flexibilität und ein besseres Bearbeitungserlebnis.
Trotzdem gibt es Fälle, in denen ein Block nicht ganz das tut, was du brauchst. Vielleicht möchtest du bestimmte Funktionen entfernen, neue hinzufügen, einen bestimmten Stil standardmäßig anwenden oder bestimmte Einstellungen leichter zugänglich machen. In solchen Fällen scheint es eine Option zu sein, einen eigenen Block von Grund auf neu zu erstellen, aber – seien wir ehrlich – für kleine Änderungen ist das zu viel des Guten. Wäre es nicht einfacher, wenn du einfach bereits vorhandene Blöcke ändern könntest?
Genau hier kommt die Blocks API ins Spiel. In diesem Artikel wird erklärt, wie du die WordPress-Blöcke mithilfe der Blocks API erweitern kannst.
Die WordPress Blocks API verstehen
Die WordPress Blocks API ist die Grundlage des Block-Editors und ermöglicht es Entwicklern, Blöcke zu erstellen, zu ändern und zu erweitern. Die API bietet verschiedene Möglichkeiten, mit Blöcken zu interagieren. Du kannst:
- Blockeinstellungen ändern – Blockattribute, Standardwerte und Verhaltensweisen ändern.
- Blockunterstützung hinzufügen oder entfernen – Funktionen wie Typografie, Farben und Abstände aktivieren oder deaktivieren.
- Benutzerdefinierte Steuerelemente einfügen – Füge neue Optionen im Blockeinstellungsfenster hinzu.
- Blockvariationen erstellen – Erstelle vorkonfigurierte Versionen von bestehenden Blöcken, um die Erstellung von Inhalten zu beschleunigen.
Jeder Block in WordPress, egal ob es sich um einen Absatz-, Bild- oder Schaltflächenblock handelt, wird durch eine Reihe von Attributen und Einstellungen definiert, die in der Datei block.json gespeichert sind. Diese Datei enthält Metadaten über den Block, darunter seinen Namen, seine Kategorie, seine Standardattribute und die unterstützten Funktionen.
In WordPress kannst du diese Werte entweder mit PHP oder JavaScript ändern, aber dieser Artikel erklärt, wie du Filterhaken in der Blocks-API verwendest. So wird sichergestellt, dass deine Änderungen auf dem Server registriert werden, ohne dass du zusätzliche JavaScript-Dateien einbinden musst.
Wenn du zum Beispiel bestimmte Funktionen eines Blocks aktivieren oder deaktivieren möchtest, verwendest du am besten den Filter register_block_type_args in PHP. Mit dieser Methode kannst du die Blockeinstellungen dynamisch anpassen, ohne die Datei block.json direkt zu verändern.
Ändern von Blockunterstützungen
WordPress-Blöcke werden mit vordefinierten Unterstützungen geliefert, die die Optionen des Editors steuern. Bei einigen Blöcken, wie z. B. dem Bildblock (core/image), sind standardmäßig Duotone-Filter aktiviert, die es den Nutzern ermöglichen, Farbüberlagerungen anzuwenden.
Der Media & Text-Block (core/media-text) unterstützt jedoch von Haus aus keinen Duotone-Filter, obwohl er die Möglichkeit bietet, ein Bild einzufügen. Das bedeutet, dass du zwar einen Duotone-Filter auf einen eigenständigen Bildblock anwenden kannst, dies aber nicht möglich ist, wenn ein Bild in einen Media & Text-Block eingefügt wird.
Da der Medien- & Textblock ein Bild enthalten kann, ist es sinnvoll, die Duotone-Filter zu aktivieren. Dazu müssen wir das Array supports ändern und den richtigen CSS-Selektor angeben, damit der Filter richtig angewendet wird. Wir können ihn mit dem register_block_type_args Filter in PHP aktivieren.
Füge den folgenden Code in die functions.php Datei deines Themes ein:
function enable_duotone_for_media_text_block($args, $block_type) {
// Only modify the Media & Text block
if ( 'core/media-text' === $block_type ) {
$args['supports'] ??= [];
$args['supports']['filter'] ??= [];
$args['supports']['filter']['duotone'] = true;
$args['selectors'] ??= [];
$args['selectors']['filter'] ??= [];
$args['selectors']['filter']['duotone'] = '.wp-block-media-text .wp-block-media-text__media';
}
return $args;
}
add_filter('register_block_type_args', 'enable_duotone_for_media_text_block', 10, 2);Der obige Code aktiviert den Duotone-Filter innerhalb des Arrays supports und definiert den richtigen CSS-Selektor, um den Duotone-Effekt auf die Bilder im Media & Text-Block anzuwenden. Die Funktion add_filter() verwendet 10 als Priorität (wenn der Filter läuft) und 2, um die Anzahl der übergebenen Argumente festzulegen ($args, $block_type).
Wenn du die Datei speicherst und neu lädst, solltest du die Duotone-Steuerelemente im Bereich Filter sehen.
Das Aktivieren des Duotone-Filters für den Media & Text-Block mit register_block_type_args ist eine effektive Methode, um das Verhalten des Blocks dynamisch zu ändern. WordPress bietet jedoch noch eine andere Methode, um die Blockeinstellungen zu ändern: das Überschreiben der Block-Metadaten mit block_type_metadata.
Mit beiden Methoden kannst du Blöcke anpassen, aber sie funktionieren in unterschiedlichen Phasen des Blockregistrierungsprozesses.
Nehmen wir zum Beispiel an, wir wollen den Absatz-Block (core/paragraph) so anpassen, dass er nur Randanpassungen unterstützt und die Auffüllung deaktiviert. Eine Möglichkeit, dies zu tun, ist die Verwendung von register_block_type_args:
function modify_paragraph_spacing_args($args, $block_type) {
if ($block_type === 'core/paragraph') {
$args['supports']['spacing'] = [
'margin' => true,
'padding' => false
];
}
return $args;
}
add_filter('register_block_type_args', 'modify_paragraph_spacing_args', 10, 2);Diese Methode funktioniert in den meisten Fällen gut, aber da sie den Block ändert, nachdem er bereits registriert wurde, kann sie manchmal von anderen Plugins oder Themes überschrieben werden, die denselben Block später ändern.
Ein strukturierterer Ansatz wäre in diesem Fall, die Metadaten des Blocks direkt mit block_type_metadata zu überschreiben:
function mytheme_modify_paragraph_spacing($metadata) {
if ($metadata['name'] === 'core/paragraph') {
$metadata['supports']['spacing'] = [
'margin' => true,
'padding' => false
];
}
return $metadata;
}
add_filter('block_type_metadata', 'mytheme_modify_paragraph_spacing');Keiner der beiden Ansätze ist per se besser als der andere – es kommt nur darauf an, wann du den Block ändern willst und wie dauerhaft die Änderung sein soll.
Registrierung von Blockstilen
Viele WordPress-Blöcke werden mit vordefinierten Stilen geliefert, die du im Editor auswählen kannst. Ein gutes Beispiel ist der Bildblock (core/image), der standardmäßig einen abgerundeten Stil enthält. Die standardmäßig abgerundeten Ecken sind jedoch oft zu extrem, so dass das Bild eher wie ein Oval aussieht als ein ordentlich gestyltes Element.
Anstatt den Randradius für jedes Bild manuell einzustellen, ist es besser, den abgerundeten Stil so anzupassen, dass er einen raffinierteren Eckenradius anwendet – vielleicht mit einem subtilen Schatten für einen modernen Look. Auf diese Weise können die Nutzer/innen einfach auf eine Schaltfläche klicken, um einen gut gestalteten Stil anzuwenden, ohne jedes Mal die Einstellungen manuell anpassen zu müssen.
Nehmen wir den Stil Abgerundet im Block Bild und passen ihn so an, dass die Ecken leicht abgerundet statt übermäßig gekrümmt sind und ein dezenter Rahmenschatten für ein ausgefeilteres Aussehen hinzugefügt wird.
Da der Blockeditor das Registrieren und Aufheben der Registrierung von Blockstilen erlaubt, können wir den Standardstil Abgerundet entfernen und durch eine eigene Version ersetzen.
So geht’s:
function modify_image_block_rounded_style() {
// Remove the default "Rounded" style
unregister_block_style( 'core/image', 'rounded' );
// Register a new "Rounded" style with custom CSS
register_block_style(
'core/image',
array(
'name' => 'rounded',
'label' => __( 'Rounded', 'your-text-domain' ),
'inline_style' => '
.wp-block-image.is-style-rounded img {
border-radius: 20px; /* Adjust this value */
box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); /* Optional shadow */
}
',
)
);
}
add_action( 'init', 'modify_image_block_rounded_style' );Der Code ersetzt den standardmäßigen, übermäßig abgerundeten Stil durch eine verfeinerte Version, die border-radius: 20px; für weichere Ecken und box-shadow für eine subtile Erhöhung anwendet.
Eine externe CSS-Datei anstelle von Inline-Styles verwenden
Inline-Stile eignen sich zwar gut für einfache Stile, aber sie sind nicht ideal für die Wartbarkeit. Ein besserer Ansatz ist es, Stile in einer externen CSS-Datei zu definieren und sie stattdessen in die Warteschlange zu stellen.
Dazu erstellst du eine neue CSS-Datei, z. B. custom-block-styles.css, und fügst diese Datei hinzu:
/* Custom Rounded Image Block Style */
.wp-block-image.is-style-rounded img {
border-radius: 20px; /* Adjusted rounded corners */
box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); /* Subtle shadow */
}Als Nächstes reihst du die CSS-Datei in functions.php ein:
function enqueue_custom_block_styles() {
wp_enqueue_style(
'custom-block-styles',
get_template_directory_uri() . '/css/custom-block-styles.css',
array(),
'1.0'
);
}
add_action('wp_enqueue_scripts', 'enqueue_custom_block_styles');
add_action('enqueue_block_editor_assets', 'enqueue_custom_block_styles');Anstatt den Inline-Stil zu verwenden, kannst du jetzt den Stil registrieren, ohne CSS direkt in PHP einzubetten:
register_block_style(
'core/image',
array(
'name' => 'rounded',
'label' => __( 'Rounded', 'your-text-domain' ),
'style_handle' => 'custom-block-styles'
)
);Auf diese Weise kannst du Stile ändern, ohne PHP zu benötigen.
Registrierung von Blockvariationen
Mit Blockvariationen kannst du vordefinierte Versionen eines Blocks mit benutzerdefinierten Einstellungen erstellen, so dass es für die Nutzer einfacher ist, einheitliche Designs mit einem einzigen Klick anzuwenden. Anstatt die Einstellungen eines Blocks jedes Mal manuell zu ändern, kannst du mit einer Variation einen Block einfügen, auf den bereits die richtigen Attribute, Stile oder Konfigurationen angewendet wurden.
Einige WordPress-Kernblöcke funktionieren tatsächlich auf diese Weise. Der Embed-Block ist kein einzelner Block, sondern eine Reihe von Varianten für verschiedene Plattformen wie YouTube, Twitter und Spotify. Der Row-Block und der Stack-Block sind ebenfalls nur Variationen des Group-Blocks, jeweils mit unterschiedlichen Layout-Einstellungen.
Mit diesem Ansatz bleiben die Dinge modular und WordPress kann maßgeschneiderte Erlebnisse bieten, während es eine gemeinsame Grundstruktur verwendet.
Erstellen einer Variante des Zitat-Blocks für Zeugnisse
WordPress verfügt zwar nicht über einen eigenen Block für Zeugnisse, aber der Zitat-Block (core/quote) kann für diesen Zweck angepasst werden. Anstatt die Nutzer/innen zu zwingen, manuell ein Bild hinzuzufügen, den Text auszurichten und alles zu formatieren, können wir eine Testimonial-Variante des Zitat-Blocks definieren.
Diese Variante enthält automatisch einen Bildblock, einen Zitatblock und zwei Absatzblöcke für den Namen der Person und das Unternehmen. So wird sichergestellt, dass jedes Zeugnis demselben strukturierten Format folgt, ohne dass zusätzliche Anpassungen erforderlich sind.
Um eine Blockvariation in WordPress zu registrieren, verwenden wir registerBlockVariation() in JavaScript. Da Blockvariationen auf der Client-Seite gehandhabt werden, müssen wir eine JavaScript-Datei hinterlegen, die unsere benutzerdefinierte Zeugnisvariation registriert.
Dazu erstellst du eine JavaScript-Datei (z. B. custom-block-variations.js), die die Testimonial-Variante des Quote-Blocks definiert. Du kannst diese Datei im assets/js/ Verzeichnis deines Themes erstellen und den folgenden Code einfügen:
wp.domReady(() => {
wp.blocks.registerBlockVariation(
'core/quote',
{
name: 'testimonial',
title: 'Testimonial',
description: 'A variation of the Quote block for testimonials.',
category: 'text',
attributes: {
className: 'is-style-testimonial',
},
innerBlocks: [
['core/image', { align: 'center', width: 100, height: 100 }],
['core/quote'],
['core/paragraph', { placeholder: 'Name', align: 'center', fontSize: 'medium', className: 'testimonial-name' }],
['core/paragraph', { placeholder: 'Company / Role', align: 'center', fontSize: 'small', className: 'testimonial-company' }]
],
scope: ['inserter'],
}
);
// Inject inline styles for the editor preview
const style = document.createElement('style');
style.innerHTML = `
.wp-block-quote.is-style-testimonial {
background-color: #f9f9f9;
padding: 24px;
border: none !important;
border-radius: 8px;
text-align: center;
font-size: 1.2em;
font-style: normal;
color: #333;
box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
display: flex;
flex-direction: column;
align-items: center;
}
.wp-block-quote.is-style-testimonial p {
margin-bottom: 12px;
font-size: 1.1em;
}
.wp-block-quote.is-style-testimonial cite {
font-weight: bold;
display: block;
margin-top: 10px;
color: #0073aa;
}
.wp-block-quote.is-style-testimonial .wp-block-image {
display: flex;
justify-content: center;
margin: 0 auto 12px;
}
.wp-block-quote.is-style-testimonial .wp-block-image img {
width: 100px;
height: 100px;
object-fit: cover;
border-radius: 12px;
}
.wp-block-quote.is-style-testimonial .testimonial-name {
font-weight: bold;
font-size: 1.2em;
margin-top: 12px;
color: #222;
}
.wp-block-quote.is-style-testimonial .testimonial-company {
font-size: 0.9em;
color: #555;
}
`;
document.head.appendChild(style);
});Im obigen Code definiert registerBlockVariation() die Testimonial-Variante des Zitat-Blocks und lädt einen Bild-Block, einen Zitat-Block und zwei Absatz-Blöcke für den Namen der Person und das Unternehmen vor. Der Bildblock wird für einheitliche Profilbilder auf 100×100 Pixel zentriert, während der Zitatblock als Zeugnistext unverändert bleibt.
Für das Styling wird eine benutzerdefinierte Klasse (is-style-testimonial) angewendet, die dem Block einen hellen Hintergrund, einen dezenten Schatten und einen zentrierten Text verleiht. Der standardmäßige linke Rand wird entfernt, und das Bild behält sein Seitenverhältnis mit leicht abgerundeten Ecken für ein ansprechendes Aussehen.
Da die JavaScript-Datei im Block-Editor geladen werden muss, müssen wir sie in die Warteschlange von functions.php einreihen.
function enqueue_custom_block_variations() {
wp_enqueue_script(
'custom-block-variations',
get_template_directory_uri() . '/assets/js/custom-block-variations.js',
array( 'wp-blocks', 'wp-dom-ready', 'wp-edit-post' ),
filemtime( get_template_directory() . '/assets/js/custom-block-variations.js' ),
true
);
}
add_action( 'enqueue_block_editor_assets', 'enqueue_custom_block_variations' );Dadurch wird sichergestellt, dass die Testimonial-Blockvariante im Blockeditor angezeigt wird.
Während der JavaScript-Code dafür sorgt, dass der Block im Editor richtig aussieht, müssen wir auch die Stile auf dem Frontend anwenden, damit die Testimonials bei der Veröffentlichung richtig angezeigt werden. Füge den folgenden Code zu functions.php hinzu:
function register_testimonial_block_style() {
register_block_style(
'core/quote',
array(
'name' => 'testimonial',
'label' => __( 'Testimonial', 'your-text-domain' ),
'inline_style' => '
.wp-block-quote.is-style-testimonial {
background-color: #f9f9f9;
padding: 24px;
border: none !important;
border-radius: 8px;
text-align: center;
font-size: 1.2em;
font-style: normal;
color: #333;
box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
display: flex;
flex-direction: column;
align-items: center;
}
.wp-block-quote.is-style-testimonial .wp-block-image img {
width: 100px;
height: 100px;
object-fit: cover;
border-radius: 12px;
}
.wp-block-quote.is-style-testimonial .testimonial-name {
font-weight: bold;
font-size: 1.2em;
margin-top: 12px;
color: #222;
}
.wp-block-quote.is-style-testimonial .testimonial-company {
font-size: 0.9em;
color: #555;
}
',
)
);
}
add_action( 'init', 'register_testimonial_block_style' );Wenn ein Nutzer nun einen Testimonial-Block einfügt, enthält er bereits die Felder Bild, Zitat, Name und Unternehmen, die alle vorformatiert und korrekt gestaltet sind. Dadurch müssen keine manuellen Anpassungen mehr vorgenommen werden und jedes Zeugnis hat die gleiche saubere und professionelle Struktur.
Anstatt die Nutzer/innen zu zwingen, Zeugnisse von Grund auf neu zu erstellen, bietet diese Blockvariante einen optimierten Arbeitsablauf, der die Inhaltserstellung verbessert und gleichzeitig die Konsistenz des Website-Designs bewahrt.
Erweiterter Anwendungsfall: Kombinieren der Supports und Styles APIs zur Erstellung von Buttons mit Markenzeichen
Jetzt, wo du weißt, was jede API kann und wie sie funktioniert, warum nicht noch einen Schritt weiter gehen? Anstatt die Supports-API oder die Styles-API einzeln zu verwenden, können wir sie zusammen nutzen, um ein einziges Problem zu lösen: die Konsistenz des Designs zu wahren und gleichzeitig den Nutzern eine strukturierte Möglichkeit zu geben, die richtigen Stile anzuwenden.
Betrachten wir ein Szenario aus der Praxis. Ein Unternehmen möchte, dass alle Schaltflächen auf seiner Website strengen Markenrichtlinien folgen. Es möchte nicht, dass die Nutzer/innen wahllos Farben auswählen, Polsterungen ändern oder eine ausgefallene Typografie verwenden. Sie wollen jedoch Flexibilität – deshalb sollten die Nutzer/innen zwischen zwei vorgegebenen Schaltflächenstilen wählen können:
- Primärer Button – Der wichtigste Call-to-Action-Button mit festem Hintergrund und fettgedrucktem Design.
- Sekundärer Button – Ein dezenterer, umrandeter Button, der normalerweise für sekundäre Aktionen verwendet wird.
Um dies zu erreichen, müssen wir:
- Die Styles-API verwenden, um die beiden Button-Stile zu definieren.
- Die Supports-API verwenden, um unnötige Einstellungen zu entfernen und sicherzustellen, dass die Nutzer das Branding nicht manuell überschreiben, indem sie Farben, Abstände oder die Typografie ändern.
Durch die Kombination beider APIs ermöglichen wir strukturierte Auswahlmöglichkeiten und verhindern gleichzeitig, dass die Nutzer das Designsystem zerstören.
Schritt 1: Definiere benutzerdefinierte Schaltflächenstile
Beginne damit, den folgenden Code in die Datei functions.php einzufügen:
function register_custom_button_styles() {
register_block_style(
'core/button',
array(
'name' => 'primary-button',
'label' => __( 'Primary Button', 'your-text-domain' ),
'inline_style' => '
.wp-block-button.is-style-primary-button .wp-block-button__link {
background-color: #4D4D4D;
color: #ffffff;
padding: 12px 24px;
border-radius: 4px;
font-size: 1em;
font-weight: 500;
text-transform: none;
box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.1);
}
',
)
);
register_block_style(
'core/button',
array(
'name' => 'secondary-button',
'label' => __( 'Secondary Button', 'your-text-domain' ),
'inline_style' => '
.wp-block-button.is-style-secondary-button .wp-block-button__link {
background-color: transparent;
color: #4D4D4D;
padding: 12px 24px;
border: 1px solid #4D4D4D;
border-radius: 4px;
font-size: 1em;
font-weight: 500;
text-transform: none;
box-shadow: none;
}
',
)
);
}
add_action( 'init', 'register_custom_button_styles' );Wenn du jetzt einen Button-Block einfügst, siehst du den primären Button und den sekundären Button als Auswahlmöglichkeit für den Stil.
Die primäre Schaltfläche hat einen einfarbigen dunkelgrauen Hintergrund, während die sekundäre Schaltfläche einen transparenten Hintergrund mit einem Rahmen hat. Beide Schaltflächen haben eine einheitliche Füllung, einen einheitlichen Rahmenradius und eine einheitliche Schriftart, um ein professionelles Erscheinungsbild auf der gesamten Website zu gewährleisten.
Schritt 2: Einschränkung der Button-Anpassung
Auch wenn die Schaltflächenstile jetzt vordefiniert sind, können die Nutzer/innen sie immer noch manuell in den Einstellungen des WordPress-Blockeditors überschreiben. Wenn sie die Farben, die Füllung oder die Typografie ändern, entsprechen die Schaltflächen möglicherweise nicht mehr den Markenrichtlinien.
Mit der Supports-API können wir diese Anpassungsoptionen deaktivieren und so verhindern, dass die Nutzer/innen unbeabsichtigte Änderungen vornehmen. Füge dies zu functions.php hinzu:
function restrict_button_customization($args, $block_type) {
if ($block_type === 'core/button') {
// Disable specific color settings (text, background, link)
$args['supports']['color'] = [
'text' => false,
'background' => false,
'link' => false,
];
// Disable typography settings (font size, font weight, line height)
$args['supports']['typography'] = false;
// Disable spacing settings (padding, margin)
$args['supports']['spacing'] = false;
}
return $args;
}
add_filter('register_block_type_args', 'restrict_button_customization', 10, 2);Mit dieser Funktion:
- Die Nutzer können die Farbe der Schaltflächen nicht ändern, sodass alle Schaltflächen dem Farbschema der Marke entsprechen müssen.
- Typografie-Steuerungen werden entfernt, damit die Textformatierung einheitlich bleibt.
- Die Einstellungen für die Abstände sind deaktiviert, so dass die Nutzer/innen die Abstände und Ränder nicht mehr ändern können.
Anstatt den Nutzern die Möglichkeit zu geben, eine wahllose Mischung von Schaltflächenstilen zu erstellen, können sie jetzt einfach zwischen einem primären und einem sekundären Stil wählen, wodurch das Design professionell und strukturiert bleibt.
Zusammenfassung
Wir haben nur an der Oberfläche dessen gekratzt, was mit der Anpassung von WordPress-Blöcken möglich ist. WordPress bietet eine große Sammlung von APIs, mit denen sich Blöcke leicht erweitern und anpassen lassen. So können Entwickler den Editor individuell gestalten und gleichzeitig für ein strukturiertes und benutzerfreundliches Design sorgen.
Wenn du die Blockanpassung wirklich beherrschen willst, gibt es noch so viel mehr zu entdecken. Sieh dir die offizielle WordPress-Entwicklerdokumentation an, besuche WordCamps und Meetups und lerne weiter in großartigen Ressourcen wie dem Kinsta-Blog, in dem wir regelmäßig fortgeschrittene WordPress-Konzepte erläutern.
Mit einem soliden Hosting-Anbieter ist es natürlich mühelos, mit diesen Änderungen zu experimentieren. Egal, ob du neue Blockmodifikationen ausprobierst oder eine stark frequentierte Website verwaltest, zuverlässiges Hosting sorgt für reibungslose Leistung und einfache Skalierbarkeit. Wir bei Kinsta haben unsere Plattform so entwickelt, dass sie genau das kann. Kürzlich wurden wir von G2 auf Platz 1 im Bereich WordPress-Hosting gewählt, dank über 930 Kundenrezensionen.
Das spricht für sich selbst: Du kannst uns vertrauen, wenn es um dein WordPress-Erlebnis geht.
Joel ist Frontend-Entwickler und arbeitet bei Kinsta als Technical Editor. Er ist ein leidenschaftlicher Lehrer mit einer Vorliebe für Open Source und hat über 200 technische Artikel geschrieben, die sich hauptsächlich um JavaScript und seine Frameworks drehen.
