Ud over grundlæggende blokke: Skab brugerdefinerede Gutenberg-blokke for forbedret WordPress-funktionalitet

Oversigt

WordPress Block Editor, Gutenberg, har revolutioneret indholdsskabelse med sit modulære bloksystem. Mens kerneblokke tilbyder alsidighed, er brugerdefinerede blokke essentielle for unikke funktionaliteter og branding. Denne artikel guider dig gennem processen med at udvikle dine egne Gutenberg-blokke, der dækker essentielle koncepter som blokregistrering, attributter og rendering. Vi vil udforske praktiske eksempler, diskutere bedste praksis for kodeorganisation og sikkerhed og fremhæve, hvordan brugerdefinerede blokke integreres med WordPress' arkitektur og hooks.

Ved at mestre udvikling af brugerdefinerede blokke kan du markant forbedre din WordPress-sides kapaciteter og brugeroplevelse.

Ud over grundlæggende blokke: Skab brugerdefinerede Gutenberg-blokke for forbedret WordPress-funktionalitet

Introduktionen af Gutenberg-blokeditoren i WordPress 5.0 markerede et betydeligt skift i, hvordan indhold skabes og administreres. Gutenberg bevægede sig væk fra den klassiske editors lineære tilgang og introducerede et modulært system, hvor indhold bygges ved hjælp af separate "blokke". Mens standardblokkene dækker en bred vifte af almindelige behov, kræver mange websteder unikke funktionaliteter, specifikke designelementer eller integrationer, der går ud over, hvad der er umiddelbart tilgængeligt. Her kommer udvikling af brugerdefinerede Gutenberg-blokke ind i billedet, hvilket tilbyder en kraftfuld måde at udvide WordPress' kapaciteter på og skræddersy det præcist til dit projekts krav.

Udvikling af brugerdefinerede blokke giver dig mulighed for at skabe genanvendelige komponenter, der strømliner indholdsskabelse for redaktører, sikrer brandkonsistens og implementerer komplekse funktioner direkte i editorens interface. Denne guide vil føre dig gennem processen, fra forståelse af grundprincipperne til implementering af bedste praksis for robuste og vedligeholdelsesvenlige brugerdefinerede blokke.

Forståelse af Block Editors Arkitektur

Før du dykker ned i udvikling, er det afgørende at forstå, hvordan Gutenberg og dets blokke fungerer inden for WordPress-økosystemet. WordPress selv er bygget på en modulær PHP- og MySQL-arkitektur. Temaer styrer præsentationen, og plugins tilføjer funktionalitet. Gutenberg, som en kernefunktion i WordPress, integreres problemfrit i denne struktur. Den udnytter JavaScript (primært React) til sin dynamiske redigeringsoplevelse i browseren, mens PHP håndterer server-side registrering og rendering.

Brugerdefinerede blokke er i bund og grund JavaScript-komponenter, der registreres hos WordPress. Når en bruger tilføjer en brugerdefineret blok til et indlæg eller en side, gemmer Gutenberg dens konfiguration (attributter) i databasen. Ved rendering af indlægget på front-end bruger WordPress PHP til at fortolke denne konfiguration og outputte den passende HTML, ofte ved hjælp af den samme JavaScript-komponent eller en separat PHP-skabelon.

Kernekomponenterne i en brugerdefineret blok

Hver brugerdefineret Gutenberg-blok består i sin kerne af flere nøgledele:

1. Registrering: Dette er processen med at informere WordPress om din nye blok. Det indebærer at definere dens navn, titel, ikon og andre metadata. Dette gøres primært ved hjælp af JavaScripts registerBlockType-funktion.
2. Attributter: Dette er datafelterne forbundet med din blok. Tænk på dem som indstillingerne eller egenskaberne, som en bruger kan ændre for en specifik instans af blokken (f.eks. tekstindhold, billed-URL, farvevalg). Attributter defineres i blokkens JavaScript-registrering.
3. Edit-funktion: Denne JavaScript-funktion definerer, hvordan blokken vises og opfører sig inden for Gutenberg-editoren. Det er her, du bygger den interaktive brugergrænseflade, som indholdsskabere vil bruge til at konfigurere blokken.
4. Save-funktion: Denne JavaScript-funktion definerer den statiske HTML-markup, der vil blive gemt i databasen og renderet på din hjemmesides front-end. Den skal afspejle den aktuelle tilstand af blokkens attributter.

