LĂ€rande Gutenberg: Serie Inledning

0
16

Hej CSS-Bluffmakare! 👋 Vi har en speciell lĂ„ng-form-serien vi kickstartar hĂ€r helt dedikerad till Gutenberg, en stor förĂ€ndring till WordPress editor. Jag har bjudit in en dynamisk duo av författarna för att ge dig den hĂ€r serien, som kommer att ge dig upp till hastigheten pĂ„ vad Gutenberg Ă€r, vad det kan göra för din webbplats och hur du kan utveckla faktiskt för det.

Som det Àr för

Denna serie Àr mer för utvecklare som Àr nyfiken pÄ om denna nya vÀrld, och vill komma igÄng att arbeta med det. Denna serie Àr inte nödvÀndigtvis för webbplatsÀgare som vill veta hur det kommer att pÄverka deras webbplats eller som Àr orolig för att det av nÄgon anledning.

Det Ă€r klart att det finns en hel del möjlighet med Gutenberg. Ja, det syftar till att vara en bĂ€ttre redigering erfarenhet, men det Ă€r ocksĂ„ troligt att Ă€ndra hur mĂ€nniskor tĂ€nker om vad som Ă€r möjligt med WordPress. Med custom “block” som innehĂ„ll kommer att byggas med (oroa dig inte, vi kommer att fĂ„ in allt detta) det Ă€r nĂ€stan WordPress editor blir en dra-och-slĂ€pp-site builder.

Jag skulle rekommendera att lyssna pÄ detta avsnitt av ShopTalk för att höra mer om all denna potential.

Hur denna serie kom för att vara

Rolig historia egentligen. Det hÀnde bara sÄ att tvÄ författare som jag jobbar med regelbundet var bÄde sjÀlvstÀndigt skapa lÄnga serien om exakt det Àmne vid exakt samma tidpunkt. SkÀms pÄ mig, eftersom jag inte sÀtta 2 och 2 tillsammans tills bÄda av dem hade gjort stora framsteg. Det skulle ha varit alltför konstigt att slÀppa bÄde serien sjÀlvstÀndigt, sÄ istÀllet fick vi alla tillsammans och arbetade fram ett sÀtt att kombinera och bearbeta serien och göra en enda serie som Àr det bÀsta av bÄda.

HÀr Àr vi med!

FörutsÀttningar

Du kommer förmodligen att göra det bÀsta med den hÀr serien med dessa fÀrdigheter:

  • WordPress utveckling begrepp som Ă„tgĂ€rder, filter och mall taggar
  • GrundlĂ€ggande (inte djup) kunskaper om JavaScript t ex förstĂ„ skillnaden mellan ett objekt och en array och vad callback-funktioner.
  • AnvĂ€nda kommandoraden för att navigera kataloger och köra bygga uppgifter

Om du har skrivit din egen npm moduler, kÀnner mig helt bekvÀm att skriva begÄ meddelanden i Vim, eller om du Àr en gammal hatt pÄ Reagera, dÄ denna serie kan gÄ lite lÄngsamt för dig.

TrÀffa dina lÀrare

FrÄn och med nu, jag passerar den hÀr serien över till författare och din Gutenberg lÀrare: Lara Schenck och Andy Bell.

En bit frÄn Lara

Hej! Tillbaka i 2015, Matt Mullenweg, co-creator av WordPress, instruerade ett rum fullt av över tusen WordPress utvecklare, företagare, slutanvĂ€ndare, designers, och vem vet hur mĂ„nga fler live-stream och efter-de-fakta-tittare för att “lĂ€ra sig JavaScript djupt.”

Jag var i rummet, och jag minns att jag tÀnkte:

Kan jag göra det! Jag Ă€r inte sĂ€ker pĂ„ varför, jQuery har passat mig alldeles utmĂ€rkt och jag gillar verkligen CSS bĂ€st, men det Ă€r okej, Matt, jag ska lĂ€gga det pĂ„ min lista över saker att göra…
—Mig, 2015

Saken Ă€r den, att det Ă€r fullt möjligt att bygga ganska hĂ€ftigt och robust WordPress teman utan att röra ett byte av JavaScript. Onödigt att sĂ€ga att jag inte komma runt att lĂ€ra sig JavaScript djupt för ett bra och ett halvt Ă„r, sĂ„ nu spelar jag komma ikapp… och jag Ă€r sĂ€ker pĂ„ att jag inte Ă€r den enda WordPress-utvecklare i denna bĂ„t.

Tillbaka till nuet. Inte bara har det fortsatt att ta över webben pĂ„ ett mycket bra sĂ€tt, JavaScript—i alla att det Ă€r medföljande, destructured, spread-operatör-ed Ă€ra—det har gjort sin vĂ€g in i det inre arbetet i WordPress genom redaktören förnya heter Gutenberg.

