Een volledige ontwikkelingsgids en praktische tips voor de Gutenberg Block Editor van WordPress.

De Gutenberg Block Editor van WordPress heeft de manier van contentcreatie volledig veranderd, door de flexibiliteit en controle over het bouwen van pagina’s rechtstreeks in de handen van de editor te leggen. Voor ontwikkelaars betekent dit een geheel nieuwe manier van ontwikkelen, gebaseerd op React en moderne JavaScript-technologieën. In dit artikel wordt uitgebreid besproken hoe je vanaf nul eigen blokken kunt maken, en hoe je vervolgens kunt ontwikkelen tot dynamische blokken en varianten van blokken. Het doel is om je een compleet praktisch ontwikkelingshandboek aan te bieden.

Het begrijpen van de kernarchitectuur van een blokeditor

Het Gutenberg-editor is geen enkele, geheel samengevoegde toepassing, maar een ecosysteem dat bestaat uit meerdere onafhankelijke pakketten (packages). Het begrijpen van zijn architectuur is essentieel voor effectief ontwikkelen.

Separatie van de editor en de data-laag

Het editor-interfacing is zelfs gescheiden van de data-laag van WordPress. @wordpress/editor Het pakket biedt UI-componenten voor een editor. @wordpress/data Pakketten bieden een state-management-mechanisme vergelijkbaar met Redux. Dit scheiden van de verschillende onderdelen zorgt ervoor dat ontwikkelaars zich kunnen concentreren op de weergave en interactie-logica van de blokken, terwijl de permanente opslag van de data automatisch wordt verzorgd door de kernmechanismen van WordPress.

Aanbevolen leesmateriaal WordPress: Een volledig praktisch handboek over het maken en publiceren van aangepaste artikeltypes。

Registratie en levenscyclus van blokken

Elke blok moet worden goedgekeurd/verwerkt. registerBlockType De functie wordt geregistreerd. De functie accepteert twee parameters: de unieke naam van het blok (bijvoorbeeld...) my-plugin/my-custom-blockEen object dat alle configuratiegegevens van de blok bevat.
Na registratie ondergaat het blok verschillende fases in zijn levenscyclus, zoals initialisatie, weergave, bewerking en opslag. Ontwikkelaars bepalen dit proces voornamelijk door het definiëren van de vereiste parameters en regels. edit 和 save Twee belangrijke functies om de weergave van blokken in de editor en op de front-end te beheersen.

UltaHost WordPress-hosting

30-daagse garantie voor het terugbetalen van het geld, onbeperkt bandbreedte- en databestand, gratis DDoS-beveiliging, en een prijsvoordeel van 50% bij een aankoop van 3 jaar.

toegangspagina

Vanaf nul je eerste eigen blok maken

We gaan een eenvoudig “Highlight Tip”-blok maken, waarmee gebruikers een tipbox met een achtergrondkleur en een titel kunnen toevoegen.

Instellen van de ontwikkelingsomgeving en basisbestanden

Allereerst moet je ervoor zorgen dat je ontwikkelomgeving klaar is voor het gebruik. Je hebt de Node.js- en npm-milieu nodig. Maak in de map met plugins een nieuwe map voor je nieuwe plugin. my-custom-blocksIn deze map moet u de volgende belangrijke bestanden maken:
- my-custom-blocks.php (Plugin-hoofdbestand)
- package.json (Gebruikt voor het beheersen van Node.js-dependenties en build-scripts)
- src/ Verzeichnis (gebruikt voor het opslaan van broncode)
- build/ Verzeichnis (uitgevoerd door het bouwtool; wordt door WordPress gelezen)

在 package.json Hier wordt de build-script ingesteld en geïmporteerd. @wordpress/scripts Pakketten kunnen de configuratie van tools als Webpack en Babel aanzienlijk vereenvoudigen.

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

In het hoofdbestand van het plugin my-custom-blocks.php In dit geval moet je gebruikmaken van register_block_type Een functie die WordPress vertelt waar het van moet komen. build Assets voor het laden van de inhoud van de directory.

