Mimo základných blokov: Vytváranie vlastných blokov Gutenberg pre rozšírené funkcie WordPress

Zhrnutie

Editor blokov WordPress, Gutenberg, zmenil tvorbu obsahu svojím modulárnym systémom blokov. Kým základné bloky ponúkajú všestrannosť, vlastné bloky sú nevyhnutné pre jedinečné funkcie a branding. Tento článok vás prevedie procesom vývoja vlastných blokov Gutenberg, pokrývajúcich základné koncepty ako registrácia blokov, atribúty a vykresľovanie. Preskúmame praktické príklady, prediskutujeme osvedčené postupy pre organizáciu kódu a bezpečnosť a zdôrazníme, ako sa vlastné bloky integrujú s architektúrou a hákmi WordPressu. Zvládnutím vývoja vlastných blokov môžete výrazne rozšíriť možnosti a používateľskú skúsenosť vašej stránky WordPress.

Mimo základných blokov: Vytváranie vlastných blokov Gutenberg pre rozšírené funkcie WordPress

Príchod editora blokov Gutenberg vo verzii WordPress 5.0 znamenal významný posun v spôsobe tvorby a správy obsahu. Gutenberg, ktorý sa odklonil od lineárneho prístupu klasického editora, zaviedol modulárny systém, kde sa obsah tvorí z diskrétnych "blokov". Kým predvolená sada blokov pokrýva širokú škálu bežných potrieb, mnohé webové stránky vyžadujú jedinečné funkcie, špecifické dizajnové prvky alebo integrácie, ktoré presahujú to, čo je bežne dostupné. Tu prichádza na rad vývoj vlastných blokov Gutenberg, ktorý ponúka výkonný spôsob rozšírenia možností WordPressu a jeho presné prispôsobenie požiadavkám vášho projektu.

Vývoj vlastných blokov vám umožňuje vytvárať opakovane použiteľné komponenty, ktoré zefektívňujú tvorbu obsahu pre redaktorov, zabezpečujú konzistenciu značky a implementujú zložité funkcie priamo v rozhraní editora. Tento sprievodca vás prevedie procesom, od pochopenia základov až po implementáciu osvedčených postupov pre robustné a udržiavateľné vlastné bloky.

Pochopenie architektúry editora blokov

Pred ponorením sa do vývoja je kľúčové pochopiť, ako Gutenberg a jeho bloky fungujú v rámci ekosystému WordPress. Samotný WordPress je postavený na modulárnej architektúre PHP a MySQL. Témata kontrolujú prezentáciu a pluginy pridávajú funkčnosť. Gutenberg, ako základná funkcia WordPressu, sa bezproblémovo integruje do tejto štruktúry. Využíva JavaScript (predovšetkým React) pre svoje dynamické editačné prostredie v prehliadači, zatiaľ čo PHP spracováva registráciu a vykresľovanie na strane servera.

Vlastné bloky sú v podstate JavaScript komponenty, ktoré sú registrované vo WordPresse. Keď používateľ pridá vlastný blok do príspevku alebo stránky, Gutenberg uloží jeho konfiguráciu (atribúty) do databázy. Pri vykresľovaní príspevku na front-ende WordPress používa PHP na interpretáciu tejto konfigurácie a výstup zodpovedajúceho HTML, často s využitím rovnakého JavaScript komponentu alebo samostatnej šablóny PHP.

Základné komponenty vlastného bloku

Každý vlastný blok Gutenberg sa v podstate skladá z niekoľkých kľúčových častí:

1. Registrácia: Toto je proces informovania WordPressu o vašom novom bloku. Zahŕňa definovanie jeho názvu, titulu, ikony a ďalších metadát. Toto sa primárne vykonáva pomocou funkcie JavaScript registerBlockType.
2. Atribúty: Toto sú dátové polia spojené s vaším blokom. Predstavte si ich ako nastavenia alebo vlastnosti, ktoré môže používateľ upraviť pre konkrétnu inštanciu bloku (napr. textový obsah, URL obrázku, výber farby). Atribúty sú definované v registrácii JavaScript bloku.
3. Funkcia edit: Táto funkcia JavaScript definuje, ako blok vyzerá a správa sa v editore Gutenberg. Tu vytvoríte interaktívne UI, ktoré budú tvorcovia obsahu používať na konfiguráciu bloku.
4. Funkcia save: Táto funkcia JavaScript definuje statickú HTML štruktúru, ktorá sa uloží do databázy a vykreslí na front-ende vašej webovej stránky. Mala by odrážať aktuálny stav atribútov bloku.

