Izvan osnovnih blokova: Kreiranje prilagođenih Gutenberg blokova za poboljšanu funkcionalnost WordPressa

Sažetak

WordPress uređivač blokova, Gutenberg, revolucionirao je kreiranje sadržaja svojim modularnim sistemom blokova. Iako osnovni blokovi nude svestranost, prilagođeni blokovi su neophodni za jedinstvene funkcionalnosti i brendiranje. Ovaj članak vas vodi kroz proces razvoja vlastitih Gutenberg blokova, pokrivajući osnovne koncepte kao što su registracija blokova, atributi i renderovanje. Istražit ćemo praktične primjere, razgovarati o najboljim praksama za organizaciju koda i sigurnost, te istaknuti kako se prilagođeni blokovi integriraju s WordPress arhitekturom i hookovima. Ovladavanjem razvojem prilagođenih blokova, možete značajno poboljšati mogućnosti vaše WordPress web stranice i korisničko iskustvo.

Izvan osnovnih blokova: Kreiranje prilagođenih Gutenberg blokova za poboljšanu funkcionalnost WordPressa

Pojavljivanje Gutenberg uređivača blokova u WordPressu 5.0 označilo je značajan pomak u načinu na koji se sadržaj kreira i upravlja. Odmičući se od linearnog pristupa klasičnog uređivača, Gutenberg je uveo modularni sistem gdje se sadržaj gradi pomoću diskretnih "blokova". Iako zadani set blokova pokriva širok spektar uobičajenih potreba, mnoge web stranice zahtijevaju jedinstvene funkcionalnosti, specifične dizajnerske elemente ili integracije koje nadilaze ono što je lako dostupno. Tu dolazi razvoj prilagođenih Gutenberg blokova, nudeći moćan način za proširenje WordPress mogućnosti i precizno prilagođavanje vašim projektnim zahtjevima.

Razvoj prilagođenih blokova omogućava vam kreiranje komponenti koje se mogu ponovo koristiti, pojednostavljuju kreiranje sadržaja za urednike, osiguravaju dosljednost brenda i implementiraju složene funkcije direktno unutar interfejsa uređivača. Ovaj vodič će vas provesti kroz proces, od razumijevanja osnova do implementacije najboljih praksi za robusne i održive prilagođene blokove.

Razumijevanje arhitekture uređivača blokova

Prije nego što zaronite u razvoj, ključno je shvatiti kako Gutenberg i njegovi blokovi funkcioniraju unutar WordPress ekosistema. Sam WordPress je izgrađen na modularnoj PHP i MySQL arhitekturi. Teme kontrolišu prezentaciju, a dodaci dodaju funkcionalnost. Gutenberg, kao osnovna WordPress funkcija, besprekorno se integrira u ovu strukturu. Koristi JavaScript (uglavnom React) za dinamičko iskustvo uređivanja u pregledniku, dok PHP obrađuje registraciju i renderovanje na strani servera.

Prilagođeni blokovi su u suštini JavaScript komponente koje se registruju kod WordPressa. Kada korisnik doda prilagođeni blok u objavu ili stranicu, Gutenberg pohranjuje njegovu konfiguraciju (atribute) u bazu podataka. Prilikom renderovanja objave na front-endu, WordPress koristi PHP za tumačenje ove konfiguracije i izlaz odgovarajućeg HTML-a, često koristeći istu JavaScript komponentu ili zasebni PHP predložak.

Ključne komponente prilagođenog bloka

Svaki prilagođeni Gutenberg blok, u svojoj suštini, sastoji se od nekoliko ključnih dijelova:

1. Registracija: Ovo je proces obavještavanja WordPressa o vašem novom bloku. Uključuje definiranje njegovog imena, naslova, ikone i drugih metapodataka. Ovo se uglavnom radi pomoću JavaScript funkcije registerBlockType.
2. Atributi: Ovo su polja podataka povezana s vašim blokom. Zamislite ih kao postavke ili svojstva koja korisnik može mijenjati za određenu instancu bloka (npr. tekstualni sadržaj, URL slike, izbor boje). Atributi se definiraju u JavaScript registraciji bloka.
3. Funkcija uređivanja (edit): Ova JavaScript funkcija definira kako blok izgleda i ponaša se unutar Gutenberg uređivača. Ovdje gradite interaktivni UI koji će kreatori sadržaja koristiti za konfigurisanje bloka.
4. Funkcija spremanja (save): Ova JavaScript funkcija definira statički HTML kod koji će biti sačuvan u bazi podataka i renderovan na front-endu vaše web stranice. Trebao bi odražavati trenutno stanje atributa bloka.

