Kromě základních bloků: Tvorba vlastních bloků Gutenberg pro rozšířené funkce WordPressu

Shrnutí

Editor bloků WordPressu, Gutenberg, způsobil revoluci ve tvorbě obsahu svým modulárním systémem bloků. Zatímco základní bloky nabízejí všestrannost, vlastní bloky jsou nezbytné pro jedinečné funkce a branding. Tento článek vás provede procesem vývoje vlastních bloků Gutenberg, pokrývá základní koncepty, jako je registrace bloků, atributy a vykreslování. Prozkoumáme praktické příklady, probereme osvědčené postupy pro organizaci kódu a zabezpečení a zdůrazníme, jak se vlastní bloky integrují s architekturou a háčky WordPressu. Zvládnutím vývoje vlastních bloků můžete výrazně rozšířit možnosti svého webu WordPress a uživatelskou zkušenost.

Kromě základních bloků: Tvorba vlastních bloků Gutenberg pro rozšířené funkce WordPressu

Zavedení editoru bloků Gutenberg ve WordPressu 5.0 znamenalo významný posun ve způsobu vytváření a správy obsahu. Gutenberg, který se odklonil od lineárního přístupu klasického editoru, zavedl modulární systém, kde je obsah vytvářen pomocí diskrétních "bloků". Zatímco výchozí sada bloků pokrývá širokou škálu běžných potřeb, mnoho webů vyžaduje jedinečné funkce, specifické designové prvky nebo integrace, které přesahují to, co je snadno dostupné. Zde přichází na řadu vývoj vlastních bloků Gutenberg, který nabízí výkonný způsob, jak rozšířit možnosti WordPressu a přesně jej přizpůsobit požadavkům vašeho projektu.

Vývoj vlastních bloků vám umožňuje vytvářet opakovaně použitelné komponenty, které zefektivňují tvorbu obsahu pro editory, zajišťují konzistenci značky a implementují složité funkce přímo v rozhraní editoru. Tento průvodce vás provede procesem od pochopení základů až po implementaci osvědčených postupů pro robustní a udržovatelné vlastní bloky.

Pochopení architektury editoru bloků

Před ponořením se do vývoje je klíčové pochopit, jak Gutenberg a jeho bloky fungují v ekosystému WordPressu. Samotný WordPress je postaven na modulární architektuře PHP a MySQL. Témata řídí prezentaci a pluginy přidávají funkčnost. Gutenberg jako základní funkce WordPressu se bezproblémově integruje do této struktury. Využívá JavaScript (především React) pro dynamické prostředí úprav v prohlížeči, zatímco PHP zpracovává registraci a vykreslování na straně serveru.

Vlastní bloky jsou v podstatě komponenty JavaScriptu, které jsou registrovány u WordPressu. Když uživatel přidá vlastní blok do příspěvku nebo stránky, Gutenberg uloží jeho konfiguraci (atributy) do databáze. Při vykreslování příspěvku na front-endu WordPress používá PHP k interpretaci této konfigurace a výstupu odpovídajícího HTML, často s využitím stejné komponenty JavaScript nebo samostatné šablony PHP.

Základní komponenty vlastního bloku

Každý vlastní blok Gutenberg se v podstatě skládá z několika klíčových částí:

1. Registrace: Toto je proces informování WordPressu o vašem novém bloku. Zahrnuje definování jeho názvu, titulu, ikony a dalších metadat. To se provádí primárně pomocí funkce JavaScript registerBlockType.
2. Atributy: Toto jsou datová pole spojená s vaším blokem. Představte si je jako nastavení nebo vlastnosti, které může uživatel upravit pro konkrétní instanci bloku (např. textový obsah, URL obrázku, výběr barvy). Atributy jsou definovány v registraci JavaScriptu bloku.
3. Funkce edit: Tato funkce JavaScript definuje, jak blok vypadá a chová se v editoru Gutenberg. Zde vytváříte interaktivní uživatelské rozhraní, které budou tvůrci obsahu používat ke konfiguraci bloku.
4. Funkce save: Tato funkce JavaScript definuje statickou HTML strukturu, která bude uložena do databáze a vykreslena na front-endu vašeho webu. Měla by odrážet aktuální stav atributů bloku.

