Læring Gutenberg: Serie Innledning

0
16

Hei CSS-Luringer! 👋 Har vi en spesiell lang-form-serien vi sparker av her helt dedikert til Gutenberg, en stor endring til WordPress redaktør. Jeg har invitert en dynamisk duo av forfatterne for å bringe deg denne serien, noe som vil gi deg opp til hastigheten på hva Gutenberg er, hva det kan gjøre for nettstedet ditt, og hvordan du kan faktisk utvikle seg til det.

Hvem dette er for

Denne serien er mer for utviklere som er nysgjerrig på om denne nye verden og ønsker å komme i gang å jobbe med det. Denne serien er ikke nødvendigvis for eiere som ønsker å vite hvordan det kommer til å påvirke deres nettsted eller som er bekymret for om det for noen grunn.

Det er klart det er mye mulighet med Gutenberg. Ja, det sikte på å være en bedre redigering erfaring, men det er også sannsynlig å forandre hvordan folk tenker på hva som er mulig med WordPress. Med tilpasset “blokker” som innhold vil bli bygget med (ikke bekymre deg, vil vi komme inn i alt dette) det er nesten WordPress redaktør blir en dra-og-slipp-site builder.

Jeg vil anbefale å lytte til denne episoden av ShopTalk å høre mer om alt dette potensialet.

Hvordan denne serien kom til å bli

Morsom historie egentlig. Det bare så skjedde det to forfattere jeg jobber med regelmessig var både selvstendig og skaper lange formen serien om akkurat dette temaet på nøyaktig samme tid. Skam på meg, fordi jeg ikke legg 2 og 2 sammen til begge av dem hadde gjort betydelig fremgang. Ville det vært så rart å slippe begge seriene uavhengig, så i stedet fikk vi oss sammen og jobbet ut en måte å kombinere og omarbeiding serien og gjøre en enkelt serie som er det beste av begge.

Vi er her og med det!

Forutsetninger

Du vil sannsynligvis gjøre best med denne serien med disse ferdighetene:

  • WordPress utvikling av konsepter for eksempel handlinger, filtre og mal koder
  • Grunnleggende (ikke dypt) kunnskap om JavaScript for eksempel å forstå forskjellen mellom et objekt og en matrise og hva callback-funksjoner.
  • Bruke kommandolinjen til å navigere i mapper og kjøre bygge oppgaver

Hvis du har skrevet din egen npm moduler, føler meg helt komfortabel skriftlig forplikte meldinger i Vim, eller du er en gammel lue på å Reagere, så denne serien kan gå litt sakte for deg.

Møte dine lærere

Fra her på ut, jeg passerer denne serien over til forfattere og Gutenberg lærere: Lara Schenck og Andy Bell.

En bit fra Lara

Hei! Tilbake i 2015, Matt Matt, co-skaperen av WordPress, instruert et rom fullt av over tusen WordPress utviklere, business eiere, brukere, designere, og hvem vet hvor mange flere live-stream-og etter-det-faktum seerne til å “lære JavaScript dypt.”

Jeg var i rommet, og jeg husker at jeg tenkte:

Jeg kan gjøre det! Jeg er ikke sikker på hvorfor, jQuery har passet meg helt fint, og jeg liker CSS den beste, men greit, Matt, jeg setter det på listen min over ting å gjøre…
—For meg, i 2015

Tingen er, det er fullt mulig å bygge ganske fantastisk og robust WordPress temaer uten å byte av JavaScript. Unødvendig å si, jeg fikk ikke rundt for å lære JavaScript dypt for et godt og et halvt år, så nå er jeg å spille fange opp… og jeg er sikker på at jeg ikke er den eneste WordPress-utvikler i den båten.

Tilbake til nåtiden. Ikke bare har det fortsatt å ta over nettet i en veldig stor måte, JavaScript—i alt er det samlet, destructured, spredt-operatør-ed ære—det har gjort sin vei inn i det indre arbeidet i WordPress ved hjelp av editor revolusjonere heter Gutenberg.

