Alapvető blokkokon túl: Egyéni Gutenberg blokkok készítése a WordPress funkcióinak bővítéséhez

Összefoglaló

A WordPress blokkszerkesztője, a Gutenberg, moduláris blokkrendszerével forradalmasította a tartalomkészítést. Míg az alapvető blokkok sokoldalúságot kínálnak, az egyéni blokkok elengedhetetlenek az egyedi funkciókhoz és márkázáshoz. Ez a cikk végigvezeti Önt saját Gutenberg blokkok fejlesztésének folyamatán, kitérve olyan alapvető fogalmakra, mint a blokk regisztrációja, az attribútumok és a megjelenítés. Gyakorlati példákat vizsgálunk meg, megbeszéljük a kódrendezés és a biztonság legjobb gyakorlatait, és kiemeljük, hogyan integrálódnak az egyéni blokkok a WordPress architektúrájába és horgonyaiba. Az egyéni blokkfejlesztés elsajátításával jelentősen bővítheti WordPress webhelyének képességeit és felhasználói élményét.

Alapvető blokkokon túl: Egyéni Gutenberg blokkok készítése a WordPress funkcióinak bővítéséhez

A Gutenberg blokkszerkesztő 2019-es bevezetése a WordPress 5.0-ban jelentős változást hozott a tartalom létrehozásának és kezelésének módjában. A klasszikus szerkesztő lineáris megközelítésétől eltávolodva a Gutenberg egy moduláris rendszert vezetett be, ahol a tartalmat különálló "blokkok" alkotják. Míg az alapértelmezett blokkok széles körű igényeket fednek le, sok webhelynek egyedi funkciókra, specifikus dizájnelemekre vagy olyan integrációkra van szüksége, amelyek túlmutatnak a rendelkezésre állókon. Itt jön képbe az egyéni Gutenberg blokkfejlesztés, amely erőteljes módot kínál a WordPress képességeinek bővítésére és pontosan az Ön projektjének igényeihez igazítására.

Az egyéni blokkok fejlesztése lehetővé teszi újrafelhasználható komponensek létrehozását, amelyek egyszerűsítik a tartalomkészítést a szerkesztők számára, biztosítják a márka egységességét, és komplex funkciókat valósítanak meg közvetlenül a szerkesztő felületén. Ez az útmutató végigvezeti Önt a folyamaton, az alapok megértésétől a robusztus és karbantartható egyéni blokkok legjobb gyakorlatainak megvalósításáig.

A blokkszerkesztő architektúrájának megértése

A fejlesztésbe való belekezdés előtt elengedhetetlen megérteni, hogyan működik a Gutenberg és blokkjai a WordPress ökoszisztémájában. Maga a WordPress egy moduláris PHP és MySQL architektúrára épül. A témák szabályozzák a megjelenítést, a bővítmények pedig a funkcionalitást. A Gutenberg, mint a WordPress alapvető funkciója, zökkenőmentesen integrálódik ebbe a struktúrába. JavaScriptet (főleg Reactot) használ a dinamikus, böngészőben történő szerkesztési élményhez, míg a PHP kezeli a szerveroldali regisztrációt és megjelenítést.

Az egyéni blokkok lényegében JavaScript komponensek, amelyeket regisztrálnak a WordPressben. Amikor egy felhasználó egyéni blokkot ad hozzá egy bejegyzéshez vagy oldalhoz, a Gutenberg eltárolja annak konfigurációját (attribútumait) az adatbázisban. A bejegyzés megjelenítésekor a front-enden a WordPress PHP-t használ a konfiguráció értelmezésére és a megfelelő HTML kimenet előállítására, gyakran ugyanazt a JavaScript komponenst vagy egy külön PHP sablont használva.

Az egyéni blokk alapvető komponensei

Minden egyéni Gutenberg blokk alapvetően több kulcsfontosságú részből áll:

1. Regisztráció: Ez az a folyamat, amikor tájékoztatjuk a WordPress-t az új blokkról. Magában foglalja a nevének, címének, ikonjának és egyéb metaadatainak meghatározását. Ezt elsősorban a JavaScript registerBlockType funkciója végzi.
2. Attribútumok: Ezek a blokkhoz kapcsolódó adatmezők. Gondoljon rájuk úgy, mint a beállításokra vagy tulajdonságokra, amelyeket a felhasználó módosíthat egy blokk adott példányához (pl. szöveges tartalom, kép URL, színválasztás). Az attribútumokat a blokk JavaScript regisztrációjában határozzák meg.
3. Edit funkció: Ez a JavaScript funkció határozza meg, hogyan jelenik meg és viselkedik a blokk a Gutenberg szerkesztőben. Itt építjük fel az interaktív felhasználói felületet, amelyet a tartalomkészítők a blokk konfigurálásához használnak.
4. Save funkció: Ez a JavaScript funkció határozza meg a statikus HTML jelölést, amely az adatbázisba kerül mentésre és megjelenítésre a webhely front-endjén. Tükröznie kell a blokk attribútumainak aktuális állapotát.

