Gutenberg Block Patterns: A Developer’s Look

En titt på WordPress Gutenbergs nya blockmönster, i en utvecklares ögon. Vi kommer att undersöka vad de är, vad de kan användas till och en djupare titt på hur man skriver kod för dem.

Blockmönster och deras användning

Blockmönster introducerades i WordPress 5.5 (11 augusti 2020). De är en ny funktion i blockinföraren för att enklare infoga en fördefinierad konfiguration av flera block. Tema- eller plugin-utvecklare kan definiera en grupp av block, hur de är kapslade, deras innehåll och deras attribut, och slutanvändare kan infoga detta med en enkel operation med ett klick. Tanken är att slutanvändare inte längre behöver bygga komplexa layouter och alla sina anpassade inställningar manuellt och kapsla dem i lämpliga behållare för block som de ofta använder.

När ett blockmönster väl har lagts till i editorn vet inte blocken att de lades till genom ett blockmönster. De läggs till som vanliga block så att användare kan justera sitt innehåll och sina inställningar. Det är i grunden en genväg för att lägga till en konfiguration av flera block.

Tanken är bra! Alla slutanvändare är inte bekväma med att skapa en stor struktur av kapslade block i editorn för att få det att se perfekt ut. Men än så länge är den här funktionen mest en fördel för utvecklare eftersom slutanvändare inte kan skapa sina egna mönster. För användarnas egna anpassade block måste de hålla sig till att använda återanvändbara block. Men speciellt för temautvecklare låter blockmönster dem verkligen visa slutanvändarna den bästa konfigurationen av block som fungerar bra i temat.

WordPress har lagt till ett nytt temastöd för blockmönster: 'core-block-patterns'. Core kommer sedan 5.5.0 automatiskt att köra en add_theme_support('core-block-patterns')så du behöver inte göra detta i ditt tema.

Eftersom alla blockmönsterfunktioner bara finns i en väldigt ny WordPress-version är det en bra idé att först kontrollera om det finns, så att du inte bryter sidor med äldre WordPress-versioner. I alla kodexempel nedan har jag gjort just det.

WordPress 5.5 levereras med 9 fördefinierade blockmönster (se listan nedan). Blockmönster visas i mönsterkategorier (kärnan lägger till 5 kategorier). Blockmönsterkategorier fungerar som postkategorier; du kan lägga ett blockmönster i flera kategorier. Tema- och plugin-utvecklare kan registrera sina egna blockmönster och blockmönsterkategorier, samt avregistrera dem i kärnan. Så låt oss ta en närmare titt på hur!

Blockmönster och blockmönsterkategorier som ingår i WordPress 5.5

Blockmönstren som levereras i WordPress 5.5 är följande (namnutrymmet och snigel-ID för varje mönster visas inom parentes):

• Två knappar (‘ core/two-buttons‘)
• Tre knappar (‘ core/three-buttons‘)
• Två kolumner med text (‘ core/text-two-columns‘)
• Två kolumner med text med bilder (‘ core/text-two-columns-with-images‘)
• Tre kolumner med text med knappar (‘ core/text-three-columns-buttons‘)
• Två bilder sida vid sida (‘ core/two-images‘)
• Stor rubrik med rubrik (‘ core/large-header‘)
• Stor rubrik med en rubrik och en knapp (‘ core/large-header-button‘)
• Citat (‘ core/quote‘)

Kategorierna som läggs till i WordPress 5.5 är (deras snigel-ID visas inom parentes):

• Knappar (‘ buttons‘)
• Kolumner (‘ columns‘)
• Galleri (‘ gallery‘)
• Rubriker (‘ header‘ – notera inga ‘s’ i slutet)
• Text (‘ text‘)

Avregistrering av blockmönster

