Скочи на садржај

Kako kreirati sopstveni WordPress blok za Gutenberg

Šta su Gutenberg blokovi i zašto ih kreirati?

WordPress Gutenberg editor je revolucionisao način na koji se kreira sadržaj, zamjenjujući tradicionalni TinyMCE editor sa blokovima – modularnim komponentama koje se mogu lako slagati i prilagođavati. Svaki element na stranici – paragraf, slika, galerija, naslov – postaje zaseban blok sa svojim opcijama. Dok Gutenberg dolazi sa bogatim setom ugrađenih blokova, prava moć leži u mogućnosti kreiranja prilagođenih blokova koji tačno odgovaraju vašim specifičnim potrebama.

Razlozi za kreiranje sopstvenog bloka su mnogobrojni. Možete da standardizujete dizajn ponavljajućih elemenata na svom sajtu, kao što su posebni citati, koraci u uputstvima, ili specifične kartice usluga. Ovo eliminiše potrebu za kopiranjem koda ili korišćenjem shortcode-ova, čineći proces uređivanja mnogo intuitivnijim za klijente ili urednike. Takođe, možete da enkapsulirate kompleksnu funkcionalnost, poput interaktivnih mapa, formulara za pretplatu, ili dinamičkih lista proizvoda, u jednostavan blok koji se dodaje jednim klikom. Kroz naš iscrpni vodič za WordPress Gutenberg editor možete dublje da istražite osnove i napredne tehnike rada sa ovim sistemom.

Osnove: Šta vam je potrebno pre nego što počnete?

Pre nego što zaronite u kod, neophodno je da imate osnovno razumevanje određenih tehnologija. Za kreiranje prilagođenog Gutenberg bloka potrebno vam je poznavanje JavaScript-a (posebno ES6+ sintakse) i React-a, jer je Gutenberg izgrađen na ovoj popularnoj JavaScript biblioteci. Takođe, korisno je poznavanje JSX-a (sintakse koja podseća na HTML) i Webpack-a za bundlovanje JavaScript fajlova. Sa WordPress strane, treba da razumete osnove PHP-a, posebno kako funkcionišu WordPress hook-ovi za registraciju skripti i stilova.

Za razvojnu okolinu, potrebno vam je lokalno ili staging okruženje sa najnovijom verzijom WordPress-a. Možete koristiti alate kao što su Local by Flywheel ili XAMPP. Takođe, Node.js i npm (Node Package Manager) moraju biti instalirani na vašem računaru kako biste mogli da instalirate potrebne zavisnosti i pokrenete build proces. Ako želite da kreirate blok kao deo teme, preporučljivo je da radite u okviru WordPress child teme kako biste zaštitili svoje izmene od budućih ažuriranja.

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

Hajde da kreiramo jednostavan, ali koristan blok – "Istaknuti okvir" (Highlight Box) koji urednici mogu da koriste za vizuelno izdvajanje važnih informacija.

1. Podešavanje projekta i struktura fajlova

Prvo, kreirajte novi direktorijum za vaš blok unutar wp-content/plugins direktorijuma. Na primer, my-custom-block. Unutar njega, kreirajte sledeću osnovnu strukturu fajlova:

my-custom-block/
├── my-custom-block.php        // Glavni PHP fajl plugina
├── package.json               // Konfiguracija za Node.js
├── webpack.config.js          // Webpack konfiguracija
├── src/                       // Izvorni JavaScript fajlovi
│   └── block/
│       ├── index.js           // Glavna JavaScript datoteka bloka
│       ├── edit.js            // React komponenta za uređivanje
│       └── save.js            // React komponenta za čuvanje
└── build/                     // Kompajlirani fajlovi (generiše se)

2. Definicija glavnog PHP fajla plugina

U my-custom-block.php fajlu, počnite standardnim WordPress plugin header-om i funkcijom koja registruje skriptu vašeg bloka.

<?php
/**
 * Plugin Name: Moj Prilagođeni Blok
 * Description: Dodaje prilagođeni "Istaknuti okvir" blok za Gutenberg.
 * Version: 1.0.0
 */

function my_custom_block_register_block() {
    // Automatski registruje blokove definisane u `block.json`
    register_block_type( __DIR__ . '/build' );
}
add_action( 'init', 'my_custom_block_register_block' );

