Utover grunnleggende blokker: Lag egne Gutenberg-blokker for forbedret WordPress-funksjonalitet

Sammendrag

WordPress' blokkredigeringsverktøy, Gutenberg, har revolusjonert innholdsoppretting med sitt modulære blokksystem. Mens kjerneblokker tilbyr allsidighet, er egendefinerte blokker essensielle for unik funksjonalitet og merkevarebygging. Denne artikkelen guider deg gjennom prosessen med å utvikle dine egne Gutenberg-blokker, og dekker viktige konsepter som blokkregistrering, attributter og gjengivelse. Vi vil utforske praktiske eksempler, diskutere beste praksis for kodeorganisering og sikkerhet, og fremheve hvordan egendefinerte blokker integreres med WordPress' arkitektur og kroker. Ved å mestre utvikling av egendefinerte blokker kan du betydelig forbedre WordPress-nettstedets muligheter og brukeropplevelse.

Utover grunnleggende blokker: Lag egne Gutenberg-blokker for forbedret WordPress-funksjonalitet

Introduksjonen av Gutenberg-blokkredigeringsverktøyet i WordPress 5.0 markerte et betydelig skifte i hvordan innhold opprettes og administreres. Gutenberg beveget seg bort fra den klassiske redigeringsverktøyets lineære tilnærming og introduserte et modulært system der innhold bygges ved hjelp av diskrete "blokker". Mens standardsettet med blokker dekker et bredt spekter av vanlige behov, krever mange nettsteder unik funksjonalitet, spesifikke designelementer eller integrasjoner som går utover det som er lett tilgjengelig. Det er her utvikling av egendefinerte Gutenberg-blokker kommer inn, og tilbyr en kraftig måte å utvide WordPress' muligheter på og skreddersy det nøyaktig til prosjektets krav.

Utvikling av egendefinerte blokker lar deg lage gjenbrukbare komponenter som strømlinjeformer innholdsoppretting for redaktører, sikrer merkevarekonsistens og implementerer komplekse funksjoner direkte i redigeringsgrensesnittet. Denne guiden vil ta deg gjennom prosessen, fra å forstå grunnleggende prinsipper til å implementere beste praksis for robuste og vedlikeholdbare egendefinerte blokker.

Forstå blokkredigeringsverktøyets arkitektur

Før du dykker ned i utvikling, er det avgjørende å forstå hvordan Gutenberg og dets blokker fungerer innenfor WordPress-økosystemet. WordPress i seg selv er bygget på en modulær PHP- og MySQL-arkitektur. Temaer kontrollerer presentasjon, og plugins legger til funksjonalitet. Gutenberg, som en kjernefunksjon i WordPress, integreres sømløst i denne strukturen. Den bruker JavaScript (primært React) for sin dynamiske redigeringsopplevelse i nettleseren, mens PHP håndterer server-side registrering og gjengivelse.

Egendefinerte blokker er i hovedsak JavaScript-komponenter som registreres hos WordPress. Når en bruker legger til en egendefinert blokk i et innlegg eller en side, lagrer Gutenberg konfigurasjonen (attributter) i databasen. Ved gjengivelse av innlegget på front-end, bruker WordPress PHP til å tolke denne konfigurasjonen og produsere den tilsvarende HTML-en, ofte ved hjelp av den samme JavaScript-komponenten eller en separat PHP-mal.

Kjernekomponentene i en egendefinert blokk

Hver egendefinerte Gutenberg-blokk består i bunn og grunn av flere nøkkelkomponenter:

1. Registrering: Dette er prosessen med å informere WordPress om din nye blokk. Det innebærer å definere navnet, tittelen, ikonet og annen metadata. Dette gjøres primært ved hjelp av JavaScripts registerBlockType-funksjon.
2. Attributter: Dette er datafeltene knyttet til blokken din. Tenk på dem som innstillingene eller egenskapene som en bruker kan endre for en spesifikk instans av blokken (f.eks. tekstinnhold, bilde-URL, fargevalg). Attributter defineres i blokkens JavaScript-registrering.
3. Edit-funksjon: Denne JavaScript-funksjonen definerer hvordan blokken vises og oppfører seg i Gutenberg-redigeringsverktøyet. Det er her du bygger det interaktive brukergrensesnittet som innholdsskapere vil bruke til å konfigurere blokken.
4. Save-funksjon: Denne JavaScript-funksjonen definerer den statiske HTML-koden som vil bli lagret i databasen og gjengitt på nettstedets front-end. Den bør reflektere den gjeldende tilstanden til blokkens attributter.

