Grunderna för att utveckla för WordPress Gutenberg för nybörjare

Det här inlägget syftar till att hjälpa dig att förstå nyckelbegreppen för utveckling för den nya editorn i WordPress; Gutenberg. Gutenberg är fortfarande ganska ny när detta skrivs. Och som med alla nya teknologier i födelsefasen, är dokumentationen och standarderna tyvärr lite bristfälliga.

WordPress dokumentationssida har en stor sektion tillägnad Gutenberg för utvecklare; kallas Gutenbergs redaktörshandbok. Den innehåller redan en hel del information. Men det kan vara lite förvirrande eller skrämmande för någon som är helt ny på Javascript-baserad teknologi. För PHP-fokuserade utvecklare som kanske bara har grundläggande Javascript/jQuery-kunskaper kan de nya WordPress-teknikerna verka skrämmande. Men tro mig, när du väl lärt dig nyckelbegreppen kommer du att se vilka nya möjligheter du nu har som WordPress-utvecklare.

Låt oss börja med de absoluta grunderna. Vilket eller vilka programmeringsspråk och verktyg skulle du behöva använda eller lära dig för att bäst utveckla för Gutenberg?

Språket och biblioteken du behöver kunna

Det korta svaret på vilket språk du behöver använda för att utveckla till Gutenberg är: Javascript. Men inom Javascript-världen finns det en hel del koncept, tillägg och verktyg du bör vara medveten om.

Först och främst är det en fråga om Javascript-version. Det finns en officiell standardisering av Javascript; ECMAScript. ECMAScript 5 (ofta förkortat till ES5) kom ut för cirka 10 år sedan och är den Javascript-version de flesta av alla oss utvecklare känner till. Sedan har vi ECMAScript 6 (ofta förkortat till ES6) som kom ut 2015. Vissa hänvisar till denna version som ES2015. Och slutligen finns det ESNext, som är ett dynamiskt namn som täcker den kommande versionen, som innehåller förslag som vi hoppas ska inkluderas i vilken nästa standardiserade version av Javascript som helst.

Du kanske tänker i stil med "så det är bra och allt, nyare versioner av Javascript betyder bara fler funktioner. Så jag använder bara den senaste." Men det finns en mycket viktig sak du behöver veta om Javascript-versioner och det är detta: De flesta webbläsare idag kan bara förstå ES5.

Det betyder att om du vill skriva Javascript i ES6 eller ESNext behöver du sätta upp verktyg som omvandlar din kod till ES5 så att webbläsare kan förstå den. Men innan du börjar fundera på att hoppa över att lära dig ES6 och ESNext helt, kom ihåg att ES5 är 10 år gammal. Och det kommer att kräva att du skriver mycket mer kod. Det blir också mycket mindre läsbart och mer komplext än om du skulle skriva det i ES6 eller ESNext.

Dessutom, för Gutenbergs koncept, vill du också använda JSX – en syntax-extension till Javascript. JSX är också ett språk som webbläsare inte kan förstå utan att omvandla det.

Så varför bry sig om ES6, ESNext eller JSX?

Om du fortfarande inte är övertygad om att ES6/ESNext är värt det extra steget för att transformera det, låt mig visa dig en kodjämförelse. Med ES6 och JSX kan du skriva detta för att returnera ett enkelt stycke; med en klass och dynamisk utdata från en variabel;

För er som är nya på detta och tror att jag har glömt citat – nej, det har jag inte. Detta är enkelheten med JSX. Låt oss jämföra ovanstående med hur du skulle skriva med ES5 och WordPress Javascript-bibliotek:

return wp.element.createElement(
    'p',
    { className: 'example' },
    'Hello, my name is ' + name
);

All ovanstående kod krävs för att mata ut vad ES6 och JSX kan göra i en singularis mycket lättläst rad! Föreställ dig att bygga ett mer komplext användargränssnitt med händelser och villkor, när bara ett enkelt stycke kräver denna besvärliga kodbit.

Övertygad? Bra!

Transformationsverktyg och React JS

Det vanligaste verktyget, och det som WordPress använder, för att transformera ES6/ESNext är Babel. Vanligtvis skulle du använda Babel som ett plugin till Webpack, som är ett verktyg som paketerar och förminskar dina Javascript-filer. Båda verktygen använder Node.js, som ger dig några verktyg för att köra skript för Webpack och Babel på kommandoraden. Om detta låter förvirrande har jag ett inlägg som förklarar på djupet hur man ställer in alla dessa verktyg för Gutenberg- utveckling.

