Eine vollständige Entwicklungsanleitung und praktische Fortgeschrittenentraining für den Gutenberg-Block-Editor von WordPress

Der Gutenberg Block Editor von WordPress hat die Art und Weise der Inhaltserstellung grundlegend verändert, indem er die Flexibilität und Kontrolle bei der Seitengestaltung direkt in die Hände der Redakteure legt. Für Entwickler bedeutet dies einen völlig neuen Entwicklungsansatz, der auf React und modernem JavaScript basiert. In diesem Artikel werden wir ausführlich erklären, wie man von Grund auf benutzerdefinierte Blöcke erstellt und anschließend fortgeschrittene Funktionen wie dynamische Blöcke sowie die Anwendung von Blöckvarianten entwickelt. Unser Ziel ist es, Ihnen eine umfassende, praxisorientierte Anleitung zur Entwicklung zu bieten.

Verständnis der Kernarchitektur des Blockeditors

Der Gutenberg Editor ist keine einzige, zusammenhängende Anwendung, sondern ein Ökosystem, das aus mehreren unabhängigen Paketen besteht. Das Verständnis seiner Architektur ist die Grundlage für effektive Entwicklung.

Trennung von Editor und Datenlayer

Die Editoroberfläche selbst ist von der Datenstruktur von WordPress getrennt. Das Kernsystem… @wordpress/editor Das Paket stellt die UI-Komponenten des Editors bereit. @wordpress/data Das Paket implementiert eine Zustandsverwaltung, die der von Redux ähnelt. Diese Trennung ermöglicht es den Entwicklern, sich auf die Darstellung und die Interaktionslogik der Blöcke zu konzentrieren, während die Datenspeicherung automatisch durch die Kernmechanismen von WordPress abgewickelt wird.

Empfohlene Lektüre Erlernen Sie die Anpassung von Artikeltypen in WordPress: Ein vollständiger praktischer Leitfaden von der Erstellung bis zur Veröffentlichung.。

Registrierung und Lebenszyklus von Blöcken

Jeder Block muss durchgehen/überprüft werden. registerBlockType Die Funktion wird registriert. Sie akzeptiert zwei Parameter: den eindeutigen Namen des Blocks (z. B.) my-plugin/my-custom-block) sowie ein Objekt, das alle Konfigurationsinformationen des Blocks enthält.
Nach der Registrierung durchläuft der Block verschiedene Lebenszyklusphasen, wie Initialisierung, Rendering, Bearbeitung und Speicherung. Entwickler definieren hauptsächlich die entsprechenden Abläufe und Funktionen durch die Festlegung der notwendigen Parameter und Konfigurationen. edit und save Zwei Schlüsselfunktionen zur Steuerung der Darstellung von Blöcken im Editor und auf der Benutzeroberfläche.

UltaHost – WordPress-Hosting-Anbieter

30-tägige Geld-zurück-Garantie, unbegrenztes Bandbreiten- und Datenbankvolumen, kostenlose DDoS-Schutzmaßnahmen sowie ein Rabatt von 501 auf 4 Terabyte bei einer Kaufdauer von 3 Jahren.

Zugangsseite

Von Grund auf erstellen Sie Ihr erstes benutzerdefiniertes Block.

Wir werden einen einfachen “Hervorhebungs-Hinweis”-Block erstellen, der es den Benutzern ermöglicht, einen Hinweisbereich mit Hintergrundfarbe und Titel hinzuzufügen.

Einrichten der Entwicklungsumgebung und der grundlegenden Dateien

Zuerst stellen Sie sicher, dass Ihre Entwicklungsumgebung bereit ist. Sie benötigen die Node.js- und npm-Umgebung. Erstellen Sie im Verzeichnis der Plugins ein neues Plugins-Verzeichnis, zum Beispiel: my-custom-blocksIn diesem Ordner erstellen Sie die folgenden Kerndateien:
- my-custom-blocks.php (Plugin-Hauptdatei)
- package.json (Dient zur Verwaltung von Node-Abhängigkeiten und Build-Skripten)
- src/ Verzeichnis (dient zum Speichern der Quellcode)
- build/ Verzeichnis (Ausgabeverzeichnis des Build-Tools, von WordPress gelesen)

„In“ package.json In diesem Prozess wird das Build-Skript konfiguriert und eingeführt. @wordpress/scripts Pakete können die Konfiguration von Tools wie Webpack und Babel erheblich vereinfachen.

