Læring Gutenberg: En Primer med create-guten-blokk

0
39

Velkommen tilbake! Vi har bare tatt en titt på hva Gutenberg er og hvordan den virker på admin-siden. Gutenberg er sikkert kommer til å ha en enorm innvirkning på WordPress verden. Hvis du er bare kommer her og aner ikke hva vi snakker om, jeg anbefaler minst skimming Del 1 for å sikre at du har riktig bakgrunn.

La oss lage en tilpasset blokk med litt hjelp fra et fantastisk verktøy kalt create-guten-blokk. Videre!

Artikkel-Serien:

  1. – Serien Introduksjon
  2. Hva er Gutenberg, Likevel?
  3. En Primer med create-guten-blokk (Dette Innlegget)
  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!)

Blokker bor i plugins

For å opprette en Gutenberg-blokk, oppretter du en WordPress plugin. Alt som påvirker *innhold*, som en Gutenberg-blokkere enkelte vil, trenger å være en plugin, slik at det forblir aktiv selv når du endrer tema. Noe som er svært tema-spesifikke eller bare påvirker hvordan nettstedet ditt ser ut, kan være en del av tema-filer eller functions.php filen i ditt tema. Les mer om dette skillet i vår artikkel om WordPress Funksjonalitet Plugins.

Når det er sagt, blokkene i temaer problemet er et hett tema. WordPress Tema Review Team er å diskutere om ikke å tillate blokker på temaer i det hele tatt som en del av temaer. Et innlegg, “Klar for Gutenberg”, på Tema Gjennomgang Lagets Gjøre siden stilte dette spørsmålet, og ble møtt med sterke meninger fra begge sider. Den generelle konsensus, imidlertid, er at blokkene er plugin territorium.

WordPress.org består av ulike lag, hver med sin egen hjemmeside på make.wordpress.org/team-name, kanal i WordPress Slakk, og et ukentlig møte. Hvis du er interessert i å bli involvert i WordPress eller nysgjerrig på hvordan det fungerer, jeg sterkt anbefaler at du blar gjennom en liste av lagene her, bli en Slakk kanal, og dukker inn i et ukentlig møte, for å se hvordan det hele skjer.

I en fjern fremtid, er det mulig at temaer vil bestå av *bare et stylesheet*, mens alle tilpasset funksjonalitet og innhold struktur kommer fra blokkene i plugins. Jeg er parafrasering ord Tammie Lister, Gutenbergs design føre, på denne episoden av Shoptalk Vis. Veldig mye verdt en lytt!

Ta et oppsett snarvei… for nå

Hva er holdt meg fra å stupe med hodet først inn i moderne JavaScript er dang konfigurasjon. Den transpiling, bunting, koden splitting, treet skalv… yeesh, jeg er opptatt! Jeg elsker å lære nye ting, men det er en grense for min tålmodighet og, tilsynelatende, konfigurere en bygge prosessen for en liten test prosjekt er min grense.

Det er denne følelsen som førte til utviklingen av et verktøy som heter å lage reagere-app, null-konfigurasjon bygge oppsett for, du gjettet det, skape Reagere apps. Det er strålende. Forutsatt at du har en fungerende node og npm installasjon, kan du kjøre en enkelt kommando, og du har et prosjekt du klar for å starte koding Reagere. Den transpiling, bunting, og treet skalv er satt opp for deg.

Men vent… kan vi bruke for å lage reagere-app for Gutenberg blokker? Nei, men de nevnte lag-guten-blokkere, som er utviklet og vakkert dokumentert av Ahmad Awais, betyr ganske mye det samme for oss! Det er hva vi skal bruke for vår blokk.

opprett-guten-blokken er ikke bare blokkere generere verktøy til rådighet! Du kan stillaset en blokk med WP-CLI, men jeg har valgt å ikke fordi den standard oppsett er for ES5 (for nå) og ikke gir oss det vi trenger for vår reise inn i moderne JavaScript. Det blir sagt, jeg fant det nyttig å grave gjennom ES5 gjennomføring av en blokk som en måte å forsterke de sentrale begrepene, så kanskje gi den en gå når du er ferdig her!