Kroky: Vytvorenie prvého vlastného bloku

Vytvorme jednoduchý vlastný blok, ktorý zobrazí "Výzvu k akcii" (CTA) s nadpisom a tlačidlom. Tento príklad sa zameria na základné aspekty JavaScriptu pre registráciu a úpravu blokov, za predpokladu, že je nastavené základné vývojové prostredie WordPressu.

Predpoklady:

• Lokálne vývojové prostredie WordPress.
• Základné pochopenie JavaScriptu, Reactu a PHP.
• Nainštalovaný Node.js a npm (alebo yarn) na kompiláciu zdrojov.

1. Nastavenie projektu:

Vlastné bloky sa zvyčajne vyvíjajú ako súčasť pluginu. Vytvorte súbor nového pluginu (napr. my-custom-blocks/my-custom-blocks.php) a súbor JavaScript pre váš blok (napr. src/index.js). Budete tiež potrebovať proces zostavenia na kompiláciu vášho JavaScriptu. Bežným prístupom je použitie @wordpress/scripts, ktoré poskytuje pohodlný spôsob správy kompilácie.

V koreňovom adresári vášho pluginu vytvorte súbor package.json:

{
  "name": "my-custom-blocks",
  "version": "1.0.0",
  "description": "A plugin for custom Gutenberg blocks.",
  "main": "index.js",
  "scripts": {
    "build": "wp-scripts build",
    "start": "wp-scripts start"
  },
  "keywords": ["wordpress", "gutenberg", "block"],
  "author": "Your Name",
  "license": "GPL-2.0-or-later",
  "devDependencies": {
    "@wordpress/scripts": "^26.0.0" 
  }
}

Nainštalujte závislosti: npm install.

2. Registrácia bloku (JavaScript):

Vo vašom súbore src/index.js použijete registerBlockType z balíčka @wordpress/blocks.

import { registerBlockType } from '@wordpress/blocks';
import { __ } from '@wordpress/i18n';

// Import components for the editor
import { Edit } from './edit';
import { Save } from './save';

registerBlockType( 'my-custom-blocks/cta', {
    title: __( 'Call to Action', 'my-custom-blocks' ),
    icon: 'megaphone',
    category: 'widgets',
    attributes: {
        headline: {
            type: 'string',
            default: '',
        },
        buttonText: {
            type: 'string',
            default: 'Learn More',
        },
        buttonUrl: {
            type: 'string',
            default: '#',
        },
    },
    edit: Edit,
    save: Save,
} );

3. Definícia rozhrania editora (src/edit.js):

Táto komponenta spravuje, ako blok vyzerá a funguje v editore.

import { __ } from '@wordpress/i18n';
import { useBlockProps, RichText, InspectorControls } from '@wordpress/block-editor';
import { PanelBody, TextControl } from '@wordpress/components';

export const Edit = ( { attributes, setAttributes } ) => {
    const blockProps = useBlockProps();

    const onChangeHeadline = ( newHeadline ) => {
        setAttributes( { headline: newHeadline } );
    };

    const onChangeButtonText = ( newButtonText ) => {
        setAttributes( { buttonText: newButtonText } );
    };

    const onChangeButtonUrl = ( newButtonUrl ) => {
        setAttributes( { buttonUrl: newButtonUrl } );
    };

    return (
        <>
            <InspectorControls>
                <PanelBody title={ __( 'Button Settings', 'my-custom-blocks' ) }>
                    <TextControl
                        label={ __( 'Button Text', 'my-custom-blocks' ) }
                        value={ attributes.buttonText }
                        onChange={ onChangeButtonText }
                    />
                    <TextControl
                        label={ __( 'Button URL', 'my-custom-blocks' ) }
                        value={ attributes.buttonUrl }
                        onChange={ onChangeButtonUrl }
                    />
                </PanelBody>
            </InspectorControls>
            <div { ...blockProps }>
                <RichText
                    tagName="h3"
                    placeholder={ __( 'Enter your headline here...', 'my-custom-blocks' ) }
                    value={ attributes.headline }
                    onChange={ onChangeHeadline }
                    allowedFormats={ [ 'core/bold', 'core/italic' ] }
                />
                <a href={ attributes.buttonUrl } className="wp-element-button">
                    { attributes.buttonText }
                </a>
            </div>
        </>
    );
};

