Læring Gutenberg: Bygge Våre Egne Kort Blokk

0
40

Vi har fått noen knowledge base, vi har spilt med noen Reagere, og nå har vi fått vårt prosjekt verktøy satt opp. La oss dykke inn i bygningen vår tilpasset blokk.

Artikkel-Serien:

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

Hva bygger vi

Vi kommer til å bygge en tilpasset kort blokk som har et bilde, en tittel og en beskrivelse. Det er en veldig vanlige design mønster i nettet, og det også la oss se på noen core Gutenberg-komponenter, sammen med sentrale WordPress elementer, som for eksempel Media Biblioteket. Vi vil også spille med noen vise logikk med JSX for front-end markup.

Vår strålende tilpasset kort blokk!

Vår strålende tilpasset kort blokk!

Vi kommer til å fokusere utelukkende på CMS-aspekt av denne blokken i denne opplæringen. Hva den gjør er noen fine, rene markering på front-end om. Du kan utvide denne blokken har front-end stiler også, hvis du ville.

Komme i gang

Det første vi skal gjøre er å åpne opp block.js fil som vi opprettet i den forrige delen. I den aktive plugin-mappen, dette ligger på blocks/src/block/block.js.

Hvis du arbeider fra fil-struktur som er laget med lag-guten-blokkere, kan du starte ved å slette alt i block.js og skrive koden din fra bunnen av sammen med opplæringen.

Rett på toppen av denne filen, legge til følgende:

const { registerBlockType, RichText, MediaUpload, ren tekst } = wp.blokker;
const { Knappen } = wp.komponenter;

Vi dekket destructuring oppgaver i Del 3. Dette er et flott eksempel på dem, som du vil se en masse i Gutenberg-koden. Her, wp.komponenter har mer enn en Knapp, men det er alt vi vil, så det er alt vi får. Det er et ryddig, fordi det hindrer oss fra å måtte skrive ting som wp.komponenter.Knappen, som vil være stor for å holde våre etiske fin og lys.

Vi har fått det ryddet opp, så la oss importere våre Sass-filer. Dette er slik at webpack oppdager dem.

import ‘./stil.scss’;
import ‘./redaktør.scss’;

Nå la oss starte med å skrive komponent som driver vår blokk. Rett under disse linjene, legge til følgende:

registerBlockType(‘kort-blokk/main’, {
tittel: “Kort”,
ikon: ‘hjertet’,
kategori: ‘vanlige’
});

Denne koden forteller Gutenberg, “Hei, jeg har en blokk for deg å legge til samlingen din. Det kalles “- Kortet, “det har et “hjerte” – ikonet og det bør leve i den ‘vanlige’ – kategorien.” Dette er vår komponent er grunnleggende definisjonen, så la oss legge til litt mer kode.

Dette bør se kjent—husk vår utfordring i Del 2, lag-guten-blokk? I tilfelle du trenger å bli minnet på, sjekk det ut her. De seks første av disse var relativt enkel og involvert skifte strenger eller bit av HTML. Den syvende element, “Gjør avsnitt tekst som kan redigeres,” er mye mer komplisert å implementere, og som var ment å få deg til å tenke litt. Tiden har kommet selv, og vi vil faktisk gjøre noe tekst som kan redigeres i Gutenberg!

Du kan også gjenkjenne dette registerBlockType funksjon fra PHP register_block_type funksjon vi brukte i den siste artikkelen. Mens denne funksjonen registrerer en blokk fra server-side av WordPress, er dette en registrerer våre blokkere, i økosystemet Reagerer på klientsiden. Begge er nødvendig å ha en blokk som bruker Reagere, og deres registrerte navn, kort-blokk/main må samsvare.

Legg til følgende kode, men sørg for at du setter komma etter “common”, så det ser ut som dette: ‘vanlige’,.

Her er koden:

egenskaper: {
tittel: {
kilde: ‘tekst’,
selector: ‘.kort__tittelen’
},
kropp: {
type: ‘utvalg’,
kilde: ‘barn’,
selector: ‘.kort__body”
},
imageAlt: {
attributt: ‘alt’,
selector: ‘.kort__bilde’
},
imageUrl: {
attributt: ‘src’,
selector: ‘.kort__bilde’
}
}

Her, vi definerer redigerbare attributter av våre blokkere og DOM selector at de er tildelt. Dette attributtet objektet fungerer på en lignende måte til å Reagere tilstand objektet. Det har en veldig lik oppdatering metode som kalles setAttributes. Vi kommer til dette senere om.