Om du lÀser detta, jag antar att du har Ätminstone hört talas om Gutenberg, men om inte, hÀr Àr en genomgÄng av Chris frÄn ett par mÄnader tillbaka, som ska hjÀlpa till att orientera dig. Jag Àr ocksÄ förutsatt att du kÀnna dig som en blandning av okunnighet, intriger, spÀnning och panik nÀr man tÀnker pÄ Gutenberg och vad det innebÀr för WordPress, ergo ~30% av webbplatser. Jag Àr hÀr för att berÀtta att skrota panik och hÄlla spÀnning och intriger eftersom detta Àr mycket spÀnnande för bÄde oss utvecklare och WordPress i sig.

Jag förutspÄr att under de kommande Ären, antagandet av Gutenberg kommer att orsaka WordPress för att vÀxa ur sin olyckliga rykte som en Àldre, osÀkra, utvecklare-ovÀnliga, blogga motor. Typexempel:

Jag tror att jag kommer att göra min personliga webbplats till en WordPress-sajt igen. NĂ€rmaste full cirkel efter 6 Ă„r 😊

— Rach Smith 🌈 (@rachsmithtweets) 20 februari 2018

Jag hoppar in hĂ€r ocksĂ„ och sĂ€ga att Gutenberg har dragit mig tillbaka till WordPress eftersom den stack som Ă€r mer vĂ€nlig mot mig, ett front-end-utvecklare. Innan, jag skulle fumla genom anpassningar, men nu ska jag mycket gĂ€rna rulla ut egna kvarter. För mig, Gutenberg Ă€r mer Ă€n en editor—det Ă€r en rörelse som gör att folk gillar mig riktigt upphetsad om framtiden för WordPress.

Lite ol’ WordPress Ă€r att fĂ„nga upp, och det Ă€r att föra med sig alla JavaScript godhet du skulle kunna förestĂ€lla dig: Gutenberg Ă€r en Reagera-driven SPA redigering erfarenhet redo att slĂ€ppas i WordPress Core senare i Ă„r, i version 5.0. Det kommer vĂ€nda WordPress ekosystem upp och ner och, förhoppningsvis, göra vĂ€g för en ny generation av teman och plugins som drivs av block—ett fenomen som andra content management system har anammat för lite tid.

Detta innebĂ€r tvĂ„ saker för utvecklare som jag sjĂ€lv som försummat att “lĂ€ra sig JavaScript djupt” tillbaka 2015:

  1. Det finns fortfarande tid.
  2. Vi har nu en mycket specifik, verkliga ramen för vÄrt lÀrande.

Detta Ă€r bra nyheter! Jag ska tala för mig sjĂ€lv, men jag tycker att det Ă€r mycket lĂ€ttare att lĂ€ra sig en teknik nĂ€r jag har ett sĂ€rskilt program för det. Med detta, jag inbjuder dig att följa med mig pĂ„ en resa för att “lĂ€ra Gutenberg djupt”, och i stĂ€llet för att, en solid bit av JavaScript och Reagera.

Detta Ă€mne i denna serie Ă€r inte original. WordPress samfundet har redan stigit till uppgift att skapa utmĂ€rkta resurser för att Gutenberg utveckling, och jag rekommenderar dig att lĂ€sa och titta pĂ„ sĂ„ mĂ„nga du kan! Medan denna serie omfattar en del av samma information, mĂ„let hĂ€r Ă€r att strukturera innehĂ„llet pĂ„ ett sĂ€tt dĂ€r du, lĂ€saren, mĂ„ste arbeta lite för att fĂ„ svar pÄ—ungefĂ€r som klass eller guidebok med frĂ„gor och lĂ€xor.

Ja, vi kommer att skapa ett block, men lÀngs vÀgen vi kommer att avvika frÄn det block-byggnad och lÀra sig om miljö-instÀllning, om Api: er, och övrig utveckling som begrepp och terminologi som tog mig ett bra tag att förstÄ. I slutet av dagen, och jag hoppas kunna hjÀlpa dig att kÀnna dig mer sÀker pÄ att experimentera med kod nÀr det inte Àr lufttÀt dokumentation eller massor av Stack Overflow inlÀgg att falla tillbaka pÄ.

En bit frÄn Andy

Den nya, kommande WordPress editor Ă€r att föra en uppsjö av möjligheter till innehĂ„ll producenter och utvecklare lika, men i och med att den ger ett helt nytt JavaScript drivs stacken för att lĂ€ra sig. För vissa, som orsakar lite orolig, sĂ„ jag tĂ€nkte att jag skulle engagera sig och försöka hjĂ€lpa. Vi ska dyka in i nĂ„gra centrala JavaScript begrepp och bygga ut en egen block som kommer att driva en klassisk design mönster—ett kort. Detta mönster ger oss mycket att tĂ€nka pĂ„, till exempel varierande innehĂ„ll och media.

