Det h\u00e4r \u00e4r en detaljerad handledningsserie som t\u00e4cker hur du skapar dina egna WordPress Gutenberg-block. Det \u00e4r f\u00f6r dig som \u00e4r tema- eller plugin-utvecklare och \u00e4r, precis som jag, frustrerad \u00f6ver bristen p\u00e5 dokumentation. Det mesta av det jag har l\u00e4rt mig n\u00e4r det g\u00e4ller att utveckla i den nya Javascript-v\u00e4rlden av WordPress \u00e4r genom f\u00f6rs\u00f6k och fel, kraftfullt experimenterande och genom att l\u00e4sa allt relaterat jag har kommit \u00f6ver. S\u00e5 jag t\u00e4nkte att jag kunde samla allt jag har l\u00e4rt mig hittills i en stor handledning.<\/p>\n
Genom 10 delar syftar denna handledning till att l\u00e4ra dig hur du skriver dina egna anpassade block. Oavsett vad de \u00e4r till f\u00f6r, b\u00f6rja med grunderna och arbeta fram till mer komplexa funktioner. Jag rekommenderar att du skriver ut allt sj\u00e4lv ist\u00e4llet f\u00f6r att kopiera+klistra in koden. Det \u00e4r det b\u00e4sta s\u00e4ttet att l\u00e4ra sig! F\u00f6lj serien fr\u00e5n steg 1 till 10 eftersom vi kommer att bygga ovanp\u00e5 blocket n\u00e4r vi g\u00e5r vidare.<\/p>\n
Innan vi kastar oss in i trappan; en ansvarsfriskrivning. Det finns n\u00e5gra saker du redan b\u00f6r veta i f\u00f6rv\u00e4g om vad den h\u00e4r serien \u00e4r och vad den inte \u00e4r.<\/p>\n
Du m\u00e5ste kunna Javascript \u2013 det \u00e4r givet. Du beh\u00f6ver inte vara expert, men det h\u00e4r \u00e4r inte en Javascript-handledning. N\u00e4r det g\u00e4ller ECMAScript Javascript-version; du kan skriva i ES5 och inte oroa dig f\u00f6r att kompilera din kod med Babel och s\u00e5nt. Denna serie \u00e4r dock skriven med ES6 och ESNext kod. Oroa dig inte \u2013 steg 1 \u00e4r till\u00e4gnat dig att s\u00e4tta upp en utvecklingsmilj\u00f6 redo att koda i ESNext med alla deras nya syntaxer.<\/p>\n
Som du s\u00e4kert vet \u00e4r Gutenberg baserad p\u00e5 React JS<\/a>. Den h\u00e4r serien \u00e4r inte heller en React-tutorial och f\u00f6ruts\u00e4tter grundl\u00e4ggande kunskap om React och hur det fungerar. \u00c5terigen, 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\u00f6r att l\u00e4ra dig React. S\u00e5 jag rekommenderar att du letar upp dessa f\u00f6rst.<\/p>\n Den h\u00e4r serien \u00e4r fokuserad p\u00e5 att l\u00e4ra sig Javascript-, React- och JSX-delarna och handlar inte om styling\/CSS. Eftersom m\u00e5let f\u00f6r ditt block kan vara drastiskt annorlunda har jag valt att inte fokusera p\u00e5 styling och endast tillhandah\u00e5llit mycket grundl\u00e4ggande HTML. Det \u00e4r upp till dig att l\u00e4gga till din stil och n\u00f6dv\u00e4ndig HTML-utdata f\u00f6r att f\u00e5 ditt block att rendera precis som du beh\u00f6ver det.<\/p>\n Och slutligen, t\u00e4nk p\u00e5 tiden d\u00e5 denna serie skrevs. Gutenberg \u00e4r fortfarande ganska ny men h\u00e5ller p\u00e5 att drastiskt f\u00f6r\u00e4ndras och f\u00f6rb\u00e4ttras.<\/p>\n Om du hittar detta inom en l\u00e5ng framtid kan en del kod f\u00f6r\u00e5ldras eller ers\u00e4ttas med b\u00e4ttre metoder. Den h\u00e4r guiden skrevs i och f\u00e4rdigst\u00e4lldes i WordPress version 5.2.3 (slutet av \u00e5r 2019).<\/p>\n I de f\u00f6rsta delarna fokuserar vi p\u00e5 grunderna. Vi s\u00e4tter upp en utvecklingsmilj\u00f6 med k\u00f6rande kompilering av v\u00e5r kod. Och grunderna i hur man registrerar ett block och de n\u00f6dv\u00e4ndiga PHP-delarna av det ocks\u00e5. Vi kommer att l\u00e4ra oss om det enorma biblioteket av komponenter och metoder som \u00e4r tillg\u00e4ngliga f\u00f6r oss fr\u00e5n WordPress Gutenberg.<\/p>\n N\u00e4r vi g\u00e5r vidare kommer vi att l\u00e4ra oss hur du l\u00e4gger till avsnitt och inst\u00e4llningar f\u00f6r v\u00e5rt block i editorns sidof\u00e4lt (Inspekt\u00f6r) samt anpassar verktygsf\u00e4ltet. L\u00e4ngs v\u00e4gen kommer vi att ber\u00f6ra m\u00e5nga olika ing\u00e5ngstyper och hur man anv\u00e4nder Gutenbergs komponent f\u00f6r dessa. Och naturligtvis kommer vi att l\u00e4ra oss hur man sparar, uppdaterar och matar ut den sparade informationen till v\u00e5rt block \u2013 och hur det fungerar bakom kulisserna.<\/p>\n I slutet kommer vi att titta p\u00e5 mer avancerade saker som dynamiska block och hur man anv\u00e4nder PHP f\u00f6r att rendera blockutdata. Och slutligen hur man g\u00f6r inl\u00e4ggsf\u00f6rfr\u00e5gningar inuti redigeraren \u2013 s\u00e5 att anv\u00e4ndaren kan v\u00e4lja ett inl\u00e4gg fr\u00e5n en lista f\u00f6r rendering.<\/p>\n Nedan hittar du direktl\u00e4nkar till varje del i serien.<\/p>\n Del 1: St\u00e4lla in utvecklingsmilj\u00f6n<\/a><\/strong> Del 2: Registrera ett block<\/a> Del 3: Rekvisita och WordPress-komponenter<\/a><\/strong> Del 4: Attribut<\/a><\/strong> Del 5: L\u00e4gga till Inspector Settings<\/a><\/strong> Del 6: L\u00e4gga till verktygsf\u00e4lt<\/a><\/strong> Del 7: Skapa dina egna komponenter<\/a><\/strong> Del 8: \u00d6vers\u00e4ttning av ditt block<\/a><\/strong>Den h\u00e4r handledningens \u00e5lder<\/h3>\n
Vad du kommer att l\u00e4ra dig<\/h2>\n
Inneh\u00e5llsf\u00f6rteckning<\/h3>\n
\n
\nI den f\u00f6rsta delen av denna handledningsserie om hur man skapar anpassade Gutenberg-block m\u00e5ste vi st\u00e4lla in v\u00e5r utvecklingsmilj\u00f6. Vi beh\u00f6ver en plats d\u00e4r vi kan skriva v\u00e5r kod i ES6\/ESNext-syntaxer och kompilera den n\u00e4r vi \u00e4r p\u00e5 spr\u00e5ng.<\/p>\n<\/li>\n
\nI den h\u00e4r delen kommer vi att skriva Javascript f\u00f6r att registrera och konfigurera v\u00e5rt anpassade block. I slutet kommer vi att registrera skriptet med PHP och g\u00f6ra den n\u00f6dv\u00e4ndiga PHP-koden f\u00f6r att WordPress ska k\u00e4nna igen det som ett nytt block.<\/p>\n<\/li>\n
\nI f\u00f6reg\u00e5ende steg l\u00e4rde vi oss hur man registrerar ett anpassat block, b\u00e5de i Javascript och i PHP. I det h\u00e4r steget kommer vi att l\u00e4ra oss hur man anv\u00e4nder WordPress komponenter f\u00f6r att l\u00e4gga till olika typer av f\u00e4lt och inst\u00e4llningar.<\/p>\n<\/li>\n
\nI den h\u00e4r delen ska vi titta p\u00e5 hur man definierar attribut, h\u00e4mtar deras v\u00e4rden och uppdaterar dem. Med attribut kan vi acceptera input fr\u00e5n editorn, spara den och mata ut den hur vi vill.<\/p>\n<\/li>\n
\nI det h\u00e4r steget kommer vi att fokusera p\u00e5 vad WordPress (\u00e5tminstone i kod) kallar Inspector \u2013 sidof\u00e4ltet till h\u00f6ger i editorn. Vi kommer att ber\u00f6ra n\u00e5gra nya komponenter som \u00e4r vettiga att placera i sidof\u00e4ltet och hur man hanterar dessa.<\/p>\n<\/li>\n
\nI det h\u00e4r inl\u00e4gget kommer vi att l\u00e4ra oss hur du l\u00e4gger till WordPress verktygsf\u00e4lt i v\u00e5rt block, dvs f\u00f6r justering och blockjustering. Vi kommer ocks\u00e5 att l\u00e4ra oss att l\u00e4gga till v\u00e5ra egna verktygsf\u00e4lt med v\u00e5ra egna knappar f\u00f6r att g\u00f6ra anpassade \u00e5tg\u00e4rder.<\/p>\n<\/li>\n
\nHittills i den h\u00e4r tutorialserien har vi skrivit all kod iregisterBlockType()<\/code>funktionenedit<\/code>. Det \u00e4r fullt m\u00f6jligt och rekommenderas ofta att ist\u00e4llet tilldela redigering till en separat komponent. Genom att g\u00f6ra det kan vi anv\u00e4nda funktionalitet som komponenttillst\u00e5nd och livscykelmetoder.<\/p>\n<\/li>\n
\nI den h\u00e4r delen kommer vi att fokusera p\u00e5 hur man \u00f6vers\u00e4tter texterna och v\u00e4rderingarna i v\u00e5rt block. Vi anv\u00e4nder WP-CLI f\u00f6r att generera n\u00f6dv\u00e4ndiga filer s\u00e5 att Gutenberg kan ladda v\u00e5ra \u00f6vers\u00e4ttningar n\u00e4r du byter WordPress-spr\u00e5k.<\/p>\n<\/li>\n