Izven osnovnih blokov: Ustvarjanje poljubnih blokov Gutenberg za izboljšano funkcionalnost WordPressa

Povzetek

Urejevalnik blokov WordPress, Gutenberg, je s svojim modularnim sistemom blokov revolucioniral ustvarjanje vsebine. Medtem ko osnovni bloki ponujajo vsestranskost, so poljubni bloki bistveni za edinstvene funkcionalnosti in blagovne znamke. Ta članek vas vodi skozi postopek razvoja lastnih blokov Gutenberg, ki zajema bistvene koncepte, kot so registracija blokov, atributi in upodabljanje. Raziskali bomo praktične primere, razpravljali o najboljših praksah za organizacijo kode in varnost ter poudarili, kako se poljubni bloki integrirajo z arhitekturo in kljukicami WordPressa. Z obvladovanjem razvoja poljubnih blokov lahko znatno izboljšate zmožnosti in uporabniško izkušnjo vaše spletne strani WordPress.

Izven osnovnih blokov: Ustvarjanje poljubnih blokov Gutenberg za izboljšano funkcionalnost WordPressa

Prihod urejevalnika blokov Gutenberg v WordPressu 5.0 je pomenil pomemben premik v načinu ustvarjanja in upravljanja vsebine. Gutenberg, ki se je oddaljil od linearnega pristopa klasičnega urejevalnika, je uvedel modularni sistem, kjer je vsebina zgrajena iz diskretnih "blokov". Medtem ko privzeta zbirka blokov pokriva širok spekter pogostih potreb, številne spletne strani zahtevajo edinstvene funkcionalnosti, specifične oblikovne elemente ali integracije, ki presegajo tisto, kar je na voljo. Tu nastopi razvoj poljubnih blokov Gutenberg, ki ponuja zmogljiv način za razširitev zmožnosti WordPressa in njegovo natančno prilagoditev zahtevam vašega projekta.

Razvoj poljubnih blokov vam omogoča ustvarjanje ponovno uporabljenih komponent, ki poenostavijo ustvarjanje vsebine za urednike, zagotavljajo doslednost blagovne znamke in izvajajo zapletene funkcije neposredno v vmesniku urejevalnika. Ta vodnik vas bo popeljal skozi postopek, od razumevanja osnov do izvajanja najboljših praks za robustne in vzdrževane poljubne bloke.

Razumevanje arhitekture urejevalnika blokov

Preden se potopite v razvoj, je ključnega pomena razumeti, kako Gutenberg in njegovi bloki delujejo znotraj ekosistema WordPress. Sam WordPress je zgrajen na modularni arhitekturi PHP in MySQL. Teme nadzorujejo predstavitev, vtičniki pa dodajajo funkcionalnost. Gutenberg, kot osnovna funkcija WordPressa, se neopazno integrira v to strukturo. Za svojo dinamično izkušnjo urejanja v brskalniku uporablja JavaScript (predvsem React), medtem ko PHP obravnava registracijo in upodabljanje na strani strežnika.

Poljubni bloki so v bistvu komponente JavaScript, ki so registrirane pri WordPressu. Ko uporabnik doda poljuben blok v objavo ali stran, Gutenberg v bazi podatkov shrani njegovo konfiguracijo (atributi). Pri upodabljanju objave na sprednjem delu WordPress uporablja PHP za razlago te konfiguracije in izpis ustreznega HTML-ja, pogosto z uporabo iste komponente JavaScript ali ločene predloge PHP.

Ključne komponente poljubnega bloka

Vsak poljuben blok Gutenberg v svojem bistvu sestoji iz več ključnih delov:

1. Registracija: To je postopek obveščanja WordPressa o vašem novem bloku. Vključuje določitev njegovega imena, naslova, ikone in drugih metapodatkov. To se v glavnem izvaja s funkcijo JavaScript registerBlockType.
2. Atributi: To so polja podatkov, povezana z vašim blokom. Pomislite nanje kot na nastavitve ali lastnosti, ki jih lahko uporabnik spremeni za določeno instanco bloka (npr. besedilna vsebina, URL slike, izbira barve). Atributi so definirani v registraciji JavaScript bloka.
3. Funkcija urejanja (edit): Ta funkcija JavaScript definira, kako blok izgleda in se obnaša znotraj urejevalnika Gutenberg. Tu zgradite interaktivni vmesnik, ki ga bodo ustvarjalci vsebine uporabljali za konfiguracijo bloka.
4. Funkcija shranjevanja (save): Ta funkcija JavaScript definira statično HTML kodo, ki bo shranjena v bazi podatkov in upodobljena na sprednjem delu vaše spletne strani. Odražati mora trenutno stanje atributov bloka.

Korak za korakom: Ustvarjanje vašega prvega poljubnega bloka

Ustvarimo preprost poljuben blok, ki prikazuje "Poziv k dejanju" (CTA) z naslovom in gumbom. Ta primer se bo osredotočil na bistvene vidike JavaScripta za registracijo in urejanje blokov, ob predpostavki, da je nastavljeno osnovno razvojno okolje WordPress.