Trin-for-trin: Oprettelse af din første brugerdefinerede blok

Lad os oprette en simpel brugerdefineret blok, der viser en "Call to Action" (CTA) med en overskrift og en knap. Dette eksempel vil fokusere på de essentielle JavaScript-aspekter for blokregistrering og redigering, under forudsætning af at et grundlæggende WordPress-udviklingsmiljø er sat op.

Forudsætninger:

• Et lokalt WordPress-udviklingsmiljø.
• Grundlæggende forståelse af JavaScript, React og PHP.
• Node.js og npm (eller yarn) installeret til asset-kompilering.

1. Projektopsætning:

Brugerdefinerede blokke udvikles typisk som en del af et plugin. Opret en ny plugin-fil (f.eks. my-custom-blocks/my-custom-blocks.php) og en JavaScript-fil til din blok (f.eks. src/index.js). Du skal også bruge en build-proces til at kompilere din JavaScript. En almindelig tilgang er at bruge @wordpress/scripts, som giver en bekvem måde at håndtere kompilering på.

I din plugins rodmappe skal du oprette en package.json-fil:

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

Installer afhængighederne: npm install.

2. Registrering af blokken (JavaScript):

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

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

// Importer komponenter til editoren
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: 'Læs mere',
        },
        buttonUrl: {
            type: 'string',
            default: '#',
        },
    },
    edit: Edit,
    save: Save,
} );

3. Definition af editorens brugergrænseflade (src/edit.js):