På dette punktet, er det verdt en kort oversikt over tilstand og egenskaper fordi de representerer en helt ny måte å tenke på for WordPress-utviklere. Jeg skal ta over for et øyeblikk å gå over dem.

Om Egenskaper og Tilstand

Det kan se ut som en enkel JavaScript-objekt, men som del av attributter introduserer en hel stripe av nye konsepter til en WordPress temaet utvikler hjernen, ikke minst som er staten. Begrepet stat har en lang historie i computer science, og livet generelt, egentlig. Nesten alt har en tilstand. Hva er staten kaffekoppen i nå? Tom, nesten tomme? Hva med klær? Er skoene dine skitne eller nye? Hva med kroppen? Er du lei eller våken?

På et høyt nivå, stat refererer bare til den nåværende tilstanden av ting. I computer science, at ting er en datamaskin programmet, og at programmet kan bli mye, mye enklere enn hva vi lager her på nettet. Ta en salgsautomat, for eksempel. Automaten har en tilstand som oppdateres hver gang du legger på en mynt. Når staten maskinen når et forhåndsdefinert beløp, si $1.25, maskinen vet å tillate deg å lage din snack valg.

I Gutenberg, attributter spore den nåværende tilstand av data i en blokk. Egenskaper er den nærmeste parallell kan vi trekke til egendefinerte felt i Gutenberg, men de finnes bare i sammenheng med Gutenberg og JavaScript. La oss ta attributtet ovenfor for tittel, for eksempel:

tittel: {
kilde: ‘tekst’,
selector: “kort__tittelen’
},

Når Gutenberg fyrer opp, det sier, “jeg trenger å finne noen tekst inne i en selector heter .kort__tittel, og fylle verdi for tittelen med hva jeg finner.”

Attributter i Gutenberg er ikke direkte koblet til databasen som egendefinerte felt er koblet til post_meta. Oppføringene kilde og selector er instruksjoner for Gutenberg for å fylle tilstand av hver blokk. Når vi legg opp editor, den følger disse instruksjonene, og tilordner en verdi til tittelen basert på markup lagret i databasen mellom HTML-kommentarer som indikerer en blokk av denne typen. Vi kan ikke se verdien av tittel i attributter-vi registrerer, men hvis jeg skulle til å få tilgang til virkemidlene.attributter.tittel jeg ville få en hvilken som helst tekst finnes i .kort__tittel.

Vi har satt opp noen grunnleggende, så la oss dykke inn i våre rediger-funksjonen. Dette er det som kalles når blokkere tilgang fra Gutenberg-redaktør i visuell modus. Brukeren vil se de rike grensesnitt, snarere enn en HTML-kode som genererer. Det er hva jeg vil dekke neste.

Legg til våre rediger-funksjonen

La oss legge til litt kode. Legg til følgende i etterkant } av attributter objekt. Som tidligere, må du legge til en etterfølgende komma, så det ser ut som dette },.

Legg til følgende kode etter at:

rediger({ attributter, className, setAttributes }) {
retur (
);
}

Så, vi bruker en annen destructuring oppdrag å selektivt velge våre parametre til rediger-funksjonen. De to viktigste er attributter og setAttributes. Attributtene parameteren er den samme som egenskaper blokk, men det er gjeldende, reaktiv tilstand. Dette betyr at hvis setAttributes funksjon oppdateringer ett av attributtene verdier, vil det automatisk oppdatering hvor som helst som refererer til det, som er lik vår Reagerer komponent fra Del 3.

Det er en stor ol’ gå tilbake i denne funksjonen. Kan du gjette hva som er galt i det? Yup! Vi kommer til å holde seg noen JSX i det. Legg til følgende i retur parentes:

<div className=”beholder”>
<MediaUpload
onSelect={ media => { setAttributes({ imageAlt: media.alt, imageUrl: media.url }); } }
type=”bilde”
value={ attributter.imageID }
gjengi={ ({ åpne }) => getImageButton(åpne) }
/>
<Ren tekst
onChange={ content => setAttributes({ title: innhold }) }
value={ attributter.tittel }
plassholder=”Ditt kort tittel”
className=”overskrift”
/>
<RichText
onChange={ content => setAttributes({ kroppen: innhold }) }
value={ attributter.kroppen }
multiline=”p”
plassholder=”Ditt kort tekst”
/>
</div>

OK, det er mye å gå på her, men det er alle ting vi har dekket i tidligere deler av denne serien. Hva vi har her er en beholder med tre eksisterende Gutenberg-komponenter. For hver, vi setter det aktuelle attributtet som verdi, en relevant plassholder og en onChange/onSelect handler. Vi er også passerer en tilpasset renderer til <MediaUpload />, som vi kommer tilbake om kort tid.