Steg-for-steg: Lag din første egendefinerte blokk

La oss lage en enkel egendefinert blokk som viser en "Call to Action" (CTA) med en overskrift og en knapp. Dette eksemplet vil fokusere på de essensielle JavaScript-aspektene for blokkregistrering og redigering, og forutsetter at et grunnleggende WordPress-utviklingsmiljø er satt opp.

Forutsetninger:

• Et lokalt WordPress-utviklingsmiljø.
• Grunnleggende forståelse av JavaScript, React og PHP.
• Node.js og npm (eller yarn) installert for ressurskompilering.

1. Prosjektoppsett:

Egendefinerte blokker utvikles vanligvis som en del av en plugin. Opprett en ny plugin-fil (f.eks. my-custom-blocks/my-custom-blocks.php) og en JavaScript-fil for blokken din (f.eks. src/index.js). Du trenger også en byggeprosess for å kompilere JavaScript-en din. En vanlig tilnærming er å bruke @wordpress/scripts, som gir en praktisk måte å håndtere kompilering på.

I pluginens rotmappe, opprett en package.json-fil:

{
  "name": "my-custom-blocks",
  "version": "1.0.0",
  "description": "En plugin for egendefinerte Gutenberg-blokker.",
  "main": "index.js",
  "scripts": {
    "build": "wp-scripts build",
    "start": "wp-scripts start"
  },
  "keywords": ["wordpress", "gutenberg", "block"],
  "author": "Ditt Navn",
  "license": "GPL-2.0-or-later",
  "devDependencies": {
    "@wordpress/scripts": "^26.0.0" 
  }
}

Installer avhengighetene: npm install.

2. Registrering av blokken (JavaScript):

I src/index.js-filen din vil du bruke registerBlockType fra @wordpress/blocks-pakken.

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

// Importer komponenter for redigeringsverktøyet
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. Definere redigeringsgrensesnittet (src/edit.js):

Denne komponenten håndterer hvordan blokken ser ut og fungerer i redigeringsverktøyet.

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. Definere Save-funksjonen (src/save.js):

Denne funksjonen bestemmer HTML-utdataen for 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. Enqueue blokk-skriptet (PHP):

I din hovedpluginfil (my-custom-blocks.php), må du registrere og enqueue din kompilerte JavaScript-fil.

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

function my_custom_blocks_register_block() {
    // Laster automatisk inn block.json-filen og enqueuer skriptet.
    register_block_type( __DIR__ . '/build' );
}
add_action( 'init', 'my_custom_blocks_register_block' );
?>

6. Bygge ressursene:

Kjør npm run build i pluginens katalog. Dette vil kompilere JavaScript-en din til build-mappen.

Aktiver deretter pluginen i WordPress. Du bør se "Call to Action"-blokken din tilgjengelig i redigeringsverktøyet!

Beste praksis for utvikling av egendefinerte blokker

Utvikling av egendefinerte blokker handler om mer enn bare å gjøre dem funksjonelle. Å følge beste praksis sikrer at blokkene dine er sikre, effektive, tilgjengelige og vedlikeholdbare.

• Navnerom: Bruk alltid et unikt navnerom for blokken din (f.eks. my-custom-blocks/cta). Dette forhindrer konflikter med andre blokker. registerBlockType-funksjonen håndterer dette.
• Kodeorganisering: Hold JavaScript- og PHP-koden din ren og godt organisert. For komplekse blokker, vurder å dele opp JavaScript-en din i mindre, gjenbrukbare komponenter.
• Sikkerhet:
  • Sanering: Når du lagrer data i databasen (spesielt brukergenerert innhold), må du alltid sanere det. WordPress tilbyr funksjoner som sanitize_text_field, esc_url, osv.
  • Escaping: Når du sender data til nettleseren, må du alltid escape det for å forhindre Cross-Site Scripting (XSS)-angrep. Bruk funksjoner som esc_html, esc_attr, esc_url.
  • Nonces: For alle AJAX-forespørsler eller skjemaer knyttet til blokken din, bruk nonces for å verifisere at forespørselen stammer fra en legitim WordPress-kilde.