4. Definícia funkcie save (src/save.js):

Táto funkcia určuje HTML výstup pre front-end.

import { useBlockProps, RichText } from '@wordpress/block-editor';

export const Save = ( { attributes } ) => {
    const blockProps = useBlockProps.save();

    return (
        <div { ...blockProps }>
            <RichText.Content
                tagName="h3"
                value={ attributes.headline }
            />
            <a href={ attributes.buttonUrl } className="wp-element-button">
                { attributes.buttonText }
            </a>
        </div>
    );
};

5. Načítanie skriptu bloku (PHP):

Vo vašom hlavnom súbore pluginu (my-custom-blocks.php) musíte zaregistrovať a načítať váš skompilovaný JavaScript súbor.

<?php
/**
 * Plugin Name: My Custom Blocks
 * Description: Adds custom Gutenberg blocks.
 * Version: 1.0
 * Author: Your Name
 */

function my_custom_blocks_register_block() {
    // Automatically loads the block.json file and enqueues the script.
    register_block_type( __DIR__ . '/build' );
}
add_action( 'init', 'my_custom_blocks_register_block' );
?>

6. Zostavenie zdrojov:

Spustite npm run build vo vašom adresári pluginu. Tým sa skompiluje váš JavaScript do priečinka build.

Teraz aktivujte plugin vo WordPresse. V editore by ste mali vidieť váš blok "Výzva k akcii"!

Osvedčené postupy pre vývoj vlastných blokov

Vývoj vlastných blokov presahuje len ich funkčnosť. Dodržiavanie osvedčených postupov zaisťuje, že vaše bloky sú bezpečné, výkonné, prístupné a udržiavateľné.

• Namespacing: Vždy používajte jedinečný namespace pre váš blok (napr. my-custom-blocks/cta). Tým sa zabráni konfliktom s inými blokmi. Funkcia registerBlockType to rieši.
• Organizácia kódu: Udržujte svoj JavaScript a PHP kód čistý a dobre organizovaný. Pre zložité bloky zvážte rozdelenie vášho JavaScriptu na menšie, opakovane použiteľné komponenty.
• Bezpečnosť:
  • Sanitizácia: Pri ukladaní údajov do databázy (najmä obsahu generovaného používateľmi) ich vždy sanitizujte. WordPress poskytuje funkcie ako sanitize_text_field, esc_url atď.
  • Escaping: Pri výstupe údajov do prehliadača ich vždy escapeujte, aby ste predišli útokom Cross-Site Scripting (XSS). Použite funkcie ako esc_html, esc_attr, esc_url.
  • Nonces: Pre akékoľvek AJAX požiadavky alebo odosielanie formulárov súvisiace s vaším blokom používajte nonces na overenie, že požiadavka pochádza z legitímneho zdroja WordPressu.
• Internacionalizácia (i18n): Používajte funkcie __() a _x() (z @wordpress/i18n) pre všetky používateľom viditeľné reťazce vo vašom JavaScripte. To umožňuje preklad vášho bloku.
• Prístupnosť: Zabezpečte, aby bol váš blok použiteľný pre všetkých. Používajte sémantický HTML, v prípade potreby poskytnite ARIA atribúty a testujte s čítačkami obrazovky.
• Výkon:
  • Lazy Loading: Pre bloky, ktoré načítavajú náročné zdroje alebo zložité dáta, zvážte implementáciu techník lazy loading.
  • Efektívne vykresľovanie: Optimalizujte svoju funkciu save a akékoľvek vykresľovanie na strane servera, aby bolo čo najefektívnejšie.
  • Načítavanie zdrojov: Načítavajte iba potrebné skripty a štýly pre váš blok. Použite enqueue_block_style a enqueue_block_script_handle pre zdroje špecifické pre blok.