Hver onChange-behandleren er en hendig liten uttrykk som passerer nytt innhold som utløste onChange i setAttributes funksjon, hvor vi sett hvilke attributter som objekt for å oppdatere. Denne oppdateringen så cascades inn noen referanse til denne egenskapen, der innholdet vil oppdateringen som magi. <MediaUpload / > – element har et onSelect hendelse som utløses når brukeren velger eller laster opp et element til media biblioteket.

Vi snakker om den <MediaUpload / > – element, vil du legge merke til at det er en egendefinert gjengi attributt, som refererer til en getImageButton funksjon. La oss skrive det neste. Over tilbake i rediger-funksjonen legg til følgende:

const getImageButton = (openEvent) => {
hvis(attributter.imageUrl) {
retur (
<img
src={ attributter.imageUrl }
onClick={ openEvent }
className=”bilde”
/>
);
}
else {
retur (
<div className=”knappen-container”>
<- Knappen
onClick={ openEvent }
className=”knapp-store”
>
Velg et bilde
</Button>
</div>
);
}
};

Hva denne funksjonen gjør, er å finne ut om det er en imageUrl i attributter-objekt. Hvis det er, det vil gjengi som <img / > – koden, og la en bruker klikker på den for å velge en annen. Hvis det er ingen bilde, vil det gi en WordPress < – Knapp /> som ber brukeren om å velge et bilde. Dette kaller de samme openEvent som ble vedtatt i funksjon.

For å holde ting enkelt i denne opplæringen, vi har bundet et klikk til <img / > – element. Du bør vurdere å bygge noe fancy som bruker en < – knapp /> for produksjonen, klar blokker, for bedre tilgjengelighet støtte.

Høyre, som er vår rediger-funksjonen ferdig. Ikke mye koden der, med tanke på hva det faktisk gjør, noe som er flott!

Legg til våre spare-funksjon

Vi har fått vår Gutenberg editor-enden av blokken som er skrevet nå, som er den vanskelige delen. Nå er alt vi har å gjøre er å fortelle Gutenberg hva vi vil at blokken skal gjøre med innholdet. Med samme reaktiv data fra egenskaper, kan vi gjøre vårt front-end markering i real-time, også. Det betyr at når noen slår inn i HTML-redigering-modus på blokken, vil det være opp til dags dato. Hvis du vil redigere det i HTML-redigering-modus, visual mode vil også bli holdt oppdatert. Super nyttig.

La oss grave litt i da. Etter vår redigere funksjon, legge til et komma, så det ser ut som }, og legg deretter til følgende på en ny linje:

lagre({ attributter }) {

const cardImage = (src, alt) => {
if(!src) return null;

hvis(alt) {
retur (
<img
className=”kortet__bilde”
src={ src }
alt={ alt -}
/>
);
}

// Ikke alt satt, så la oss skjule det fra skjermlesere
retur (
<img
className=”kortet__bilde”
src={ src }
alt=””
aria-skjult=”true”
/>
);
};

retur (
<div className=”kort”>
{ cardImage(attributter.imageUrl, attributter.imageAlt) }
<div className=”kortet__innhold”>
<h3 className=”kortet__title”>{ attributter.tittel }</h3>
<div className=”kortet__kroppen”>
{ attributter.kroppen }
</div>
</div>
</div>
);
}

Ser ganske lik rediger-funksjonen, ikke sant? La oss gå gjennom det.

Vi begynner ved hjelp av en destructuring oppdrag å trekke ut attributtene fra passert paramaters, akkurat som den forrige rediger-funksjonen.

Så har vi et annet bilde hjelpefunksjon som først oppdager om det er et bilde og returnerer null hvis det ikke er en. Husk: vi returnerer null i JSX hvis vi ønsker det å gjøre ingenting. Den neste tingen dette helper gjør, er å gjengi en litt variert <img / > – koden, hvis det er alt-tekst eller ikke. For den sistnevnte, det skjuler det fra en skjermleser ved å legge til aria-skjult=”true” og angi et tomt alt-attributt.

Til slutt, vår tilbake spytter ut et hyggelig .kort blokk med ren, BEM-drevet markup som vil belastningen på front-end av vårt tema.

Og det er at for våre lagre-funksjonen. Vi er så nær at en fullført blokk. Bare et skritt til å gå!

Legg til noen stil

OK, vi har fått dette litt å gjøre, og vi er ferdig. Den observante blant dere kanskje har lagt merke til noen referanser til className prikkete om. Disse er referere til vår redaktør.scss regler, så la oss legge dem.