Korak po korak: Kreiranje vašeg prvog prilagođenog bloka

Kreirajmo jednostavan prilagođeni blok koji prikazuje "Poziv na akciju" (CTA) s naslovom i dugmetom. Ovaj primjer će se fokusirati na osnovne JavaScript aspekte za registraciju i uređivanje blokova, pretpostavljajući da je postavljeno osnovno WordPress razvojno okruženje.

Preduvjeti:

• Lokalno WordPress razvojno okruženje.
• Osnovno razumijevanje JavaScripta, React-a i PHP-a.
• Instaliran Node.js i npm (ili yarn) za kompilaciju resursa.

1. Postavljanje projekta:

Prilagođeni blokovi se obično razvijaju kao dio dodatka. Kreirajte novu datoteku dodatka (npr. my-custom-blocks/my-custom-blocks.php) i JavaScript datoteku za vaš blok (npr. src/index.js). Također će vam trebati proces izgradnje za kompilaciju vašeg JavaScripta. Uobičajen pristup je korištenje @wordpress/scripts koji pruža zgodan način za rukovanje kompilacijom.

U korijenu vašeg dodatka, kreirajte package.json datoteku:

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

Instalirajte zavisnosti: npm install.

2. Registracija bloka (JavaScript):

U vašoj src/index.js datoteci, koristit ćete registerBlockType iz @wordpress/blocks paketa.

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. Definiranje interfejsa uređivača (src/edit.js):

Ova komponenta rukuje kako blok izgleda i funkcioniše unutar uređivača.

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. Definiranje funkcije spremanja (src/save.js):

Ova funkcija određuje HTML izlaz za 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. Uključivanje skripte bloka (PHP):

U vašoj glavnoj datoteci dodatka (my-custom-blocks.php), morate registrovati i uključiti vašu kompiliranu JavaScript datoteku.

<?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. Izgradnja resursa:

Pokrenite npm run build u direktorijumu vašeg dodatka. Ovo će kompilovati vaš JavaScript u build folder.

Sada aktivirajte dodatak u WordPressu. Trebali biste vidjeti vaš "Poziv na akciju" blok dostupan u uređivaču!

Najbolje prakse za razvoj prilagođenih blokova

Razvoj prilagođenih blokova ide dalje od pukog čineći ih funkcionalnim. Pridržavanje najboljih praksi osigurava da su vaši blokovi sigurni, efikasni, pristupačni i održivi.

• Imenovanje prostora (Namespacing): Uvijek koristite jedinstveni prostor imena za vaš blok (npr. my-custom-blocks/cta). Ovo sprječava sukobe s drugim blokovima. Funkcija registerBlockType rukuje ovim.
• Organizacija koda: Neka vaš JavaScript i PHP kod budu čisti i dobro organizovani. Za složene blokove, razmislite o razbijanju vašeg JavaScripta na manje, komponente koje se mogu ponovo koristiti.
• Sigurnost:
  • Sanitizacija: Prilikom spremanja podataka u bazu podataka (posebno sadržaja generiranog od strane korisnika), uvijek ih sanitizujte. WordPress pruža funkcije poput sanitize_text_field, esc_url, itd.
  • Escaping: Prilikom izlaza podataka u preglednik, uvijek ih escape-ujte kako biste spriječili napade unakrsnog skriptiranja (XSS). Koristite funkcije poput esc_html, esc_attr, esc_url.
  • Nonces: Za sve AJAX zahtjeve ili slanje obrazaca vezane za vaš blok, koristite nonces za provjeru da li zahtjev potiče od legitimnog WordPress izvora.
