Mit dieser Reihe praktischer Materialien m\u00f6chte ich Ihnen zeigen, wie weit die WordPress-Entwicklung gekommen ist. Im Jahr 2024 ist ein WordPress-Entwickler in erster Linie ein Frontend-Entwickler, der \u00fcber fundierte Kenntnisse in HTML\/CSS, React, den Besonderheiten von WordPress sowie PHP verf\u00fcgen muss, um das Backend f\u00fcr die erstellten Bl\u00f6cke selbstst\u00e4ndig zu schreiben. Geben Sie es zu: Sie dachten, es gehe nur darum, in Elementor auf Schaltfl\u00e4chen zu klicken, oder? \ud83d\ude42<\/p>\n\n\n\n
Der WordPress-Block-Editor (Gutenberg) hat den Prozess der Erstellung und Bearbeitung von Inhalten auf WordPress-Websites grundlegend ver\u00e4ndert und bietet Entwicklern leistungsstarke Werkzeuge zum Erstellen anpassbarer und funktionaler Bl\u00f6cke. In diesem Leitfaden erstellen wir unsere eigene \u201eTodo-Listen\u201c-Komponente, mit der Benutzer Aufgabenlisten erstellen und Daten an den Server senden k\u00f6nnen, wenn sich der Status von Aufgaben \u00e4ndert.<\/p>\n\n\n\n
Der von uns erstellte Block wird aus mehreren wichtigen Elementen bestehen:<\/p>\n\n\n\n
Jeder Block wird als separates Plugin erstellt, das in anderen WordPress-Projekten wiederverwendet werden kann. So k\u00f6nnen Sie den erstellten Block problemlos in andere auf WordPress basierende Websites integrieren.<\/p>\n\n\n\n
Bevor wir mit der Erstellung der Komponente beginnen, ist es wichtig sicherzustellen, dass Ihre Entwicklungsumgebung korrekt eingerichtet ist. F\u00fcr die Entwicklung des Blocks ben\u00f6tigen Sie die folgenden Werkzeuge:<\/p>\n\n\n\n
Falls Node.js und npm noch nicht auf Ihrem Computer installiert sind, laden Sie sie von der offiziellen Node.js-Website herunter und installieren Sie sie.<\/p>\n\n\n\n
F\u00fchren Sie nach der Installation die folgenden Befehle aus, um sicherzustellen, dass alles korrekt installiert ist:<\/p>\n\n\n\n
node -v\nnpm -v<\/code><\/pre>\n\n\n\nWenn die Befehle Versionsnummern zur\u00fcckgeben, funktioniert alles korrekt.<\/p>\n\n\n\n
Erstellen des Todo-Listen-Blocks<\/h3>\n\n\n\n
Um den Prozess der Blockerstellung zu beschleunigen, k\u00f6nnen Sie einen Befehl verwenden, der automatisch die gesamte Projektstruktur einschlie\u00dflich Konfigurationen und Dateien generiert.<\/p>\n\n\n\n
Schritt 1: Erstellen des Blocks per Befehl<\/h3>\n\n\n\n
\u00d6ffnen Sie Ihr Terminal und f\u00fchren Sie den folgenden Befehl aus, um den Block \u201eTodo-Liste\u201c automatisch zu erstellen:<\/p>\n\n\n\n
npx @wordpress\/create-block@latest todo-list<\/code><\/pre>\n\n\n\nDieser Befehl f\u00fchrt die folgenden Schritte f\u00fcr Sie aus:<\/p>\n\n\n\n
\n- Projektinitialisierung:<\/strong> Der Befehl erstellt ein neues Verzeichnis namens\u00a0todo-list, das alle erforderlichen Dateien und die Struktur f\u00fcr den Block enth\u00e4lt.<\/li>\n\n\n\n
- Installation von Abh\u00e4ngigkeiten:<\/strong> Alle erforderlichen Pakete, etwa\u00a0@wordpress\/scripts, werden automatisch installiert.<\/li>\n\n\n\n
- Erstellung der Dateistruktur:<\/strong> Die Struktur umfasst die Ordner\u00a0src\u00a0und\u00a0build\u00a0sowie eine Datei\u00a0index.js\u00a0mit dem grundlegenden Code f\u00fcr den Block.<\/li>\n\n\n\n
- Einrichtung von <\/strong>block.json:\u00a0Diese Datei wird mit der grundlegenden Konfiguration erstellt, die den Block \u201eTodo-Liste\u201c definiert.<\/li>\n<\/ol>\n\n\n\n
Dateistruktur und Beschreibung<\/h3>\n\n\n\n
Nach Ausf\u00fchrung des Befehls wird die folgende Projektstruktur erstellt:<\/p>\n\n\n\n
todo-list\/\n\u2502\n\u251c\u2500\u2500 src\/\n\u2502 \u2514\u2500\u2500 index.js\n\u2502\n\u251c\u2500\u2500 build\/\n\u2502\n\u251c\u2500\u2500 block.json\n\u251c\u2500\u2500 package.json\n\u2514\u2500\u2500 README.md<\/code><\/pre>\n\n\n\n1. src\/index.js<\/h3>\n\n\n\n
Die Datei index.js im Ordner src enth\u00e4lt den gesamten Quellcode f\u00fcr Ihren Block. Hier wird die Logik des Blocks implementiert, einschlie\u00dflich seines Erscheinungsbilds und der Interaktion mit dem Benutzer. Die Hauptbestandteile des Codes umfassen die Registrierung des Blocks mit der Funktion registerBlockType, das Einrichten von Attributen sowie die Definition der Funktionen zum Bearbeiten und Speichern des Blocks.<\/p>\n\n\n\n
Beispielinhalt von index.js:<\/p>\n\n\n\n
import { registerBlockType } from '@wordpress\/blocks';\nimport { useState } from '@wordpress\/element';\nimport { RichText, InspectorControls } from '@wordpress\/block-editor';\nimport { PanelBody, CheckboxControl } from '@wordpress\/components';\n\nregisterBlockType('todo-plugin\/todo-list', {\n title: 'Todo List',\n icon: 'list-view',\n category: 'widgets',\n attributes: {\n tasks: {\n type: 'array',\n default: [],\n },\n },\n edit({ attributes, setAttributes }) {\n const { tasks } = attributes;\n const [taskText, setTaskText] = useState('');\n\n const addTask = () => {\n if (taskText) {\n const newTasks = [...tasks, { text: taskText, done: false }];\n setAttributes({ tasks: newTasks });\n setTaskText('');\n sendTasksToServer(newTasks);\n }\n };\n\n const toggleTaskDone = (index) => {\n const newTasks = tasks.map((task, i) =>\n i === index ? { ...task, done: !task.done } : task\n );\n setAttributes({ tasks: newTasks });\n sendTasksToServer(newTasks);\n };\n\n const sendTasksToServer = (tasks) => {\n \/\/ Example of sending data to the server\n fetch('\/wp-json\/todo\/v1\/update', {\n method: 'POST',\n headers: {\n 'Content-Type': 'application\/json',\n },\n body: JSON.stringify({ tasks }),\n });\n };\n\n return (\n <div>\n <InspectorControls>\n <PanelBody title=\"Tasks\">\n {tasks.map((task, index) => (\n <CheckboxControl\n key={index}\n label={task.text}\n checked={task.done}\n onChange={() => toggleTaskDone(index)}\n \/>\n ))}\n <\/PanelBody>\n <\/InspectorControls>\n <div>\n <RichText\n tagName=\"p\"\n value={taskText}\n onChange={(text) => setTaskText(text)}\n placeholder=\"Enter new task\"\n \/>\n <button onClick={addTask}>Add Task<\/button>\n <\/div>\n <ul>\n {tasks.map((task, index) => (\n <li key={index}>\n <CheckboxControl\n label={task.text}\n checked={task.done}\n onChange={() => toggleTaskDone(index)}\n \/>\n <\/li>\n ))}\n <\/ul>\n <\/div>\n );\n },\n save({ attributes }) {\n const { tasks } = attributes;\n\n return (\n <ul>\n {tasks.map((task, index) => (\n <li key={index}>\n <RichText.Content\n tagName=\"span\"\n value={task.text}\n style={{ textDecoration: task.done ? 'line-through' : 'none' }}\n \/>\n <\/li>\n ))}\n <\/ul>\n );\n },\n});<\/code><\/pre>\n\n\n\n2.\u00a0build<\/h3>\n\n\n\n
Der Ordner build ist zum Speichern kompilierter Dateien vorgesehen. Nach dem Build des Projekts mit dem Befehl npm run build wird die einsatzbereite Datei index.js in diesem Ordner abgelegt, die von WordPress zum Anzeigen und Betreiben des Blocks verwendet wird.<\/p>\n\n\n\n
3. block.json<\/h3>\n\n\n\n
Die Datei block.json enth\u00e4lt Metadaten f\u00fcr Ihren Block. Sie definiert den Namen, die Kategorie, das Icon, die Skripte und die f\u00fcr den Betrieb erforderlichen Styles des Blocks. Diese Datei ist f\u00fcr die Registrierung des Blocks in WordPress unerl\u00e4sslich.<\/p>\n\n\n\n
Beispielinhalt von block.json:<\/p>\n\n\n\n
{\n \"apiVersion\": 2,\n \"name\": \"todo-plugin\/todo-list\",\n \"title\": \"Todo List\",\n \"category\": \"widgets\",\n \"icon\": \"list-view\",\n \"description\": \"A customizable todo list block.\",\n \"keywords\": [ \"todo\", \"tasks\", \"list\" ],\n \"version\": \"1.0.0\",\n \"textdomain\": \"todo-list\",\n \"editorScript\": \"file:.\/build\/index.js\"\n}<\/code><\/pre>\n\n\n\n4. package.json<\/h3>\n\n\n\n
Die Datei package.json enth\u00e4lt Informationen \u00fcber das Projekt und seine Abh\u00e4ngigkeiten. Sie verwaltet die Installation und Verwendung der Pakete, die f\u00fcr die Entwicklung und den Build des Blocks erforderlich sind. Diese Datei wird bei der Projektinitialisierung automatisch erstellt und aktualisiert, wenn neue Abh\u00e4ngigkeiten hinzugef\u00fcgt werden.<\/p>\n\n\n\n
Beispielinhalt von package.json:<\/p>\n\n\n\n
{\n \"name\": \"todo-list\",\n \"version\": \"1.0.0\",\n \"description\": \"A custom block for todo list\",\n \"scripts\": {\n \"build\": \"wp-scripts build\",\n \"start\": \"wp-scripts start\"\n },\n \"devDependencies\": {\n \"@wordpress\/scripts\": \"^24.0.0\"\n }\n}<\/code><\/pre>\n\n\n\n5. README.md<\/h3>\n\n\n\n
Die Datei README.md enth\u00e4lt eine Beschreibung des Projekts, Installations- und Nutzungshinweise sowie weitere wichtige Informationen, die Entwickler oder Benutzer ben\u00f6tigen k\u00f6nnten. Diese Datei ist f\u00fcr die Projektdokumentation hilfreich.<\/p>\n\n\n\n
Erstellen des Projekts<\/h3>\n\n\n\n
Nachdem Sie \u00c4nderungen am Code vorgenommen haben, erstellen Sie das Projekt, um eine einsatzbereite Datei f\u00fcr WordPress zu erhalten:<\/p>\n\n\n\n
npm run build<\/pre>\n\n\n\nDer Befehl build kompiliert Ihren Code und legt ihn im Ordner build ab.<\/p>\n\n\n\n
Registrierung des Blocks in WordPress<\/h3>\n\n\n\n
Jetzt, da der Block fertig ist, muss er in WordPress registriert werden. F\u00fcgen Sie dazu den folgenden Code zu Ihrer Plugin- oder Theme-Datei hinzu:<\/p>\n\n\n\n
function todo_plugin_register_block() {\n wp_register_script(\n 'todo-list-editor-script',\n plugins_url( 'build\/index.js', __FILE__ ),\n array( 'wp-blocks', 'wp-element', 'wp-editor' ),\n filemtime( plugin_dir_path( __FILE__ ) . 'build\/index.js' )\n );\n\n register_block_type( 'todo-plugin\/todo-list', array(\n 'editor_script' => 'todo-list-editor-script',\n ) );\n}\nadd_action( 'init', 'todo_plugin_register_block' );<\/code><\/pre>\n\n\n\nDieser Code registriert Ihren Block in WordPress und reiht die kompilierte JavaScript-Datei in die Warteschlange ein.<\/p>\n\n\n\n
Fazit<\/h3>\n\n\n\n
Der Befehl npx @wordpress\/create-block@latest beschleunigt den Prozess der Erstellung eines neuen Blocks f\u00fcr den WordPress-Block-Editor erheblich. In diesem Leitfaden haben wir erl\u00e4utert, wie Sie einen \u201eTodo-Listen\u201c-Block erstellen, mit dem Benutzer Aufgabenlisten erstellen und deren Erledigungsstatus verwalten k\u00f6nnen, wobei Daten an den Server gesendet werden. Diese Komponente kann durch neue Funktionen und eine verbesserte Benutzerinteraktion erweitert werden und er\u00f6ffnet vielf\u00e4ltige M\u00f6glichkeiten zur Anpassung Ihrer WordPress-Website.<\/p>\n","protected":false},"excerpt":{"rendered":"
Mit dieser Reihe praktischer Materialien m\u00f6chte ich Ihnen zeigen, wie weit die WordPress-Entwicklung gekommen ist. Im Jahr 2024 ist ein WordPress-Entwickler in erster Linie ein Frontend-Entwickler, der \u00fcber fundierte Kenntnisse in HTML\/CSS, React, den Besonderheiten von WordPress sowie PHP verf\u00fcgen muss, um das Backend f\u00fcr die erstellten Bl\u00f6cke selbstst\u00e4ndig zu schreiben. Geben Sie es zu: […]<\/p>\n","protected":false},"author":1,"featured_media":906,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"footnotes":""},"categories":[1],"tags":[],"class_list":["post-1877","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized"],"acf":[],"yoast_head":"\n
Erstellung einer Todo-Listen-Komponente f\u00fcr den WordPress-Block-Editor \u2013 Teil 1 - asgru<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/asgru.com\/de\/erstellung-einer-todo-listen-komponente-fur-den-wordpress-block-editor-teil-1\/\" \/>\n<meta property=\"og:locale\" content=\"de_DE\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Erstellung einer Todo-Listen-Komponente f\u00fcr den WordPress-Block-Editor \u2013 Teil 1 - asgru\" \/>\n<meta property=\"og:description\" content=\"Mit dieser Reihe praktischer Materialien m\u00f6chte ich Ihnen zeigen, wie weit die WordPress-Entwicklung gekommen ist. Im Jahr 2024 ist ein WordPress-Entwickler in erster Linie ein Frontend-Entwickler, der \u00fcber fundierte Kenntnisse in HTML\/CSS, React, den Besonderheiten von WordPress sowie PHP verf\u00fcgen muss, um das Backend f\u00fcr die erstellten Bl\u00f6cke selbstst\u00e4ndig zu schreiben. Geben Sie es zu: […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/asgru.com\/de\/erstellung-einer-todo-listen-komponente-fur-den-wordpress-block-editor-teil-1\/\" \/>\n<meta property=\"og:site_name\" content=\"asgru\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/asgru.wp\/\" \/>\n<meta property=\"article:published_time\" content=\"2024-08-19T05:56:15+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-09-14T01:28:12+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/asgru.com\/wp-content\/uploads\/2024\/08\/to-do-scaled.png\" \/>\n\t<meta property=\"og:image:width\" content=\"2560\" \/>\n\t<meta property=\"og:image:height\" content=\"1186\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"asgru\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@ArtemKondranin\" \/>\n<meta name=\"twitter:site\" content=\"@ArtemKondranin\" \/>\n<meta name=\"twitter:label1\" content=\"Verfasst von\" \/>\n\t<meta name=\"twitter:data1\" content=\"asgru\" \/>\n\t<meta name=\"twitter:label2\" content=\"Gesch\u00e4tzte Lesezeit\" \/>\n\t<meta name=\"twitter:data2\" content=\"7\u00a0Minuten\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/asgru.com\\\/de\\\/erstellung-einer-todo-listen-komponente-fur-den-wordpress-block-editor-teil-1\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/asgru.com\\\/de\\\/erstellung-einer-todo-listen-komponente-fur-den-wordpress-block-editor-teil-1\\\/\"},\"author\":{\"name\":\"asgru\",\"@id\":\"https:\\\/\\\/asgru.com\\\/de\\\/#\\\/schema\\\/person\\\/8f6cca385f5ae3eb7802b1e40b721576\"},\"headline\":\"Erstellung einer Todo-Listen-Komponente f\u00fcr den WordPress-Block-Editor \u2013 Teil 1\",\"datePublished\":\"2024-08-19T05:56:15+00:00\",\"dateModified\":\"2026-09-14T01:28:12+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/asgru.com\\\/de\\\/erstellung-einer-todo-listen-komponente-fur-den-wordpress-block-editor-teil-1\\\/\"},\"wordCount\":981,\"publisher\":{\"@id\":\"https:\\\/\\\/asgru.com\\\/de\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/asgru.com\\\/de\\\/erstellung-einer-todo-listen-komponente-fur-den-wordpress-block-editor-teil-1\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/asgru.com\\\/wp-content\\\/uploads\\\/2024\\\/08\\\/to-do-scaled.png\",\"articleSection\":[\"Uncategorized\"],\"inLanguage\":\"de\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/asgru.com\\\/de\\\/erstellung-einer-todo-listen-komponente-fur-den-wordpress-block-editor-teil-1\\\/\",\"url\":\"https:\\\/\\\/asgru.com\\\/de\\\/erstellung-einer-todo-listen-komponente-fur-den-wordpress-block-editor-teil-1\\\/\",\"name\":\"Erstellung einer Todo-Listen-Komponente f\u00fcr den WordPress-Block-Editor \u2013 Teil 1 - asgru\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/asgru.com\\\/de\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/asgru.com\\\/de\\\/erstellung-einer-todo-listen-komponente-fur-den-wordpress-block-editor-teil-1\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/asgru.com\\\/de\\\/erstellung-einer-todo-listen-komponente-fur-den-wordpress-block-editor-teil-1\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/asgru.com\\\/wp-content\\\/uploads\\\/2024\\\/08\\\/to-do-scaled.png\",\"datePublished\":\"2024-08-19T05:56:15+00:00\",\"dateModified\":\"2026-09-14T01:28:12+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/asgru.com\\\/de\\\/erstellung-einer-todo-listen-komponente-fur-den-wordpress-block-editor-teil-1\\\/#breadcrumb\"},\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/asgru.com\\\/de\\\/erstellung-einer-todo-listen-komponente-fur-den-wordpress-block-editor-teil-1\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\\\/\\\/asgru.com\\\/de\\\/erstellung-einer-todo-listen-komponente-fur-den-wordpress-block-editor-teil-1\\\/#primaryimage\",\"url\":\"https:\\\/\\\/asgru.com\\\/wp-content\\\/uploads\\\/2024\\\/08\\\/to-do-scaled.png\",\"contentUrl\":\"https:\\\/\\\/asgru.com\\\/wp-content\\\/uploads\\\/2024\\\/08\\\/to-do-scaled.png\",\"width\":2560,\"height\":1186},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/asgru.com\\\/de\\\/erstellung-einer-todo-listen-komponente-fur-den-wordpress-block-editor-teil-1\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/asgru.com\\\/de\\\/home\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Erstellung einer Todo-Listen-Komponente f\u00fcr den WordPress-Block-Editor \u2013 Teil 1\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/asgru.com\\\/de\\\/#website\",\"url\":\"https:\\\/\\\/asgru.com\\\/de\\\/\",\"name\":\"asgru\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\\\/\\\/asgru.com\\\/de\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/asgru.com\\\/de\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"de\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/asgru.com\\\/de\\\/#organization\",\"name\":\"asgru\",\"url\":\"https:\\\/\\\/asgru.com\\\/de\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\\\/\\\/asgru.com\\\/de\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/asgru.com\\\/wp-content\\\/uploads\\\/2025\\\/06\\\/logo-black.svg\",\"contentUrl\":\"https:\\\/\\\/asgru.com\\\/wp-content\\\/uploads\\\/2025\\\/06\\\/logo-black.svg\",\"caption\":\"asgru\"},\"image\":{\"@id\":\"https:\\\/\\\/asgru.com\\\/de\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/asgru.wp\\\/\",\"https:\\\/\\\/x.com\\\/ArtemKondranin\",\"https:\\\/\\\/www.linkedin.com\\\/in\\\/asgru\\\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/asgru.com\\\/de\\\/#\\\/schema\\\/person\\\/8f6cca385f5ae3eb7802b1e40b721576\",\"name\":\"asgru\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/8226b63c28c55f65ad493c4aacf00e751309b5d3005e6aef331fd48ac864080d?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/8226b63c28c55f65ad493c4aacf00e751309b5d3005e6aef331fd48ac864080d?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/8226b63c28c55f65ad493c4aacf00e751309b5d3005e6aef331fd48ac864080d?s=96&d=mm&r=g\",\"caption\":\"asgru\"},\"sameAs\":[\"http:\\\/\\\/asgru.loc\"],\"url\":\"https:\\\/\\\/asgru.com\\\/de\\\/author\\\/asgru\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Erstellung einer Todo-Listen-Komponente f\u00fcr den WordPress-Block-Editor \u2013 Teil 1 - asgru","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/asgru.com\/de\/erstellung-einer-todo-listen-komponente-fur-den-wordpress-block-editor-teil-1\/","og_locale":"de_DE","og_type":"article","og_title":"Erstellung einer Todo-Listen-Komponente f\u00fcr den WordPress-Block-Editor \u2013 Teil 1 - asgru","og_description":"Mit dieser Reihe praktischer Materialien m\u00f6chte ich Ihnen zeigen, wie weit die WordPress-Entwicklung gekommen ist. Im Jahr 2024 ist ein WordPress-Entwickler in erster Linie ein Frontend-Entwickler, der \u00fcber fundierte Kenntnisse in HTML\/CSS, React, den Besonderheiten von WordPress sowie PHP verf\u00fcgen muss, um das Backend f\u00fcr die erstellten Bl\u00f6cke selbstst\u00e4ndig zu schreiben. Geben Sie es zu: […]","og_url":"https:\/\/asgru.com\/de\/erstellung-einer-todo-listen-komponente-fur-den-wordpress-block-editor-teil-1\/","og_site_name":"asgru","article_publisher":"https:\/\/www.facebook.com\/asgru.wp\/","article_published_time":"2024-08-19T05:56:15+00:00","article_modified_time":"2026-09-14T01:28:12+00:00","og_image":[{"width":2560,"height":1186,"url":"https:\/\/asgru.com\/wp-content\/uploads\/2024\/08\/to-do-scaled.png","type":"image\/png"}],"author":"asgru","twitter_card":"summary_large_image","twitter_creator":"@ArtemKondranin","twitter_site":"@ArtemKondranin","twitter_misc":{"Verfasst von":"asgru","Gesch\u00e4tzte Lesezeit":"7\u00a0Minuten"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/asgru.com\/de\/erstellung-einer-todo-listen-komponente-fur-den-wordpress-block-editor-teil-1\/#article","isPartOf":{"@id":"https:\/\/asgru.com\/de\/erstellung-einer-todo-listen-komponente-fur-den-wordpress-block-editor-teil-1\/"},"author":{"name":"asgru","@id":"https:\/\/asgru.com\/de\/#\/schema\/person\/8f6cca385f5ae3eb7802b1e40b721576"},"headline":"Erstellung einer Todo-Listen-Komponente f\u00fcr den WordPress-Block-Editor \u2013 Teil 1","datePublished":"2024-08-19T05:56:15+00:00","dateModified":"2026-09-14T01:28:12+00:00","mainEntityOfPage":{"@id":"https:\/\/asgru.com\/de\/erstellung-einer-todo-listen-komponente-fur-den-wordpress-block-editor-teil-1\/"},"wordCount":981,"publisher":{"@id":"https:\/\/asgru.com\/de\/#organization"},"image":{"@id":"https:\/\/asgru.com\/de\/erstellung-einer-todo-listen-komponente-fur-den-wordpress-block-editor-teil-1\/#primaryimage"},"thumbnailUrl":"https:\/\/asgru.com\/wp-content\/uploads\/2024\/08\/to-do-scaled.png","articleSection":["Uncategorized"],"inLanguage":"de"},{"@type":"WebPage","@id":"https:\/\/asgru.com\/de\/erstellung-einer-todo-listen-komponente-fur-den-wordpress-block-editor-teil-1\/","url":"https:\/\/asgru.com\/de\/erstellung-einer-todo-listen-komponente-fur-den-wordpress-block-editor-teil-1\/","name":"Erstellung einer Todo-Listen-Komponente f\u00fcr den WordPress-Block-Editor \u2013 Teil 1 - asgru","isPartOf":{"@id":"https:\/\/asgru.com\/de\/#website"},"primaryImageOfPage":{"@id":"https:\/\/asgru.com\/de\/erstellung-einer-todo-listen-komponente-fur-den-wordpress-block-editor-teil-1\/#primaryimage"},"image":{"@id":"https:\/\/asgru.com\/de\/erstellung-einer-todo-listen-komponente-fur-den-wordpress-block-editor-teil-1\/#primaryimage"},"thumbnailUrl":"https:\/\/asgru.com\/wp-content\/uploads\/2024\/08\/to-do-scaled.png","datePublished":"2024-08-19T05:56:15+00:00","dateModified":"2026-09-14T01:28:12+00:00","breadcrumb":{"@id":"https:\/\/asgru.com\/de\/erstellung-einer-todo-listen-komponente-fur-den-wordpress-block-editor-teil-1\/#breadcrumb"},"inLanguage":"de","potentialAction":[{"@type":"ReadAction","target":["https:\/\/asgru.com\/de\/erstellung-einer-todo-listen-komponente-fur-den-wordpress-block-editor-teil-1\/"]}]},{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/asgru.com\/de\/erstellung-einer-todo-listen-komponente-fur-den-wordpress-block-editor-teil-1\/#primaryimage","url":"https:\/\/asgru.com\/wp-content\/uploads\/2024\/08\/to-do-scaled.png","contentUrl":"https:\/\/asgru.com\/wp-content\/uploads\/2024\/08\/to-do-scaled.png","width":2560,"height":1186},{"@type":"BreadcrumbList","@id":"https:\/\/asgru.com\/de\/erstellung-einer-todo-listen-komponente-fur-den-wordpress-block-editor-teil-1\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/asgru.com\/de\/home\/"},{"@type":"ListItem","position":2,"name":"Erstellung einer Todo-Listen-Komponente f\u00fcr den WordPress-Block-Editor \u2013 Teil 1"}]},{"@type":"WebSite","@id":"https:\/\/asgru.com\/de\/#website","url":"https:\/\/asgru.com\/de\/","name":"asgru","description":"","publisher":{"@id":"https:\/\/asgru.com\/de\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/asgru.com\/de\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"de"},{"@type":"Organization","@id":"https:\/\/asgru.com\/de\/#organization","name":"asgru","url":"https:\/\/asgru.com\/de\/","logo":{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/asgru.com\/de\/#\/schema\/logo\/image\/","url":"https:\/\/asgru.com\/wp-content\/uploads\/2025\/06\/logo-black.svg","contentUrl":"https:\/\/asgru.com\/wp-content\/uploads\/2025\/06\/logo-black.svg","caption":"asgru"},"image":{"@id":"https:\/\/asgru.com\/de\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/asgru.wp\/","https:\/\/x.com\/ArtemKondranin","https:\/\/www.linkedin.com\/in\/asgru\/"]},{"@type":"Person","@id":"https:\/\/asgru.com\/de\/#\/schema\/person\/8f6cca385f5ae3eb7802b1e40b721576","name":"asgru","image":{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/secure.gravatar.com\/avatar\/8226b63c28c55f65ad493c4aacf00e751309b5d3005e6aef331fd48ac864080d?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/8226b63c28c55f65ad493c4aacf00e751309b5d3005e6aef331fd48ac864080d?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/8226b63c28c55f65ad493c4aacf00e751309b5d3005e6aef331fd48ac864080d?s=96&d=mm&r=g","caption":"asgru"},"sameAs":["http:\/\/asgru.loc"],"url":"https:\/\/asgru.com\/de\/author\/asgru\/"}]}},"_links":{"self":[{"href":"https:\/\/asgru.com\/de\/wp-json\/wp\/v2\/posts\/1877","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/asgru.com\/de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/asgru.com\/de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/asgru.com\/de\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/asgru.com\/de\/wp-json\/wp\/v2\/comments?post=1877"}],"version-history":[{"count":1,"href":"https:\/\/asgru.com\/de\/wp-json\/wp\/v2\/posts\/1877\/revisions"}],"predecessor-version":[{"id":1878,"href":"https:\/\/asgru.com\/de\/wp-json\/wp\/v2\/posts\/1877\/revisions\/1878"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/asgru.com\/de\/wp-json\/wp\/v2\/media\/906"}],"wp:attachment":[{"href":"https:\/\/asgru.com\/de\/wp-json\/wp\/v2\/media?parent=1877"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/asgru.com\/de\/wp-json\/wp\/v2\/categories?post=1877"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/asgru.com\/de\/wp-json\/wp\/v2\/tags?post=1877"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}