Åpne opp redaktør.scss, som bor i samme katalog som block.js. Legg til følgende:

@import ‘../felles’;

.gutenberg {

.beholder {
border: 1px solid $grå;
polstring: 1rem;
}

.knapp-container {
text-align: center;
polstring: 22% 0;
bakgrunn: $off-white;
border: 1px solid $grå;
border-radius: 2px;
margin: 0 0 1.2 rem 0;
}

.overskriften {
font-størrelse: 1,5 rem;
font-vekt: 600;
}

.bildet {
høyde: 15.7 rem;
bredde: 100%;
objekt-fit: dekk;
}
}

Dette er noen løse CSS for å gi våre blokkere noen kort-lignende stil. Merker det er alt nestet i en .gutenberg-klasse? Dette er å kjempe spesifisiteten av noen core stiler. Innenfor redaktør, det er en <div class=”gutenberg” pakket rundt kvartalet-området i innlegget editor-skjermen, slik at vi kan sørge for å kun påvirke de elementene med denne hekkende. Du vil sannsynligvis også merke til at vi importerer en annen Sass-fil, så la oss fylle den.

Åpne vanlig.scss som bor i src-katalogen, som er overordnet i forhold til den aktuelle blokken katalog som vi er i.

/*
* Felles SCSS kan inneholde din vanlige variabler, hjelpere og mixins
* som er delt mellom alle blokkene.
*/

// Farger
$grå: #cccccc;
$off-white: #f1f1f1;

Uansett, gjett hva? Vi har bare gått og bygget ut en tilpasset kort blokk!! La oss gi det en test-stasjonen.

Først, sjekk din blokk er alt bra. Dette er hva fullført block.js filen skal se slik ut:

const { registerBlockType, RichText, MediaUpload, ren tekst } = wp.blokker;
const { Knappen } = wp.komponenter;

// Importerer våre CSS-filer
import ‘./stil.scss’;
import ‘./redaktør.scss’;

registerBlockType(‘kort-blokk/main’, {
tittel: “Kort”,
ikon: ‘hjertet’,
kategori: ‘vanlige’,
egenskaper: {
tittel: {
kilde: ‘tekst’,
selector: ‘.kort__tittelen’
},
kropp: {
type: ‘utvalg’,
kilde: ‘barn’,
selector: ‘.kort__body”
},
imageAlt: {
attributt: ‘alt’,
selector: ‘.kort__bilde’
},
imageUrl: {
attributt: ‘src’,
selector: ‘.kort__bilde’
}
},
rediger({ attributter, className, setAttributes }) {

const getImageButton = (openEvent) => {
hvis(attributter.imageUrl) {
retur (
<img
src={ attributter.imageUrl }
onClick={ openEvent }
className=”bilde”
/>
);
}
else {
retur (
<div className=”knappen-container”>
<- Knappen
onClick={ openEvent }
className=”knapp-store”
>
Velg et bilde
</Button>
</div>
);
}
};

retur (
<div className=”beholder”>
<MediaUpload
onSelect={ media => { setAttributes({ imageAlt: media.alt, imageUrl: media.url }); } }
type=”bilde”
value={ attributter.imageID }
gjengi={ ({ åpne }) => getImageButton(åpne) }
/>
<Ren tekst
onChange={ content => setAttributes({ title: innhold }) }
value={ attributter.tittel }
plassholder=”Ditt kort tittel”
className=”overskrift”
/>
<RichText
onChange={ content => setAttributes({ kroppen: innhold }) }
value={ attributter.kroppen }
multiline=”p”
plassholder=”Ditt kort tekst”
formattingControls={ [‘fet’, ‘kursiv’, ‘understrek’] }
isSelected={ attributter.isSelected }
/>
</div>
);

},

lagre({ attributter }) {

const cardImage = (src, alt) => {
if(!src) return null;

hvis(alt) {
retur (
<img
className=”kortet__bilde”
src={ src }
alt={ alt -}
/>
);
}

// Ikke alt satt, så la oss skjule det fra skjermlesere
retur (
<img
className=”kortet__bilde”
src={ src }
alt=””
aria-skjult=”true”
/>
);
};

retur (
<div className=”kort”>
{ cardImage(attributter.imageUrl, attributter.imageAlt) }
<div className=”kortet__innhold”>
<h3 className=”kortet__title”>{ attributter.tittel }</h3>
<div className=”kortet__kroppen”>
{ attributter.kroppen }
</div>
</div>
</div>
);
}
});

