Pełny przewodnik po rozwoju oraz zaawansowanej praktyce użytkowania edytora bloków Gutenberg w WordPress.

Edytor bloków Gutenberg w WordPress znacząco zmienił sposób tworzenia treści, dając redaktorom większą swobodę i kontrolę nad budową stron. Dla programistów to oznacza zupełnie nowy podejście do rozwoju aplikacji, oparty na technologiach React i współczesnym JavaScript. W tym artykule pokazano, jak tworzyć własne bloki od zera, a potem przechodzić do bardziej zaawansowanych zadań, takich jak tworzenie dynamicznych bloków oraz implementacja różnych wersji tych bloków. Cel jest jeden – zapewnić czytelnikowi kompletny przewodnik po praktycznym programowaniu w WordPress z użyciem edytora Gutenberg.

Zrozumienie kluczowej architektury edytora bloków

Program editor Gutenberg nie stanowi jednolitej, całościowej aplikacji, lecz jest ekosystemem składającym się z kilku niezależnych pakietów (packages). Zrozumienie jego architektury jest kluczowym elementem dla skutecznego rozwoju tego oprogramowania.

Rozdzielność edytora od warstwy danych

Interfejs edytora jest oddzielony od warstwy danych WordPress. Podstawa tego rozwiązania… @wordpress/editor Pakiet zawiera komponenty interfejsu użytkownika (UI) dla edytora. @wordpress/data Bazowy moduł implementuje mechanizm zarządzania stanem podobny do Redux. Taka separacja umożliwia programistom skupienie się na wyglądzie interfejsu i logice interakcji pomiędzy użytkownikiem a aplikacją, natomiast automatyzacja procesu zapisu danych jest realizowana przez wewnętrzne mechanizmy WordPress.

Polecamy lekturę. Jak tworzyć i publikować własne typy artykułów w WordPress: pełny praktyczny przewodnik。

Rejestracja bloków i ich cykl życia

Każdy blok musi zostać przetestowany (lub zatwierdzony) poprzez odpowiednie procedury. registerBlockType Funkcja jest rejestrowana. Ta funkcja przyjmuje dwa parametry: unikalne nazwisko bloku (na przykład…). my-plugin/my-custom-block) oraz obiekt zawierający wszystkie informacje konfiguracyjne bloku.
Po rejestracji blok przechodzi przez różne etapy swojego żywota: inicjalizację, renderowanie, edycję oraz zapisanie. Programiści głównie kontrolują ten proces poprzez definiowanie odpowiednich parametrów i zasad działania bloku. edit 和 save Dwie kluczowe funkcje służą do kontrolowania zachowania bloków w edytorze oraz na stronie klienta ( frontend).

UltaHost – hostingu dla stron WordPress

Gwarancja zwrotu pieniędzy w ciągu 30 dni, nieograniczony przepustowość sieci i dostęp do bazy danych, bezpłatna ochrona przed atakami typu DDoS. Promocja: 50% przy zakupie na 3 lata.

strona dostępu

Stwórz swoj pierwszy blok kustomny od zera.

Wykonamy prosty blok “wysuwanych porad”, który umożliwi użytkownikom dodawanie okienek z poradami wraz z kolorem tła i nagłówkiem.

Ustawienie środowiska rozwoju i podstawowych plików

Najpierw upewnij się, że twoje środowisko rozwoju jest gotowe do pracy. Potrzebny ci jest Node.js oraz narzędzie npm. W katalogu z pluginami stworz kopię nowego foldera zawierającego pliki pluginu. my-custom-blocksW tym folderze utwórz następujące kluczowe pliki:
- my-custom-blocks.php (Główny plik pluginu)
- package.json (Zastosowuje się do zarządzania zależnościami w Node.js oraz skryptami budowy aplikacji)
- src/ Katalog (do przechowywania źródłowego kodu)
- build/ Katalog (katalog wygenerowany przez narzędzie do budowy, czytany przez WordPress)

在 package.json W tym dokumencie konfigurujesz skrypty budowy (build scripts) i włączasz je do procesu tworzenia produktu. @wordpress/scripts Pakowanie może znacząco ułatwić konfigurację narzędzi takich jak Webpack i Babel.

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

W głównym pliku pluginu my-custom-blocks.php Aby to zrobić, musisz użyć register_block_type Funkcja służy do powiadomienia WordPress o tym, z jakiego źródła należy pobierać dane. build Zasoby bloku do ładowania katalogu.