Det andra du behöver veta om teknik är att Gutenberg är baserat på ett abstraktionslager ovanpå React JS. React JS är ett Javascript-bibliotek med öppen källkod som underhålls av Facebook och släpptes runt år 2013. Eftersom React har funnits ett tag finns det massor av handledningar, guider och dokumentation för detta bibliotek. Reacts officiella sida har en bra, detaljerad handledning för dig som är ny på React. Du behöver definitivt inte vara expert på React för att utveckla för Gutenberg, men grunderna i hur det fungerar med komponenter och tillstånd kommer att hjälpa dig mycket att förstå Gutenberg.

För att avsluta:

• Learning React JS kommer att räcka långt för att förstå hur man utvecklas för Gutenberg. Speciellt om du vill skapa dina egna anpassade block eller anpassa de befintliga.
• Du kan göra genom att bara använda ES5 Javascript, men det rekommenderas definitivt att lära dig ES6, ESNext och JSX.
• Bekanta dig med de verktyg som behövs så att du kan transformera din ES6 / ESNext / JSX-kod. Dessa verktyg är npm, Webpack och Babel.

Det nya sättet att lagra inläggsinnehåll och varför

En av de största fördelarna med Gutenberg är att gå bort från fast HTML i inläggsinnehåll. WordPress, före Gutenberg, och de flesta webbaserade CMS lagrar artikelinnehåll i ren HTML. Detta är i allmänhet inte ett problem med enkelt innehåll (titlar och stycken). Men kan vara ett större problem med mer komplext och dynamiskt innehåll.

Alla CMS som tillåter dynamiskt innehåll i artikelinnehåll kommer att stöta på problem med hur man sparar detta som giltig HTML. Detta kan vara allt från en bild som hänvisar till dess ID i systemet istället för den fullständiga URL:en. Eller en widget som dynamiskt visar senaste inlägg inom en given kategori. Normalt kommer detta att lösas genom att mata ut anpassad kryptisk HTML som är meningslöst att matas ut normalt. Och låt sedan CMS-parsern hantera att omvandla dessa HTML-bitar till något meningsfullt eller dynamiskt. Nackdelen med detta är att om du överför ditt innehåll till ett annat CMS så resulterar det ofta i ful HTML. Innehållet skulle fyllas med otolkad HTML som du manuellt måste rensa upp. Det här problemet är vad Gutenberg vill lösa.

Med Gutenberg har WordPress valt att spara ytterligare och dynamisk information som HTML-kommentarer. HTML-kommentarer är aldrig synliga för användare på webbplatsen, och i princip allt är tillåtet inom kommentarsblocket. En HTML-kommentar börjar med <!--och slutar med -->, och Gutenberg lagrar data i en viss struktur med JSON-format. Varje block i Gutenberg lindas av en start-HTML-kommentar och en avslutande HTML-kommentar efter den.

Det nya sättet att inläggsinnehåll lagras

Jag går inte in på detaljer om hur kommentarsblocken är uppbyggda – du hittar en detaljerad guide om detta i WordPress Editor Handbook. Men som ett exempel, ett enkelt stycke i Gutenberg-inläggsinnehållet kommer att sparas i databasen som:

När det gäller dynamiskt innehåll kommer vanligtvis ingen HTML att matas ut alls. All information WordPress behöver för att förstå vad detta block gör, finns i HTML-kommentarer. Så här lagrar Gutenberg ett block med "Senaste inlägg":

Eftersom allt är en HTML-kommentar, kommer att överföra dina inlägg till en annan WordPress utan Gutenberg eller ett annat CMS se till att ingen ful otolkad HTML spottas ut. Det kommer helt enkelt att ignoreras och hoppas över.

Som du säkert har förstått nu är att kommentarsblocken börjar med namnet på blocket, med prefixet ‘ wp‘. Om det finns några anpassade inställningar kommer de att matas ut efter namnet i JSON, som du kan se i exemplet med Senaste inlägg-blocket. Gutenberg hänvisar till dessa som attribut, och detta koncept är något du kommer att bli mycket bekant med när du börjar lära dig att utvecklas för Gutenberg.

Användbart att veta:
Om du vill ha en djupare titt på hur det nya inläggets innehåll sparas kan du titta i din wp_poststabell i din databas. Det finns en annan enklare metod att titta på hela databasvärdet, inifrån WordPress-mallar. I din enda mall i slingan, använd helt enkelt " echo get_the_content()". Om du använder den normala " the_content()" kommer det analyserade inläggets innehåll att matas ut, men ett eko av innehållets värde kommer att mata ut exakt vad som är lagrat i databasen. Du kan använda Inspektera verktyg eller visa källa i Chrome eller Firefox för att se kommentarsblocken.

Vad du som utvecklare kan göra i Gutenberg