Du kan avregistrera blockmönster med funktionen [unregister_block_pattern](https://developer.wordpress.org/block-editor/developers/block-api/block-patterns/#unregister_block_pattern)(). Ange bara en sträng med blockmönstret att ta bort som parameter. Se översikten ovan för kärnblocksmönster. Kör den här funktionen i en funktion kopplad till initåtgärden.

Ett exempel på avregistrering av kärnblocksmönstren "Två knappar" och "Tre knappar":

add_action('init', function() {
    if (!function_exists('unregister_block_pattern')) {
        return;
    }
    unregister_block_pattern('core/two-buttons');
    unregister_block_pattern('core/three-buttons');
});

Registrera blockmönster

Registrering av ett nytt blockmönster görs med hjälp av funktionen [register_block_pattern](https://developer.wordpress.org/block-editor/developers/block-api/block-patterns/#register_block_pattern)(). Den accepterar två parametrar; den första är en sträng med ett unikt namn för ditt mönster inklusive namnutrymme. Den andra är en rad inställningar för ditt blockmönster.

Tips: Att definiera ett blockmönster kräver att du tillhandahåller rå HTML-innehåll för din blockkonfiguration. Jag rekommenderar inte att du skriver ut detta manuellt eftersom det lätt kommer att orsaka ogiltiga blockkonflikter. Gå istället in i editorn och sätt upp blocken som du vill ha dem i ditt mönster. Klicka sedan på "punktmenyn" i verktygsfältet i föräldrablocket och klicka på "Kopiera". Efter detta kan du gå tillbaka till din kodredigerare och klistra in (Ctrl+V). Detta ger dig rå HTML till den konfiguration du kopierade. Använd kodredigerarens funktionalitet för att ersätta alla nyrader med noch se till att undvika citattecken ordentligt.

Egenskaperna för ditt blockmönster är följande (andra argumentarray):

• title(obligatoriskt): Det visningsbara namnet på ditt blockmönster
• **content**(obligatoriskt): RAW HTML för blockkonfiguration
• description: Beskrivning för ditt blockmönster. Är visuellt dold
• categories: En uppsättning kategorier att lägga till detta blockmönster i. Om du inte tillhandahåller den här egenskapen kommer blocket att placeras i en "Okategoriserad" blockmönsterkategori.
• keywords: En rad nyckelord som kan hjälpa användare att hitta ditt mönster när de söker
• viewportWidth: Ange ett heltal av blockmönsterbredden i infogaren. Påverkar endast förhandsvisningen i kuvertet.

Här är ett exempel på att registrera ett blockmönster som består av ett täckblock i full bredd som har en bakgrundsfärg, som innehåller ett mittjusterat rubrikblock med en specifik textfärg och ett mittjusterat stycke av en specifik textfärg:

Registrering av blockmönsterkategorier

Utvecklare kan också registrera anpassade blockmönsterkategorier. Detta görs med funktionen [register_block_pattern_category](https://developer.wordpress.org/block-editor/developers/block-api/block-patterns/#register_block_pattern_category)(). Den accepterar två parametrar; först en sträng av kategorin slug, och sedan en uppsättning egenskaper. Just nu stöds endast en egenskap i det andra argumentet; labelför kategorins läsbara namn.

Nedan är ett exempel på registrering av en anpassad blockmönsterkategori:

Med detta kan du lägga till ‘awp-mönster’ till ‘ categories‘-argumentet till register_block_pattern(). Tänk på att om en kategori inte har några blockmönster registrerade för sig, kommer kategorin inte att visas i blockinfogaren. Du måste lägga till minst ett blockmönster i den här kategorin för att det ska visas.

Avregistrering av blockmönsterkategorier

Slutligen finns det en funktion [unregister_block_pattern_category](https://developer.wordpress.org/block-editor/developers/block-api/block-patterns/#unregister_block_pattern_category)()för att avregistrera en blockmönsterkategori. Ange kategorin snigel som parameter. Se översikten över blockmönsterkategorier ovan för kärnkategorier och deras sniglar.

Glöm inte att blockmönsterkategorier utan tilldelade blockmönster inte kommer att vara synliga i blockinfogaren. Så om du avregistrerar alla blockmönster som tilldelats en kategori kommer själva kategorin inte längre att vara synlig och du behöver inte nödvändigtvis avregistrera kategorin. Alla blockmönster som bara är tilldelade kategorin du tar bort kommer att flyttas till en "Okategoriserad" kategori.

Här är ett exempel på avregistrering av kärnblocksmönsterkategorin "knappar":

add_action('init', function() {
    if (!function_exists('unregister_block_pattern_category')) {
        return;
    }
    unregister_block_pattern_category('buttons');
});

Slutsats

Den nya blockmönsterfunktionen i WordPress Gutenberg är definitivt ett steg närmare att få blockredigeraren att fungera mer som en sidbyggare. Enligt min åsikt är nackdelen att slutanvändare inte kan skapa sina egna mönster. Men det är en bra funktion för temautvecklare att tillåta slutanvändare att enkelt sätta upp blockkonfigurationer och layouter som fungerar bra i temat. Det här är en helt ny funktion och den kommer förmodligen att utvecklas och förbättras inom en snar framtid! Jag för en, kan inte vänta!