Aanbevolen leesmateriaal WordPress-themaontwikkelingsgids: van nul een high-performance, maatgeschreven thema bouwen。

<?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' );

Het schrijven van de JavaScript-broncode voor een blok.

在 src Maak een map in de directory. highlight-box/index.js Deze file is de hoofdingeingangsfail voor het blok.

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="Kleurinstellingen">
                        <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>
        );
    },
});

Run npm start Start de ontwikkelingsmodus (waarbij veranderingen in de bestanden worden opgevolgd) of npm run build Maak de productieversie van het ontwerp klaar. Daarna vind je in de WordPress-editor, onder de categorie “Design”, het blok “Highlighting Tooltip” en kun je dit gebruiken.

Advanced development: Dynamic blocks en server-side rendering

De inhoud van de statische blokken wordt rechtstreeks in de artikelinhoud opgeslagen. Voor blokken die echter in real time gegevens vereisen (zoals een lijst met de meest recente artikelen of gebruikersgegevens), moeten dynamische blokken worden gecreëerd. Bij het opslaan van dynamische blokken worden alleen enkele attributen opgeslagen (bijvoorbeeld het aantal artikelen), en de inhoud wordt op de front-end dynamisch generereerd met behulp van PHP-templates.

hosting.com gedeelde hosting

Hoge prestaties met AMD EPYC CPU's, NVMe SSD opslag en LiteSpeed, 24/7 deskundige interne ondersteuning, geavanceerde beveiligingsmaatregelen waaronder SSL, bescherming tegen brute kracht, malware en DDoS, besparingen tot 73%

toegangspagina

Het omzetten van statische blokken in dynamische blokken.

Eerst moet de registratie-instellingen van het blok worden gewijzigd. save De functie is gewijzigd zodat deze een waarde teruggeeft. nullEn voeg er nog een toe. render_callback Eigenschappen.

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

Vervolgens moet je op de PHP-kant de registratiecode updaten en de renderingscallback-functie specificeren.

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>Er is geen artikel beschikbaar.</p>'$output = '<ul class="wp-block-my-custom-blocks-latest-posts">';
    foreach ( $posts as $post ) {
        $output .= sprintf(
            '<li><a href="/nl/%s/">%s</a></li>'php
    esc_url(get_permalink($post));
    esc_html(get_the_title($post));
    $output .= '';'</ul>';

return $output;
}

Rendering wordt uitgevoerd met behulp van bloktemplatebestanden.

Voor complexere dynamische blokken wordt het gebruik van templatebestanden aanbevolen. Maak deze bestanden in de map met plugins. templates/latest-posts.phpVerplaats de bovenstaande renderingslogica naar die bestand. En vervolgens… render_callback Gebruikt in het Chinees (vereenvoudigd) ob_get_clean 和 include Het laden van templates maakt de PHP- en HTML-logica duidelijker en gemakkelijker te onderhouden.

Aanbevolen leesmateriaal WooCommerce-pluginhandleiding: Een volledig handboek van installatie en configuratie tot het beheren van je webwinkel。

Advanced topics and best practices

Nu je de basis en dynamische blokken onder de knie hebt, kunnen de volgende onderwerpen je helpen om nog krachtigere en professionelere blokken te ontwikkelen.

Implementeer de mogelijkheid om varianten van een blok te creeren.

Met blockvariants kun je meerdere vooraf gedefinieerde stijlen of configuraties maken op basis van een basiselement. Je kunt bijvoorbeeld varianten als “succes”, “waarschuwing” en “fout” maken voor de “highlight alert box”.

InterServer gedeelde hosting

Shared hosting $2.50 USD per maand, eerste maand $0.1 USD promo code tryinterserver, 461 cloud apps scripts, een klik te installeren.

toegangspagina

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',
        },
    },
]);

Het gebruik van blokstijlen en editorstijlen

Gebruik registerBlockStyle Deze functie kan verschillende visuele stijlen toevoegen aan blokken, waarmee gebruikers kunnen switchen in de sidebar. add_editor_style Het kan worden gegarandeerd dat de preview in de editor overeenkomt met de front-end-stijl, waardoor er een ‘what you see is what you get’-ervaring wordt geboden.

