Peruslohkoja pidemmälle: Mukautettujen Gutenberg-lohkojen luominen WordPressin toiminnallisuuden parantamiseksi

Yhteenveto

WordPressin lohkoeditori, Gutenberg, on mullistanut sisällön luomisen modulaarisella lohkopohjaisella järjestelmällään. Vaikka ydinlohkot tarjoavat monipuolisuutta, mukautetut lohkot ovat välttämättömiä ainutlaatuisille toiminnoille ja brändäykselle. Tämä artikkeli opastaa sinut oman Gutenberg-lohkojen kehittämisprosessin läpi, käsitellen keskeisiä käsitteitä, kuten lohkojen rekisteröintiä, attribuutteja ja renderöintiä. Tutustumme käytännön esimerkkeihin, keskustelemme koodin organisoinnin ja turvallisuuden parhaista käytännöistä ja korostamme, kuinka mukautetut lohkot integroituvat WordPressin arkkitehtuuriin ja koukkuihin. Hallitsemalla mukautettujen lohkojen kehityksen voit merkittävästi parantaa WordPress-sivustosi ominaisuuksia ja käyttökokemusta.

Peruslohkoja pidemmälle: Mukautettujen Gutenberg-lohkojen luominen WordPressin toiminnallisuuden parantamiseksi

Gutenberg-lohkoeditorin tulo WordPress 5.0:ssa merkitsi merkittävää muutosta sisällön luomisessa ja hallinnassa. Siirtyen pois klassisen editorin lineaarisesta lähestymistavasta Gutenberg esitteli modulaarisen järjestelmän, jossa sisältö rakennetaan erillisistä "lohkoista". Vaikka oletuslohkot kattavat laajan valikoiman yleisiä tarpeita, monet verkkosivustot vaativat ainutlaatuisia toimintoja, erityisiä suunnitteluelementtejä tai integraatioita, jotka ylittävät sen, mikä on helposti saatavilla. Tässä mukautettujen Gutenberg-lohkojen kehitys tulee kuvaan, tarjoten tehokkaan tavan laajentaa WordPressin ominaisuuksia ja räätälöidä se tarkasti projektisi vaatimuksiin.

Mukautettujen lohkojen kehittäminen antaa sinulle mahdollisuuden luoda uudelleenkäytettäviä komponentteja, jotka virtaviivaistavat sisällön luomista toimittajille, varmistavat brändin yhtenäisyyden ja toteuttavat monimutkaisia ominaisuuksia suoraan editorin käyttöliittymässä. Tämä opas käy läpi prosessin perusteiden ymmärtämisestä aina vankkojen ja ylläpidettävien mukautettujen lohkojen parhaiden käytäntöjen toteuttamiseen.

Lohkoeditorin arkkitehtuurin ymmärtäminen

Ennen kehitykseen syventymistä on ratkaisevan tärkeää ymmärtää, kuinka Gutenberg ja sen lohkot toimivat WordPress-ekosysteemissä. WordPress itsessään perustuu modulaariseen PHP- ja MySQL-arkkitehtuuriin. Teemat hallitsevat esitystapaa ja lisäosat lisäävät toiminnallisuutta. Gutenberg, yhtenä WordPressin ydintoiminnoista, integroituu saumattomasti tähän rakenteeseen. Se hyödyntää JavaScriptiä (pääasiassa Reactia) dynaamiseen, selaimessa tapahtuvaan muokkauskokemukseen, kun taas PHP hoitaa palvelinpuolen rekisteröinnin ja renderöinnin.

Mukautetut lohkot ovat pohjimmiltaan JavaScript-komponentteja, jotka rekisteröidään WordPressiin. Kun käyttäjä lisää mukautetun lohkon postaukseen tai sivulle, Gutenberg tallentaa sen konfiguraation (attribuutit) tietokantaan. Postauksen renderöinnin yhteydessä etusivulla WordPress käyttää PHP:tä tulkitsemaan tämän konfiguraation ja tuottamaan asianmukaisen HTML:n, usein hyödyntäen samaa JavaScript-komponenttia tai erillistä PHP-mallia.

Mukautetun lohkon ydin­komponentit

Jokainen mukautettu Gutenberg-lohko koostuu pohjimmiltaan useista keskeisistä osista:

1. Rekisteröinti: Tämä on prosessi, jossa kerrotaan WordPressille uudesta lohkostasi. Se sisältää sen nimen, otsikon, kuvakkeen ja muun metadatan määrittelyn. Tämä tehdään ensisijaisesti JavaScriptin registerBlockType-funktiolla.
2. Attribuutit: Nämä ovat lohkoosi liittyviä datakenttiä. Ajattele niitä asetuksina tai ominaisuuksina, joita käyttäjä voi muokata lohkon tietylle instanssille (esim. tekstisisältö, kuvan URL, värivalinta). Attribuutit määritellään lohkon JavaScript-rekisteröinnissä.
3. Edit-funktio: Tämä JavaScript-funktio määrittelee, kuinka lohko näyttää ja toimii Gutenberg-editorissa. Tässä rakennat interaktiivisen käyttöliittymän, jota sisällöntuottajat käyttävät lohkon konfigurointiin.
4. Save-funktio: Tämä JavaScript-funktio määrittelee staattisen HTML-merkinnän, joka tallennetaan tietokantaan ja renderöidään verkkosivustosi etusivulla. Sen tulisi heijastaa lohkon attribuuttien nykyistä tilaa.

