Mer än grundläggande block: Skapa anpassade Gutenberg-block för förbättrad WordPress-funktionalitet

Sammanfattning

WordPress Blockredigerare, Gutenberg, har revolutionerat innehållsskapandet med sitt modulära blocksystem. Medan kärnblocken erbjuder mångsidighet, är anpassade block avgörande för unik funktionalitet och varumärkesprofilering. Den här artikeln guidar dig genom processen att utveckla dina egna Gutenberg-block, och täcker viktiga koncept som blockregistrering, attribut och rendering. Vi kommer att utforska praktiska exempel, diskutera bästa praxis för kodorganisation och säkerhet, och belysa hur anpassade block integreras med WordPress arkitektur och krokar. Genom att bemästra utvecklingen av anpassade block kan du avsevärt förbättra din WordPress-webbplats kapacitet och användarupplevelse.

Mer än grundläggande block: Skapa anpassade Gutenberg-block för förbättrad WordPress-funktionalitet

Införandet av Gutenberg blockredigerare i WordPress 5.0 markerade en betydande förändring i hur innehåll skapas och hanteras. Gutenberg, som rörde sig bort från den klassiska redigerarens linjära tillvägagångssätt, introducerade ett modulärt system där innehåll byggs med diskreta "block". Medan standarduppsättningen av block täcker ett brett spektrum av vanliga behov, kräver många webbplatser unik funktionalitet, specifika designelement eller integrationer som går utöver vad som är omedelbart tillgängligt. Det är här utvecklingen av anpassade Gutenberg-block kommer in, och erbjuder ett kraftfullt sätt att utöka WordPress kapacitet och skräddarsy den exakt efter ditt projekts krav.

Att utveckla anpassade block låter dig skapa återanvändbara komponenter som effektiviserar innehållsskapandet för redaktörer, säkerställer varumärkeskonsistens och implementerar komplexa funktioner direkt i redigeringsgränssnittet. Den här guiden kommer att leda dig genom processen, från att förstå grunderna till att implementera bästa praxis för robusta och underhållbara anpassade block.

Förstå Blockredigerarens Arkitektur

Innan du dyker ner i utvecklingen är det avgörande att förstå hur Gutenberg och dess block fungerar inom WordPress ekosystem. WordPress i sig är byggt på en modulär PHP- och MySQL-arkitektur. Teman styr presentationen och plugins lägger till funktionalitet. Gutenberg, som en kärnfunktion i WordPress, integreras sömlöst i denna struktur. Den använder JavaScript (främst React) för sin dynamiska redigeringsupplevelse i webbläsaren, medan PHP hanterar server-sidig registrering och rendering.

Anpassade block är i huvudsak JavaScript-komponenter som registreras hos WordPress. När en användare lägger till ett anpassat block i ett inlägg eller en sida, lagrar Gutenberg dess konfiguration (attribut) i databasen. Vid rendering av inlägget på front-end använder WordPress PHP för att tolka denna konfiguration och mata ut lämplig HTML, ofta med hjälp av samma JavaScript-komponent eller en separat PHP-mall.

Kärnkomponenterna i ett Anpassat Block

Varje anpassat Gutenberg-block består i grunden av flera nyckeldelar:

1. Registrering: Detta är processen att informera WordPress om ditt nya block. Det innebär att definiera dess namn, titel, ikon och annan metadata. Detta görs primärt med JavaScript-funktionen registerBlockType.
2. Attribut: Detta är datafälten som är associerade med ditt block. Se dem som inställningarna eller egenskaperna som en användare kan ändra för en specifik instans av blocket (t.ex. textinnehåll, bild-URL, färgval). Attribut definieras i blockets JavaScript-registrering.
3. Edit-funktion: Denna JavaScript-funktion definierar hur blocket visas och beter sig inom Gutenberg-redigeraren. Det är här du bygger det interaktiva gränssnittet som innehållsskapare kommer att använda för att konfigurera blocket.
4. Save-funktion: Denna JavaScript-funktion definierar den statiska HTML-markup som kommer att sparas i databasen och renderas på din webbplats front-end. Den bör återspegla blockets attributs aktuella tillstånd.

Steg-för-steg: Skapa ditt Första Anpassade Block

Låt oss skapa ett enkelt anpassat block som visar en "Call to Action" (CTA) med en rubrik och en knapp. Det här exemplet fokuserar på de väsentliga JavaScript-aspekterna för blockregistrering och redigering, med antagandet att en grundläggande WordPress-utvecklingsmiljö är inställd.

