Share
Gutenberg er den nye WordPress-redaktøren, og alle snakker om det. Den har introdusert en helt ny måte å skrive innhold på med WordPress. Så ikke bare kan utviklere ha fordel av sin blokkmodellerte layout, men sluttbrukerne vil også kunne lage dynamiske sidelayouter med den.
Men å bygge tilpassede blokker med Gutenberg kan være ganske trøbbel for utviklere som ønsker å integrere det i sine prosjekter. Denne opplæringen skal inneholde en utrolig verktøykasse-lag-guten-blokk-gjennom hvilken du kan lage Gutenberg-blokker om noen minutter.
Så, la oss komme i gang!
Accentsconagua
lag-guten-blokklag-guten-blokk (CGB) er en nullkonfigurator utvikler verktøykasse for å bygge WordPress Gutenberg blokker. Bygget av Ahmad Awais-min mann og en åpen kildekode-utvikler fortaler som regelmessig bidrar til WordPress Core-verktøyet har redusert vanskeligheten med å skape Gutenberg-blokker. Det er null-config, og det skaper blokker uten låsing og bare en enkelt avhengighet.
For å bygge en Gutenberg-blokk må du først opprette et WordPress-plugin. For å gjøre det, begynner du med å konfigurere Webpack, React, ES 6/7/8 / Next, ESLint, Babel, etc., og så kan du endelig begynne å kode din blokk. Og du må fortsette å oppdatere verktøykonfigurasjonene dine som de som støtter pakker og biblioteker.
Dette reduserer utviklingen, så Ahmad har skjult all denne konfigurasjonen i en optimalisert pakke som heter CGB-skript, som du finner i blokkens rotmappe. Dette er den eneste avhengigheten som jeg nevnte tidligere.
Så, i stedet for å oppdatere alt separat og regelmessig, CGB-skript Pakken holdes oppdatert, og på denne måten kan du alltid oppdatere den uten å gjøre endringer i koden din. Det er en ting som jeg likte mest om det.
Lang historie kort…
lag-guten-blokk er en utvikler går til null-config. verktøykasse for å bygge WordPress Gutenberg blokker om noen minutter uten å konfigurere Webpack, React, Modern JavaScript, ESLint, Babel, etc. - prosjekt GitHub nettsted La oss nå grave inn i noen av verktøyets mest fremtredende funksjoner.
lag-guten-blokk tilbyr et oppdatert dev miljø for å utvikle et WordPress Gutenberg plugin. Den er fullpakket med funksjoner som:
Vedlikehold og oppdatering av alle de ovennevnte verktøyene håndteres av en enkelt byggeavhengighet: CGB-skript pakke. Så, til tross for bruk av Webpack, Babel, ESLint og andre fantastiske prosjekter, kan du fortsatt ha en problemfri utviklingserfaring med denne pakken, som vil holde seg oppdatert hele tiden.
Mens du bruker lag-guten-blokk verktøykasse, du trenger ikke å konfigurere noe. De fleste av tingene du trenger for utviklings- og produksjonsmiljøet, blir forhåndskonfigurerte.
En bekymring som utviklere kan ha før de begynner å bruke CGB verktøykasse er hva du skal gjøre hvis et prosjekt trenger litt tilpasning, siden disse verktøyene er forhåndskonfigurert for å fungere på en bestemt måte. Så den gode nyheten er at du når som helst kan "eject" prosjektet og tilpasse det - men da må du opprettholde konfigurasjonen selv.
For å skille ut prosjektet ditt, kjør en enkelt kommando, og all konfigurasjon og byggeavhengighet vil bli flyttet direkte inn i prosjektet ditt, og du kan starte nøyaktig hvor du dro.
Komme i gang og jobbe med lag-guten-blokk verktøykasse er veldig enkelt. Bare installer det og kjør deretter for å lage en Gutenberg-blokk plugin for WordPress. Men før det er det noen forutsetninger som må settes opp. Så sørg for at du har følgende:
Følg deretter disse enkle trinnene:
Du må ha node.js og NPM installert. Hvis de allerede er installert, hopper du til neste trinn. Ellers, last ned Node.js og installer den. For å bekrefte installasjonen, skriv inn følgende kommandoer.
node -v # Resultater i v9.1.0 - pass på at du har Node> = 8 installert. npm -v # Resultater i 5.6.0 - pass på at du har npm> = 5.3 installert.
lag-guten-blokk Nå skal du installere lag-guten-blokk inne i din lokale WordPress /wp.local/wp-content/plugins/ katalogen. Du vil også gi et navn til pluginet du vil opprette. Kjør følgende kommando og vent litt, siden det kan ta noen minutter å installere.
npx create-guten-block demo-blokk
Denne kommandoen oppretter en plugin-katalog som heter demo-blokk inne i den nåværende mappen. Det skaper også den nødvendige mappestrukturen og installerer dev-avhengighetene.
Det oppretter en mappestruktur som denne:
/local.dv/wp-content/plugins/demo-block ├── plugin.php ├── package.json ├── README.md | ├── dist | ├── blocks.build.js | ├─ - blocks.editor.build.css | └─ - blocks.style.build.css | └── src ├── block | ├── block.js | ├── editor.scss | └── style.scss | ├── blocks.js ├── common.scss └── init.php
Når du har fullført installasjonsoppsettet, åpner du prosjektmappen og kjører startskriptet ved å skrive følgende kommando:
cd demo-blokk npm start
De npm start Kommandoen kjører pluginet ditt i utviklingsmodus. Det er også en npm kjøre bygge kommando som hjelper deg å kjøre pluginet i produksjonsmodus. Les videre for å finne detaljer om tre forskjellige funksjoner som du kan utføre med CGB verktøykasse.
lag-guten-blokk Når du jobber med dette skriptet, jobber du med tre skript som vil hjelpe deg utvikle, bygge, og støte din plugin.
npm start ManusDenne kommandoen brukes til å kompilere og kjøre Gutenberg-blokken mens du arbeider i utviklingsmodus. Det også klokker for eventuelle endringer og rapporter tilbake med feil i koden din.
npm kjøre bygge ManusFor å arbeide i produksjonsmodus, kjør denne kommandoen inne i dist mappe. Her ser du meldinger, feil og lintvarsler i konsollen. Denne kommandoen kjøres bare én gang og rapporterer tilbake gzip filstørrelser av den produserte koden.
npm løp eject ManusHvis du vil kaste ut pluginet ditt på et hvilket som helst tidspunkt lag-guten-blokk, Kjør denne kommandoen. Dette lar deg tilpasse prosjektet i henhold til dine krav. Det er imidlertid en enveis-prosess og kan ikke tilbakestilles.
Etter at du har støteed, du må oppdatere og vedlikeholde alle prosjektets avhengigheter alene.
lag-guten-blokk Etter vellykket installasjon og oppsett kan du åpne WordPress dashbordet og gå til plugins seksjon. Her kan du finne en ny plugin som heter demo-blokk - CGB Gutenberg Block Plugin blir lagt til. Klikk på Aktiver knappen og du er god å gå.
Gå nå til Innlegg> Legg til nytt for å åpne Gutenberg-redaktøren. (Husk at Gutenberg plugin er en forutsetning for lag-guten-blokk Toolkit).
Klikk på + ikonet for å få tilgang til alle blokkene. Skriv inn i søkefeltet CGB og du finner en Gutenberg-blokk blir lagt til.
Klikk på den og legg til en Gutenberg-blokk i WordPress-editoren slik:
Slå den publisere knappen for å se hvordan den vises på forsiden.
Overrasket? Jeg var, da jeg innså at Ahmad har stylet Gutenberg-blokkene annerledes for front-end og back-end. Dette kan bekreftes ytterligere ved å åpne src mappe av din demo-blokk plugin i kodeditoren.
Her finner du to separate filer: editor.scss som håndterer CSS for back-end, og style.css (editor.css er enqueued etter style.scss, som gjør det høyere i prioritet). Begge disse filene er inkludert i hovedfilen block.js fil via importere kommando.
I motsetning til andre startpakker og kjeleplater, er det mange kjennetegn som lag-guten-blokk tok tilbud, og for å oppsummere, her er et kort sammendrag av sine hovedtrekk:
CGB-skript avhengighet lag-guten-blokk er MIT lisensiert og tilgjengelig gratis på GitHub.