Prestatieoptimalisatie en code splitsing

Als het aantal blokken toeneemt, heeft het samenvoegen van al het JavaScript in één bestand een negatieve invloed op de laadprestaties. Dit kan worden vermeden door... @wordpress/dependency-extraction-webpack-pluginAlreeds ingeboden in: @wordpress/scripts Zorg ervoor dat de externe afhankelijkheden van WordPress-pakketten correct worden gemeld. Voor grote plugins kan je erover nadenken om ze op demand te laden of om technieken voor code-splitting te gebruiken.

Samenvatting

De ontwikkeling van de Gutenberg-blockeditor is een proces waarbij moderne front-end-technologieën (React, JSX, Webpack) worden gecombineerd met traditionele WordPress- en PHP-kennis. Je begint met het begrijpen van de architectuur van de editor, leert de kern-API's om statische blocks te creeren, gaat vervolgens verder met het verwerken van dynamische data met dynamische blocks, en verbetst uiteindelijk de gebruikerservaring en ontwikkelingsefficiëntie met functies als blockvarianten en -stijlen. Door te volgen met de beste praktijken – zoals een duidelijke codeorganisatie, prestatieoptimalisatie en uitgebreide internationalisatie – kun je krachtige, onderhoudbare en gebruikersvriendelijke custom blocks bouwen, waarmee je het potentieel van de Gutenberg-editor ten volle kunt benutten.

Veelgestelde vragen (FAQ)

Moet je React gebruiken om Gutenberg-blokken te ontwikkelen?

Ja, de officiële ontwikkeling van de Gutenberg-editor is momenteel geheel gebaseerd op React. Hoewel het in theorie mogelijk is om andere frameworks te gebruiken, zijn alle componenten, hooks en tools die worden geleverd door het WordPress-core gebouwd rondom de React-ecosysteem. Het gebruik van andere frameworks zou tot grote complexiteit en compatibiliteitsproblemen leidden.

Hoe voeg ik custom sidebar-controles toe aan mijn blokken?

Je kunt gebruikmaken van <code>InspectorControls</code> Componenten. In de blokken. edit In de functie wordt dit, samen met de hoofdpreviewinhoud, teruggegeven. <code>InspectorControls</code> Binnenin kun je dit gebruiken. <code>PanelBody</code>、<code>TextControl</code>、<code>SelectControl</code>、<code>RangeControl</code></code> 等来自 De componenten uit het pakket `@wordpress/components` worden gebruikt om een uitgebreide instellingeninterface te bouwen.

Wat is het verschil in prestaties tussen dynamische en statische blokken?

De HTML-content van de statische blokken wordt rechtstreeks opgeslagen in de postinhoud van de database, waardoor de laadsnelheid op de front-end zeer snel is. Er kan echter geen dynamische data worden weergegeven. Voor dynamische blokken is het nodig om PHP-code uit te voeren om de database te raadplegen tijdens het renderen; dit resulteert in een kleine vertraging in de prestaties, maar ze bieden wel real-time-data. Voor content die niet vaak verandert, kan het verstandig zijn om statische blokken te gebruiken in combinatie met een regelmatige caching-strategie; voor content waar een hoge mate van real-time-nauwkeurigheid vereist is, zijn dynamische blokken onvermijdelijk.

Kan ik blokken gebruiken in de traditionele buurt met kleine hulpmiddelen of in de meta-box van een artikel?

Ja, dit worden “block widgets” en “block meta-boxes” genoemd. Sinds WordPress 5.8 wordt ook het widgetgebied volledig bestuurd door de Gutenberg-block-editor. Je kunt dit ook gebruiken. register_block_type 的 widget_types Je kunt parameters (of de corresponderende API's) gebruiken om blokken beschikbaar te maken in de widget-editor. Voor de artikelmeta-boxen kun je bijvoorbeeld `...` inzetten.register_post_meta De API wordt gecombineerd met blokken om een meer intuïtieve interface voor het bewerken van metadata te creëren.