Polecamy lekturę. Przewodnik po tworzeniu tematów dla WordPress: budowanie wysokiej wydajności tematów dostosowanych od zera。

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

Poniżej znajduje się źródłowy kod JavaScriptu służący do tworzenia bloków:

在 src Utworzyć katalog w folderze. highlight-box/index.js Plik. To główny plik wejściowy do tego 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="Ustawienia koloru">
                        <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>
        );
    },
});

Rozpocznij działanie. npm start Uwolnij tryb rozwoju (nadzór zmian w plikach) lub npm run build Wykonaj proces budowy produktu. Po tym w edytorze WordPressu znajdziesz blok “Wysuwany tekst ostrzegawczy” w kategorii “Design” i będziesz mogła go używać.

Rozwój zaawansowany: bloki dynamiczne i renderowanie na stronie serwera

Zawartość bloków statycznych jest bezpośrednio przechowywana w tekście artykułu. Jednak w przypadku bloków wymagających danych w czasie rzeczywistym (np. listy najnowszych artykułów, informacje o użytkownikach) konieczne jest stworzenie bloków dynamicznych. Podczas zapisu bloków dynamicznych przechowuje się tylko kilka atrybutów (np. liczba artykułów), a ich zawartość jest generowana dynamicznie na stronie klienta za pomocą szablonów PHP.

hosting.com Hosting współdzielony

Wysoka wydajność dzięki procesorom AMD EPYC, pamięci masowej NVMe SSD i LiteSpeed, wewnętrzne wsparcie ekspertów 24/7, zaawansowane środki bezpieczeństwa, w tym SSL, brute force, ochrona przed złośliwym oprogramowaniem i DDoS, oszczędność do 73%

strona dostępu

Przekonwertować bloki statyczne w bloki dynamiczne

Najpierw należy zmienić konfigurację rejestracji bloku. save Funkcja została zmieniona tak, aby zwracała wynik. nullI dodać jeden. render_callback Atrybuty.

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

