Hur man skapar ett anpassat WordPress Gutenberg-block: Tutorial-serien

Det här är en detaljerad handledningsserie som täcker hur du skapar dina egna WordPress Gutenberg-block. Det är för dig som är tema- eller plugin-utvecklare och är, precis som jag, frustrerad över bristen på dokumentation. Det mesta av det jag har lärt mig när det gäller att utveckla i den nya Javascript-världen av WordPress är genom försök och fel, kraftfullt experimenterande och genom att läsa allt relaterat jag har kommit över. Så jag tänkte att jag kunde samla allt jag har lärt mig hittills i en stor handledning.

Genom 10 delar syftar denna handledning till att lära dig hur du skriver dina egna anpassade block. Oavsett vad de är till för, börja med grunderna och arbeta fram till mer komplexa funktioner. Jag rekommenderar att du skriver ut allt själv istället för att kopiera+klistra in koden. Det är det bästa sättet att lära sig! Följ serien från steg 1 till 10 eftersom vi kommer att bygga ovanpå blocket när vi går vidare.

Vad du behöver veta innan vi börjar

Innan vi kastar oss in i trappan; en ansvarsfriskrivning. Det finns några saker du redan bör veta i förväg om vad den här serien är och vad den inte är.

Programmeringsspråken

Du måste kunna Javascript – det är givet. Du behöver inte vara expert, men det här är inte en Javascript-handledning. När det gäller ECMAScript Javascript-version; du kan skriva i ES5 och inte oroa dig för att kompilera din kod med Babel och sånt. Denna serie är dock skriven med ES6 och ESNext kod. Oroa dig inte – steg 1 är tillägnat dig att sätta upp en utvecklingsmiljö redo att koda i ESNext med alla deras nya syntaxer.

Som du säkert vet är Gutenberg baserad på React JS. Den här serien är inte heller en React-tutorial och förutsätter grundläggande kunskap om React och hur det fungerar. Återigen, det finns ingen anledning att vara en expert. Eftersom React har funnits ett tag finns det massor av bra handledningar, dokumentation och resurser dedikerade för att lära dig React. Så jag rekommenderar att du letar upp dessa först.

Den här serien är fokuserad på att lära sig Javascript-, React- och JSX-delarna och handlar inte om styling/CSS. Eftersom målet för ditt block kan vara drastiskt annorlunda har jag valt att inte fokusera på styling och endast tillhandahållit mycket grundläggande HTML. Det är upp till dig att lägga till din stil och nödvändig HTML-utdata för att få ditt block att rendera precis som du behöver det.

Den här handledningens ålder

Och slutligen, tänk på tiden då denna serie skrevs. Gutenberg är fortfarande ganska ny men håller på att drastiskt förändras och förbättras.

Om du hittar detta inom en lång framtid kan en del kod föråldras eller ersättas med bättre metoder. Den här guiden skrevs i och färdigställdes i WordPress version 5.2.3 (slutet av år 2019).

Vad du kommer att lära dig

I de första delarna fokuserar vi på grunderna. Vi sätter upp en utvecklingsmiljö med körande kompilering av vår kod. Och grunderna i hur man registrerar ett block och de nödvändiga PHP-delarna av det också. Vi kommer att lära oss om det enorma biblioteket av komponenter och metoder som är tillgängliga för oss från WordPress Gutenberg.

När vi går vidare kommer vi att lära oss hur du lägger till avsnitt och inställningar för vårt block i editorns sidofält (Inspektör) samt anpassar verktygsfältet. Längs vägen kommer vi att beröra många olika ingångstyper och hur man använder Gutenbergs komponent för dessa. Och naturligtvis kommer vi att lära oss hur man sparar, uppdaterar och matar ut den sparade informationen till vårt block – och hur det fungerar bakom kulisserna.

I slutet kommer vi att titta på mer avancerade saker som dynamiska block och hur man använder PHP för att rendera blockutdata. Och slutligen hur man gör inläggsförfrågningar inuti redigeraren – så att användaren kan välja ett inlägg från en lista för rendering.

Innehållsförteckning

Nedan hittar du direktlänkar till varje del i serien.

• Del 1: Ställa in utvecklingsmiljön
  I den första delen av denna handledningsserie om hur man skapar anpassade Gutenberg-block måste vi ställa in vår utvecklingsmiljö. Vi behöver en plats där vi kan skriva vår kod i ES6/ESNext-syntaxer och kompilera den när vi är på språng.

• Del 2: Registrera ett block
  I den här delen kommer vi att skriva Javascript för att registrera och konfigurera vårt anpassade block. I slutet kommer vi att registrera skriptet med PHP och göra den nödvändiga PHP-koden för att WordPress ska känna igen det som ett nytt block.

• Del 3: Rekvisita och WordPress-komponenter
  I föregående steg lärde vi oss hur man registrerar ett anpassat block, både i Javascript och i PHP. I det här steget kommer vi att lära oss hur man använder WordPress komponenter för att lägga till olika typer av fält och inställningar.

• Del 4: Attribut
  I den här delen ska vi titta på hur man definierar attribut, hämtar deras värden och uppdaterar dem. Med attribut kan vi acceptera input från editorn, spara den och mata ut den hur vi vill.

• Del 5: Lägga till Inspector Settings
  I det här steget kommer vi att fokusera på vad WordPress (åtminstone i kod) kallar Inspector – sidofältet till höger i editorn. Vi kommer att beröra några nya komponenter som är vettiga att placera i sidofältet och hur man hanterar dessa.

• Del 6: Lägga till verktygsfält
  I det här inlägget kommer vi att lära oss hur du lägger till WordPress verktygsfält i vårt block, dvs för justering och blockjustering. Vi kommer också att lära oss att lägga till våra egna verktygsfält med våra egna knappar för att göra anpassade åtgärder.

• Del 7: Skapa dina egna komponenter
  Hittills i den här tutorialserien har vi skrivit all kod iregisterBlockType()funktionenedit. Det är fullt möjligt och rekommenderas ofta att istället tilldela redigering till en separat komponent. Genom att göra det kan vi använda funktionalitet som komponenttillstånd och livscykelmetoder.

• Del 8: Översättning av ditt block
  I den här delen kommer vi att fokusera på hur man översätter texterna och värderingarna i vårt block. Vi använder WP-CLI för att generera nödvändiga filer så att Gutenberg kan ladda våra översättningar när du byter WordPress-språk.

• Del 9: Dynamiska block
  Hittills har vi renderat blockets utdata i Javascript. Men med dynamiskt innehåll som senaste inlägg eller visning av ett inlägg kan det krävas att vi renderar blockets utdata i PHP.

• Del 10: Hämta inlägg och komponenter av högre ordning
  I den sista delen kommer vi att lära oss hur man använder komponenter av högre ordning, och därmed hur man utför en inläggsfråga inifrån editorn och tillhandahåller en metod för att välja inlägg.