• Modularita a rozšíriteľnosť: Využite háky (akcie a filtre) WordPressu vo vašom PHP na úpravu registrácie blokov, podmienené pridávanie vlastných štýlov alebo skriptov, alebo dokonca na zmenu vykresleného výstupu základných blokov.
• block.json: Pre zložitejšie bloky použite súbor block.json na deklarovanie metadát bloku, závislostí, štýlov a názvov skriptov. Toto je moderný štandard pre vývoj blokov a zjednodušuje správu zdrojov.

Integrácia s architektúrou WordPressu

Vlastné bloky nie sú izolované entity. Hlboko sa integrujú so základnou architektúrou WordPressu:

• Háky: Môžete použiť akcie a filtre PHP vo vašom pluginu na úpravu registrácie blokov, pridávanie vlastných štýlov alebo skriptov podmienečne, alebo dokonca na zmenu vykresleného výstupu základných blokov. Napríklad môžete použiť filter block_type_metadata_settings na úpravu nastavení registrovaného bloku.
• Integrácia s témou: Témata založené na blokoch a Full Site Editing (FSE) sa silno spoliehajú na bloky. Vlastné bloky môžu byť navrhnuté tak, aby bezproblémovo zapadli do FSE šablón, čo používateľom umožňuje budovať celé stránky pomocou konzistentného pracovného postupu založeného na blokoch.
• Interoperabilita pluginov: Vaše vlastné bloky môžu interagovať s inými pluginmi. Napríklad vlastný blok produktu môže načítavať dáta z e-commerce pluginu, alebo vlastný blok galérie sa môže integrovať s konkrétnym pluginom knižnice médií.

Pokročilé koncepty a úvahy

• Vykresľovanie na strane servera (SSR): Pre bloky, ktoré vyžadujú dynamické dáta alebo zložité logiky, ktoré je najlepšie spracovať na serveri, môžete implementovať vykresľovanie na strane servera. To zahŕňa definovanie funkcie render_callback vo vašom PHP pri registrácii bloku.
• Dynamické bloky: Bloky, ktoré používajú SSR, sa často označujú ako dynamické bloky. Neukladajú statický HTML do databázy; namiesto toho ukladajú iba svoje atribúty a render_callback generuje HTML pri každom načítaní stránky.
• Štýly blokov: Môžete definovať vlastné štýly pre vaše bloky, ktoré si používatelia môžu vybrať v editore.
• Variácie blokov: Vytvorte variácie základného bloku, aby ste ponúkli predkonfigurované verzie s rôznymi predvolenými nastaveniami alebo vzhľadom.
• Rozdiely medzi editorom a front-endom: Majte na pamäti, že funkcie edit a save môžu potrebovať spracovať rôzne scenáre. Funkcia edit je určená pre interaktívne prostredie editora, zatiaľ čo funkcia save je pre statický HTML výstup. Niekedy môžete potrebovať samostatný render_callback pre dynamické vykresľovanie na front-ende.

Záver

Vývoj vlastných blokov Gutenberg je silná zručnosť, ktorá odomyká novú úroveň prispôsobenia a funkčnosti pre webové stránky WordPress. Pochopením základných komponentov – registrácia, atribúty, funkcie edit a save – a dodržiavaním osvedčených postupov pre bezpečnosť, výkon a prístupnosť môžete vytvárať robustné, opakovane použiteľné a užívateľsky prívetivé bloky. Či už vytvárate vlastný plugin pre klienta alebo vylepšujete svoju vlastnú stránku, zvládnutie vlastných blokov výrazne zvýši vaše schopnosti vývoja WordPressu, čo vám umožní ísť nad rámec štandardných ponúk a vytvárať skutočne jedinečné digitálne zážitky.