Lépésről lépésre: Az első egyéni blokk létrehozása

Készítsünk egy egyszerű egyéni blokkot, amely egy "Call to Action" (CTA) feliratot jelenít meg egy címsorral és egy gombbal. Ez a példa az alapvető JavaScript aspektusokra összpontosít a blokk regisztrálásához és szerkesztéséhez, feltételezve, hogy egy alapvető WordPress fejlesztői környezet már be van állítva.

Előfeltételek:

• Helyi WordPress fejlesztői környezet.
• Alapvető ismeretek JavaScript, React és PHP terén.
• Telepített Node.js és npm (vagy yarn) az eszközök fordításához.

1. Projekt beállítása:

Az egyéni blokkokat általában bővítmény részeként fejlesztik. Hozzon létre egy új bővítményfájlt (pl. my-custom-blocks/my-custom-blocks.php) és egy JavaScript fájlt a blokkjához (pl. src/index.js). Szüksége lesz egy build folyamatra is a JavaScript fordításához. A @wordpress/scripts használata egy gyakori megközelítés, amely kényelmes módot kínál a fordítás kezelésére.

A bővítmény gyökérkönyvtárában hozzon létre egy package.json fájlt:

{
  "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" 
  }
}

Telepítse a függőségeket: npm install.

2. Blokkok regisztrálása (JavaScript):

A src/index.js fájlban a @wordpress/blocks csomagból származó registerBlockType funkciót fogja használni.

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. A szerkesztői felület meghatározása (src/edit.js):

Ez a komponens kezeli, hogyan néz ki és működik a blokk a szerkesztőben.

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. A Save funkció meghatározása (src/save.js):

Ez a funkció határozza meg a HTML kimenetet a front-endhez.

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. A blokk szkriptjének enqueue-olása (PHP):

A fő bővítményfájlban (my-custom-blocks.php) regisztrálnia és enqueue-olnia kell a lefordított JavaScript fájlt.

<?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. Az eszközök fordítása:

Futtassa az npm run build parancsot a bővítmény könyvtárában. Ez lefordítja a JavaScriptet a build mappába.

Most aktiválja a bővítményt a WordPressben. Látnia kell a "Call to Action" blokkot a szerkesztőben!

Legjobb gyakorlatok az egyéni blokkfejlesztéshez

Az egyéni blokkok fejlesztése túlmutat a funkcionálissá tételükön. A legjobb gyakorlatok betartása biztosítja, hogy blokkjai biztonságosak, performánsak, hozzáférhetőek és karbantarthatóak legyenek.

• Névtér: Mindig használjon egyedi névteret a blokkjához (pl. my-custom-blocks/cta). Ez megakadályozza a konfliktusokat más blokkokkal. A registerBlockType funkció kezeli ezt.
• Kódrendezés: Tartsa a JavaScript és PHP kódját tiszta és jól szervezett formában. Komplex blokkok esetén fontolja meg a JavaScript kisebb, újrafelhasználható komponensekre bontását.
• Biztonság:
  • Tisztítás (Sanitization): Amikor adatokat ment az adatbázisba (különösen felhasználó által generált tartalmat), mindig tisztítsa meg azokat. A WordPress olyan funkciókat biztosít, mint a sanitize_text_field, esc_url stb.
  • Szökevények (Escaping): Amikor adatokat jelenít meg a böngészőben, mindig szökelje meg azokat a Cross-Site Scripting (XSS) támadások megelőzése érdekében. Használjon olyan funkciókat, mint az esc_html, esc_attr, esc_url.
  • Nonces: Bármilyen AJAX kérés vagy űrlapküldés esetén, amely a blokkjához kapcsolódik, használjon nonce-okat annak ellenőrzésére, hogy a kérés legitim WordPress forrásból származik-e.