Vaiheittain: Ensimmäisen mukautetun lohkon luominen

Luodaan yksinkertainen mukautettu lohko, joka näyttää "Toimintakehotteen" (CTA) otsikolla ja painikkeella. Tämä esimerkki keskittyy olennaisiin JavaScript-näkökohtiin lohkon rekisteröintiä ja muokkausta varten, olettaen, että perus WordPress-kehitysympäristö on jo asetettu.

Edellytykset:

• Paikallinen WordPress-kehitysympäristö.
• Perustiedot JavaScriptistä, Reactista ja PHP:stä.
• Node.js ja npm (tai yarn) asennettuna resurssien kääntämiseen.

1. Projektin asennus:

Mukautetut lohkot kehitetään tyypillisesti osana lisäosaa. Luo uusi lisäosatiedosto (esim. my-custom-blocks/my-custom-blocks.php) ja JavaScript-tiedosto lohkollesi (esim. src/index.js). Tarvitset myös rakennusprosessin JavaScript-tiedostojesi kääntämiseen. Yleinen tapa on käyttää @wordpress/scripts-pakettia, joka tarjoaa kätevän tavan käsitellä kääntämistä.

Lisäosan juurihakemistossa luo package.json-tiedosto:

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

Asenna riippuvuudet: npm install.

2. Lohkon rekisteröinti (JavaScript):

src/index.js-tiedostossa käytät @wordpress/blocks-paketin registerBlockType-funktiota.

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

// Tuodaan editorin komponentit
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. Editorin käyttöliittymän määrittely (src/edit.js):

Tämä komponentti hallitsee sitä, kuinka lohko näyttää ja toimii editorissa.

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. Tallenna-funktion määrittely (src/save.js):

Tämä funktio määrittää etusivun HTML-tulosteen.

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. Lohkoskriptin lataaminen (PHP):

Päälisäosatiedostossasi (my-custom-blocks.php) sinun on rekisteröitävä ja ladattava käännetty JavaScript-tiedostosi.

<?php
/**
 * Plugin Name: My Custom Blocks
 * Description: Adds custom Gutenberg blocks.
 * Version: 1.0
 * Author: Your Name
 */

function my_custom_blocks_register_block() {
    // Lataa automaattisesti block.json-tiedoston ja lataa skriptin.
    register_block_type( __DIR__ . '/build' );
}
add_action( 'init', 'my_custom_blocks_register_block' );
?>

6. Resurssien rakentaminen:

Suorita npm run build lisäosan hakemistossa. Tämä kääntää JavaScript-tiedostosi build-kansioon.

Aktivoi nyt lisäosa WordPressissä. "Call to Action" -lohkon pitäisi olla käytettävissä editorissa!

Parhaat käytännöt mukautettujen lohkojen kehityksessä

Mukautettujen lohkojen kehittäminen on muutakin kuin vain niiden toimivaksi tekeminen. Parhaiden käytäntöjen noudattaminen varmistaa, että lohkosi ovat turvallisia, suorituskykyisiä, saavutettavia ja ylläpidettäviä.

• Nimeämisavaruudet: Käytä aina yksilöllistä nimeämisavaruutta lohkollesi (esim. my-custom-blocks/cta). Tämä estää ristiriitoja muiden lohkojen kanssa. registerBlockType-funktio hoitaa tämän.
• Koodin organisointi: Pidä JavaScript- ja PHP-koodisi selkeänä ja hyvin organisoituna. Monimutkaisille lohkoille harkitse JavaScriptin jakamista pienempiin, uudelleenkäytettäviin komponentteihin.
• Turvallisuus:
  • Puhdistus (Sanitization): Kun tallennat tietoja tietokantaan (erityisesti käyttäjän luomaa sisältöä), puhdista ne aina. WordPress tarjoaa funktioita kuten sanitize_text_field, esc_url jne.
  • Eskapointi (Escaping): Kun tulostat tietoja selaimeen, eskapoi ne aina estääksesi Cross-Site Scripting (XSS) -hyökkäykset. Käytä funktioita kuten esc_html, esc_attr, esc_url.
  • Nonces: Kaikissa AJAX-pyynnöissä tai lomakkeiden lähetyksissä, jotka liittyvät lohkoosi, käytä nonceja varmistaaksesi, että pyyntö on peräisin laillisesta WordPress-lähteestä.