{
  "name": "my-custom-blocks",
  "scripts": {
    "build": "wp-scripts build",
    "start": "wp-scripts start"
  },
  "devDependencies": {
    "@wordpress/scripts": "^26.0.0"
  }
}

Im Hauptdatei des Plugins my-custom-blocks.php In diesem Fall musst du register_block_type Eine Funktion, die WordPress mitteilt, woher die Daten stammen sollen… build Die Ressourcen des Inhaltsblocks zur Anzeige des Verzeichnisses werden geladen.

Empfohlene Lektüre Leitfaden für WordPress-Theme-Entwickler: Erstellung leistungsstarker benutzerdefinierter Themes von Grund auf。

<?php
/**
 * Plugin Name: My Custom Blocks
 */
function my_custom_blocks_register_block() {
    register_block_type( __DIR__ . '/build/highlight-box' );
}
add_action( 'init', 'my_custom_blocks_register_block' );

Der JavaScript-Quellcode zur Erstellung von Blöcken:

„In“ src Erstellen Sie einen Ordner im Verzeichnis. highlight-box/index.js Datei: Dies ist die Haupt-Eingangsdatei für den Block.

import { registerBlockType } from '@wordpress/blocks';
import { RichText, useBlockProps, InspectorControls, ColorPalette } from '@wordpress/block-editor';
import { PanelBody, PanelRow } from '@wordpress/components';

registerBlockType('my-custom-blocks/highlight-box', {
    title: '高亮提示框',
    icon: 'warning', // 从 Dashicons 中选择
    category: 'design',
    attributes: {
        title: {
            type: 'string',
            source: 'html',
            selector: '.highlight-title',
        },
        content: {
            type: 'string',
            source: 'html',
            selector: '.highlight-content',
        },
        backgroundColor: {
            type: 'string',
            default: '#fff3cd',
        },
    },
    edit: ({ attributes, setAttributes }) => {
        const blockProps = useBlockProps();
        const { title, content, backgroundColor } = attributes;

const onChangeTitle = (newTitle) => {
            setAttributes({ title: newTitle });
        };
        const onChangeContent = (newContent) => {
            setAttributes({ content: newContent });
        };
        const onChangeBackgroundColor = (newColor) => {
            setAttributes({ backgroundColor: newColor });
        };

return (
            <>
                <inspectorcontrols>
                    <panelbody title="Farbeneinstellungen">
                        <panelrow>
                            <colorpalette
                                value="{backgroundColor}"
                                onchange="{onChangeBackgroundColor}"
                            />
                        </panelrow>
                    </panelbody>
                </inspectorcontrols>
                <div {...blockprops} style="{{" backgroundcolor, padding: '20px', borderradius: '5px' }}>
                    <richtext
                        tagname="h3"
                        classname="highlight-title"
                        onchange="{onChangeTitle}"
                        value="{title}"
                        placeholder="输入标题..."
                    />
                    <richtext
                        tagname="p"
                        classname="highlight-content"
                        onchange="{onChangeContent}"
                        value="{content}"
                        placeholder="输入提示内容..."
                    />
                </div>
            </>
        );
    },
    save: ({ attributes }) =&gt; {
        const blockProps = useBlockProps.save();
        const { title, content, backgroundColor } = attributes;
        return (
            <div {...blockprops} style="{{" backgroundcolor, padding: '20px', borderradius: '5px' }}>
                <RichText.Content tagName="h3" className="highlight-title" value={title} />
                <RichText.Content tagName="p" className="highlight-content" value={content} />
            </div>
        );
    },
});

in Bewegung sein npm start Starten Sie den Entwicklungsmodus (überwachen von Dateiveränderungen) oder npm run build Führen Sie die Produktionskonfiguration durch. Danach finden Sie den “Hervorhebungsrahmen”-Block in der Kategorie “Design” im WordPress-Editor und können ihn dort verwenden.

Fortgeschrittene Entwicklung: Dynamische Blöcke und Serverseitige Rendering

Der Inhalt der statischen Blöcke wird direkt im Artikeltext gespeichert. Für Blöcke, die Echtzeitdaten benötigen (z. B. eine Liste der neuesten Artikel oder Benutzerinformationen), müssen dynamische Blöcke erstellt werden. Bei der Speicherung werden bei dynamischen Blöcken nur einige Attribute (z. B. die Anzahl der Artikel) gespeichert; die Darstellung auf der Benutzeroberfläche erfolgt dynamisch mithilfe von PHP- Templates.

hosting.com Shared Hosting