Predpogoji:

• Lokalno razvojno okolje WordPress.
• Osnovno razumevanje JavaScripta, Reacta in PHP.
• Nameščena Node.js in npm (ali yarn) za prevajanje sredstev.

1. Nastavitev projekta:

Poljubni bloki se običajno razvijajo kot del vtičnika. Ustvarite novo datoteko vtičnika (npr. my-custom-blocks/my-custom-blocks.php) in datoteko JavaScript za vaš blok (npr. src/index.js). Potrebovali boste tudi postopek gradnje za prevajanje vašega JavaScripta. Pogost pristop je uporaba @wordpress/scripts, ki omogoča priročen način za obravnavo prevajanja.

V korenski mapi vašega vtičnika ustvarite datoteko package.json:

{
  "name": "my-custom-blocks",
  "version": "1.0.0",
  "description": "Vtičnik za poljubne bloke Gutenberg.",
  "main": "index.js",
  "scripts": {
    "build": "wp-scripts build",
    "start": "wp-scripts start"
  },
  "keywords": ["wordpress", "gutenberg", "block"],
  "author": "Vaše Ime",
  "license": "GPL-2.0-or-later",
  "devDependencies": {
    "@wordpress/scripts": "^26.0.0" 
  }
}

Namestite odvisnosti: npm install.

2. Registracija bloka (JavaScript):

V vaši datoteki src/index.js boste uporabili registerBlockType iz paketa @wordpress/blocks.

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

// Uvoz komponent za urejevalnik
import { Edit } from './edit';
import { Save } from './save';

registerBlockType( 'my-custom-blocks/cta', {
    title: __( 'Poziv k dejanju', 'my-custom-blocks' ),
    icon: 'megaphone',
    category: 'widgets',
    attributes: {
        headline: {
            type: 'string',
            default: '',
        },
        buttonText: {
            type: 'string',
            default: 'Več o tem',
        },
        buttonUrl: {
            type: 'string',
            default: '#',
        },
    },
    edit: Edit,
    save: Save,
} );

3. Določanje vmesnika urejevalnika (src/edit.js):