Innan vi dyker in i den, vi kommer att titta pÄ den nya JavaScript-stack och de verktyg som den ger oss. Vi kommer Àven att ta en titt en Reagera komponent för att ge oss en primer av reaktiv, statligt drivna JavaScript och JSX.

Med all den kunskap och de verktyg som vi arbetat med, i slutet av denna handledning serie, vi kommer att ha en solid anpassade kort block. Detta kan ocksÄ fungera som en utgÄngspunkt för sÄ mÄnga andra typer av block för att upprÀtthÄlla webbplatsens innehÄll.

Innan vi grÀva i, lÄt oss fÄ vÄra maskiner stÀlla upp med rÀtt verktyg för att göra jobbet. Eftersom vi anvÀnder moderna JavaScript stack, det finns vissa webblÀsare som Ànnu inte stöd för sprÄket funktioner. PÄ grund av detta, vi kommer att anvÀnda nÄgra Nod JS-baserat verktyg för att kompilera denna kod till en mer cross-kompatibel form.

FÄ Node JS som körs

VÄra instÀllningar varierar vilt, sÄ jag kommer att peka dig till den officiella Node JS hemsida för detta, dÀr du kommer att hitta en praktisk installatörer. Det Àr en riktigt bra sida som förklarar hur du kan anvÀnda populÀra chefer paket ocksÄ, hÀr.

FÄ din terminal kör

Vi kommer att anvÀnda vÄra terminaler för att köra nÄgra kommandon senare i serien, sÄ fÄr din setup. Jag gillar iTerm, men det Àr bara för Mac, sÄ hÀr Àr nÄgra resurser för bÄde Mac-och Windows-anvÀndare:

  • Mac: Du kan anvĂ€nda standard-terminal som ligger pĂ„ Program > Terminal
  • Windows: Du kan antingen fĂ„ Linux delsystem igĂ„ng, anvĂ€nda kommandoraden eller fĂ„ program som Hyper

FÄ en lokal instans som körs i WordPress

Eftersom vi anvÀnder moderna JavaScript stack, Àr det viktigt att fÄ en instans av WordPress du kör lokalt pÄ din maskin. Om du inte har gjort det förut, kolla in den hÀr guiden. Jag rekommenderar starkt att du laddar ner nÄgot som MAMP, XAMP eller liknande om du Àr ny hÀr.

NÀr du har en lokal instans som körs, har ett tema som Àr redo att spela med sÄ vi kommer att dyka i lite av temat kod senare.

Modern JavaScript kan vara skrÀmmande om du inte arbetar med det dag till dag, sÄ tillsammans kommer vi att grÀva i vissa centrala delar av den moderna versionen av JavaScript: allmÀnt kÀnd som ES6.

Vi kommer sedan att ta denna kunskap och anvÀnda den för att bygga en Reagera komponent. Reagera Àr ett otroligt populÀrt ramverk, men Äterigen, det Àr ganska skrÀmmande, sÄ vi kommer att grÀva i tillsammans för att försöka minska det. Gutenberg JavaScript setup liknar mycket Reagera, sÄ det Àr ocksÄ en övning i att bekanta sig med komponentbaserad, reaktiv JavaScript-ramverk i allmÀnhet.

NÀr vi har tÀckt det, jag hoppas du kommer att kÀnna ganska hÀftigt, sÄ vi kommer att ta fart och dyka in i den ibland fruktade, webpack, som Àr ett verktyg som vi kommer att anvÀnda för att bearbeta vÄra JavaScript och smoosh det tillsammans. Vi kommer Àven att fÄ Babel kör, som kommer att magiskt förvandla vÄra ES6 kod i ett bÀttre stöd för ES5 kod.

Vid denna punkt, jag tror att du kommer att vara full av förtroende i denna stack, sĂ„ vi kommer att fastna i huvudrĂ€tt—vi kommer att bygga ut vĂ„ra egna kort block.

LĂ„ter det bra? HĂ€ftigt. LĂ„t oss dyka i!

Artikel-Serien:

  1. Serien Introduktion (Detta InlÀgg)
  2. Vad Ă€r Gutenberg, ÄndĂ„?
  3. En Primer med skapa-guten-block (Kommer Snart!)
  4. Modern JavaScript-Syntax (Kommer Snart!)
  5. Reagera 101 (Kommer Snart!)
  6. Att sÀtta upp en Egen webpack (Kommer Snart!)
  7. En Anpassad “Card” – Block (Kommer Snart!)