Ja, dette er en snarvei. Vi velger å unngå forståelse av de sentrale begrepene på en teknologi ved å bruke et verktøy. Vi er nødt til å lære disse begrepene en dag. Men for nå, jeg er helt fin å omgå denne konfigurasjonen trinn. Min filosofi om bruk av verktøy som dette: bruk dem, men gjøre det med forståelse for at det *antakelig* ikke vil spare deg for tid eller krefter i det lange løp.

Det er verdt å merke seg at, som å lage reagere-app, lag-guten-blokkere kan du npm løse ut din konfigurasjon. Dette betyr å utsette alle innstillingene verktøyet har skapt for oss, og gjør dem tilgjengelige for tilpasning. Vær imidlertid oppmerksom på at dette er irreversible, hvis du tar ut og deretter gjør en feil, er du på egen hånd for å fikse det! Som jeg sa, du må lære den en dag 🙂

Trinn 1: Installere create-guten-blokk

Vi vil først installere create-guten-blokk globalt, som så:

npm installere -g create-guten-blokk

I teorien burde dette fungere ikke noe problem, men det er ikke realistisk. opprett-guten-blokk krever et minimum av Node versjon 8 og npm 5.3, så hvis du ikke har oppdatert noen av dem for en stund, det er en mulig feil (og her er en mulig løsning).

Jeg har alltid starte ved å lime inn i konsollen feil i en søkemotor og fjerne linje tall og filnavnene for å holde min spørring generelt. I interesse av å forbedre denne opplæringen, men jeg er nysgjerrig på å høre om hva som gikk galt, så føl deg fri til å poste dine spørsmål i kommentarfeltet, så vel.

Trinn 2: Opprette at guten-blokk

Det er på tide! La oss gjøre det! Vet du hva? Jeg kommer ikke til å fortelle deg hvordan på grunn Ahmad dokumentasjonen er så bra, og det er ingen mening i å kopiere det.

Gå inn her og følg Ahmad er instruksjonene for å opprette at guten-blokkere i kommandolinjen.

Skal du se noe som dette når du kjører kommandoen create-guten-blokk test, der test er navnet på blokken min.

Trinn 3: Aktiver plugin

Gå til Plugins-skjermen, aktivere ditt nye blokker plugin — det bør bli kalt noe sånt som test-blokk — CGB Gutenberg Blokkere Plugin der “test-block” er det du som heter blokk når du oppretter det.

Trinn 4: det er det! La oss bruke vår tilpasset blokk!

Så enkelt! Nå går du til visningen for redigering av et innlegg eller en side, kan du finne blokk, og sett den inn.

Selv om jeg kalte min blokk “test”, søke “test” i blokken selector ga feil resultat som du kan se i gif ovenfor. Standard navnet på blokken er i stedet “CGB Block” — vi vil endre på dette veldig snart!

Tekst editor setup (valgfritt)

Jeg har funnet det svært nyttig å ha en bestemt tekst editor oppsett for å utvikle blokker. Jeg bruker Visual Studio Koden for min tekst editor, men jeg er sikker på at du kan finne ut noe lignende med hva editor er din preferanse.

Her er de viktigste ingrediensene:

  1. Enkel tilgang til kommandolinjen for å holde et øye på bygg-feil (det vil være å bygge feil)
  2. En kopi av Gutenberg-kilde fra GitHub for kode referanse (last ned eller klone den her)
  3. Lett tilgang til både din plugin directory og Gutenbergs kilden katalogen fra #2
Min VS Kode oppsett for Gutenberg utvikling. Legg merke til den integrert terminal og flere kilde kataloger på høyre side.

I VS-Koden, kan jeg oppnå dette ved å bruke følgende funksjoner:

  1. Integrert terminal — åpne med Kommando + ~ på Mac, eller fra meny bar med Utsikt > Integrert Terminal
  2. Et Arbeidsområde som inneholder mapper for både plugg og Gutenbergs kilde fra GitHub. Du kan gjøre dette ved å åpne plugin-katalogen i VS-Kode, og deretter velger du Fil > Legg til Mappe for å Arbeidsområdet og velge Gutenberg-mappen som du lastet ned fra GitHub-repo. Du kan deretter lagre Arbeidsområdet for å få lett tilgang til Fil – > Lagre-Arbeidsområdet Som (jeg ringte min “Blokker” i bildet ovenfor).