• Internasjonalisering (i18n): Bruk __() og _x()-funksjonene (fra @wordpress/i18n) for alle brukerrettede strenger i JavaScript-en din. Dette gjør blokken din oversettbar.
• Tilgjengelighet: Sørg for at blokken din er brukbar for alle. Bruk semantisk HTML, gi ARIA-attributter der det er nødvendig, og test med skjermlesere.
• Ytelse:
  • Lat lasting: For blokker som laster tunge ressurser eller komplekse data, vurder å implementere lat lasting-teknikker.
  • Effektiv gjengivelse: Optimaliser save-funksjonen og eventuell server-side gjengivelse for å være så effektiv som mulig.
  • Ressurs-enqueueing: Enqueue kun nødvendige skript og stiler for blokken din. Bruk enqueue_block_style og enqueue_block_script_handle for blokkspesifikke ressurser.
• Modularitet og utvidbarhet: Bruk WordPress-kroker (actions og filters) i PHP-en din for å la andre plugins eller temaer endre blokkens oppførsel eller utdata.
• block.json: For mer komplekse blokker, bruk en block.json-fil for å deklarere blokkmetadata, avhengigheter, stiler og skript-håndtak. Dette er den moderne standarden for blokkutvikling og forenkler ressursadministrasjon.

Integrasjon med WordPress-arkitekturen

Egendefinerte blokker er ikke isolerte enheter. De integreres dypt med WordPress' kjernearkitektur:

• Kroker: Du kan bruke PHP actions og filters i pluginen din for å endre blokkregistrering, legge til egendefinerte stiler eller skript betinget, eller til og med endre den gjengitte utdataen av kjerneblokker. For eksempel kan du bruke block_type_metadata_settings-filteret for å endre innstillingene for en registrert blokk.
• Temaintegrasjon: Blokkbaserte temaer og Full Site Editing (FSE) er sterkt avhengige av blokker. Egendefinerte blokker kan designes for å passe sømløst inn i FSE-maler, slik at brukere kan bygge hele nettsteder ved hjelp av en konsekvent blokkbasert arbeidsflyt.
• Plugin-samhandling: Dine egendefinerte blokker kan samhandle med andre plugins. For eksempel kan en egendefinert produktblokk hente data fra en e-handelsplugin, eller en egendefinert galleriblokk kan integreres med en spesifikk mediebibliotek-plugin.

Avanserte konsepter og hensyn

• Server-Side Rendering (SSR): For blokker som krever dynamiske data eller kompleks logikk som best håndteres på serveren, kan du implementere server-side rendering. Dette innebærer å definere en render_callback-funksjon i PHP-en din når du registrerer blokken.
• Dynamiske blokker: Blokker som bruker SSR blir ofte referert til som dynamiske blokker. De lagrer ikke statisk HTML i databasen; i stedet lagrer de bare attributtene sine, og render_callback genererer HTML-en ved hver sideinnlasting.
• Blokkstiler: Du kan definere egendefinerte stiler for blokkene dine som brukere kan velge fra i redigeringsverktøyet.
• Blokkvariasjoner: Lag variasjoner av en basisblokk for å tilby forhåndskonfigurerte versjoner med forskjellige standardinnstillinger eller utseender.
• Forskjeller mellom redigeringsverktøy og front-end: Vær oppmerksom på at edit- og save-funksjonene kan trenge å håndtere forskjellige scenarier. edit-funksjonen er for den interaktive redigeringsopplevelsen, mens save-funksjonen er for den statiske HTML-utdataen. Noen ganger kan du trenge en separat render_callback for dynamisk front-end gjengivelse.

Konklusjon

Utvikling av egendefinerte Gutenberg-blokker er en kraftig ferdighet som låser opp et nytt nivå av tilpasning og funksjonalitet for WordPress-nettsteder. Ved å forstå kjernekomponentene – registrering, attributter, edit- og save-funksjoner – og ved å følge beste praksis for sikkerhet, ytelse og tilgjengelighet, kan du lage robuste, gjenbrukbare og brukervennlige blokker. Enten du bygger en egendefinert plugin for en klient eller forbedrer ditt eget nettsted, vil mestring av egendefinerte blokker betydelig heve dine WordPress-utviklingsmuligheter, slik at du kan bevege deg forbi standardtilbudene og lage virkelig unike digitale opplevelser.