Viele beschweren sich \u00fcber die H\u00fcrden, die der Einstieg in die Erstellung von Gutenberg-Bl\u00f6cken und -Apps mit sich bringt. Die Lernkurve ist steil, was vor allem an der Schwierigkeit liegt, die Entwicklungsumgebung zu installieren und zu konfigurieren. Au\u00dferdem sind solide Kenntnisse in JavaScript, Node.js, React und Redux ein Muss f\u00fcr dieses komplexe Rezept.<\/p>\n
Das offizielle WordPress-Handbuch f\u00fcr Block-Editoren<\/a> bietet Entwicklern eine enorme Menge an Informationen, aber es kann sein, dass du dich in diesem Meer von Details verlierst.<\/p>\n Und es ist erw\u00e4hnenswert, was Mat\u00edas Ventura, leitender Architekt des Gutenberg-Projekts, in seinem Interview mit WP Tavern<\/a> berichtet hat:<\/p>\n Auch wenn es Leute gibt, die es schnell lernen k\u00f6nnen, ist es immer noch eine gro\u00dfe H\u00fcrde f\u00fcr viele. Ich denke, dass es mehrere Ebenen gibt; die Dokumentation k\u00f6nnte sowohl in der Organisation als auch in der Pr\u00e4sentation um Gr\u00f6\u00dfenordnungen besser sein. Ich hoffe, wir k\u00f6nnen da noch viel mehr tun.<\/em><\/p><\/blockquote>\n Deshalb haben wir beschlossen, ein Schritt-f\u00fcr-Schritt-Tutorial zu erstellen, das unseren Lesern den Einstieg in die Gutenberg-Blockentwicklung erleichtern soll.<\/p>\n Klingt interessant? Dann nichts wie los!<\/p>\n F\u00fcr dieses Tutorial brauchst du nur gute Kenntnisse in der Entwicklung von WordPress Plugins und zumindest ein Grundverst\u00e4ndnis von HTML<\/a>, CSS, JavaScript und React.<\/p>\n Wird dies ein ehrgeiziges Projekt sein? Und ob es das ist!<\/p>\n Es war nicht einfach, den richtigen Kompromiss zwischen Vollst\u00e4ndigkeit und Einfachheit zu finden und zu entscheiden, welche Themen wir aufnehmen und welche wir weglassen.<\/p>\n Wir hoffen, dass fortgeschrittene Leserinnen und Leser uns verzeihen werden, wenn wir auf bestimmte Konzepte wie React State<\/a>, Redux Store<\/a>, High Order Components<\/a> usw. nicht n\u00e4her eingehen. Diese Themen ben\u00f6tigen mehr Platz und Aufmerksamkeit und sind f\u00fcr Anf\u00e4nger in der Blockentwicklung wahrscheinlich zu fortgeschritten (es sei denn, du bist ein React-Entwickler).<\/p>\n Aus demselben Grund werden wir einige der fortgeschritteneren Themen im Zusammenhang mit der Entwicklung von Gutenberg-Bl\u00f6cken, wie dynamische Bl\u00f6cke<\/a> und Metaboxen<\/a>, nicht behandeln.<\/p>\n Mit dem Wissen, das du am Ende dieses Artikels erworben hast, kannst du sofort loslegen und produktiv sein.<\/p>\n Wenn du erst einmal mit der Blockerstellung angefangen hast, kannst du deine F\u00e4higkeiten weiter ausbauen und noch fortgeschrittenere Gutenberg-Bl\u00f6cke selbst erstellen.<\/p>\n\n \u00a0<\/p>\n Seit seiner ersten Ver\u00f6ffentlichung im Dezember 2018 wurde der Block-Editor<\/a> in jeder Hinsicht stark verbessert: leistungsf\u00e4higere APIs<\/a>, eine fortschrittlichere Benutzeroberfl\u00e4che, verbesserte Benutzerfreundlichkeit, jede Menge neue Bl\u00f6cke, die ersten Implementierungen von Full Site Editing<\/a> und vieles mehr.<\/p>\n Kurz gesagt: Auch wenn Gutenberg immer noch intensiv weiterentwickelt wird, hat es einen weiten Weg zur\u00fcckgelegt – und heute ist der Block-Editor ein vollwertiger Kandidat f\u00fcr einen zuverl\u00e4ssigen, funktionalen Seiten- und Website-Builder.<\/p>\n Aus der Sicht eines Entwicklers ist Gutenberg eine React-basierte Single Page Application<\/a> (SPA), mit der WordPress-Nutzer Inhalte in WordPress erstellen, bearbeiten und l\u00f6schen k\u00f6nnen. Das sollte dich jedoch nicht an eine verbesserte Version des traditionellen Inhaltseditors<\/a> denken lassen.<\/p>\n Das wollen wir klarstellen:<\/p>\nGutenberg-Block-Entwicklung Voraussetzungen<\/h2>\n
Was ist ein Gutenberg-Block?<\/h2>\n