Ključna funkcija ovde je register_block_type(). Od WordPress 5.8, preporučeni način za registraciju blokova je korišćenje block.json metadata fajla, što ovaj PHP poziv automatski učitava iz build direktorijuma.

3. Kreiranje block.json metadata

U src/block direktorijumu, kreirajte block.json fajl. Ovaj fajl definiše osnovne karakteristike vašeg bloka.

{
    "apiVersion": 3,
    "name": "my-custom-block/highlight-box",
    "title": "Istaknuti okvir",
    "category": "design",
    "icon": "admin-customizer",
    "description": "Prilagođeni blok za vizuelno isticanje važnog sadržaja.",
    "keywords": ["okvir", "istaknuto", "alert"],
    "version": "1.0.0",
    "textdomain": "my-custom-block",
    "editorScript": "file:./index.js",
    "editorStyle": "file:./index.css",
    "style": "file:./style-index.css"
}

4. Pisanje React komponenti (JavaScript)

Sada dolazi jezgro vašeg bloka – JavaScript fajlovi u src/block.

src/block/index.js: Ovaj fajl registruje blok.

import { registerBlockType } from '@wordpress/blocks';
import metadata from './block.json';
import Edit from './edit';
import Save from './save';

registerBlockType( metadata.name, {
    icon: metadata.icon,
    edit: Edit,
    save: Save,
} );

src/block/edit.js: Ova komponenta definiše interfejs za uređivanje bloka u Gutenberg editoru. Koristimo useState iz React-a i RichText komponentu iz WordPress paketa za uredivanje teksta.

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

export default function Edit( { attributes, setAttributes } ) {
    const { content, subtitle } = attributes;
    const blockProps = useBlockProps();

    return (
        <div { ...blockProps } className="my-highlight-box">
            <RichText
                tagName="h3"
                placeholder={ __( 'Unesite naslov...', 'my-custom-block' ) }
                value={ content }
                onChange={ ( newContent ) => setAttributes( { content: newContent } ) }
            />
            <TextareaControl
                label={ __( 'Podnaslov:', 'my-custom-block' ) }
                value={ subtitle }
                onChange={ ( newSubtitle ) => setAttributes( { subtitle: newSubtitle } ) }
            />
        </div>
    );
}

src/block/save.js: Ova komponenta definiše kako će se blok renderovati na front-endu sajta. Ona treba da bude u skladu sa edit komponentom, ali koristi statičan JSX.

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

export default function Save( { attributes } ) {
    const { content, subtitle } = attributes;
    const blockProps = useBlockProps.save();

    return (
        <div { ...blockProps } className="my-highlight-box">
            <RichText.Content tagName="h3" value={ content } />
            { subtitle && <p className="highlight-subtitle">{ subtitle }</p> }
        </div>
    );
}

5. Build proces i pokretanje

Sada morate da konfigurišete package.json i webpack.config.js da biste kompajlirali sav moderni JavaScript u format koji razumeju brauzeri. Nakon što to uradite, pokrenite npm install a zatim npm run build u vašem plugin direktorijumu. Ovo će generisati optimizovane fajlove u build folderu. Zatim možete da aktivirate plugin u WordPress admin panelu i vaš blok će se pojaviti u inserteru blokova.

Dodavanje naprednih opcija i stilova

Da biste napravili blok zaista korisnim, možete dodati kontrolne elemente u sidebar (InspectorControls) za podešavanje boja, margina ili drugih CSS svojstava. Takođe, možete definisati stilove i za editor i za front-end.

Dodavanje boje pozadine kroz InspectorControls:

import { PanelBody, ColorPalette } from '@wordpress/components';
import { InspectorControls } from '@wordpress/block-editor';

// Unutar Edit komponente:
<InspectorControls>
    <PanelBody title={ __( 'Podešavanja boja', 'my-custom-block' ) }>
        <p><strong>{ __( 'Boja pozadine:', 'my-custom-block' ) }</strong></p>
        <ColorPalette
            value={ backgroundColor }
            onChange={ ( newColor ) => setAttributes( { backgroundColor: newColor } ) }
        />
    </PanelBody>
</InspectorControls>

Zatim, u save funkciji, primenite tu boju na element:

<div { ...blockProps } style={ { backgroundColor: backgroundColor } }>