• Nemzetköziesítés (i18n): Használja a __() és _x() funkciókat (a @wordpress/i18n csomagból) minden felhasználó által látható szöveghez a JavaScriptben. Ez teszi a blokkot fordíthatóvá.
• Hozzáférhetőség: Győződjön meg róla, hogy blokkja mindenki számára használható. Használjon szemantikus HTML-t, adjon meg ARIA attribútumokat, ahol szükséges, és tesztelje képernyőolvasókkal.
• Teljesítmény:
  • Lusta betöltés (Lazy Loading): Azoknál a blokkoknál, amelyek nehéz eszközöket vagy komplex adatokat töltenek be, fontolja meg a lusta betöltési technikák alkalmazását.
  • Hatékony megjelenítés: Optimalizálja a save funkciót és minden szerveroldali megjelenítést, hogy a lehető leghatékonyabb legyen.
  • Eszközök enqueue-olása: Csak a blokkjához szükséges szkripteket és stílusokat enqueue-olja. Használja az enqueue_block_style és enqueue_block_script_handle funkciókat a blokkspecifikus eszközökhöz.
• Modularitás és bővíthetőség: Használja ki a WordPress horgonypontjait (akciók és szűrők) a PHP-ban, hogy lehetővé tegye más bővítmények vagy témák számára a blokk viselkedésének vagy kimenetének módosítását.
• block.json: Komplexebb blokkok esetén használjon egy block.json fájlt a blokk metaadatainak, függőségeinek, stílusainak és szkriptkezelőinek deklarálására. Ez a modern szabvány a blokkfejlesztéshez, és egyszerűsíti az eszközök kezelését.

Integráció a WordPress architektúrájával

Az egyéni blokkok nem elszigetelt entitások. Mélyen integrálódnak a WordPress alapvető architektúrájába:

• Horgonypontok (Hooks): PHP akciókat és szűrőket használhat a bővítményében a blokk regisztráció módosításához, egyéni stílusok vagy szkriptek feltételes hozzáadásához, vagy akár a magblokkok megjelenített kimenetének módosításához. Például használhatja a block_type_metadata_settings szűrőt egy regisztrált blokk beállításainak módosításához.
• Téma integráció: A blokk alapú témák és a Full Site Editing (FSE) erősen támaszkodnak a blokkokra. Az egyéni blokkok úgy tervezhetők, hogy zökkenőmentesen illeszkedjenek az FSE sablonokba, lehetővé téve a felhasználók számára, hogy teljes webhelyeket építsenek egy egységes blokk alapú munkafolyamattal.
• Bővítmények közötti együttműködés: Az egyéni blokkok képesek interakcióba lépni más bővítményekkel. Például egy egyéni termékblokk adatokat húzhat le egy e-kereskedelmi bővítményből, vagy egy egyéni galériablokk integrálódhat egy specifikus médiatár bővítménnyel.

Haladó fogalmak és megfontolások

• Szerveroldali megjelenítés (SSR): Azoknál a blokkoknál, amelyek dinamikus adatokat vagy komplex logikát igényelnek, amelyeket a szerveren a legcélszerűbb kezelni, szerveroldali megjelenítést valósíthat meg. Ez magában foglalja egy render_callback funkció meghatározását a PHP-ban a blokk regisztrálásakor.
• Dinamikus blokkok: Az SSR-t használó blokkokat gyakran dinamikus blokkoknak nevezik. Nem mentenek statikus HTML-t az adatbázisba; ehelyett csak az attribútumaikat mentik, és a render_callback minden oldalbetöltéskor generálja a HTML-t.
• Blokk stílusok: Egyéni stílusokat határozhat meg a blokkjaihoz, amelyeket a felhasználók kiválaszthatnak a szerkesztőben.
• Blokk variációk: Hozzon létre egy alapblokk variációit, hogy előre konfigurált verziókat kínáljon különböző alapértelmezett beállításokkal vagy megjelenésekkel.
• Szerkesztő és front-end különbségek: Legyen tisztában azzal, hogy az edit és a save funkcióknak eltérő forgatókönyveket kell kezelniük. Az edit funkció az interaktív szerkesztői élményhez való, míg a save funkció a statikus HTML kimenethez. Néha külön render_callback-ra lehet szükség a dinamikus front-end megjelenítéshez.

Következtetés

Az egyéni Gutenberg blokkfejlesztés egy erőteljes készség, amely a testreszabás és a funkcionalitás új szintjét nyitja meg a WordPress webhelyek számára. Az alapvető komponensek – regisztráció, attribútumok, szerkesztés és mentés funkciók – megértésével, valamint a biztonság, a teljesítmény és a hozzáférhetőség legjobb gyakorlatainak betartásával robusztus, újrafelhasználható és felhasználóbarát blokkokat hozhat létre. Akár egyéni bővítményt épít egy ügyfél számára, akár a saját webhelyét fejleszti, az egyéni blokkok elsajátítása jelentősen emeli WordPress fejlesztési képességeit, lehetővé téve, hogy túllépjen a standard kínálaton, és igazán egyedi digitális élményeket hozzon létre.