Denne delen er valgfrie, og du trenger ikke å bruke VS Kode. Det viktigste er å ha lett tilgang til kommandolinjen, din plugin er kilde, og Gutenberg-plugin kilde for referanse. Du kan helt referanse kilden på GitHub hvis du liker, men jeg liker å ha filene i samme miljø for side-by-side-sammenligning og enkelt søke med Finne I Mappen.

Vi bruker Gutenberg fra plugin depotet for den faktiske funksjonalitet, men som eksempel bare omfatter den kompilerte filer. Vi vil referere til kilde-filer, så vi trenger å bruke codebase direkte fra GitHub. Hvis du ønsker å få tilgang til oppdateringer før de er utgitt i programtillegget, kan du klone depotet. Det ville være helt mulig å bygge og arbeid fra GitHub versjon, men for enkelhets skyld, vi bruker plugin versjon i denne opplæringen.

Når du er klar til å gå, sørg for at du er cd vil i blokk er plugin-mappen og kjøre npm start. Du bør se en tilfredsstillende melding som indikerer at prosessen har startet:

Etter å ha kjørt npm starter i våre plugin-mappen, vi er offisielt “Ser for endringer…” (og vi trengte ikke å ta noen config! Bedragere…)

Jeg bruker Wes Bim er tema for Kobolt 2 i VS-Kode samt den samme tema for ZSH i min Terminal og iTerm. Dette gjør absolutt ingen forskjell i hvordan teknologien fungerer, men det gjør en forskjell, på et personlig nivå, for å tilpasse din arbeidsplass og gjør at det føles som din egen (eller Wes Bim’, i mitt tilfelle).

Hva som er hva

Nå som vi er i kode-modus, la oss ta en titt på filene vi skal jobbe med. Jeg vil låne denne fra lag-guten-blokk Viktig for referanse:

à── test-blokk
ã── plugin.php
ã── pakken.json
Ã── VIKTIG.md
|
ã── dist
| ã── blocks.build.js
| ã── blokker.redaktør.bygge.css
| à── blokker.stil.bygge.css
|
à── kilde
ã── blokk
| ã── block.js
| ã── redaktør.scss
| à── stil.scss
|
ã── blocks.js
ã── vanlig.scss
à── init.php

Ved anvendelsen av denne opplæringen, vi er bare opptatt av hva som er inni src-katalogen. Vi vil ikke røre noe i dist (de som er kompilert filer), plugin.php eller noen etternølerne som pakke.json -, pakke-lås.json, eller.eslintignore.

plugin.php offisielt varsler WordPress av plugin vår eksistens. Det krever src/init.php, som er hvor vi vil skrive noen PHP vi trenger for vår blokk(er). Generelt, er vi ikke til å skrive noe i plugin.php — ut av boksen, bare kode den inneholder er kommentarene for å registrere plugin våre.

La oss bore inn src:

à── kilde
ã── blokk
| ã── block.js
| ã── redaktør.scss
| à── stil.scss
|
ã── blocks.js
ã── vanlig.scss
à── init.php

Blokker-mappen inneholder filer for enkelt, enkelte blokk. Dette inkluderer:

  • block/block.js — Alle JavaScript for den enkelte blokk.
  • blokk/redaktør.scss — Sass delvis etter stiler som er spesifikk for visningen for redigering
  • blokk/stil.scss — Sass delvis etter stiler som er spesifikk for front-end vis, det vil si hva du ser når du viser din side/post.

Nå åpner opp for src/blocks.js:

