Kompletní výukový průvodce a pokročilé tipy pro editor bloků Gutenberg v WordPressu.

Gutenberg Block Editor v rámci WordPressu zcela změnil způsob vytváření obsahu, neboť poskytuje editorům větší flexibilitu a kontrolu při stavbě stránek. Pro vývojáře to znamená zcela nový přístup k vývoji, založený na technologiích React a moderním verzích JavaScriptu. Tento článek se podrobně věnuje tomu, jak od nuly vytvořit vlastní bloky a postupně pokročit k vývoji dynamických bloků či aplikování různých variant těchto bloků. Cílem je poskytnout vám komplexní praxi orientovaný průvodce vývojem.

Porozumění základní architektuře editoru bloků

Gutenberg Editor není jednotným, celistvým aplikací, ale ekosystémem složeným z několika samostatných balíčků (packages). Porozumění jeho architektuře je základem pro efektivní vývoj.

Oddělení editoru od datové vrstvy

Samotné rozhraní editoru je odděleno od datové vrstvy WordPressu. Jádro (core) @wordpress/editor Tento balíček poskytuje komponenty pro uživatelské rozhraní (UI) editoru. @wordpress/data Paket implementuje správu stavu podobnou té, kterou poskytuje Redux. Toto oddělení umožňuje vývojářům se soustředit na vizuální podobu bloků a jejich interakční logiku, zatímco udržování dat je automaticky zpracováno základními mechanismy WordPressu.

Doporučujeme k přečtení. Ovládněte vlastní typy článků v WordPressu: kompletní praktický návod od vytvoření po publikování.。

Registrování bloků a jejich životní cyklus

Každý blok musí být ověřen (nebo schválen) prostřednictvím určitého procesu. registerBlockType Funkce je registrována. Tato funkce přijímá dva parametry: jedinečné jméno bloku (např. my-plugin/my-custom-block) a objekt obsahující všechny konfigurační informace bloku.
Po registraci prochází blok různými fázemi svého životního cyklu, jako je inicializace, renderování, úprava a uložení. Vývojáři toho dosahují především definováním potřebných parametrů a funkcí. edit 和 save Dva klíčové funkce pro ovládání vzhledu bloků v editoru a na straně klienta (frontendu).

UltaHost – hosting služby pro weby postavené na platformě WordPress

Záruka vrácení peněz do 30 dnů, neomezený šířka pásma a databáze, bezplatná ochrana proti DDoS útokům. Sleva 501 TP4T při nákupu na 3 roky.

přístupová stránka

Vytvořte si svůj první vlastní blok od nuly.

Vytvoříme jednoduchý blok s “výraznými upozorněními”, který umožní uživatelům přidat informační okno s pozadovou barvou a nadpisem.

Nastavení vývojového prostředí a základních souborů

Nejprve se ujistěte, že je vaše vývojové prostředí připraveno. Potřebujete prostředí Node.js a npm. V adresáři s pluginy vytvořte nový adresář pro pluginy, například: my-custom-blocksV této složce vytvořte následující klíčové soubory:
- my-custom-blocks.php (Hlavní soubor pluginu)
- package.json (Používá se k správě závislostí Node.js a souborů určených k sestavení aplikací.)
- src/ Katalog (určen k uložení zdrojového kódu)
- build/ Katalog (katalog výstupních souborů nástrojů na výstavbu, který čte WordPress)

在 package.json V tomto dokumentu je popsáno, jak nakonfigurovat skripty pro sestavení projektu a jak je do projektu začlenit. @wordpress/scripts Balíčky mohou výrazně zjednodušit konfiguraci nástrojů jako Webpack a Babel.

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

V hlavním souboru pluginu my-custom-blocks.php V tomto případě musíte použít register_block_type Funkce slouží k informování WordPressu, aby… build Aktiva pro blok načítání obsahu adresáře.

Doporučujeme k přečtení. Průvodce vývojem tem pro WordPress: Vytvoření vysokokvalitních, přizpůsobitelných tem od nuly。

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

Napsat zdrojový kód JavaScriptu pro blok.

在 src Vytvořit složku v adresáři highlight-box/index.js Soubor. Toto je hlavní vstupní soubor bloku.

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="Nastavení barev">
                        <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>
        );
    },
});

Spustit npm start Zapněte režim vývoje (sledování změn v souborech) npm run build Provedete výrobní proces (tj. vytvoření produktu/kódu). Poté v editoru WordPress najdete tento blok “Výrazná upozornění” v kategorii “Design” a můžete jej použít.

Pokročilý vývoj: Dynamické bloky a renderování na straně serveru

Obsah statických bloků je přímo uložen v samotném obsahu článku. Pro bloky, které vyžadují aktuální data (např. seznam nejnovějších článků, informace o uživatelích), je však nutné vytvořit dynamické bloky. Při ukládání dynamických bloků jsou uloženy pouze některé atributy (např. počet článků), a jejich obsah je na straně klienta dynamicky generován pomocí PHP šablon.

Shared hosting na hosting.com

Vysoký výkon, vybavený procesorem AMD EPYC, úložištěm NVMe SSD a LiteSpeedem, nepřetržitá interní podpora odborníků 24 hodin denně a 7 dní v týdnu, pokročilá bezpečnostní opatření včetně SSL, ochrany proti útokům hrubou silou, malwaru a DDoS, úspora až 731 TB/měsíc.

přístupová stránka

Převést statické bloky na dynamické bloky

Nejprve změňte registrační konfiguraci bloku. save Funkce by měla být upravena tak, aby vracela určitý výsledek. nullA přidejte také jedno… render_callback Atributy.

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