Krok za krokem: Vytvoření prvního vlastního bloku

Vytvoříme jednoduchý vlastní blok, který zobrazí "Výzvu k akci" (CTA) s nadpisem a tlačítkem. Tento příklad se zaměří na základní aspekty JavaScriptu pro registraci a úpravu bloků, za předpokladu, že je nastaveno základní vývojové prostředí WordPressu.

Předpoklady:

• Lokální vývojové prostředí WordPressu.
• Základní znalost JavaScriptu, Reactu a PHP.
• Nainstalovaný Node.js a npm (nebo yarn) pro kompilaci prostředků.

1. Nastavení projektu:

Vlastní bloky se obvykle vyvíjejí jako součást pluginu. Vytvořte soubor nového pluginu (např. my-custom-blocks/my-custom-blocks.php) a soubor JavaScript pro váš blok (např. src/index.js). Budete také potřebovat proces sestavení pro kompilaci vašeho JavaScriptu. Běžným přístupem je použití @wordpress/scripts, které poskytuje pohodlný způsob zpracování kompilace.

V kořenovém adresáři vašeho pluginu vytvořte soubor 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" 
  }
}

Nainstalujte závislosti: npm install.

2. Registrace bloku (JavaScript):

Ve vašem souboru src/index.js použijete registerBlockType z balíčku @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. Definování rozhraní editoru (src/edit.js):

Tato komponenta zpracovává vzhled a funkci bloku v editoru.

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. Definování funkce save (src/save.js):

Tato funkce určuje HTML výstup pro 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. Zařazení skriptu bloku (PHP):

Ve vašem hlavním souboru pluginu (my-custom-blocks.php) musíte zaregistrovat a zařadit váš zkompilovaný JavaScript soubor.

<?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. Sestavení prostředků:

Spusťte npm run build ve vašem adresáři pluginu. Tím se zkompiluje váš JavaScript do složky build.

Nyní aktivujte plugin ve WordPressu. Měli byste vidět svůj blok "Call to Action" dostupný v editoru!

Osvědčené postupy pro vývoj vlastních bloků

Vývoj vlastních bloků jde nad rámec pouhého zajištění jejich funkčnosti. Dodržování osvědčených postupů zajišťuje, že vaše bloky budou bezpečné, výkonné, přístupné a udržovatelné.

• Jmenné prostory: Vždy používejte jedinečný jmenný prostor pro svůj blok (např. my-custom-blocks/cta). Tím se zabrání konfliktům s jinými bloky. Funkce registerBlockType to zajišťuje.
• Organizace kódu: Udržujte svůj kód JavaScript a PHP čistý a dobře organizovaný. U složitých bloků zvažte rozdělení vašeho JavaScriptu do menších, opakovaně použitelných komponent.
• Zabezpečení:
  • Sanitizace: Při ukládání dat do databáze (zejména obsahu generovaného uživateli) je vždy sanitizujte. WordPress poskytuje funkce jako sanitize_text_field, esc_url atd.
  • Escapování: Při výstupu dat do prohlížeče je vždy escapujte, abyste zabránili útokům Cross-Site Scripting (XSS). Použijte funkce jako esc_html, esc_attr, esc_url.
  • Nonces: Pro jakékoli požadavky AJAX nebo odesílání formulářů souvisejících s vaším blokem používejte nonces k ověření, že požadavek pochází z legitimního zdroje WordPressu.
