Gutenbergi kohandatud plokkide loomine WordPressi funktsionaalsuse täiustamiseks

Kokkuvõte

WordPressi ploki redaktor, Gutenberg, on oma moodulplokkide süsteemiga muutnud sisu loomise revolutsiooniliselt. Kuigi põhiplokid pakuvad mitmekülgsust, on kohandatud plokid hädavajalikud unikaalsete funktsioonide ja brändingu jaoks. See artikkel juhendab teid oma Gutenbergi plokkide arendamise protsessis, hõlmates olulisi kontseptsioone, nagu ploki registreerimine, atribuudid ja renderdamine. Uurime praktilisi näiteid, arutame koodi organiseerimise ja turvalisuse parimaid tavasid ning tõstame esile, kuidas kohandatud plokid integreeruvad WordPressi arhitektuuri ja konksudega. Kohandatud plokkide arendamise meisterdamisega saate oluliselt parandada oma WordPressi saidi võimalusi ja kasutajakogemust.

Põhiplokkidest kaugemale: Gutenbergi kohandatud plokkide loomine WordPressi funktsionaalsuse täiustamiseks

Gutenbergi ploki redaktori kasutuselevõtt WordPress 5.0-s tähistas olulist nihet sisu loomise ja haldamise viisis. Eemaldudes klassikalise redaktori lineaarsest lähenemisviisist, tutvustas Gutenberg moodulstruktuuri, kus sisu ehitatakse üksikutest "plokkidest". Kuigi vaikimisi plokid katavad laia valikut levinud vajadusi, vajavad paljud veebisaidid unikaalseid funktsioone, spetsiifilisi disainielemente või integratsioone, mis ületavad seda, mis on kohe saadaval. Siin tuleb mängu kohandatud Gutenbergi plokkide arendamine, pakkudes võimsat viisi WordPressi võimaluste laiendamiseks ja selle täpseks kohandamiseks teie projekti nõudmistele.

Kohandatud plokkide arendamine võimaldab teil luua korduvkasutatavaid komponente, mis lihtsustavad sisu loomist toimetajatele, tagavad brändi järjepidevuse ja rakendavad keerukaid funktsioone otse redaktori liideses. See juhend juhendab teid protsessis, alates põhitõdede mõistmisest kuni robustsete ja hooldatavate kohandatud plokkide parimate tavade rakendamiseni.

Ploki redaktori arhitektuuri mõistmine

Enne arendusse sukeldumist on ülioluline mõista, kuidas Gutenberg ja selle plokid WordPressi ökosüsteemis toimivad. WordPress ise on ehitatud moodulstruktuuri PHP ja MySQL arhitektuurile. Teemad kontrollivad esitlust ja pistikprogrammid lisavad funktsionaalsust. Gutenberg kui WordPressi põhifunktsioon integreerub selle struktuuriga sujuvalt. See kasutab JavaScripti (peamiselt React) selle dünaamilise, brauserisisese redigeerimiskogemuse jaoks, samal ajal kui PHP tegeleb serveripoolse registreerimise ja renderdamisega.

Kohandatud plokid on sisuliselt JavaScripti komponendid, mis on WordPressiga registreeritud. Kui kasutaja lisab postitusele või lehele kohandatud ploki, salvestab Gutenberg selle konfiguratsiooni (atribuudid) andmebaasi. Postituse esiosas renderdamisel kasutab WordPress PHP-d selle konfiguratsiooni tõlgendamiseks ja vastava HTML-i väljastamiseks, kasutades sageli sama JavaScripti komponenti või eraldi PHP malli.

Kohandatud ploki põhikomponendid

Iga kohandatud Gutenbergi plokk koosneb sisuliselt mitmest põhiosast:

1. Registreerimine: See on protsess, mille käigus teatatakse WordPressile teie uuest plokist. See hõlmab selle nime, pealkirja, ikooni ja muu metaandmete määratlemist. Seda tehakse peamiselt JavaScripti funktsiooni registerBlockType abil.
2. Atribuudid: Need on teie plokiga seotud andmeväljad. Mõelge neile kui seadistustele või omadustele, mida kasutaja saab ploki konkreetse eksemplari jaoks muuta (nt tekstisisu, pildi URL, värvivalik). Atribuudid on määratletud ploki JavaScripti registreerimisel.
3. Redigeerimisfunktsioon: See JavaScripti funktsioon määratleb, kuidas plokk Gutenbergi redaktoris kuvatakse ja käitub. Siin ehitate interaktiivse kasutajaliidese, mida sisuloojad ploki konfigureerimiseks kasutavad.
4. Salvestamisfunktsioon: See JavaScripti funktsioon määratleb staatilise HTML-i märgistuse, mis salvestatakse andmebaasi ja renderdatakse teie veebisaidi esiosas. See peaks peegeldama ploki atribuutide praegust olekut.