Jeg tenker på src/blocks.js som en innholdsfortegnelse for blokker, lik den rollen som en indeks.scss eller viktigste.scss i en Sass prosjektet struktur. Hvis vi ønsket å inkludere to blokker i vår plugin — la oss si at dette var en suite av tilpassede blokker — vi kan, i teorien, duplisere blokkere mappe, endre navn på det, og legge til noe som dette for å src/blocks.js:

import ‘new-block/block.js’;>

Så, hva skaper-guten-blokkere har forberedt for oss bak kulissene ville vite for å inkludere våre nye blokken er block.js i main script-fil sammenfattet i dist (nå er et godt tidspunkt å ta en titt inn i dist, hvis du ikke allerede har gjort det).

Ikke så ille så langt, ikke sant? Vi fortsatt har egentlig ikke fått til noen JavaScript…

En utfordring!

Okay, nå er det tid for en utfordring! Åpne opp src/block/block.js og ta et par minutter på å lese gjennom forfatteren, Ahmad, gode kommentarer.

Så, se om du kan finne ut hvordan å*:

  1. Endre navn på blokken, som er, den som viser i blokk selector
  2. Endre ikonet for din blokk (❤ Dashicons)
  3. Endre teksten som vises på fronten dvs. når du “Se Innlegget”
  4. Endre teksten som vises på baksiden slutten dvs. visningen for redigering
  5. Gi front end vise en border-radius av 30px
  6. Gi redaktøren viser en gradient bakgrunn
  7. Gjøre teksten i første avsnitt tag redigerbare

* Du bør være i stand til å arbeide gjennom (nesten!) alle disse i ca 10 minutter. 😉

Hvordan var det?

Hvilke problemer har du kjøre inn? Fikk du lei av å oppfriske editor? Visste du ser “Denne blokken ser ut til å ha blitt endret eksternt” melding oftere enn du ønsker? Jeg er sikker gjorde, men slik er livet med ny teknologi er det mye å være ønsket i den utvikler erfaring, men dette er ikke en prioritet for laget i dag, og vil komme i senere stadier av Gutenbergs planlagt utvikling.

Viktigst av alt, gjorde du få #7?

Hvis du gjorde det, så bør du være å skrive denne opplæringen! Det var en gotcha. Jeg håper du følte i alle fall litt forvirret og nysgjerrig fordi det er slik vi lærer! Vi kommer til dette i Del 3.

Nå som vi har vårt lager, la oss grave dypere inn i dette begrepet på en blokk.

Skjelettet av en blokk

Her er block.js med kommentarer strippet ut — det vi kan kalle skjelettet av en statisk blokk:

// Nedstrippet versjon av src/block/block.js

// DEL 1: Import avhengigheter
import ‘./stil.scss’;
import ‘./redaktør.scss’;

// DEL 2: Oppsett av referanser til eksterne funksjoner
const { __ } = wp.i18n;
const { registerBlockType } = wp.blokker;

// DEL 3: Registrer blokk!
registerBlockType( ‘cgb/blokk-test’, {

// En del 3.1: Blokk-innstillinger
tittel: _ _ (“test – CGB Blokk’ ),
ikon: ‘skjold’,
kategori: ‘vanlige’,
søkeord: [
_ _ (“test — CGB Blokk’ ),
__( ‘CGB Eksempel’ ),
_ _ (“opprett-guten-blokk’ ),
],

// En DEL 3.2: Markering i editoren
edit: funksjon( props ) {
retur (
<div>vil Du se dette i editoren</div>
);
},

// En DEL 3.3: Markup lagret i databasen
lagre: function( props ) {
retur (
<div>Dette er lagret i databasen og tilbake med the_content();</div>
);
},
} );

La oss gjøre et side-by-side-sammenligning med en annen statisk blokk, “Separator” kvartal fra standard blokker inkludert i Gutenberg. Denne filen er plassert i gutenberg/blocks/library/separator/index.js. Hvis du har åpne mappen i enten VS-Kode eller Sublime, kan du bruke snarveien Kommando + Tilvalg + 2 på en Mac, eller Vis > Split Editor for å få filene side-ved-side.

Hvis du er følgende tekst editor oppsett skissert tidligere, bør du ha noe som dette:

