Mit dieser Reihe praktischer Materialien möchte ich Ihnen zeigen, wie weit die WordPress-Entwicklung gekommen ist. Im Jahr 2024 ist ein WordPress-Entwickler in erster Linie ein Frontend-Entwickler, der über fundierte Kenntnisse in HTML/CSS, React, den Besonderheiten von WordPress sowie PHP verfügen muss, um das Backend für die erstellten Blöcke selbstständig zu schreiben. Geben Sie es zu: Sie dachten, es gehe nur darum, in Elementor auf Schaltflächen zu klicken, oder? 🙂
Der WordPress-Block-Editor (Gutenberg) hat den Prozess der Erstellung und Bearbeitung von Inhalten auf WordPress-Websites grundlegend verändert und bietet Entwicklern leistungsstarke Werkzeuge zum Erstellen anpassbarer und funktionaler Blöcke. In diesem Leitfaden erstellen wir unsere eigene „Todo-Listen“-Komponente, mit der Benutzer Aufgabenlisten erstellen und Daten an den Server senden können, wenn sich der Status von Aufgaben ändert.
Grundlegende Elemente des Blocks
Der von uns erstellte Block wird aus mehreren wichtigen Elementen bestehen:
- RichText: Eine Komponente, mit der Benutzer Text innerhalb des Blocks eingeben und bearbeiten können.
- InspectorControls: Ein Bereich, der Einstellungen und Steuerelemente für den Block im Editor bereitstellt.
- CheckboxControl: Ein Steuerelement, das verwendet wird, um Aufgaben als erledigt zu markieren.
- useState: Ein Hook, der den Status von Aufgaben innerhalb des Blocks verwaltet.
- fetch API: Wird verwendet, um Aufgabendaten an den Server zu senden.
Jeder Block wird als separates Plugin erstellt, das in anderen WordPress-Projekten wiederverwendet werden kann. So können Sie den erstellten Block problemlos in andere auf WordPress basierende Websites integrieren.
Einrichten der Entwicklungsumgebung
Bevor wir mit der Erstellung der Komponente beginnen, ist es wichtig sicherzustellen, dass Ihre Entwicklungsumgebung korrekt eingerichtet ist. Für die Entwicklung des Blocks benötigen Sie die folgenden Werkzeuge:
- WordPress: Stellen Sie sicher, dass Ihre WordPress-Version 5.0 oder höher ist, da der Block-Editor in dieser Version eingeführt wurde.
- Node.js und npm: Erforderlich für die Arbeit mit JavaScript und die Verwaltung von Abhängigkeiten.
- WP-CLI (optional): Ein Kommandozeilenwerkzeug für die Arbeit mit WordPress, das die Entwicklung vereinfachen kann.
Installation von Node.js und npm
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.
Führen Sie nach der Installation die folgenden Befehle aus, um sicherzustellen, dass alles korrekt installiert ist:
node -v
npm -vWenn die Befehle Versionsnummern zurückgeben, funktioniert alles korrekt.
Erstellen des Todo-Listen-Blocks
Um den Prozess der Blockerstellung zu beschleunigen, können Sie einen Befehl verwenden, der automatisch die gesamte Projektstruktur einschließlich Konfigurationen und Dateien generiert.
Schritt 1: Erstellen des Blocks per Befehl
Öffnen Sie Ihr Terminal und führen Sie den folgenden Befehl aus, um den Block „Todo-Liste“ automatisch zu erstellen:
npx @wordpress/create-block@latest todo-listDieser Befehl führt die folgenden Schritte für Sie aus:
- Projektinitialisierung: Der Befehl erstellt ein neues Verzeichnis namens todo-list, das alle erforderlichen Dateien und die Struktur für den Block enthält.
- Installation von Abhängigkeiten: Alle erforderlichen Pakete, etwa @wordpress/scripts, werden automatisch installiert.
- Erstellung der Dateistruktur: Die Struktur umfasst die Ordner src und build sowie eine Datei index.js mit dem grundlegenden Code für den Block.
- Einrichtung von block.json: Diese Datei wird mit der grundlegenden Konfiguration erstellt, die den Block „Todo-Liste“ definiert.
Dateistruktur und Beschreibung
Nach Ausführung des Befehls wird die folgende Projektstruktur erstellt:
todo-list/
│
├── src/
│ └── index.js
│
├── build/
│
├── block.json
├── package.json
└── README.md1. src/index.js
Die Datei index.js im Ordner src enthält den gesamten Quellcode für Ihren Block. Hier wird die Logik des Blocks implementiert, einschließlich 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.
Beispielinhalt von index.js:
import { registerBlockType } from '@wordpress/blocks';
import { useState } from '@wordpress/element';
import { RichText, InspectorControls } from '@wordpress/block-editor';
import { PanelBody, CheckboxControl } from '@wordpress/components';
registerBlockType('todo-plugin/todo-list', {
title: 'Todo List',
icon: 'list-view',
category: 'widgets',
attributes: {
tasks: {
type: 'array',
default: [],
},
},
edit({ attributes, setAttributes }) {
const { tasks } = attributes;
const [taskText, setTaskText] = useState('');
const addTask = () => {
if (taskText) {
const newTasks = [...tasks, { text: taskText, done: false }];
setAttributes({ tasks: newTasks });
setTaskText('');
sendTasksToServer(newTasks);
}
};
const toggleTaskDone = (index) => {
const newTasks = tasks.map((task, i) =>
i === index ? { ...task, done: !task.done } : task
);
setAttributes({ tasks: newTasks });
sendTasksToServer(newTasks);
};
const sendTasksToServer = (tasks) => {
// Example of sending data to the server
fetch('/wp-json/todo/v1/update', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({ tasks }),
});
};
return (
<div>
<InspectorControls>
<PanelBody title="Tasks">
{tasks.map((task, index) => (
<CheckboxControl
key={index}
label={task.text}
checked={task.done}
onChange={() => toggleTaskDone(index)}
/>
))}
</PanelBody>
</InspectorControls>
<div>
<RichText
tagName="p"
value={taskText}
onChange={(text) => setTaskText(text)}
placeholder="Enter new task"
/>
<button onClick={addTask}>Add Task</button>
</div>
<ul>
{tasks.map((task, index) => (
<li key={index}>
<CheckboxControl
label={task.text}
checked={task.done}
onChange={() => toggleTaskDone(index)}
/>
</li>
))}
</ul>
</div>
);
},
save({ attributes }) {
const { tasks } = attributes;
return (
<ul>
{tasks.map((task, index) => (
<li key={index}>
<RichText.Content
tagName="span"
value={task.text}
style={{ textDecoration: task.done ? 'line-through' : 'none' }}
/>
</li>
))}
</ul>
);
},
});2. build
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.
3. block.json
Die Datei block.json enthält Metadaten für Ihren Block. Sie definiert den Namen, die Kategorie, das Icon, die Skripte und die für den Betrieb erforderlichen Styles des Blocks. Diese Datei ist für die Registrierung des Blocks in WordPress unerlässlich.
Beispielinhalt von block.json:
{
"apiVersion": 2,
"name": "todo-plugin/todo-list",
"title": "Todo List",
"category": "widgets",
"icon": "list-view",
"description": "A customizable todo list block.",
"keywords": [ "todo", "tasks", "list" ],
"version": "1.0.0",
"textdomain": "todo-list",
"editorScript": "file:./build/index.js"
}4. package.json
Die Datei package.json enthält Informationen über das Projekt und seine Abhängigkeiten. Sie verwaltet die Installation und Verwendung der Pakete, die für die Entwicklung und den Build des Blocks erforderlich sind. Diese Datei wird bei der Projektinitialisierung automatisch erstellt und aktualisiert, wenn neue Abhängigkeiten hinzugefügt werden.
Beispielinhalt von package.json:
{
"name": "todo-list",
"version": "1.0.0",
"description": "A custom block for todo list",
"scripts": {
"build": "wp-scripts build",
"start": "wp-scripts start"
},
"devDependencies": {
"@wordpress/scripts": "^24.0.0"
}
}5. README.md
Die Datei README.md enthält eine Beschreibung des Projekts, Installations- und Nutzungshinweise sowie weitere wichtige Informationen, die Entwickler oder Benutzer benötigen könnten. Diese Datei ist für die Projektdokumentation hilfreich.
Erstellen des Projekts
Nachdem Sie Änderungen am Code vorgenommen haben, erstellen Sie das Projekt, um eine einsatzbereite Datei für WordPress zu erhalten:
npm run build
Der Befehl build kompiliert Ihren Code und legt ihn im Ordner build ab.
Registrierung des Blocks in WordPress
Jetzt, da der Block fertig ist, muss er in WordPress registriert werden. Fügen Sie dazu den folgenden Code zu Ihrer Plugin- oder Theme-Datei hinzu:
function todo_plugin_register_block() {
wp_register_script(
'todo-list-editor-script',
plugins_url( 'build/index.js', __FILE__ ),
array( 'wp-blocks', 'wp-element', 'wp-editor' ),
filemtime( plugin_dir_path( __FILE__ ) . 'build/index.js' )
);
register_block_type( 'todo-plugin/todo-list', array(
'editor_script' => 'todo-list-editor-script',
) );
}
add_action( 'init', 'todo_plugin_register_block' );Dieser Code registriert Ihren Block in WordPress und reiht die kompilierte JavaScript-Datei in die Warteschlange ein.
Fazit
Der Befehl npx @wordpress/create-block@latest beschleunigt den Prozess der Erstellung eines neuen Blocks für den WordPress-Block-Editor erheblich. In diesem Leitfaden haben wir erläutert, wie Sie einen „Todo-Listen“-Block erstellen, mit dem Benutzer Aufgabenlisten erstellen und deren Erledigungsstatus verwalten können, wobei Daten an den Server gesendet werden. Diese Komponente kann durch neue Funktionen und eine verbesserte Benutzerinteraktion erweitert werden und eröffnet vielfältige Möglichkeiten zur Anpassung Ihrer WordPress-Website.