Hvis du leser dette, jeg er forutsatt at du har minst hørt av Gutenberg, men hvis ikke, her er en oversikt av Chris fra noen måneder tilbake som skulle hjelpe å orientere deg. Jeg er også forutsatt at du føler deg litt blanding av uvitenhet, intriger, spenning og panikk når du tenker på Gutenberg og hva det betyr for WordPress, ergo ~30% av nettsteder. Jeg er her for å fortelle deg om å kvitte seg med den panikk og holde spenning og intriger fordi dette er veldig spennende for både oss utviklere og WordPress i seg selv.

Jeg spår at i de kommende år, innføring av Gutenberg vil føre til WordPress skal vokse ut sin uheldig rykte som en arv, usikre, utvikler-uvennlige, blogging motor. Sak:

Jeg tror jeg skal gjøre min personlige nettside i en WordPress side igjen. Kommer full sirkel etter 6 år 😊

— Rach Smith 🌈 (@rachsmithtweets) februar 20, 2018

Jeg skal hoppe i her og si at Gutenberg har trukket meg tilbake til WordPress fordi bunken er mer vennlig mot meg, en front-end utvikler. Før, jeg ville rote gjennom tilpasninger, mens det nå vil jeg veldig gjerne rulle ut tilpassede blokker. For meg, Gutenberg er mer enn en editor—det er en bevegelse, og som gjør at folk som meg virkelig spent på fremtiden til WordPress.

Lille ol’ WordPress er å fange opp, og det bringer med seg alle JavaScript godhet du kan muligens forestille deg: Gutenberg er et Reagere-drevet SPA redigering erfaring klar til å bli lansert i WordPress Core senere dette året, versjon 5.0. Det vil snu WordPress økosystem opp ned og forhåpentligvis gjøre vei for en ny generasjon av temaer og plugins drevet av blokker—et fenomen annet innhold styringssystemer har omfavnet for noen tid.

Dette betyr to ting for utviklere som meg som unnlot å “lære JavaScript dypt” tilbake i 2015:

  1. Det er fremdeles tid.
  2. Vi har nå et veldig konkrete, virkelige kontekst for vår læring.

Dette er gode nyheter! Jeg skal snakke for meg selv, men jeg synes det er mye lettere å lære en teknologi når jeg har et bestemt bruksområde for det. Med dette, jeg inviterer deg til å bli med meg på en reise for å “lære Gutenberg dypt”, og i stedet for at en solid del av JavaScript og Reagere.

Dette emnet i denne serien er ikke original. WordPress samfunnet har allerede steget til oppgaven med å skape gode ressurser for Gutenberg utvikling, og jeg anbefaler deg å lese og se så mange du kan! Mens denne serien dekker noe av den samme informasjonen, målet her er å strukturere innhold på en måte hvor du, leseren, må jobbe litt for å få svar på—liksom som klasse eller guidebok med spørsmål og lekser.

Ja, vi vil lage en blokk, men underveis vil vi løse fra blokk-bygningen og lære om miljøet oppsett, om Api-er, og andre utvikling av begreper og terminologi som tok meg en god stund å forstå. På slutten av dagen, og jeg håper på å hjelpe deg å føle deg mer trygg på å eksperimentere med kode når det ikke er lufttett dokumentasjon eller massevis av stakkoverflyt innlegg for å falle tilbake på.

En bit fra Andy

Den nye, kommende WordPress redaktør bringer et vell av muligheter til innhold produsenter og utviklere er like, men med det, det gir en helt ny JavaScript-drevet stabelen å lære. For noen, som forårsaker en del bekymringer, så jeg trodde jeg ville bli med og prøve og hjelpe. Vi kommer til å dykke inn noen core JavaScript begreper og bygge ut en tilpasset blokk som vil drive en klassisk design mønster—et kort. Dette design mønster gir oss mye å tenke på, som for eksempel variabel innhold og media.