I dette bilde, jeg kopiere/limt inn over nedstrippet versjon av blokken inn i en tom fil for å sammenligne det uten kommentarer. Det er valgfritt!

Hvilke likheter legger du merke til? Hvilke forskjeller? Åpne opp noen av de andre kvartal kataloger inne i gutenberg-master/bibliotek/ og ta en titt inn i deres filer, sammenligne dem til vår blokk skjelett. Bruke noen minutter på å lese koden og se om du kan finne noen mønstre.

Her er noen mønstre jeg lagt merke til:

  1. Det er krøllparentes i variabel-deklarasjoner og funksjon argumenter all over the place.
  2. Markup vises inne i retur uttalelser og inneholder ofte gjort opp tag-navn (du kan gjenkjenne disse som Reagerer komponenter).
  3. Alle blokkene ser ut til å ha en innstillinger-objekt som inneholder entires for tittel, icon , kategori osv. I biblioteket blokker, vises de i en eksport const innstillinger = … objekt, mens i vår plugin blokk, de er en del av et argument for registerBlockType.
  4. Alle blokker har funksjoner for å redigere og lagre som en del av innstillinger objekt.
    • Syntaksen for funksjonene som er litt annerledes enn vår blokk er editand lagre funksjoner:
      • rediger( { className } ) { … } i separator/index.js
      • edit: funksjon(props) { … } i vår block.js
    • Biblioteket blokker ut til å referere til egenskaper og i stedet for rekvisitter
  5. Alle blokkene i biblioteket inneholder en index.js. Noen inneholder en block.js eller andre filer som ser ut til å inneholde en definisjon for en klasse å forlenge en Komponent, f.eks. klasse LatestPostsBlock strekker seg Komponent { ….

Hva fant du? Føl deg fri til å bidra i kommentarfeltet (men ikke stoppe å lese her!).

En noe kort og relevant tangent

Du har sannsynligvis lagt merke til en uttalelse importere @wordpress/i18n i hver index.js og block.js filen i biblioteket, samt en referanse til wp.i18n i vår plugin block.js. i18n står for internasjonalisering akkurat som a11y står for tilgjengelighet. Internasjonalisering henviser til praksisen med å utvikle programmet til å enkelt oversettes til andre språk. Siden vi ønsker å forberede all statisk tekst i vår blokker for oversettelse, kan vi tilordne wp.i18n til et alias for __for kortfattethet, veldig mye som vi bruker $ som et alias for good ‘ol jQuery. Les mer om i18n for WordPress her

Det er også verdt å nevne hvor som wp i wp.i18n kommer fra og hvorfor det er referert til som @wordpress/i18n i Gutenberg-kilde. wp er et globalt objekt — global betydning en variabel tilgjengelig overalt — som inneholder alle WordPress’ offentlig tilgjengelig JavaScript API metoder. For å demonstrere dette, åpner opp konsollen mens du er på en side i WordPress admin. Type wp og trykk Enter. Skal du se noe sånt som dette:

Så, når som helst, vi referanse noe i at wp objekt, alt vi gjør er å få tilgang til enkelte funksjoner WordPress JavaScript API gir oss. @wordpress/i18n i Gutenberg kilde gjør det samme, men import av funksjoner fra en npm-modul snarere enn det globale objektet. Funksjonene i wp global har blitt bevisst utsatt for public API med WordPress kjernen utviklere for bruk i temaer og plugins.

Hvis du er noe som min indre kritiker, tenker du kanskje, “Uansett, Lara, jeg bryr meg ikke om disse detaljene. Bare fortell meg hvordan å lage en kul blokk med alle JavaScript-allerede!” Å som jeg ville svare:

Det er så mange bevegelige deler og nye begreper i dette miljøet som jeg har funnet, jo mer koden jeg tar for gitt, jo mer frustrerende og tidkrevende prosessen blir. Tilnærming hver linje av koden med nysgjerrighet! Hvis du ikke vet hva den gjør det, må en Finne i Mappen i Gutenberg-kilden og se om du kan finne en sti å følge. For meg, i hvert fall, dette har vært en mye morsommere måte å nærme ukjent kode enn å prøve å bygge noe på lykke og fromme med kopiere og lime inn.

Og med det, la oss bryte opp Del 2!

Lekser

Hva? Lekser? Pokker ja, det er det lekser! I Del 3, Andy 🍉 vil dykke inn i moderne JavaScript godbiter: Reagerer, JSX, og ES6 syntaks. Selv om vår serie er skrevet for de som er relativt nye for JavaScript, det er nyttig å lære koden og konsepter fra mange forskjellige vinkler og ressurser.

I et forsøk på å introdusere noen begreper tidlig, her er en oversikt over noen “Lekser” før Del 3:

1. Tilbringe litt tid (1-2 timer) på et Reagere opplæringen, eller til du kan forklar med dine egne ord:

  • Den render metoden i Reagerer
  • JSX og at de som har gjort opp tag-navn kartet til JavaScript-funksjoner
  • Hvorfor Reagerer bruker className i stedet for klasse

Anbefalt utstyr:

  • Jeg virkelig likte å Lære React.js av Eva Porcello på Lynda.com. Lynda er en betalt tjeneste, men du kan se gratis med en lånekort i noen byer (Los Angeles, sikkert).
  • Jeg anbefaler også denne artikkelen serien, Læring Reagere med å lage reagere-app av Brandon Richey
  • Det er mange, mange alternativer på Youtube!
  • Jeg har jobbet meg gjennom Brian Holt er Komplett Intro til å Reagere kurs på Frontend-Mestere (betalt), og det er veldig bra.
  • Jeg kan ikke gå uten å nevne Wes Bim er Reagere for Nybegynnere kurs(betalt) — jeg har ikke gjort det selv, men jeg har bare hørt gode ting, og han holder det oppdatert!

Jeg vil også anbefale å lese Reagere Staten fra Bakken Opp her på CSS-Triks, av Kingsley Silas, fordi det er spesielt dykk inn i staten i å Reagere. Hvis du er helt ny til å Reagere, vil dette være mye å fordøye, men jeg tror det er verdt å få det inn i hjernen din ASAP selv om det ikke gir mening helt ennå.

2. Forstå ES6 Destructuring og finne et par eksempler på det i både Gutenberg kilde og våre plugin (det vil ikke være vanskelig).

Anbefalt utstyr:

  • Blogginnlegg: En Død Enkel Intro til Destructuring Objekter ved Wes Bim
  • Video: Destructuring: Hva, Hvorfor og Hvordan på Morsomme Fun-Funksjonen (disse er A+ — se på dette om pilen for funksjonene mens du er på det)

3. Være komfortabel med betinget eller trefoldig operatører.

I en setning, trefoldig operatører er en forkortelse for if…else-setninger. Vil du se alle disse over Gutenberg kilde — finne noen enkle eksempler som kan gi et tilbakefall for en string verdi, så vel som mer robust bruker som i blocks/library/paragraph/index.js for eksempel.

Anbefalt utstyr:

  • MDN-artikkel som er veldig bra.
  • Også se på de ikke-operatør — her er en Stack Overflow innlegg om det.
  • For ikke å komme for langt ned kaninhullet denne, men hvis du er ekstra ambisiøse, gjøre noen undersøkelser om type tvang i JavaScript. Denne artikkelen på FreeCodeCamp og dette kapitlet fra Du Vet ikke JS av Kyle Simpson er solid utgangspunkt.

Greit! Takk så mye for å lese, og se deg i Del 3 for å Reagere, JSX, og andre godsaker.

Kommentarer

Var det noen del av denne opplæringen, som ikke gir mening? Fikk du mistet noe sted? Vi ønsker å holde noe som gjør dette bedre, så vennligst la oss få vite det hvis noen del av denne var vanskelig å følge, eller hvis noen opplysninger er feil eller utdatert.

Tusen takk, igjen, og lykke til!

Artikkel-Serien:

  1. – Serien Introduksjon
  2. Hva er Gutenberg, Likevel?
  3. En Primer med create-guten-blokk (Dette Innlegget)
  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!)