• Internacionalizace (i18n): Používejte funkce __() a _x() (z @wordpress/i18n) pro všechny texty určené uživatelům ve vašem JavaScriptu. Tím je váš blok přeložitelný.
• Přístupnost: Zajistěte, aby byl váš blok použitelný pro všechny. Používejte sémantický HTML, v případě potřeby poskytněte atributy ARIA a testujte s čtečkami obrazovky.
• Výkon:
  • Načítání za běhu (Lazy Loading): U bloků, které načítají náročné prostředky nebo složitá data, zvažte implementaci technik načítání za běhu.
  • Efektivní vykreslování: Optimalizujte svou funkci save a jakékoli vykreslování na straně serveru, aby bylo co nejefektivnější.
  • Zařazování prostředků: Zařazujte pouze nezbytné skripty a styly pro váš blok. Použijte enqueue_block_style a enqueue_block_script_handle pro prostředky specifické pro blok.
• Modularita a rozšiřitelnost: Využijte háčky (akce a filtry) WordPressu ve svém PHP k úpravě registrace bloků, podmíněnému přidávání vlastních stylů nebo skriptů, nebo dokonce k úpravě vykresleného výstupu základních bloků.
• block.json: U složitějších bloků použijte soubor block.json k deklaraci metadat bloku, závislostí, stylů a popisovačů skriptů. Toto je moderní standard pro vývoj bloků a zjednodušuje správu prostředků.

Integrace s architekturou WordPressu

Vlastní bloky nejsou izolované entity. Hluboce se integrují se základní architekturou WordPressu:

• Háčky (Hooks): Můžete použít akce a filtry PHP ve svém pluginu k úpravě registrace bloků, podmíněnému přidávání vlastních stylů nebo skriptů, nebo dokonce k úpravě vykresleného výstupu základních bloků. Například můžete použít filtr block_type_metadata_settings k úpravě nastavení registrovaného bloku.
• Integrace s tématy: Témata založená na blocích a plnohodnotné úpravy (FSE) silně spoléhají na bloky. Vlastní bloky mohou být navrženy tak, aby bezproblémově zapadaly do šablon FSE, což uživatelům umožňuje vytvářet celé weby pomocí konzistentního pracovního postupu založeného na blocích.
• Interoperabilita pluginů: Vaše vlastní bloky mohou interagovat s jinými pluginy. Například vlastní blok produktu může načítat data z pluginu e-commerce, nebo vlastní blok galerie může integrovat se specifickým pluginem pro knihovnu médií.

Pokročilé koncepty a úvahy

• Vykreslování na straně serveru (SSR): U bloků, které vyžadují dynamická data nebo složitou logiku, která je nejlépe zpracována na serveru, můžete implementovat vykreslování na straně serveru. To zahrnuje definování funkce render_callback ve vašem PHP při registraci bloku.
• Dynamické bloky: Bloky, které používají SSR, jsou často označovány jako dynamické bloky. Do databáze neukládají statický HTML; místo toho ukládají pouze své atributy a render_callback generuje HTML při každém načtení stránky.
• Styly bloků: Můžete definovat vlastní styly pro své bloky, které si uživatelé mohou vybrat v editoru.
• Varianty bloků: Vytvářejte varianty základního bloku, abyste nabídli předkonfigurované verze s různými výchozími nastaveními nebo vzhledy.
• Rozdíly mezi editorem a front-endem: Mějte na paměti, že funkce edit a save mohou potřebovat zpracovávat různé scénáře. Funkce edit je určena pro interaktivní prostředí editoru, zatímco funkce save je pro statický HTML výstup. Někdy můžete potřebovat samostatný render_callback pro dynamické vykreslování na front-endu.

Závěr

Vývoj vlastních bloků Gutenberg je mocná dovednost, která odemyká novou úroveň přizpůsobení a funkčnosti pro webové stránky WordPress. Pochopením základních komponent – registrace, atributů, funkcí edit a save – a dodržováním osvědčených postupů pro zabezpečení, výkon a přístupnost můžete vytvářet robustní, opakovaně použitelné a uživatelsky přívětivé bloky. Ať už vytváříte vlastní plugin pro klienta nebo vylepšujete svůj vlastní web, zvládnutí vlastních bloků výrazně zlepší vaše vývojové schopnosti ve WordPressu, umožní vám jít nad rámec standardních nabídek a vytvářet skutečně jedinečné digitální zážitky.