• Internacionalizacija (i18n): Koristite __() i _x() funkcije (iz @wordpress/i18n) za sve korisničke stringove u vašem JavaScriptu. Ovo čini vaš blok prevedivim.
• Pristupačnost: Osigurajte da je vaš blok upotrebljiv za sve. Koristite semantički HTML, pružite ARIA atribute gdje je potrebno i testirajte sa čitačima ekrana.
• Performanse:
  • Odloženo učitavanje (Lazy Loading): Za blokove koji učitavaju teške resurse ili složene podatke, razmislite o implementaciji tehnika odloženog učitavanja.
  • Efikasno renderovanje: Optimizirajte vašu save funkciju i bilo koje renderovanje na strani servera kako bi bilo što efikasnije.
  • Uključivanje resursa: Uključujte samo neophodne skripte i stilove za vaš blok. Koristite enqueue_block_style i enqueue_block_script_handle za resurse specifične za blok.
• Modularnost i proširivost: Iskoristite WordPress hookove (akcije i filtere) unutar vašeg PHP-a kako biste omogućili drugim dodacima ili temama da izmijene ponašanje ili izlaz vašeg bloka.
• block.json: Za složenije blokove, koristite block.json datoteku za deklarisanje metapodataka bloka, zavisnosti, stilova i rukovalaca skripti. Ovo je moderan standard za razvoj blokova i pojednostavljuje upravljanje resursima.

Integracija s WordPress arhitekturom

Prilagođeni blokovi nisu izolovani entiteti. Duboko se integriraju s osnovnom arhitekturom WordPressa:

• Hookovi: Možete koristiti PHP akcije i filtere u vašem dodatku za izmjenu registracije blokova, dodavanje prilagođenih stilova ili skripti uslovno, ili čak izmjenu renderovanog izlaza osnovnih blokova. Na primjer, možete koristiti block_type_metadata_settings filter za izmjenu postavki registrovanog bloka.
• Integracija s temom: Teme zasnovane na blokovima i Full Site Editing (FSE) se uveliko oslanjaju na blokove. Prilagođeni blokovi mogu biti dizajnirani tako da se besprekorno uklapaju u FSE predloške, omogućavajući korisnicima da grade cijele web stranice koristeći dosljedan radni tok zasnovan na blokovima.
• Interoperabilnost dodataka: Vaši prilagođeni blokovi mogu komunicirati s drugim dodacima. Na primjer, prilagođeni blok proizvoda može povući podatke iz dodataka za e-trgovinu, ili prilagođeni blok galerije može se integrirati sa specifičnim dodatkom za medijsku biblioteku.

Napredni koncepti i razmatranja

• Renderovanje na strani servera (SSR): Za blokove koji zahtijevaju dinamičke podatke ili složenu logiku koja se najbolje obrađuje na serveru, možete implementirati renderovanje na strani servera. Ovo uključuje definiranje render_callback funkcije u vašem PHP-u prilikom registracije bloka.
• Dinamički blokovi: Blokovi koji koriste SSR često se nazivaju dinamičkim blokovima. Oni ne spremaju statički HTML u bazu podataka; umjesto toga, spremaju samo svoje atribute, a render_callback generiše HTML pri svakom učitavanju stranice.
• Stilovi blokova: Možete definisati prilagođene stilove za vaše blokove koje korisnici mogu odabrati unutar uređivača.
• Varijacije blokova: Kreirajte varijacije osnovnog bloka kako biste ponudili unaprijed konfigurisane verzije s različitim podrazumevanim postavkama ili izgledom.
• Razlike između uređivača i front-enda: Imajte na umu da edit i save funkcije možda moraju rukovati različitim scenarijima. edit funkcija je za interaktivno iskustvo uređivača, dok je save funkcija za statički HTML izlaz. Ponekad vam može zatrebati zaseban render_callback za dinamičko renderovanje na front-endu.

Zaključak

Razvoj prilagođenih Gutenberg blokova je moćna vještina koja otključava novi nivo prilagođavanja i funkcionalnosti za WordPress web stranice. Razumijevanjem ključnih komponenti—registracija, atributi, funkcije uređivanja i spremanja—i pridržavanjem najboljih praksi za sigurnost, performanse i pristupačnost, možete kreirati robusne, višekratne i korisnički prilagođene blokove. Bilo da gradite prilagođeni dodatak za klijenta ili poboljšavate vlastitu web stranicu, savladavanje prilagođenih blokova značajno će unaprijediti vaše WordPress razvojne mogućnosti, omogućavajući vam da pređete preko standardnih ponuda i kreirate zaista jedinstvena digitalna iskustva.