Samm-sammult: esimese kohandatud ploki loomine

Loome lihtsa kohandatud ploki, mis kuvab "Tegevuskutse" (CTA) koos pealkirja ja nupuga. See näide keskendub ploki registreerimise ja redigeerimise olulistele JavaScripti aspektidele, eeldades, et põhiline WordPressi arenduskeskkond on seadistatud.

Eeldused:

• Kohalik WordPressi arenduskeskkond.
• Põhiline arusaam JavaScriptist, Reactist ja PHP-st.
• Node.js ja npm (või yarn) installitud varade kompileerimiseks.

1. Projekti seadistamine:

Kohandatud plokke arendatakse tavaliselt pistikprogrammi osana. Looge uus pistikprogrammi fail (nt my-custom-blocks/my-custom-blocks.php) ja JavaScripti fail oma ploki jaoks (nt src/index.js). Samuti vajate ehitusprotsessi oma JavaScripti kompileerimiseks. Levinud lähenemisviis on kasutada @wordpress/scripts, mis pakub mugavat kompileerimise haldamise viisi.

Looge oma pistikprogrammi juurkataloogis fail 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" 
  }
}

Installige sõltuvused: npm install.

2. Ploki registreerimine (JavaScript):

Oma failis src/index.js kasutate @wordpress/blocks paketist pärit funktsiooni registerBlockType.

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. Redaktori liidese määratlemine (src/edit.js):

See komponent käsitleb seda, kuidas plokk redaktoris välja näeb ja töötab.

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. Salvestamisfunktsiooni määratlemine (src/save.js):

See funktsioon määrab HTML-i väljundi esiosale.

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. Ploki skripti järjekorda lisamine (PHP):

Oma peamises pistikprogrammi failis (my-custom-blocks.php) peate registreerima ja järjekorda lisama oma kompileeritud JavaScripti faili.

<?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. Varade ehitamine:

Käivitage oma pistikprogrammi kataloogis npm run build. See kompileerib teie JavaScripti build kausta.

Nüüd aktiveerige pistikprogramm WordPressis. Teie "Tegevuskutse" plokk peaks olema redaktoris saadaval!

Kohandatud plokkide arendamise parimad tavad

Kohandatud plokkide arendamine läheb kaugemale lihtsalt nende funktsionaalseks muutmisest. Parimate tavade järgimine tagab, et teie plokid on turvalised, tõhusad, ligipääsetavad ja hooldatavad.

• Nimeruumimine: Kasutage alati oma ploki jaoks unikaalset nimeruumi (nt my-custom-blocks/cta). See hoiab ära konfliktid teiste plokkidega. Funktsioon registerBlockType seda haldab.
• Koodi organiseerimine: Hoidke oma JavaScripti ja PHP kood puhas ja hästi organiseeritud. Keerukate plokkide puhul kaaluge oma JavaScripti jagamist väiksemateks, korduvkasutatavateks komponentideks.
• Turvalisus:
  • Saniteerimine: Andmete salvestamisel andmebaasi (eriti kasutaja loodud sisu) saniteerige see alati. WordPress pakub funktsioone nagu sanitize_text_field, esc_url jne.
  • Escaping: Andmete brauserisse väljastamisel escape'ige see alati, et vältida Cross-Site Scripting (XSS) rünnakuid. Kasutage funktsioone nagu esc_html, esc_attr, esc_url.
  • Nonces: Kõigi teie plokiga seotud AJAX-päringute või vormi esitamiste puhul kasutage noncesid, et kontrollida, kas päring pärineb legitiimsest WordPressi allikast.