Förutsättningar:

• En lokal WordPress-utvecklingsmiljö.
• Grundläggande förståelse för JavaScript, React och PHP.
• Node.js och npm (eller yarn) installerat för tillgångskompilering.

1. Projektinställning:

Anpassade block utvecklas vanligtvis som en del av ett plugin. Skapa en ny pluginfil (t.ex. my-custom-blocks/my-custom-blocks.php) och en JavaScript-fil för ditt block (t.ex. src/index.js). Du behöver också en byggprocess för att kompilera din JavaScript. Ett vanligt tillvägagångssätt är att använda @wordpress/scripts som ger ett bekvämt sätt att hantera kompilering.

I din plugins rotkatalog, skapa en package.json-fil:

{
  "name": "my-custom-blocks",
  "version": "1.0.0",
  "description": "Ett plugin för anpassade Gutenberg-block.",
  "main": "index.js",
  "scripts": {
    "build": "wp-scripts build",
    "start": "wp-scripts start"
  },
  "keywords": ["wordpress", "gutenberg", "block"],
  "author": "Ditt Namn",
  "license": "GPL-2.0-or-later",
  "devDependencies": {
    "@wordpress/scripts": "^26.0.0" 
  }
}

Installera beroendena: npm install.

2. Registrera Blocket (JavaScript):

I din src/index.js-fil kommer du att använda registerBlockType från @wordpress/blocks-paketet.

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

// Importera komponenter för redigeraren
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 mer',
        },
        buttonUrl: {
            type: 'string',
            default: '#',
        },
    },
    edit: Edit,
    save: Save,
} );

3. Definiera Redigeringsgränssnittet (src/edit.js):