• Kansainvälistäminen (i18n): Käytä __() ja _x() -funktioita (@wordpress/i18n-paketista) kaikissa käyttäjälle näkyvissä merkkijonoissa JavaScriptissä. Tämä tekee lohkostasi käännettävän.
• Saavutettavuus: Varmista, että lohkosi on kaikkien käytettävissä. Käytä semanttista HTML:ää, tarjoa ARIA-attribuutteja tarvittaessa ja testaa ruudunlukijoilla.
• Suorituskyky:
  • Viivästetty lataus (Lazy Loading): Lohkoille, jotka lataavat raskaita resursseja tai monimutkaista dataa, harkitse viivästetyn latauksen tekniikoiden käyttöönottoa.
  • Tehokas renderöinti: Optimoi save-funktiosi ja kaikki palvelinpuolen renderöinti mahdollisimman tehokkaaksi.
  • Resurssien lataaminen (Asset Enqueuing): Lataa vain tarvittavat skriptit ja tyylit lohkollesi. Käytä enqueue_block_style ja enqueue_block_script_handle lohkokohtaisille resursseille.
• Modulaarisuus ja laajennettavuus: Hyödynnä WordPressin koukkuja (toiminnot ja suodattimet) PHP:ssäsi, jotta muut lisäosat tai teemat voivat muokata lohkosi toimintaa tai tulostetta.
• block.json: Monimutkaisemmille lohkoille käytä block.json-tiedostoa määrittelemään lohkon metatiedot, riippuvuudet, tyylit ja skriptikahvat. Tämä on moderni standardi lohkojen kehityksessä ja yksinkertaistaa resurssien hallintaa.

Integrointi WordPressin arkkitehtuuriin

Mukautetut lohkot eivät ole erillisiä entiteettejä. Ne integroituvat syvästi WordPressin ydinarkkitehtuuriin:

• Koukut (Hooks): Voit käyttää PHP:n toimintoja ja suodattimia lisäosassasi muokataksesi lohkon rekisteröintiä, lisätäksesi mukautettuja tyylejä tai skriptejä ehdollisesti tai jopa muuttaaksesi ydinlohkojen renderöityä tulostetta. Voit esimerkiksi käyttää block_type_metadata_settings-suodatinta rekisteröidyn lohkon asetusten muokkaamiseen.
• Teeman integrointi: Lohkopohjaiset teemat ja täysi sivuston muokkaus (FSE) luottavat vahvasti lohkoihin. Mukautetut lohkot voidaan suunnitella sopimaan saumattomasti FSE-malleihin, antaen käyttäjille mahdollisuuden rakentaa kokonaisia sivustoja yhtenäisellä lohkopohjaisella työnkululla.
• Lisäosien yhteentoimivuus: Mukautetut lohkosi voivat olla vuorovaikutuksessa muiden lisäosien kanssa. Esimerkiksi mukautettu tuotelohko voisi hakea tietoja verkkokauppalisäosasta, tai mukautettu gallerialohko voisi integroitua tiettyyn media­kirjastolisäosaan.

Edistyneet käsitteet ja huomioitavat asiat

• Palvelinpuolen renderöinti (SSR): Lohkoille, jotka vaativat dynaamista dataa tai monimutkaista logiikkaa, joka on parasta käsitellä palvelimella, voit toteuttaa palvelinpuolen renderöinnin. Tämä edellyttää render_callback-funktion määrittelyä PHP:ssäsi lohkoa rekisteröitäessä.
• Dynaamiset lohkot: SSR:ää käyttäviä lohkoja kutsutaan usein dynaamisiksi lohkoiksi. Ne eivät tallenna staattista HTML:ää tietokantaan; sen sijaan ne tallentavat vain attribuuttinsa, ja render_callback luo HTML:n jokaisella sivulatauksella.
• Lohkotyylit: Voit määritellä lohkoillesi mukautettuja tyylejä, joita käyttäjät voivat valita editorista.
• Lohkovariaatiot: Luo peruslohkon variaatioita tarjotaksesi valmiiksi konfiguroituja versioita erilaisilla oletusasetuksilla tai ulkoasuilla.
• Editorin ja etusivun erot: Muista, että edit- ja save-funktiot saattavat joutua käsittelemään eri tilanteita. edit-funktio on tarkoitettu interaktiiviseen editorikokemukseen, kun taas save-funktio on staattista HTML-tulostetta varten. Joskus saatat tarvita erillisen render_callback-funktion dynaamiseen etusivun renderöintiin.

Johtopäätös

Mukautettujen Gutenberg-lohkojen kehittäminen on tehokas taito, joka avaa uuden tason mukauttamista ja toiminnallisuutta WordPress-verkkosivustoille. Ymmärtämällä ydin­komponentit – rekisteröinnin, attribuutit, edit- ja save-funktiot – ja noudattamalla parhaita käytäntöjä turvallisuuden, suorituskyvyn ja saavutettavuuden osalta, voit luoda vankkoja, uudelleenkäytettäviä ja käyttäjäystävällisiä lohkoja. Rakensitpa sitten mukautettua lisäosaa asiakkaalle tai parannat omaa sivustoasi, mukautettujen lohkojen hallitseminen parantaa merkittävästi WordPress-kehityksesi ominaisuuksia, antaen sinulle mahdollisuuden siirtyä perus­tarjonnan ulkopuolelle ja luoda todella ainutlaatuisia digitaalisia kokemuksia.