Poté aktualizujte kód registrace na straně PHP a určete funkci na zpracování zpětné vazby (rendering callback function).

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>Zatím nejsou žádné články k dispozici.</p>'$output = '<ul class="wp-block-my-custom-blocks-latest-posts">';
    foreach ( $posts as $post ) {
        $output .= sprintf(
            '<li><a href="/cs/%s/">%s</a></li>'php
    esc_url(get_permalink($post));
    esc_html(get_the_title($post));
    $output .= '';'</ul>';

return $output;
}

Použití souborů šablon bloků pro renderování

Pro složitější dynamické bloky se doporučuje používat šablonové soubory. Vytvořte je v adresáři s pluginy. templates/latest-posts.phpPřesuňte výše uvedenou renderovací logiku do tohoto souboru. Poté… render_callback Použijte to v čínštině. ob_get_clean 和 include To umožňuje načítání šablon, což činí logiku v PHP a HTML jasnější a snazší na údržbu.

Doporučujeme k přečtení. Návod k použití pluginu WooCommerce: Kompletní průvodce od instalace a konfigurace až po provoz e-shopu。

Pokročilá témata a osvědčené postupy

Po zvládnutí základních a dynamických bloků vám následující témata umožní vytvářet ještě výkonnější a profesionálnější bloky.

Implementace funkce variant bloků

Block Variations vám umožňují vytvořit více předdefinovaných stylů nebo konfigurací na základě jednoho základního bloku. Například můžete pro “významné upozornění” vytvořit varianty s názvy “Úspěch”, “Varování”, “Chyba” atd.

Shared hosting od InterServeru

Sdílený hosting za 1 TB + 5 TB měsíčně za 2,50 USD, slevový kód tryinterserver pro první měsíc za 1 TB + 5 TB za 0,1 USD, a 461 skriptů cloudových aplikací k jednoduché instalaci.

přístupová stránka

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

Využití blokových stylů a stylů editoru

Použití registerBlockStyle Funkce mohou blokům přidávat různé vizuální styly, které mohou uživatelé přepínat v postranní liště. add_editor_style Je možné zajistit, aby předvídky v editoru odpovídaly stylovým nastavením na straně klienta (frontendu), čímž se poskytuje zážitek „co vidíš, to dostaneš“ („what you see is what you get“).

Optimalizace výkonu a rozdělení kódu

S rostoucím počtem bloků bude kompilace všech JavaScript kódů do jediného souboru mít negativní vliv na rychlost načítání stránek. Je možné toto problému předejít pomocí vhodných technik. @wordpress/dependency-extraction-webpack-plugin(Už je to zahrnuto v…) @wordpress/scripts Zajistěte správné deklarování externích závislostí na balíčcích WordPress. U velkých pluginů můžete zvážit techniky načítání podle potřeby nebo rozdělení kódu.

Závěr

Vývoj editoru Gutenberg Block Editor je proces, který kombinuje moderní front-end technologie (React, JSX, Webpack) s tradičními znalostmi PHP v rámci systému WordPress. Začínáte porozuměním jeho architektuře, následuje zvládnutí základních API prostřednictvím vytváření statických bloků, poté postupujete k zpracování dynamických dat pomocí dynamických bloků a nakonec zvyšujete uživatelský zážitek a efektivitu vývoje díky pokročilým funkcím, jako jsou varianty bloků a jejich styly. Dodržováním osvědčených postupů – jako je čistá organizace kódu, optimalizace výkonu a důkladné přípravy na internacionalizaci – budete schopni vytvořit vlastní bloky, které jsou výkonné, udržovatelné a přívětivé pro uživatele, a plně tak využít potenciál editoru Gutenberg.

Časté dotazy

Je nutné pro vývoj Gutenberg bloku používat React?

Ano, v současné době je oficiální způsob vývoje editoru Gutenberg založen výhradně na frameworku React. Ačkoli teoreticky lze použít i jiné frameworky, všechny komponenty, háčky a nástroje poskytované jádrem WordPressu jsou navrženy s ohledem na React ekosystém. Použití jiných frameworků by vedlo k výrazné komplikaci a problémům s kompatibilitou.

Jak přidat do svého bloku vlastní kontrolky do postranního panelu?

Můžete použít… <code>InspectorControls</code> Komponenty. V bloku… edit Ve funkci to vraťte spolu s hlavním předváděcím obsahem. <code>InspectorControls</code> Uvnitř můžete použít… <code>PanelBody</code>、<code>TextControl</code>、<code>SelectControl</code>、<code>RangeControl</code></code> 等来自 Komponenty z balíčku `@wordpress/components` slouží k vytvoření bohatého nastavovacího rozhraní.

Jaké jsou rozdíly v výkonu mezi dynamickými a statickými bloky?

HTML obsah statických bloků je uložen přímo v obsahu příspěvků v databázi, což umožňuje rychlé načítání stránek na straně klienta. Statické bloky však nemohou obsahovat dynamická data. Dynamické bloky vyžadují při renderování spuštění PHP kódu pro dotaz do databáze, což způsobuje mírný nápor na výkon, ale umožňují zobrazovat data v reálném čase. Pro obsah, který se často nemění, lze zvážit použití statických bloků v kombinaci s pravidelnou strategií cacheování; pro obsah, který vyžaduje vysokou míru aktuálnosti, je nutné použít dynamické bloky.

Můžu používat bloky v tradiční oblasti nástrojů nebo v metapolech článků?

Ano, to se nazývá “blokové widgety” a “blokové metadrámy”. Od verze WordPress 5.8 je také oblast widgetů plně řízena Gutenbergovým blokovým editorem. Můžete to také používat. register_block_type 的 widget_types Parametry (nebo příslušné API) umožňují použití těchto bloků v editoru příslušenství. Pro metadatové boxy článků lze použít…register_post_meta API v kombinaci s bloky umožňuje vytvořit přehlednější rozhraní pro editaci metadat.