Hvis du er fornøyd, la oss fyre opp webpack. Mens du er i din nåværende plugin-katalogen i terminalen, kjøre dette:

npx webpack –se

Dette er litt forskjellig fra den forrige delen i serien fordi vi har lagt –se argumentet. Dette utgangspunktet holder et øye på din js-filer og re-runs webpack hvis de endres.

Fyr opp redaktør!

La oss fyre opp Gutenberg editor ved å laste opp et innlegg i WordPress baksiden slutten. I Gutenberg-editor, klikk på den lille pluss-ikonet og se i “blokker” – fanen, og det det er: vår awesome nye kortet blokk!

Gå foran og gi det en test drive og legge til innhold i det. Føles godt ikke sant?

Her er en kort video om hva du burde se akkurat nå, med din fancy nye kortet blokk:

Og med det, du er ferdig 🎉

Her er en ting tenker du kanskje: ikke blokker form av en erstatning for egendefinerte felt? Ikke kan jeg nå lage mitt eget innhold, struktur direkte i WordPress i stedet for å bruke en plugin som Avanserte Egendefinerte Felt? Ikke helt…

Blokker vs. Egendefinerte Felt

Mens Gutenberg har råd til oss muligheten til å tilpasse strukturen til inntasting av data fra brukerens erfaring, på back-end-det er ikke annerledes enn den nåværende WYSIWYG editor. Data som er lagret fra en blokk er en del av post_content kolonne i wp_posts database tabell—det er ikke lagret separat i wp_postmeta som egendefinerte felt. Dette betyr at det i dag, vi kan ikke få tilgang til data fra våre kortet kvartal fra en annen post på samme måte som vi kan hvis vi hadde opprettet egendefinerte felt for tittel, bilde og innhold med en standard Avanserte Egendefinerte Felt oppsett.

Når det er sagt, kunne jeg se noen virkelig interessante plugins overflatebehandling som gir en måte å port data fra en blokk til andre deler av en nettside. Med WordPress REST API, mulighetene er nesten ubegrensede! I vår screencast, Andy og jeg tok en stikke på å innlemme et API forespørsel til våre kort blokkere og, selv om ikke alt gikk akkurat som planlagt, og verktøyene er allerede på plass og du kan få en smak av hva som kan være mulig med Gutenberg i fremtiden. Tiden vil vise!

Innpakning opp og neste trinn

Hva en reise vi har vært på sammen! La oss liste ut hva du har lært i denne serien:

  • Du har lært noen kjerne, moderne JavaScript ved å gripe fatt med ES6
  • Du har lært det grunnleggende av JSX
  • Du fant at ny kunnskap og nye bygget ut et Reagere komponent fra scratch
  • Du så lært hvordan webpack fungerer og skrev en skalerbar config-filen for Gutenberg blokkere utvikling
  • Til slutt, du bygget tilpasset Gutenberg-kortet kvartal fra scratch

Så, hvor kan du fra her? Nå som du har fått noen solid base kunnskap fra denne serien, kan du gjøre noen videre læring. Det er allerede fantastiske ressurser for at:

  • Du skriver Ditt Første Kvartal Skrive på WordPress.org (Andy: Det er hvordan jeg lærte blokker arbeid)
  • Gutenberg Kurs av Zac Gordon og Joe Casabona
  • Opprette en Egendefinert Gutenberg Blokker av Pete Tasker
  • Anatomi av en Tilpasset Blokk av Morgan Kay
  • Tusen og én Måter å Utvide Gutenberg i Dag av Riad Benguella
  • Gutenberg snakker om WordPress.tv

Noen interessante case-studier:

  • Revisjon Din WordPress Plugin for Gutenberg
  • Gutenberg på Humanmade.com
  • Moderne Stamme “Kommer Gutenberg”

Holde et øye på disse ressursene for å holde deg oppdatert med prosjektet:

  • Gutenberg Nyheter
  • Gutenberg Ganger

Eksperimentelle ting som skjer med Gutenberg:

  • Gutenberg Egendefinerte Felt plugin
  • Atomic Blokker plugins og tema

Når Gutenberg blir en del av WordPress kjernen i versjonen 5.0 (utgivelsesdato TBD), kan du også publisere en nyttig tilpasset blokk i WordPress plugins-katalogen. Det er definitivt rom for noen praktiske komponenter som kortet blokken som du har nettopp bygget.

Vi håper du har glede av denne serien, fordi vi har absolutt likte å gjøre det. Vi håper virkelig dette hjelper deg med å hente inn Gutenberg og at du bygger noen kule ting. Du bør helt send oss linker til ting du har laget også!

Artikkel-Serien:

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