Za stilove, kreirajte odvojene .css fajlove i importujte ih u vaše edit.js i save.js fajlove. WordPress će ih automatski uključiti na odgovarajuća mesta. Ovo vam omogućava da imate potpuno kontrolisan izgled koji je nezavisan od aktivne teme. Za kompleksnije prilagođavanje, možete koristiti i WordPress Custom Fields za povezivanje bloka sa dodatnim metapodacima.

Saveti za održiv razvoj i najbolje prakse

  • Prefix svega: Uvek koristite jedinstven prefiks za ime bloka (npr. mycompany/highlight-box) kako biste izbegli konflikte sa drugim pluginovima.
  • Internacionalizacija (i18n): Koristite __() funkciju iz @wordpress/i18n paketa za sve tekstove koji se prikazuju korisniku, kako biste omogućili lako prevođenje.
  • Performanse: Pripazite da vaš JavaScript bundle ne postane prevelik. Koristite dinamičko učitavanje (import()) za veće zavisnosti ako je moguće.
  • Testiranje: Testirajte blok sa različitim temama i u kombinaciji sa drugim popularnim pluginovima. Proverite kako se ponaša i na mobilnim uređajima.
  • Dokumentacija: Za složenije blokove, razmislite o pisanju jednostavne dokumentacije za krajnje korisnike (urednike).

Kreiranje prilagođenih Gutenberg blokova otvara vrata ka potpunoj kontroli nad korisničkim iskustvom uređivanja i izgledom vašeg WordPress sajta. Kao što možete videti, proces zahteva određeni nivo tehničkog znanja, ali donosi ogromne prednosti u smislu efikasnosti i doslednosti. Za još dublje razumevanje WordPress ekosistema, pogledajte i naš vodič o WordPress REST API koji može biti ključan za kreiranje dinamičkih blokova koji povlače podatke sa eksternih izvora.

Često postavljana pitanja (FAQ)

1. Da li moram da znam React da bih kreirao Gutenberg blok?
Da, solidno razumevanje React-a je neophodno za kreiranje prilagođenih Gutenberg blokova od nule. Gutenberg editor je izgrađen na React-u, pa će vaše komponente za uređivanje i čuvanje biti pisane koristeći React sintaksu i koncepte kao što su stanje (state) i props. Međutim, postoje i alati kao što su create-guten-block ili @wordpress/create-block koji pružaju scaffolding i mogu ubrzati početak.

2. Mogu li da koristim prilagođeni blok u bilo kojoj WordPress temi?
U principu da, jer se blokovi registruju nezavisno od teme. Međutim, krajnji izgled (CSS) vašeg bloka može biti pod uticajem stilova aktivne teme. Da biste osigurali dosledan izgled, važno je da u svoj blok uključite specifične stilove i da koristite dovoljno specifične CSS selektore. Takođe, preporučljivo je testirati blok sa nekoliko različitih tema pre puštanja u produkciju.

3. Šta je razlika između edit i save funkcije u bloku?
Funkcija edit definiše komponentu koja se prikazuje unutar Gutenberg editora i omogućava interakciju sa korisnikom (unošenje teksta, podešavanje opcija). Funkcija save definiše kako će se podaci iz bloka renderovati i sačuvati u bazi podataka, odnosno kako će blok izgledati na samoj web stranici (front-end). Save funkcija treba da vrati statičan JSX zasnovan na atributima.

4. Kako mogu da dodam dinamički sadržaj u svoj blok (npr. podatke iz baze)?
Za prikaz dinamičkog sadržaja koji se menja po svakom učitavanju stranice (npr. najnoviji postovi, broj korisnika), ne koristite save funkciju. Umesto toga, možete koristiti PHP render callback prilikom registracije bloka. U block.json podesite "render": "file:./render.php", a zatim u tom PHP fajlu izvršite upit ka bazi podataka i vratite HTML. Ovo je slično principu rada sa WordPress Custom Post Types.

5. Da li je moguče kreirati blok bez poznavanja Webpack-a i Node.js?
Da, postoje načini da se pojednostavi proces. Od WordPress 5.8, alat @wordpress/create-block omogućava brzo pokretanje projekta sa već konfigurisanim Webpack-om i svim potrebnim zavisnostima. Pokretanjem jedne komande u terminalu dobijate potpuno funkcionalnu osnovu za blok. Ovo uveliko smanjuje prepreku za početak, ali osnovno razumevanje