Share
Den nye WordPress-redaktøren (kodenavnet Gutenberg) er på grunn av utgivelse i versjon 5.0. Nå er det den perfekte tiden for å få tak i det før det lander i WordPress-kjerne.
Jeg viser deg hvordan du arbeider med blokk-API og lager dine egne innholdsblokker som du kan bruke til å bygge ut innlegg og sider.
Det er ikke en eksakt dato ennå for når WordPress 5.0 vil bli utgitt, men det bør være litt tid i løpet av de neste månedene. Inntil da er Gutenberg tilgjengelig som et frittstående plugin.
Jeg anbefaler på det sterkeste å prøve ut den nye Gutenberg-editoren hvis du ikke allerede har det. Det er veldig enkelt å installere direkte fra WordPress admin. Men fordi dette fortsatt er en betaversjon av den nye redaktøren, anbefales det ikke at du bruker det på produksjonssteder ennå. Hold det bare for lokale utviklingssteder for nå.
Også å ha Gutenberg installert er nøkkelen hvis du vil følge med denne opplæringen. På den måten kan du eksperimentere med å lage dine egne tilpassede blokker. Utviklingen av den nye redaktøren har raskt økt tempoet de siste månedene, med flere utgivelser allerede så langt i 2018. Den nyeste versjonen av Gutenberg er for tiden 2,7,0 ved skrivingstidspunktet.
Med hver utgivelse blir nye funksjoner lagt til, og redigeringsgrensesnittet blir stadig forbedret basert på tilbakemeldinger fra brukerne. Det begynner å se og føles mye slicker enn tidligere versjoner. Også mange feil har blitt løst, noe som gjør redaktøren mye mer robust.
Gutenberg gir en ny måte å bygge innlegg på innhold ved hjelp av "blokker", som kan stables oppå hverandre for å danne en komplett side. Hver enkelt blokk eksisterer uavhengig av andre blokker og kan inneholde nesten hvilken som helst oppslag, stiler og JavaScript du vil ha.
Gjennom hele denne opplæringen vil vi dekke alt du trenger å vite om blokk-API, slik at du kan begynne å lage dine egne tilpassede blokker med en gang. Når du har mestret grunnleggende, er det enklere å lage mer komplekse blokker enn du kanskje tror!
Gutenberg-prosjektet er store nyheter for WordPress for en annen viktig grunn. Den er bygget på toppen av React. Det er riktig, for første gang i WordPress, vil React bli inkludert i kjernen! Dette er gode nyheter for tema og plugin-utviklere som React kan enkelt legges til på en side ved å utnytte React and ReactDOM-bibliotekene som følger med WordPress-kjerne.
Ganske snart vil du kunne lage UI-komponenter for alle dine WordPress-prosjekter direkte i React. Tidligere, hvis du ønsket å bruke React and ReactDOM-biblioteker, måtte du inkludere dem manuelt. Å ha dem i kjernen gjør det mye mer praktisk.
Bare tenk på hvor fantastisk det ville være å lage en plugin-alternativer skjerm helt i React! Eller hva med noen kule avanserte tilpasser kontroller? Disse nye verktøyene skal gi utviklere mye frihet og fleksibilitet for å skape noen flotte interaktive brukergrensesnitt.
Jeg forventer at WordPress-utviklingen de neste par årene vil bli veldig interessant og mye moro også!
Konseptet med blokker i den nye editoren er en ekte skiftendring fra den nåværende TinyMCE-baserte editoren, så la oss se nærmere på hva en blokk er før vi dykker inn i blokk-API. Tenk på blokker som svarte bokser, som hver inneholder en haug med markering, stiler og JavaScript alt pakket inn i en praktisk enhet kalt en "blokk".
Når en blokk legges til redaktøren, viser den en forhåndsvisning av hvordan det vil se ut på forenden. Nesten alle blokker har innstillinger for å tilpasse deres utseende og / eller oppførsel ytterligere.
Noen av blokkene som er tilgjengelige som standard i den nye editoren er:
Dette gir deg en ide om hva slags innhold du kan legge til redaktøren ved hjelp av blokker som følger med den nye editoren. Alle disse blokkertypene er nyttige, men ganske grunnleggende, så forvent at mange plugins skal begynne å vises med mye mer omfattende blokker for å legge til nesten hvilken type innhold du kan tenke på.
Du har kanskje allerede tenkt på noen innholdsblokker som du trenger for dine egne prosjekter. Hvis ingen av disse er tilgjengelige i Gutenberg, er de sannsynligvis gode kandidater for å lage din egen tilpassede blokk.
Jeg vil anbefale å prøve ut koden som presenteres i denne opplæringsserien, da det er den beste måten å lære å lage egne blokker ved hjelp av blokk-API. For all del må du lese gjennom opplæringen først for å få tak i hvordan blokk-API fungerer, men kom tilbake og prøv ut noen av koden selv og begynn å lage noen blokker!
Dette er en medium til avansert nivå opplæringsserie, så det antas at du ikke er ny for WordPress-utvikling. For å få mest mulig ut av denne serien, bør du ha minst et arbeidskunnskap om følgende:
Hvis du trenger å børste opp noen av disse emnene, kan det være lurt å gjøre det før du fortsetter. Jeg skal forklare konsepter mens vi går, men det er utenfor omfanget av opplæringen for å forklare hver liten detalj.
Det er vanlig å lage egendefinerte blokker i WordPress ved hjelp av JSX, men dette er på ingen måte nødvendig. Hvis du er vant til å utvikle React-komponenter i vanilla JavaScript, kan du også gjøre det i WordPress. Valget er helt ditt. Imidlertid vil det meste av blokkkoden du møter bli skrevet i JSX (inkludert denne opplæringen), så du vil finne det lettere å forstå konsepter hvis du bruker JSX også.
Gutenberg-prosjektet utvikler seg fortsatt veldig, så noen ting kan bli endret, selv når du leser denne opplæringen. Dette kan inkludere endringer i redigeringsgrensesnittet, nye kjernekomponenter osv.
Den nye editoren er imidlertid ganske stabil nå, og de nylig lagt til funksjonene som nestede blokker og dra / dråpeomregning er ganske spennende. Selv om noen av de mindre detaljene i hvordan du implementerer blokker kan endres, det viktige å huske er det overordnede konseptet med blokker og hvordan du kan bruke dem til å lage noen form for innhold.
Hvis du sitter fast, vil jeg anbefale å ta en titt på den offisielle Gutenberg-håndboken, som holdes oppdatert med de siste endringene. Se også Gutenberg-prosjektet på GitHub for å inspisere kildekoden og logge på eventuelle problemer du måtte komme over.
Dette vil bare bidra til at prosjektet blir sterkere, jo flere tester det. Dette er en annen god grunn til å begynne å utvikle blokker nå, før de er offisielt en del av WordPress!
For å følge med koden i denne opplæringen trenger du følgende:
Hvis du ikke allerede har et lokalt utviklingsmiljø satt opp, kan du bruke noe som Local by Flywheel eller DesktopServer, da de begge har gratis versjoner tilgjengelig og støtter flere operativsystemer.
Pass på at du kjører de nyeste versjonene av WordPress og Gutenberg plugin for å være sikker på at du bruker alle de nyeste funksjonene. Også, det er noen gode kode redaktører der ute, så hvis du ikke allerede har en installert, ta en titt på gratis redaktører som Visual Studio Code eller Atom, som skal være mer enn tilstrekkelig.
For å lage nye blokker enkelt, bruker vi en relativt ny verktøykasse som heter lag-guten-blokk. Det lar deg raskt spinne opp et nytt plugin som inneholder alt oppsett og startkode som kreves for å lage blokker. Det er også et nullkonfigurasjonsverktøy, slik at det fungerer rett ut av boksen på samme måte som create reagere-app verktøykasse for stillas ut nye React apps med minimal innsats. Så hvis du noen gang har brukt create reagere-app, du vet hva du kan forvente.
La oss ta en titt nå på hvordan vi kan bruke dette verktøyet til å lage Gutenberg-blokker. Åpne et terminalvindu inni din plugin-mappe (/ Wp-content / plugins /) for ditt lokale utviklingssted og skriv inn følgende:
npx create-guten-block min-custom-block cd min-custom-block npm start
(Merk: npm v5.2 + er nødvendig for å bruke NPX kommando.)
Etter noen få minutter vil en ny plugin bli opprettet inne i en navngitt mappe my-custom-blokk inneholder alle filene og verktøyene som trengs for å lage blokker ved hjelp av React! Ikke dårlig, eh?
Navnet på plugin-modulen i WordPress-administrasjonen vil være min tilpassede blokk - CGB Gutenberg Block Plugin. Gå videre og aktiver den.
Pluggen skaper en ny blokk som er tilgjengelig for oss å bruke i Gutenberg-editoren. For å teste vår nye blokk, naviger til innleggsreditoren og klikk på plassholderteksten som er merket Skriv din historie.
Deretter slår du på / nøkkel for å vise en popup-boks vi kan bruke til å søke alle tilgjengelige blokker.
Merk: Det finnes andre måter å søke etter en blokk på, men jeg liker å bruke / å vise søkeblokkvinduet ganske raskt og bekvemt. Men bruk den metoden du føler deg mest komfortabel med.
Når søkeboksen er åpen, begynner du å skrive my-custom-blokk og velg min tilpassede blokk - CGB-blokk. Dette vil vise vår egendefinerte blokk inne i redigeringsvinduet.
For øyeblikket er det bare en boilerplate blokk, som egentlig ikke gjør noe annet enn å vise plassholdertekst inne i en farget boks. Det fremhever imidlertid et interessant aspekt ved å lage blokker.
Klikk Se innlegg for å se hvordan innlegget vil se til besøkende på nettstedet.
Som du kan se, er både innholdet og stilene på den gjengitte blokken forskjellig på forsiden og bakenden. Dette gjelder også JavaScript-kode, som kan være forskjellig for frontenden også.
Årsaken til forskjellen i gjengivelse skyldes at når du lager blokker, er du pålagt å spesifikt deklarere separate frontend-og backend-gjengivelsesfunksjoner.
Det skyldes at mange blokker krever at flere brukergrensesnittelementer blir gjengitt i postredigeringsprogrammet for å hjelpe til med å konfigurere blokkinnstillinger. Da dette bare er relevant for innleggredigeren, er det helt overflødig når gjengivelsen av blokken på forsiden er gjort. Derfor spesifiserer du utdataene som må vises på forsiden i en separat gjengivelsesfunksjon.
Mens denne tilnærmingen er fornuftig og fungerer bra, gjør det problemer med kod duplisering. Hvis du ikke er forsiktig, kan du ende opp med mange dupliserte definisjoner av innhold.
Hvor det er mulig, er det en god ide å skille ut innhold som er felles for funksjonene for frontend og backend-endring for å redusere duplisering. Vi følger denne tilnærmingen gjennom hele denne opplæringsserien.
I denne opplæringen introduserte jeg konseptet om hva en blokk er, og hvorfor den nye Gutenberg-redaktøren kommer til å bli store nyheter når den sendes med WordPress 5.0. Det er en ekte skiftendring fra den nåværende TinyMCE-baserte redaktøren.
For å bidra til å lage blokker raskt, lag-guten-blokk er et veldig nyttig verktøy som lar deg lage et komplett plugin som inneholder en fungerende startblokk klar for tilpasning.
Vi avrundet ting ved å se hvordan du bruker vår tilpassede blokk i den nye innleggredigeren, og vi oppdaget at gjengivelse på forsiden og bakenden kan se veldig annerledes ut. I Gutenberg er du ikke pålagt å matche utdataene overhodet!
I del 2 kommer vi inn i detaljene i blokk-API og hvordan du kan utnytte den til å lage dine egne tilpassede blokker.
I mellomtiden, sjekk ut noen av våre andre innlegg om WordPress Gutenberg!
Accentsconagua