Denna komponent hanterar hur blocket ser ut och fungerar inom redigeraren.

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={ __( 'Knappinställningar', 'my-custom-blocks' ) }>
                    <TextControl
                        label={ __( 'Knapptext', 'my-custom-blocks' ) }
                        value={ attributes.buttonText }
                        onChange={ onChangeButtonText }
                    />
                    <TextControl
                        label={ __( 'Knapp-URL', 'my-custom-blocks' ) }
                        value={ attributes.buttonUrl }
                        onChange={ onChangeButtonUrl }
                    />
                </PanelBody>
            </InspectorControls>
            <div { ...blockProps }>
                <RichText
                    tagName="h3"
                    placeholder={ __( 'Skriv din rubrik här...', '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. Definiera Save-funktionen (src/save.js):

Denna funktion bestämmer HTML-utmatningen för 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. Köa Blockets Skript (PHP):

I din huvudsakliga pluginfil (my-custom-blocks.php) måste du registrera och köa din kompilerade JavaScript-fil.

<?php
/**
 * Plugin Name: Mina Anpassade Block
 * Description: Lägger till anpassade Gutenberg-block.
 * Version: 1.0
 * Author: Ditt Namn
 */

function my_custom_blocks_register_block() {
    // Laddar automatiskt block.json-filen och köar skriptet.
    register_block_type( __DIR__ . '/build' );
}
add_action( 'init', 'my_custom_blocks_register_block' );
?>

6. Bygga Tillgångarna:

Kör npm run build i din plugins katalog. Detta kompilerar din JavaScript till build-mappen.

Aktivera sedan pluginet i WordPress. Du bör se ditt "Call to Action"-block tillgängligt i redigeraren!

Bästa Praxis för Utveckling av Anpassade Block

Utveckling av anpassade block går utöver att bara göra dem funktionella. Att följa bästa praxis säkerställer att dina block är säkra, prestandaoptimerade, tillgängliga och underhållbara.

• Namngivning: Använd alltid ett unikt namnutrymme för ditt block (t.ex. my-custom-blocks/cta). Detta förhindrar konflikter med andra block. Funktionen registerBlockType hanterar detta.
• Kodorganisation: Håll din JavaScript- och PHP-kod ren och välorganiserad. För komplexa block, överväg att dela upp din JavaScript i mindre, återanvändbara komponenter.
• Säkerhet:
  • Sanering: Vid lagring av data i databasen (särskilt användargenererat innehåll), sanera det alltid. WordPress tillhandahåller funktioner som sanitize_text_field, esc_url, etc.
  • Escaping: Vid utmatning av data till webbläsaren, escapa det alltid för att förhindra Cross-Site Scripting (XSS)-attacker. Använd funktioner som esc_html, esc_attr, esc_url.
  • Nonces: För alla AJAX-förfrågningar eller formulärinlämningar relaterade till ditt block, använd nonces för att verifiera att förfrågan kommer från en legitim WordPress-källa.
• Internationalisering (i18n): Använd funktionerna __() och _x() (från @wordpress/i18n) för alla strängar som visas för användaren i din JavaScript. Detta gör ditt block översättningsbart.
• Tillgänglighet: Se till att ditt block är användbart för alla. Använd semantisk HTML, ange ARIA-attribut där det behövs och testa med skärmläsare.
• Prestanda:
  • Lazy Loading: För block som laddar tunga tillgångar eller komplex data, överväg att implementera lazy loading-tekniker.
  • Effektiv Rendering: Optimera din save-funktion och eventuell server-sidig rendering för att vara så effektiv som möjligt.
  • Köa Tillgångar: Köa endast nödvändiga skript och stilar för ditt block. Använd enqueue_block_style och enqueue_block_script_handle för blockspecifika tillgångar.
• Modularitet och Utbyggbarhet: Använd WordPress krokar (actions och filters) i din PHP för att tillåta andra plugins eller teman att modifiera ditt blocks beteende eller utmatning.
• block.json: För mer komplexa block, använd en block.json-fil för att deklarera blockmetadata, beroenden, stilar och skript-handtag. Detta är den moderna standarden för blockutveckling och förenklar hanteringen av tillgångar.

Integration med WordPress Arkitektur

Anpassade block är inte isolerade enheter. De integreras djupt med WordPress kärnarkitektur:

• Krokar: Du kan använda PHP actions och filters i ditt plugin för att modifiera blockregistrering, lägga till anpassade stilar eller skript villkorligt, eller till och med ändra den renderade utmatningen av kärnblock. Du kan till exempel använda filtret block_type_metadata_settings för att modifiera inställningarna för ett registrerat block.
• Temaintegration: Blockbaserade teman och Full Site Editing (FSE) förlitar sig starkt på block. Anpassade block kan utformas för att passa sömlöst in i FSE-mallar, vilket gör det möjligt för användare att bygga hela webbplatser med ett konsekvent blockbaserat arbetsflöde.
• Plugin-interoperabilitet: Dina anpassade block kan interagera med andra plugins. Till exempel kan ett anpassat produktblock hämta data från ett e-handelsplugin, eller ett anpassat galleriblock kan integreras med ett specifikt mediabibliotek-plugin.

Avancerade Koncept och Överväganden

• Server-Side Rendering (SSR): För block som kräver dynamisk data eller komplex logik som bäst hanteras på servern, kan du implementera server-side rendering. Detta innebär att definiera en render_callback-funktion i din PHP när du registrerar blocket.
• Dynamiska Block: Block som använder SSR kallas ofta för dynamiska block. De sparar inte statisk HTML i databasen; istället sparar de bara sina attribut, och render_callback genererar HTML vid varje sidladdning.
• Blockstilar: Du kan definiera anpassade stilar för dina block som användare kan välja från i redigeraren.
• Blockvariationer: Skapa variationer av ett basblock för att erbjuda förkonfigurerade versioner med olika standardinställningar eller utseenden.
• Skillnader mellan Redigerare och Front-end: Var medveten om att edit- och save-funktionerna kan behöva hantera olika scenarier. edit-funktionen är för den interaktiva redigeringsupplevelsen, medan save-funktionen är för den statiska HTML-utmatningen. Ibland kan du behöva en separat render_callback för dynamisk front-end-rendering.

Slutsats

Utveckling av anpassade Gutenberg-block är en kraftfull färdighet som låser upp en ny nivå av anpassning och funktionalitet för WordPress-webbplatser. Genom att förstå kärnkomponenterna – registrering, attribut, edit- och save-funktioner – och följa bästa praxis för säkerhet, prestanda och tillgänglighet, kan du skapa robusta, återanvändbara och användarvänliga block. Oavsett om du bygger ett anpassat plugin för en kund eller förbättrar din egen webbplats, kommer bemästrandet av anpassade block att avsevärt höja din WordPress-utvecklingskapacitet, vilket gör att du kan gå bortom standarderbjudandena och skapa verkligt unika digitala upplevelser.