L\u00e5t oss b\u00f6rja med de absoluta grunderna. Vilket eller vilka programmeringsspr\u00e5k och verktyg skulle du beh\u00f6va anv\u00e4nda eller l\u00e4ra dig f\u00f6r att b\u00e4st utveckla f\u00f6r Gutenberg?<\/p>\n
Spr\u00e5ket och biblioteken du beh\u00f6ver kunna<\/h2>\n
Det korta svaret p\u00e5 vilket spr\u00e5k du beh\u00f6ver anv\u00e4nda f\u00f6r att utveckla till Gutenberg \u00e4r: Javascript. Men inom Javascript-v\u00e4rlden finns det en hel del koncept, till\u00e4gg och verktyg du b\u00f6r vara medveten om.<\/p>\n
F\u00f6rst och fr\u00e4mst \u00e4r det en fr\u00e5ga om Javascript-version. Det finns en officiell standardisering av Javascript; ECMAScript. ECMAScript 5 (ofta f\u00f6rkortat till ES5<\/strong>) kom ut f\u00f6r cirka 10 \u00e5r sedan och \u00e4r den Javascript-version de flesta av alla oss utvecklare k\u00e4nner till. Sedan har vi ECMAScript 6 (ofta f\u00f6rkortat till ES6<\/strong>) som kom ut 2015. Vissa h\u00e4nvisar till denna version som ES2015. Och slutligen finns det ESNext<\/strong>, som \u00e4r ett dynamiskt namn som t\u00e4cker den kommande versionen, som inneh\u00e5ller f\u00f6rslag som vi hoppas ska inkluderas i vilken n\u00e4sta standardiserade version av Javascript som helst.<\/p>\n Du kanske t\u00e4nker i stil med "s\u00e5 det \u00e4r bra och allt, nyare versioner av Javascript betyder bara fler funktioner. S\u00e5 jag anv\u00e4nder bara den senaste." Men det finns en mycket viktig sak du beh\u00f6ver veta om Javascript-versioner och det \u00e4r detta: De flesta webbl\u00e4sare idag kan bara f\u00f6rst\u00e5 ES5.<\/p>\n Det betyder att om du vill skriva Javascript i ES6 eller ESNext beh\u00f6ver du s\u00e4tta upp verktyg som omvandlar din kod till ES5 s\u00e5 att webbl\u00e4sare kan f\u00f6rst\u00e5 den. Men innan du b\u00f6rjar fundera p\u00e5 att hoppa \u00f6ver att l\u00e4ra dig ES6 och ESNext helt, kom ih\u00e5g att ES5 \u00e4r 10 \u00e5r gammal. Och det kommer att kr\u00e4va att du skriver mycket mer kod. Det blir ocks\u00e5 mycket mindre l\u00e4sbart och mer komplext \u00e4n om du skulle skriva det i ES6 eller ESNext.<\/p>\n Dessutom, f\u00f6r Gutenbergs koncept, vill du ocks\u00e5 anv\u00e4nda JSX<\/strong> \u2013 en syntax-extension till Javascript. JSX \u00e4r ocks\u00e5 ett spr\u00e5k som webbl\u00e4sare inte kan f\u00f6rst\u00e5 utan att omvandla det.<\/p>\n Om du fortfarande inte \u00e4r \u00f6vertygad om att ES6\/ESNext \u00e4r v\u00e4rt det extra steget f\u00f6r att transformera det, l\u00e5t mig visa dig en kodj\u00e4mf\u00f6relse. Med ES6 och JSX kan du skriva detta f\u00f6r att returnera ett enkelt stycke; med en klass och dynamisk utdata fr\u00e5n en variabel;<\/p>\n F\u00f6r er som \u00e4r nya p\u00e5 detta och tror att jag har gl\u00f6mt citat \u2013 nej, det har jag inte. Detta \u00e4r enkelheten med JSX. L\u00e5t oss j\u00e4mf\u00f6ra ovanst\u00e5ende med hur du skulle skriva med ES5 och WordPress Javascript-bibliotek:<\/p>\n All ovanst\u00e5ende kod kr\u00e4vs f\u00f6r att mata ut vad ES6 och JSX kan g\u00f6ra i en singularis mycket l\u00e4ttl\u00e4st rad! F\u00f6rest\u00e4ll dig att bygga ett mer komplext anv\u00e4ndargr\u00e4nssnitt med h\u00e4ndelser och villkor, n\u00e4r bara ett enkelt stycke kr\u00e4ver denna besv\u00e4rliga kodbit.<\/p>\n \u00d6vertygad? Bra!<\/p>\n Det vanligaste verktyget, och det som WordPress anv\u00e4nder, f\u00f6r att transformera ES6\/ESNext \u00e4r Babel<\/a>. Vanligtvis skulle du anv\u00e4nda Babel som ett plugin till Webpack<\/a>, som \u00e4r ett verktyg som paketerar och f\u00f6rminskar dina Javascript-filer. B\u00e5da verktygen anv\u00e4nder Node.js<\/a>, som ger dig n\u00e5gra verktyg f\u00f6r att k\u00f6ra skript f\u00f6r Webpack och Babel p\u00e5 kommandoraden. Om detta l\u00e5ter f\u00f6rvirrande har jag ett inl\u00e4gg som f\u00f6rklarar p\u00e5 djupet hur man st\u00e4ller in alla dessa verktyg f\u00f6r Gutenberg-<\/a> utveckling.<\/p>\n Det andra du beh\u00f6ver veta om teknik \u00e4r att Gutenberg \u00e4r baserat p\u00e5 ett abstraktionslager ovanp\u00e5 React JS<\/strong>. React JS<\/a> \u00e4r ett Javascript-bibliotek med \u00f6ppen k\u00e4llkod som underh\u00e5lls av Facebook och sl\u00e4pptes runt \u00e5r 2013. Eftersom React har funnits ett tag finns det massor av handledningar, guider och dokumentation f\u00f6r detta bibliotek. Reacts officiella sida har en bra, detaljerad handledning<\/a> f\u00f6r dig som \u00e4r ny p\u00e5 React. Du beh\u00f6ver definitivt inte vara expert p\u00e5 React f\u00f6r att utveckla f\u00f6r Gutenberg, men grunderna i hur det fungerar med komponenter och tillst\u00e5nd kommer att hj\u00e4lpa dig mycket att f\u00f6rst\u00e5 Gutenberg.<\/p>\n En av de st\u00f6rsta f\u00f6rdelarna med Gutenberg \u00e4r att g\u00e5 bort fr\u00e5n fast HTML i inl\u00e4ggsinneh\u00e5ll. WordPress, f\u00f6re Gutenberg, och de flesta webbaserade CMS lagrar artikelinneh\u00e5ll i ren HTML. Detta \u00e4r i allm\u00e4nhet inte ett problem med enkelt inneh\u00e5ll (titlar och stycken). Men kan vara ett st\u00f6rre problem med mer komplext och dynamiskt inneh\u00e5ll.<\/p>\n Alla CMS som till\u00e5ter dynamiskt inneh\u00e5ll i artikelinneh\u00e5ll kommer att st\u00f6ta p\u00e5 problem med hur man sparar detta som giltig HTML. Detta kan vara allt fr\u00e5n en bild som h\u00e4nvisar till dess ID i systemet ist\u00e4llet f\u00f6r den fullst\u00e4ndiga URL:en. Eller en widget som dynamiskt visar senaste inl\u00e4gg inom en given kategori. Normalt kommer detta att l\u00f6sas genom att mata ut anpassad kryptisk HTML som \u00e4r meningsl\u00f6st att matas ut normalt. Och l\u00e5t sedan CMS-parsern hantera att omvandla dessa HTML-bitar till n\u00e5got meningsfullt eller dynamiskt. Nackdelen med detta \u00e4r att om du \u00f6verf\u00f6r ditt inneh\u00e5ll till ett annat CMS s\u00e5 resulterar det ofta i ful HTML. Inneh\u00e5llet skulle fyllas med otolkad HTML som du manuellt m\u00e5ste rensa upp. Det h\u00e4r problemet \u00e4r vad Gutenberg vill l\u00f6sa.<\/p>\n Med Gutenberg har WordPress valt att spara ytterligare och dynamisk information som HTML-kommentarer. HTML-kommentarer \u00e4r aldrig synliga f\u00f6r anv\u00e4ndare p\u00e5 webbplatsen, och i princip allt \u00e4r till\u00e5tet inom kommentarsblocket. En HTML-kommentar b\u00f6rjar med Jag g\u00e5r inte in p\u00e5 detaljer om hur kommentarsblocken \u00e4r uppbyggda \u2013 du hittar en detaljerad guide<\/a> om detta i WordPress Editor Handbook. Men som ett exempel, ett enkelt stycke i Gutenberg-inl\u00e4ggsinneh\u00e5llet kommer att sparas i databasen som:<\/p>\n N\u00e4r det g\u00e4ller dynamiskt inneh\u00e5ll kommer vanligtvis ingen HTML att matas ut alls. All information WordPress beh\u00f6ver f\u00f6r att f\u00f6rst\u00e5 vad detta block g\u00f6r, finns i HTML-kommentarer. S\u00e5 h\u00e4r lagrar Gutenberg ett block med "Senaste inl\u00e4gg":<\/p>\n Eftersom allt \u00e4r en HTML-kommentar, kommer att \u00f6verf\u00f6ra dina inl\u00e4gg 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 \u00f6ver.<\/p>\n Som du s\u00e4kert har f\u00f6rst\u00e5tt nu \u00e4r att kommentarsblocken b\u00f6rjar med namnet p\u00e5 blocket, med prefixet ’ Anv\u00e4ndbart att veta:<\/strong> Du har ett par alternativ f\u00f6r hur du g\u00e5r tillv\u00e4ga f\u00f6r att anpassa dina teman eller plugins f\u00f6r Gutenberg. Nedan listas de vanligaste anpassningarna du f\u00f6rmodligen skulle g\u00f6ra som utvecklare.<\/p>\n WordPress Gutenberg kommer med ett stort paket blocktyper, och du kan ut\u00f6ka vilken som helst av dessa. Du kan ocks\u00e5 ta bort n\u00e5gra av dem, eller besluta f\u00f6r vissa fall att endast till\u00e5ta eller ta bort n\u00e5gra av dem.<\/p>\n Den vanligaste metoden f\u00f6r att ut\u00f6ka ett block \u00e4r att l\u00e4gga till anpassade blockstilar<\/a> \u2013 som \u00e4r stilvariationer av ett block. Blockstilar \u00e4r inte s\u00e5 vanliga i standard WordPress, men det finns n\u00e5gra. Ta en titt p\u00e5 Quote-blocket. I Gutenberg-editorn har du en ruta i sidof\u00e4ltet till h\u00f6ger som heter "Styles".<\/p>\n Ett annat s\u00e4tt att anpassa befintliga block \u00e4r att anv\u00e4nda filter. Du \u00e4r f\u00f6rmodligen bekant med filter som anv\u00e4nder PHP i WordPress, men med Gutenberg finns det nu Javascript-baserade filter p\u00e5 block<\/a>. Du kan till exempel l\u00e4gga till dina egna anpassade attribut (inst\u00e4llningar) till alla eller specifika typer av block eller filtrera hur de sparas eller matas ut.<\/p>\n Du kan ocks\u00e5 manipulera blockkategorierna, samt ta bort eller till\u00e5ta vissa block i vissa situationer. Eller s\u00e5 kan du till exempel se till att endast en handfull blocktyper \u00e4r till\u00e5tna f\u00f6r en anpassad posttyp.<\/p>\n Att skapa anpassade block \u00e4r kanske den f\u00f6rsta tanke som de flesta WordPress-utvecklare har. Standardblocken i WordPress kan r\u00e4cka l\u00e5ngt, men om du bygger ett mer komplext tema eller plugin har du f\u00f6rmodligen specifika behov. Till exempel att anv\u00e4nda Gutenberg f\u00f6r att skapa en snygg framsida med genv\u00e4gar till inneh\u00e5ll och dynamiskt inneh\u00e5ll. Det \u00e4r m\u00f6jligt att uppn\u00e5 de flesta anpassningar genom att anv\u00e4nda CSS-klassalternativet som finns f\u00f6r alla block. Men det h\u00e4r \u00e4r inte speciellt anv\u00e4ndarv\u00e4nligt.<\/p>\n Att skriva dina egna anpassade block \u00e4r f\u00f6rmodligen det sv\u00e5raste f\u00f6r att anpassa ditt tema eller plugin f\u00f6r Gutenberg. Men det kan ocks\u00e5 vara det mest givande! Du kommer inte bara att kunna skapa block som g\u00f6r och ser ut precis som du vill att de ska \u2013 utan det \u00e4r ocks\u00e5 ett utm\u00e4rkt s\u00e4tt att snabbt l\u00e4ra dig om den nya Javascript-baserade tekniken.<\/p>\n Om du \u00e4r en WordPress-temautvecklare b\u00f6r du vara medveten om att det finns en hel del inst\u00e4llningar som ditt tema kan beh\u00f6va f\u00f6r Gutenberg, s\u00e4rskilt i form av Som standard kommer WordPress att hantera de flesta styling av standardblocken sj\u00e4lv, s\u00e5 du ska inte beh\u00f6va oroa dig f\u00f6r mycket om att styla dessa i ditt tema. Men temautvecklare \u00e4r vanligtvis mer kr\u00e4sna om sin design och styling. S\u00e5 du kommer f\u00f6rmodligen att beh\u00f6va justera eller l\u00e4gga till blockstyling. Du kan l\u00e4gga till redigerarstilar endast i frontend, endast editor eller b\u00e5da. WordPress Gutenberg Handbook ger en \u00f6versikt \u00f6ver redigerarstilar<\/a> och standardblockstilar.<\/p>\nS\u00e5 varf\u00f6r bry sig om ES6, ESNext eller JSX?<\/h3>\n
return <p className=\"example\">Hello, my name is {name}<\/p>;<\/code><\/pre>\nreturn wp.element.createElement(\n 'p',\n { className: 'example' },\n 'Hello, my name is ' + name\n);<\/code><\/pre>\nTransformationsverktyg och React JS<\/h3>\n
![\"Grunderna](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-153969-61e5175b816e1.png\")
<\/a><\/p>\nF\u00f6r att avsluta:<\/h3>\n
\n
Det nya s\u00e4ttet att lagra inl\u00e4ggsinneh\u00e5ll och varf\u00f6r<\/h2>\n
<!--<\/code>och slutar med --><\/code>, 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.<\/p>\nDet nya s\u00e4ttet att inl\u00e4ggsinneh\u00e5ll lagras<\/h3>\n
<!-- wp:paragraph -->\n<p>Lorem ipsum dolor sit amet consectetur adipiscing elit.<\/p>\n<!-- \/wp:paragraph --><\/code><\/pre>\n<!-- wp:latest-posts {\"categories\":\"17\",\"displayPostContent\":true,\"excerptLength\":30,\"postLayout\":\"grid\"} \/--><\/code><\/pre>\nwp<\/code>’. Om det finns n\u00e5gra anpassade inst\u00e4llningar kommer de att matas ut efter namnet i JSON, som du kan se i exemplet med Senaste inl\u00e4gg-blocket. Gutenberg h\u00e4nvisar till dessa som attribut, och detta koncept \u00e4r n\u00e5got du kommer att bli mycket bekant med n\u00e4r du b\u00f6rjar l\u00e4ra dig att utvecklas f\u00f6r Gutenberg.<\/p>\n
\nOm du vill ha en djupare titt p\u00e5 hur det nya inl\u00e4ggets inneh\u00e5ll sparas kan du titta i din wp_posts<\/code>tabell i din databas. Det finns en annan enklare metod att titta p\u00e5 hela databasv\u00e4rdet, inifr\u00e5n WordPress-mallar. I din enda mall i slingan, anv\u00e4nd helt enkelt " echo get_the_content()<\/code>". Om du anv\u00e4nder den normala " the_content()<\/code>" kommer det analyserade inl\u00e4ggets inneh\u00e5ll att matas ut, men ett eko av inneh\u00e5llets v\u00e4rde kommer att mata ut exakt vad som \u00e4r lagrat i databasen. Du kan anv\u00e4nda Inspektera verktyg eller visa k\u00e4lla i Chrome eller Firefox f\u00f6r att se kommentarsblocken.<\/p>\nVad du som utvecklare kan g\u00f6ra i Gutenberg<\/h2>\n
Ut\u00f6ka och anpassa befintliga block<\/h3>\n
Skapa dina egna anpassade block<\/h3>\n
Se till att ditt tema \u00e4r Gutenberg-f\u00e4rdigt<\/h3>\n
add_theme_support()<\/code>. WordPress handbok har en bra \u00f6versikt<\/a> \u00f6ver alla temast\u00f6d du beh\u00f6ver t\u00e4nka p\u00e5 f\u00f6r att g\u00f6ra ditt tema Gutenberg-f\u00e4rdigt.<\/p>\n