Hohe Leistung mit AMD EPYC-CPUs, NVMe-SSD-Speicher und LiteSpeed, fachkundiger Inhouse-Support rund um die Uhr, erweiterte Sicherheitsmaßnahmen einschließlich SSL, Brute-Force-, Malware- und DDoS-Schutz, Einsparungen von bis zu 73%

Zugangsseite

Konvertieren Sie statische Blöcke in dynamische Blöcke.

Zunächst müssen die Registrierungseinstellungen für den Block geändert werden. save Die Funktion wurde so geändert, dass sie einen Wert zurückgibt. nullUnd fügen Sie noch eines hinzu. render_callback Attribut.

// 在 registerBlockType 的配置对象中
save: () => {
    return null; // 动态区块不在内容中保存 HTML
},

Anschließend wird der Registrierungskodeseite auf der PHP-Seite aktualisiert, um die Aufruffunktion für die Darstellung (Rendering-Callback-Funktion) anzugeben.

function my_custom_blocks_register_dynamic_block() {
    register_block_type( __DIR__ . '/build/latest-posts', [
        'render_callback' => 'my_custom_blocks_render_latest_posts'
    ] );
}
add_action( 'init', 'my_custom_blocks_register_dynamic_block' );

function my_custom_blocks_render_latest_posts( $attributes ) {
    $posts = get_posts( [
        'posts_per_page' => $attributes['numberOfPosts'] ?? 5,
    ] );

if ( empty( $posts ) ) {
        return '<p>Es gibt derzeit keine Artikel.</p>'$output = '<ul class="wp-block-my-custom-blocks-latest-posts">';
    foreach ( $posts as $post ) {
        $output .= sprintf(
            '<li><a href="/de/%s/">%s</a></li>'php
    esc_url(get_permalink($post));
    esc_html(get_the_title($post));
}
$output .= '';'</ul>';

return $output;
}

Die Darstellung erfolgt mithilfe von Blockvorlagen-Dateien.

Für komplexere dynamische Bereiche wird die Verwendung von Vorlagenempfiehlen. Erstellen Sie diese im Plugin-Verzeichnis. templates/latest-posts.phpFühren Sie die oben beschriebene Logik in diese Datei ein. Danach… render_callback Verwenden Sie es in China ob_get_clean und include Das Laden der Vorlagen sorgt dafür, dass die PHP- und HTML-Logik klarer und einfacher zu warten ist.

Empfohlene Lektüre WooCommerce-Plugin-Anleitung: Eine umfassende Leitfaden von der Installation und Konfiguration bis zum Betrieb Ihres Online-Shops。

Advanced Topics and Best Practices

Nachdem Sie die Grundlagen sowie dynamische Blöcke beherrscht haben, können Sie mit den folgenden Themen noch leistungsfähigere und professionellere Blöcke entwickeln.

Implementierung der Variabilitätsfunktion für Blöcke

Block Variations ermöglichen es Ihnen, auf Basis eines Basiskblocks mehrere voreingestellte Styles oder Konfigurationen zu erstellen. Zum Beispiel können Sie für ein “Hervorhebungs-Fenster” Varianten wie “Erfolg”, “Warnung” oder “Fehler” erstellen.

InterServer Shared Hosting

Shared Hosting $2.50 USD pro Monat, erster Monat $0.1 USD Promo-Code tryinterserver, 461 Cloud-Apps Skripte, ein Klick installieren.

Zugangsseite

import { registerBlockVariation } from '@wordpress/blocks';

registerBlockVariation('my-custom-blocks/highlight-box', [
    {
        name: 'success',
        title: '成功提示',
        icon: 'yes-alt',
        attributes: {
            title: '操作成功',
            backgroundColor: '#d4edda',
        },
        isDefault: false,
    },
    {
        name: 'error',
        title: '错误警告',
        icon: 'dismiss',
        attributes: {
            title: '发生错误',
            backgroundColor: '#f8d7da',
        },
    },
]);

Verwendung von Block-Styles und Editor-Styles

ausnutzen registerBlockStyle Funktionen können verschiedenen visuellen Styles für Blöcke hinzufügen, und die Benutzer können diese im Seitenbereich wechseln. Gleichzeitig wird… add_editor_style Es kann sichergestellt werden, dass die Vorschau im Editor mit den Frontend-Styles übereinstimmt, sodass ein „Was Sie sehen, ist auch, was Sie erhalten“-Erlebnis gewährleistet wird.

Leistungsoptimierung und Codeaufteilung

Mit zunehmender Anzahl von Blöcken kann die Zusammenfassung aller JavaScript-Dateien in eine einzige Datei die Ladeleistung negativ beeinflussen. Es gibt Möglichkeiten, dies zu umgehen. @wordpress/dependency-extraction-webpack-plugin(Enthält bereits…) @wordpress/scripts (China) Stellen Sie sicher, dass die externen Abhängigkeiten von WordPress-Paketen korrekt deklariert werden. Für große Plugins können Techniken wie das Auf-demand-Laden oder die Code-Segmentation in Betracht gezogen werden.

Zusammenfassungen

Die Entwicklung des Gutenberg-Blockeditors war ein Prozess, bei dem moderne Frontend-Technologien (React, JSX, Webpack) mit traditionellen WordPress-PHP-Kenntnissen kombiniert wurden. Beginnen Sie damit, die Architektur des Editors zu verstehen, erlernen Sie die Kern-APIs durch die Erstellung statischer Blöcke, und gehen Sie anschließend zu dynamischen Blöcken über, um mit dynamischen Daten zu arbeiten. Schließlich verbessern Sie die Benutzererfahrung und die Entwicklungseffizienz mithilfe fortgeschrittener Funktionen wie Block-Varianten und -Stilen. Indem Sie sich an bewährte Methoden halten – wie eine klare Codeorganisation, Leistungsoptimierung sowie eine umfassende Internationalisierungsvorbereitung – können Sie benutzerfreundliche, wartbare und leistungsstarke benutzerdefinierte Blöcke erstellen und das volle Potenzial des Gutenberg-Editors ausschöpfen.

FAQ Häufig gestellte Fragen

Muss man für die Entwicklung von Gutenberg-Blöcken unbedingt React verwenden?

Ja, die offizielle Entwicklung des Gutenberg-Editors basiert derzeit vollständig auf React. Obwohl theoretisch auch andere Frameworks verwendet werden könnten, sind alle Komponenten, Hooks und Werkzeuge, die vom WordPress-Kern bereitgestellt werden, auf der React-Ökologie aufgebaut. Der Einsatz anderer Frameworke würde zu erheblichen Komplexitäts- und Kompatibilitätsproblemen führen.

Wie füge ich benutzerdefinierte Seitenauswahlsteile zu meinen Blöcken hinzu?

Sie können es verwenden. <code>InspectorControls</code> Komponenten – innerhalb eines Blocks. edit In der Funktion wird es zusammen mit dem Haupt-Vorschau-Inhalt zurückgegeben. <code>InspectorControls</code> Im Inneren können Sie dies verwenden. <code>PanelBody</code>、<code>TextControl</code>、<code>SelectControl</code>、<code>RangeControl</code></code> 等来自 Die Komponenten aus dem Paket `@wordpress/components` werden verwendet, um eine umfassende Einstellungsoberfläche zu erstellen.

Was sind die Unterschiede in der Leistung zwischen dynamischen und statischen Blöcken?

Der HTML-Inhalt der statischen Blöcke wird direkt im Beitrag-Inhalt der Datenbank gespeichert, wodurch die Ladezeit auf der Client-Seite sehr schnell ist. Allerdings können keine dynamischen Daten in diese Blöcke eingefügt werden. Dynamische Blöcke hingegen erfordern bei der Darstellung die Ausführung von PHP-Code, um die Datenbank abzufragen – dies führt zu einem geringfügigen Leistungsverlust, ermöglicht jedoch die Anzeige von aktuellen Daten. Für Inhalte, die sich selten ändern, kann die Kombination aus statischen Blöcken und einer regelmäßigen Caching-Strategie in Betracht gezogen werden; für Inhalte, die eine hohe Echtzeit-Verfügbarkeit erfordern, sind dynamische Blöcke unerlässlich.

Kann ich Blöcke in der traditionellen Bereich für kleine Hilfsmittel oder in den Metadatenfeldern von Artikeln verwenden?

Ja, das werden “Block-Widgets” und “Block-Metaboxen” genannt. Ab WordPress 5.8 wird auch der Widget-Bereich vollständig vom Gutenberg-Block-Editor gesteuert. Du kannst sie ebenfalls verwenden. register_block_type Das ist eine gute Frage. widget_types Parameter (oder die entsprechenden APIs) müssen verwendet werden, damit die Blöcke im Widget-Editor verfügbar sind. Für die Artikel-Metadatenfelder kann die Funktion `…` genutzt werden.register_post_meta Die API wird in Kombination mit Blöcken verwendet, um eine intuitivere Benutzeroberfläche für die Metadatenbearbeitung zu erstellen.