Før vi dykke inn i det, vi kommer til å se på den nye JavaScript stabelen, og verktøy som det gir oss. Vi også kommer til å ta en titt en Reagerer komponent for å gi oss en introduksjon av reaktiv, state-drevet JavaScript og JSX.

Med all den kunnskapen og de verktøyene som vi har jobbet med, på slutten av denne opplæringen serien, vil vi ha en solid tilpasset kort blokk. Dette kan også fungere som en baseline for så mange andre typer blokker for å vedlikeholde innhold på nettstedet.

Før vi grave i, la oss komme våre maskiner satt opp med de riktige verktøyene for å gjøre jobben. Fordi vi bruker moderne JavaScript stabelen, er det noen lesere som ennå ikke støtter språket har. På grunn av dette, vil vi bruke noen Node JS-basert verktøy for å kompilere denne koden inn i en mer kors-kompatible form.

Få Node JS kjører

Vårt oppsett variere vilt, så jeg kommer til å henvise deg til den offisielle Node JS nettstedet for dette, der finner du praktiske montører. Det er en veldig nyttig side som forklarer hvordan du kan bruke de populære pakken ledere også, her.

Få din kjører terminal

Vi kommer til å bruke våre terminaler til å kjøre noen kommandoer senere i serien, så får ditt oppsett. Jeg liker iTerm, men det er bare for Mac, slik at her er noen ressurser for både Mac og Windows-brukere:

  • Mac: Du kan bruke standard-terminal som er plassert i Programmer – > Terminal
  • Windows: Du kan enten få Linux-delsystem kjører, kan du bruke ledeteksten eller få programvare som Hyper

Få en lokal WordPress eksempel kjører

Fordi vi bruker moderne JavaScript stabelen, er det viktig å få en forekomst av WordPress kjører lokalt på din maskin. Hvis du ikke har gjort det før, sjekk ut denne guiden. Jeg anbefaler sterkt at du laster ned noe som MAMP, XAMP eller lignende hvis du er ny til dette.

Når du har en lokal eksempel å kjøre, har et tema klar til å spille med som vi skal dykke inn i en liten bit av tema-koden senere.

Moderne JavaScript kan være skremmende hvis du ikke jobber med det dag-til-dag, så sammen, vi kommer til å grave i noen kjerneelementer i den moderne versjonen av JavaScript: kjent ofte som ES6.

Vi så kommer til å ta denne kunnskapen og bruke den til å bygge en Reagerer komponent. Reagerer er et utrolig populært rammeverk, men igjen, det er ganske skremmende, så vi kommer til å grave i sammen for å prøve og redusere den. Den Gutenberg JavaScript oppsett veldig mye ligner Reagere, så det er også en øvelse i å bli kjent med komponent-basert, reaktiv JavaScript-rammeverk generelt.

Når vi har dekket det, jeg håper du kommer til å føle deg ganske fantastisk, så vi kommer til å ta fart og dykke inn i den noen ganger fryktede, webpack, som er et verktøy vi kommer til å bruke for å behandle våre JavaScript og smoosh det sammen. Vi også kommer til å få Babel kjører, som på magisk vis forvandle våre ES6-koden inn bedre-støttet ES5 kode.

På dette punktet, tror jeg du vil være full av selvtillit i denne bunken, så vi kommer til å få fast til hovedrett—vi vil bygge ut våre tilpassede kort blokk.

Høres det bra ut? Fantastisk. La oss dykke ned i!

Artikkel-Serien:

  1. – Serien Introduksjon (Dette Innlegget)
  2. Hva er Gutenberg, Likevel?
  3. En Primer med create-guten-blokk (Kommer Snart!)
  4. Moderne JavaScript Syntaks (Kommer Snart!)
  5. Reagerer 101 (Kommer Snart!)
  6. Sette opp en Tilpasset webpack (Kommer Snart!)
  7. En Tilpasset “Kort” Blokk (Kommer Snart!)