Du har ett par alternativ för hur du går tillväga för att anpassa dina teman eller plugins för Gutenberg. Nedan listas de vanligaste anpassningarna du förmodligen skulle göra som utvecklare.

Utöka och anpassa befintliga block

WordPress Gutenberg kommer med ett stort paket blocktyper, och du kan utöka vilken som helst av dessa. Du kan också ta bort några av dem, eller besluta för vissa fall att endast tillåta eller ta bort några av dem.

Den vanligaste metoden för att utöka ett block är att lägga till anpassade blockstilar – som är stilvariationer av ett block. Blockstilar är inte så vanliga i standard WordPress, men det finns några. Ta en titt på Quote-blocket. I Gutenberg-editorn har du en ruta i sidofältet till höger som heter "Styles".

Ett annat sätt att anpassa befintliga block är att använda filter. Du är förmodligen bekant med filter som använder PHP i WordPress, men med Gutenberg finns det nu Javascript-baserade filter på block. Du kan till exempel lägga till dina egna anpassade attribut (inställningar) till alla eller specifika typer av block eller filtrera hur de sparas eller matas ut.

Du kan också manipulera blockkategorierna, samt ta bort eller tillåta vissa block i vissa situationer. Eller så kan du till exempel se till att endast en handfull blocktyper är tillåtna för en anpassad posttyp.

Skapa dina egna anpassade block

Att skapa anpassade block är kanske den första tanke som de flesta WordPress-utvecklare har. Standardblocken i WordPress kan räcka långt, men om du bygger ett mer komplext tema eller plugin har du förmodligen specifika behov. Till exempel att använda Gutenberg för att skapa en snygg framsida med genvägar till innehåll och dynamiskt innehåll. Det är möjligt att uppnå de flesta anpassningar genom att använda CSS-klassalternativet som finns för alla block. Men det här är inte speciellt användarvänligt.

Att skriva dina egna anpassade block är förmodligen det svåraste för att anpassa ditt tema eller plugin för Gutenberg. Men det kan också vara det mest givande! Du kommer inte bara att kunna skapa block som gör och ser ut precis som du vill att de ska – utan det är också ett utmärkt sätt att snabbt lära dig om den nya Javascript-baserade tekniken.

Se till att ditt tema är Gutenberg-färdigt

Om du är en WordPress-temautvecklare bör du vara medveten om att det finns en hel del inställningar som ditt tema kan behöva för Gutenberg, särskilt i form av add_theme_support(). WordPress handbok har en bra översikt över alla temastöd du behöver tänka på för att göra ditt tema Gutenberg-färdigt.

Som standard kommer WordPress att hantera de flesta styling av standardblocken själv, så du ska inte behöva oroa dig för mycket om att styla dessa i ditt tema. Men temautvecklare är vanligtvis mer kräsna om sin design och styling. Så du kommer förmodligen att behöva justera eller lägga till blockstyling. Du kan lägga till redigerarstilar endast i frontend, endast editor eller båda. WordPress Gutenberg Handbook ger en översikt över redigerarstilar och standardblockstilar.

Det finns också ett koncept med blockmallar där du kan fördefiniera vilka block som ska visas i inlägg. Blockmallar kan användas som platshållare för att hjälpa redaktören att fylla i block. Men den kan också användas för att definiera en fast uppsättning block och positioner.

Och slutligen finns det funktioner tillgängliga för att arbeta med Gutenberg-parsern och hur man extraherar block från inlägg. Eftersom allt innehåll sparas med fullständig information om typen av innehåll, kan du enkelt extrahera specifika delar av inläggets innehåll. Ett bra exempel är att extrahera första stycket av inlägg för att visa som utdrag. En mycket användbar PHP-funktion för detta koncept är [parse_blocks](https://developer.wordpress.org/reference/functions/parse_blocks/)(), som använder Gutenbergs parser på det tillhandahållna inläggsinnehållet och i gengäld får du en PHP-array med all blockinformation och innehåll.

Slutsats

Jag hoppas att det här inlägget inte bara har lärt dig något om att utveckla för Gutenberg, utan också gjort dig nyfiken och intresserad av att lära dig mer! Som en PHP-fokuserad WordPress-utvecklare som till en början motsatte sig idén att byta till Javascript-baserad teknik, kan jag berätta att när du väl har tagit steget att lära dig om det "nya sättet", kommer du att vara glad att du gjorde det. Gutenberg öppnar upp för nya sätt att anpassa, designa och visa WordPress-innehåll utan behov av sidbyggare eller teman med tunga bibliotek för att tillåta flexibelt och snyggt inläggsinnehåll. Vi behöver bara lära oss att arbeta med det optimalt!