Denne komponent håndterer, hvordan blokken ser ud og fungerer inden for editoren.

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={ __( 'Knapindstillinger', 'my-custom-blocks' ) }>
                    <TextControl
                        label={ __( 'Knaptekst', 'my-custom-blocks' ) }
                        value={ attributes.buttonText }
                        onChange={ onChangeButtonText }
                    />
                    <TextControl
                        label={ __( 'Knap URL', 'my-custom-blocks' ) }
                        value={ attributes.buttonUrl }
                        onChange={ onChangeButtonUrl }
                    />
                </PanelBody>
            </InspectorControls>
            <div { ...blockProps }>
                <RichText
                    tagName="h3"
                    placeholder={ __( 'Indtast din overskrift her...', '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. Definition af Save-funktionen (src/save.js):

Denne funktion bestemmer HTML-outputtet til 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. Enqueuing af blok-scriptet (PHP):

I din primære plugin-fil (my-custom-blocks.php) skal du registrere og enqueuere din kompilerede JavaScript-fil.

<?php
/**
 * Plugin Navn: Mine Brugerdefinerede Blokke
 * Beskrivelse: Tilføjer brugerdefinerede Gutenberg-blokke.
 * Version: 1.0
 * Forfatter: Dit Navn
 */

function my_custom_blocks_register_block() {
    // Indlæser automatisk block.json-filen og enqueuer scriptet.
    register_block_type( __DIR__ . '/build' );
}
add_action( 'init', 'my_custom_blocks_register_block' );
?>

6. Bygning af assets:

Kør npm run build i din plugins mappe. Dette vil kompilere din JavaScript til build-mappen.

Aktiver derefter pluginnet i WordPress. Du bør se din "Call to Action"-blok tilgængelig i editoren!

Bedste praksis for udvikling af brugerdefinerede blokke

Udvikling af brugerdefinerede blokke handler om mere end blot at gøre dem funktionelle. Overholdelse af bedste praksis sikrer, at dine blokke er sikre, ydeevneoptimerede, tilgængelige og vedligeholdelsesvenlige.

• Navngivningskonventioner: Brug altid et unikt navnerum til din blok (f.eks. my-custom-blocks/cta). Dette forhindrer konflikter med andre blokke. registerBlockType-funktionen håndterer dette.
• Kodeorganisation: Hold din JavaScript- og PHP-kode ren og velorganiseret. For komplekse blokke kan du overveje at opdele din JavaScript i mindre, genanvendelige komponenter.
• Sikkerhed:
  • Sanitering: Når du gemmer data i databasen (især brugergenereret indhold), skal du altid sanere det. WordPress leverer funktioner som sanitize_text_field, esc_url osv.
  • Escaping: Når du outputter data til browseren, skal du altid escape det for at forhindre Cross-Site Scripting (XSS)-angreb. Brug funktioner som esc_html, esc_attr, esc_url.
  • Nonces: For alle AJAX-anmodninger eller formularindsendelser relateret til din blok skal du bruge nonces til at verificere, at anmodningen stammer fra en legitim WordPress-kilde.
• Internationalisering (i18n): Brug __() og _x() funktionerne (fra @wordpress/i18n) for alle brugerrettede strenge i din JavaScript. Dette gør din blok oversættelig.
• Tilgængelighed: Sørg for, at din blok er brugbar for alle. Brug semantisk HTML, angiv ARIA-attributter, hvor det er nødvendigt, og test med skærmlæsere.
• Ydeevne:
  • Lazy Loading: For blokke, der indlæser tunge assets eller komplekse data, kan du overveje at implementere lazy loading-teknikker.
  • Effektiv Rendering: Optimer din save-funktion og enhver server-side rendering for at være så effektiv som muligt.
  • Asset Enqueuing: Indlæs kun nødvendige scripts og styles til din blok. Brug enqueue_block_style og enqueue_block_script_handle til blokspecifikke assets.
• Modularitet og udvidelsesmuligheder: Udnyt WordPress hooks (actions og filters) i din PHP for at tillade andre plugins eller temaer at ændre din bloks adfærd eller output.
• block.json: For mere komplekse blokke skal du bruge en block.json-fil til at deklarere blokmetadata, afhængigheder, styles og script handles. Dette er den moderne standard for blokudvikling og forenkler asset-administration.

Integration med WordPress Arkitektur

Brugerdefinerede blokke er ikke isolerede enheder. De integreres dybt med WordPress' kernearkitektur:

• Hooks: Du kan bruge PHP actions og filters i dit plugin til at ændre blokregistrering, tilføje brugerdefinerede styles eller scripts betinget, eller endda ændre den renderede output af kerneblokke. For eksempel kan du bruge block_type_metadata_settings-filteret til at ændre indstillingerne for en registreret blok.
• Tema-integration: Blokbaserede temaer og Full Site Editing (FSE) er stærkt afhængige af blokke. Brugerdefinerede blokke kan designes til at passe problemfrit ind i FSE-skabeloner, hvilket giver brugerne mulighed for at bygge hele websteder ved hjælp af en ensartet blokbaseret arbejdsgang.
• Plugin-interoperabilitet: Dine brugerdefinerede blokke kan interagere med andre plugins. For eksempel kan en brugerdefineret produktblok hente data fra et e-handelsplugin, eller en brugerdefineret galleriblok kan integreres med et specifikt mediebibliotek-plugin.

Avancerede koncepter og overvejelser

• Server-Side Rendering (SSR): For blokke, der kræver dynamiske data eller kompleks logik, der bedst håndteres på serveren, kan du implementere server-side rendering. Dette indebærer at definere en render_callback-funktion i din PHP, når du registrerer blokken.
• Dynamiske blokke: Blokke, der bruger SSR, kaldes ofte dynamiske blokke. De gemmer ikke statisk HTML i databasen; i stedet gemmer de kun deres attributter, og render_callback genererer HTML'en ved hver sideindlæsning.
• Blok-styles: Du kan definere brugerdefinerede styles til dine blokke, som brugerne kan vælge fra i editoren.
• Blok-variationer: Opret variationer af en basisblok for at tilbyde forudkonfigurerede versioner med forskellige standardindstillinger eller udseender.
• Editor vs. Front-end Forskelle: Vær opmærksom på, at edit- og save-funktionerne muligvis skal håndtere forskellige scenarier. edit-funktionen er til den interaktive editoroplevelse, mens save-funktionen er til den statiske HTML-output. Nogle gange kan du have brug for en separat render_callback til dynamisk front-end rendering.

Konklusion

Udvikling af brugerdefinerede Gutenberg-blokke er en kraftfuld færdighed, der låser op for et nyt niveau af tilpasning og funktionalitet for WordPress-websteder. Ved at forstå kernekomponenterne – registrering, attributter, edit- og save-funktioner – og ved at overholde bedste praksis for sikkerhed, ydeevne og tilgængelighed, kan du skabe robuste, genanvendelige og brugervenlige blokke. Uanset om du bygger et brugerdefineret plugin til en kunde eller forbedrer dit eget websted, vil mestring af brugerdefinerede blokke markant forbedre dine WordPress-udviklingskapaciteter, hvilket giver dig mulighed for at bevæge dig ud over standardtilbuddene og skabe virkelig unikke digitale oplevelser.