Następnie na stronie PHP należy aktualizować kod rejestracji, wskazując funkcję obsługującą renderowanie (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>Nie ma żadnych artykułów.</p>'$output = '<ul class="wp-block-my-custom-blocks-latest-posts">';
    foreach ( $posts as $post ) {
        $output .= sprintf(
            '<li><a href="/pl/%s/">%s</a></li>'php
    esc_url(get_permalink($post));
    esc_html(get_the_title($post));
    $output .= '';'</ul>';

return $output;
}

Używaj plików z szablonami bloków do renderowania.

Dla bardziej złożonych, dynamicznych bloków zaleca się używanie plików szablonów. Tworzyć je w katalogu z pluginami. templates/latest-posts.phpPrzenieś logikę renderowania do tego pliku, a potem… render_callback Użyj tego w Chinach. ob_get_clean 和 include Dzięki temu, że są ładowane szablony, logika PHP i HTML staje się bardziej jasna i łatwiejsza w utrzymaniu.

Polecamy lekturę. Przewodnik po korzystaniu z pluginów dla platformy WooCommerce: od instalacji i konfiguracji po pełną obsługę sklepu。

Zaawansowane tematy i najlepsze praktyki.

Po opanowaniu zasad budowy bazowych i dynamicznych bloków następujące tematy pomogą ci stworzyć jeszcze potężniejsze i bardziej profesjonalne bloki.

Rozwijanie funkcji dostosowywania bloków

Możliwość tworzenia wariantów bloków (Block Variations) umożliwia tworzenie kilku zaprogramowanych stylów lub konfiguracji na podstawie jednego podstawowego bloku. Na przykład, dla “okna powiadomień wyróżnionych kolorem” można stworzyć warianty o treściach “Udało się”, “Powiadomienie ostrzegawcze” lub “Błąd”.

Hosting współdzielony InterServer

Hosting współdzielony $2.50 USD miesięcznie, pierwszy miesiąc $0.1 USD kod promocyjny tryinterserver, 461 skryptów aplikacji w chmurze, instalacja jednym kliknięciem.

strona dostępu

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

Wykorzystanie stylów bloków oraz stylów edytora

Użyj registerBlockStyle Funkcje umożliwiają dodawanie różnych wizualnych stylów do bloków, a użytkownicy mogą ich zmieniać w panelu bocowym. add_editor_style Można zapewnić, że prezentacja w edytorze będzie zgodna z wyglądem strony internetowej na urządzeniu klienta, dzięki czemu użytkownik otrzymuje dokładnie to, co widzi.

Optymalizacja wydajności i rozdzielanie kodu

Gdy liczba bloków rośnie, pakowanie wszystkich plików JavaScript w jeden plik może negatywnie wpłynąć na szybkość ich ładowania. Można to ominąć, używając odpowiednich rozwiązań. @wordpress/dependency-extraction-webpack-pluginZawarte w… @wordpress/scripts (Środkowy tekst): Upewnij się, że poprawnie deklarujesz zależności od zewnętrznych pakietów WordPress. W przypadku dużych wtyczek można zastanowić się nad technikami ładowania na żądanie lub rozdzielania kodu.

Podsumowanie.

Rozwój edytora bloków Gutenberg to proces łączenia najnowszych technologii front-end (React, JSX, Webpack) z tradycyjnymi znaniami związanymi z programowaniem w WordPress (PHP). Pojęcie architektury edytora jest kluczowe na początku tego procesu; po zrozumieniu jej zasad należy nauczyć się tworzenia statycznych bloków oraz korzystania z ich interfejsów API. Następnie przechodzi się do obsługi dynamicznych bloków i danych w czasie wykonywania aplikacji. Dodatkowe funkcje, takie jak różne wersje bloków oraz możliwości ich formatowania, pomagają poprawić wygodę użytkownika i efektywność rozwoju. Dzięki stosowaniu najlepszych praktyk – jasnej struktury kodu, optymalizacji wydajności oraz dobrze przygotowanej integracji z różnymi językami – można stworzyć wydajne, łatwe w utrzymaniu i przyjazne dla użytkowników bloki dostosowane do potrzeb projektu. W ten sposób można w pełni wykorzystać potencjał edytora Gutenberg.

FAQ – najczęściej zadawane pytania.

Czy do tworzenia bloków typu Gutenberg konieczne jest używanie React?

Tak, aktualny sposób rozwoju oficjalnego edytora Gutenberg jest bazowany wyłącznie na technologii React. Choć teoretycznie można używać innych frameworków, wszystkie komponenty, haki (hooks) oraz narzędzia dostępne w core’u WordPress są zaprojektowane z uwzględnieniem ekosystemu React, więc stosowanie innych frameworków powoduje znaczną złożoność i problemy z kompatybilnością.

Jak dodać własne elementy kontrolne do boku mojego bloku?

Możesz użyć <code>InspectorControls</code> Komponenty. W bloku… edit W funkcji należy to powrócić wraz z głównym treściem prezentacji. <code>InspectorControls</code> Wewnętrznie możesz użyć… <code>PanelBody</code>、<code>TextControl</code>、<code>SelectControl</code>、<code>RangeControl</code></code> 等来自 Komponenty z pakietu `@wordpress/components` są używane do budowy rozwiniętych interfejsów konfiguracji.

W jaki sposób różnią się pod względem wydajności bloki dynamiczne i statyczne?

Zawartość HTML bloków statycznych jest bezpośrednio przechowywana w bazie danych wraz z treścią postów, więc szybkość ładowania na stronie klienta jest dobra. Jednak takie bloki nie mogą zawierać danych dynamicznych. Bloki dynamiczne wymagają wykonywania kodu PHP podczas renderowania, co powoduje delikatne opóźnienia w działaniu strony, ale umożliwiają dostęp do aktualnych danych w czasie rzeczywistym. W przypadku treści, która rzadko się zmienia, można zastanowić się nad użyciem bloków statycznych w połączeniu z strategią częstego cache’owania; natomiast dla treści wymagających wysokiej aktualności konieczne jest używanie bloków dynamicznych.

Czy mogę używać bloków w tradycyjnej obszarze dla dodatkowych elementów interfejsu lub w metadanych artykułu?

Możliwe. To są elementy interfejsu zwane “blokowymi widgetami” oraz “blokowymi metawiązkami”. Od wersji WordPress 5.8 obszar z widgetami jest w całości obsługiwany przez edytor bloków Gutenberg. Możesz też korzystać z innych dostępnych opcji. register_block_type 的 widget_types Aby bloki były dostępne w edytorze widgetów, należy użyć odpowiednich parametrów (lub API). W przypadku metadanych artykułów można zastosować…register_post_meta API w połączeniu z blokami umożliwia stworzenie bardziej intuicyjnego interfejsu do edycji metadanych.