• Rahvusvahelistamine (i18n): Kasutage kõigi kasutajatele suunatud stringide jaoks JavaScriptis funktsioone __() ja _x() (@wordpress/i18n paketist). See muudab teie ploki tõlgitavaks.
• Ligipääsetavus: Veenduge, et teie plokk oleks kõigile kasutatav. Kasutage semantilist HTML-i, pakkuge vajadusel ARIA atribuute ja testige ekraanilugejatega.
• Toimivus:
  • Laadimine edasi lükates: Raskeid varasid või keerulist andmeid laadivate plokkide puhul kaaluge laadimisest edasilükkamise tehnikate rakendamist.
  • Tõhus renderdamine: Optimeerige oma save funktsioon ja kõik serveripoolsed renderdamised nii tõhusaks kui võimalik.
  • Varade järjekorda lisamine: Lisage järjekorda ainult oma ploki jaoks vajalikud skriptid ja stiilid. Kasutage plokispetsiifiliste varade jaoks enqueue_block_style ja enqueue_block_script_handle.
• Moodulsus ja laiendatavus: Kasutage oma PHP-s WordPressi konksusid (tegevusi ja filtreid), et võimaldada teistel pistikprogrammidel või teemadel teie ploki käitumist või väljundit muuta.
• block.json: Keerukamate plokkide jaoks kasutage faili block.json, et deklareerida ploki metaandmed, sõltuvused, stiilid ja skripti käsitled. See on plokkide arendamise kaasaegne standard ja lihtsustab varade haldamist.

Integratsioon WordPressi arhitektuuriga

Kohandatud plokid ei ole isoleeritud üksused. Nad integreeruvad sügavalt WordPressi põhifunktsioonidega:

• Konksud: Saate oma pistikprogrammis kasutada PHP tegevusi ja filtreid, et muuta ploki registreerimist, lisada tinglikult kohandatud stiile või skripte või isegi muuta põhjalokkide renderdatud väljundit. Näiteks võite kasutada filtrit block_type_metadata_settings, et muuta registreeritud ploki sätteid.
• Teema integratsioon: Plokipõhised teemad ja täielik saidi redigeerimine (FSE) tuginevad suuresti plokkidele. Kohandatud plokid saab kujundada nii, et need sobiksid sujuvalt FSE mallidesse, võimaldades kasutajatel luua terviklikke saite, kasutades ühtlast plokipõhist töövoogu.
• Pistikprogrammide koostalitlusvõime: Teie kohandatud plokid saavad suhelda teiste pistikprogrammidega. Näiteks võiks kohandatud tootepokk andmeid hankida e-kaubanduse pistikprogrammist või kohandatud galeriipokk integreeruda spetsiifilise meediumiteegi pistikprogrammiga.

Täpsemad kontseptsioonid ja kaalutlused

• Serveripoolne renderdamine (SSR): Plokkide jaoks, mis vajavad dünaamilisi andmeid või keerulist loogikat, mida on kõige parem serveris töödelda, saate rakendada serveripoolset renderdamist. See hõlmab render_callback funktsiooni määratlemist oma PHP-s ploki registreerimisel.
• Dünaamilised plokid: SSR-i kasutavaid plokke nimetatakse sageli dünaamilisteks plokkideks. Nad ei salvesta staatilist HTML-i andmebaasi; selle asemel salvestavad nad ainult oma atribuudid ja render_callback genereerib HTML-i iga kord, kui lehte laaditakse.
• Ploki stiilid: Saate oma plokkide jaoks määratleda kohandatud stiile, mida kasutajad saavad redaktoris valida.
• Ploki variatsioonid: Looge baasploki variatsioone, et pakkuda eelkonfigureeritud versioone erinevate vaikeseadete või välimusega.
• Redaktori ja esiosa erinevused: Pidage meeles, et edit ja save funktsioonid võivad vajada erinevate stsenaariumite käsitlemist. edit funktsioon on interaktiivse redaktori kogemuse jaoks, samas kui save funktsioon on staatilise HTML-i väljundi jaoks. Mõnikord võite vajada eraldi render_callback dünaamilise esiosa renderdamise jaoks.

Järeldus

Kohandatud Gutenbergi plokkide arendamine on võimas oskus, mis avab WordPressi veebisaitide jaoks uue taseme kohandamise ja funktsionaalsuse. Mõistes põhikomponente – registreerimine, atribuudid, redigeerimine ja salvestamine – ning järgides turvalisuse, toimivuse ja ligipääsetavuse parimaid tavasid, saate luua robustseid, korduvkasutatavaid ja kasutajasõbralikke plokke. Olenemata sellest, kas loote kohandatud pistikprogrammi kliendi jaoks või täiustate oma saiti, tõstab kohandatud plokkide meisterdamine oluliselt teie WordPressi arendusvõimalusi, võimaldades teil liikuda kaugemale standardpakkumistest ja luua tõeliselt unikaalseid digitaalseid kogemusi.