Ta komponenta obravnava, kako je blok videti in deluje znotraj urejevalnika.

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={ __( 'Nastavitve gumba', 'my-custom-blocks' ) }>
                    <TextControl
                        label={ __( 'Besedilo gumba', 'my-custom-blocks' ) }
                        value={ attributes.buttonText }
                        onChange={ onChangeButtonText }
                    />
                    <TextControl
                        label={ __( 'URL gumba', 'my-custom-blocks' ) }
                        value={ attributes.buttonUrl }
                        onChange={ onChangeButtonUrl }
                    />
                </PanelBody>
            </InspectorControls>
            <div { ...blockProps }>
                <RichText
                    tagName="h3"
                    placeholder={ __( 'Vnesite svoj naslov tukaj...', '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. Določanje funkcije shranjevanja (src/save.js):

Ta funkcija določa izhod HTML-ja za sprednji del.

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. Vključevanje skripta bloka (PHP):

V vaši glavni datoteki vtičnika (my-custom-blocks.php) morate registrirati in vključiti svojo prevedeno datoteko JavaScript.

<?php
/**
 * Ime vtičnika: Moji poljubni bloki
 * Opis: Dodaja poljubne bloke Gutenberg.
 * Različica: 1.0
 * Avtor: Vaše Ime
 */

function my_custom_blocks_register_block() {
    // Samodejno naloži datoteko block.json in vključi skript.
    register_block_type( __DIR__ . '/build' );
}
add_action( 'init', 'my_custom_blocks_register_block' );
?>

6. Gradnja sredstev:

Zaženite npm run build v mapi vašega vtičnika. To bo prevedlo vaš JavaScript v mapo build.

Zdaj aktivirajte vtičnik v WordPressu. Vaš blok "Poziv k dejanju" bi moral biti na voljo v urejevalniku!

Najboljše prakse za razvoj poljubnih blokov

Razvoj poljubnih blokov presega le njihovo funkcionalnost. Upoštevanje najboljših praks zagotavlja, da so vaši bloki varni, zmogljivi, dostopni in vzdrževani.

• Imenovanje (Namespacing): Vedno uporabite edinstveno ime (namespace) za svoj blok (npr. my-custom-blocks/cta). To preprečuje konflikte z drugimi bloki. Funkcija registerBlockType to obravnava.
• Organizacija kode: Naj bo vaša koda JavaScript in PHP čista in dobro organizirana. Za zapletene bloke razmislite o razdelitvi vašega JavaScripta na manjše, ponovno uporabne komponente.
• Varnost:
  • Sanitizacija: Pri shranjevanju podatkov v bazo podatkov (zlasti uporabniško ustvarjene vsebine) jih vedno sanitizirajte. WordPress ponuja funkcije, kot so sanitize_text_field, esc_url itd.
  • Escaping: Pri izpisovanju podatkov v brskalnik jih vedno escape, da preprečite napade Cross-Site Scripting (XSS). Uporabite funkcije, kot so esc_html, esc_attr, esc_url.
  • Nonces: Za vse zahteve AJAX ali pošiljanje obrazcev, povezane z vašim blokom, uporabite nonces za preverjanje, ali zahteva izvira iz legitimnega vira WordPress.
• Mednarodizacija (i18n): Uporabite funkcije __() in _x() (iz @wordpress/i18n) za vse uporabniško vidne nizke v vašem JavaScriptu. To omogoča prevajanje vašega bloka.
• Dostopnost: Zagotovite, da je vaš blok uporaben za vse. Uporabite semantični HTML, po potrebi zagotovite atribute ARIA in testirajte z zaslonskimi bralniki.
• Zmogljivost:
  • Počasno nalaganje (Lazy Loading): Za bloke, ki nalagajo težka sredstva ali zapletena podatke, razmislite o izvajanju tehnik počasnega nalaganja.
  • Učinkovito upodabljanje: Optimizirajte svojo funkcijo save in katero koli upodabljanje na strani strežnika, da bo čim bolj učinkovito.
  • Vključevanje sredstev: Vključite samo potrebne skripte in sloge za vaš blok. Uporabite enqueue_block_style in enqueue_block_script_handle za sredstva, specifična za blok.
• Modularnost in razširljivost: Uporabite kljukice (akcije in filtre) WordPress v vašem PHP-ju, da omogočite drugim vtičnikom ali temam spreminjanje vedenja ali izhoda vašega bloka.
• block.json: Za bolj zapletene bloke uporabite datoteko block.json za razglasitev metapodatkov bloka, odvisnosti, stilov in ročajev skript. To je sodoben standard za razvoj blokov in poenostavlja upravljanje sredstev.

Integracija z arhitekturo WordPressa

Poljubni bloki niso izolirane enote. Globoko se integrirajo z osnovno arhitekturo WordPressa:

• Kljukice (Hooks): V svojem vtičniku lahko uporabite PHP akcije in filtre za spreminjanje registracije blokov, dodajanje poljubnih stilov ali skriptov pogojno ali celo spreminjanje upodobljene izhodne kode osnovnih blokov. Na primer, lahko uporabite filter block_type_metadata_settings za spreminjanje nastavitev registriranega bloka.
• Integracija s temo: Teme, ki temeljijo na blokih, in urejanje celotne strani (FSE) se močno zanašajo na bloke. Poljubni bloki so lahko zasnovani tako, da se neopazno prilegajo predlogam FSE, kar uporabnikom omogoča gradnjo celotnih spletnih mest z doslednim potekom dela, ki temelji na blokih.
• Interoperabilnost vtičnikov: Vaši poljubni bloki lahko komunicirajo z drugimi vtičniki. Na primer, poljuben blok izdelka bi lahko pridobil podatke iz vtičnika za e-trgovino, ali poljuben blok galerije bi se lahko integriral s specifičnim vtičnikom za knjižnico medijev.

Napredni koncepti in premisleki

• Upodabljanje na strani strežnika (SSR): Za bloke, ki zahtevajo dinamične podatke ali zapleteno logiko, ki jo je najbolje obravnavati na strežniku, lahko izvedete upodabljanje na strani strežnika. To vključuje določitev funkcije render_callback v vašem PHP-ju pri registraciji bloka.
• Dinamični bloki: Bloki, ki uporabljajo SSR, se pogosto imenujejo dinamični bloki. V bazo podatkov ne shranjujejo statičnega HTML-ja; namesto tega shranijo samo svoje atribute, funkcija render_callback pa generira HTML ob vsakem nalaganju strani.
• Slogi blokov: Za svoje bloke lahko določite poljubne sloge, ki jih lahko uporabniki izberejo v urejevalniku.
• Različice blokov: Ustvarite različice osnovnega bloka, da ponudite predhodno konfigurirane različice z različnimi privzetimi nastavitvami ali videzom.
• Razlike med urejevalnikom in sprednjim delom: Bodite pozorni, da lahko funkcije edit in save obravnavata različne scenarije. Funkcija edit je namenjena interaktivni izkušnji urejanja, medtem ko je funkcija save namenjena statičnemu izhodu HTML-ja. Včasih boste morda potrebovali ločeno funkcijo render_callback za dinamično upodabljanje na sprednjem delu.

Zaključek

Razvoj poljubnih blokov Gutenberg je zmogljiva veščina, ki odklene novo raven prilagajanja in funkcionalnosti za spletne strani WordPress. Z razumevanjem ključnih komponent - registracije, atributov, funkcij urejanja in shranjevanja - ter z upoštevanjem najboljših praks za varnost, zmogljivost in dostopnost lahko ustvarite robustne, ponovno uporabne in uporabniku prijazne bloke. Ne glede na to, ali gradite poljuben vtičnik za stranko ali izboljšujete svojo lastno spletno stran, obvladovanje poljubnih blokov bo znatno dvignilo vaše zmožnosti razvoja WordPressa, kar vam bo omogočilo, da se premaknete izven standardnih ponudb in ustvarite resnično edinstvene digitalne izkušnje.