Share
Velkommen tilbake til vår serie om å lage egendefinerte blokker med WordPress Gutenberg Block API. Denne opplæringen handler om å utvide den tilfeldige bildeblokken vi opprettet i forrige innlegg. Vi har så langt som å legge til en rullegardin kontroll for å velge en bildekategori. Vi fortsetter med dette ved å legge til flere blokkalternativer for å tillate ytterligere tilpasning.
Nærmere bestemt vil vi se hvordan du legger til blokkinnstillinger i ulike deler av redigeringsprogrammet. Det stemmer, du er ikke bare begrenset til å legge til blokkkontroller direkte på selve blokken!
Finalen my-custom-blokk plugin kode er tilgjengelig for nedlasting. Bare klikk på linken i sidefeltet til høyre og last ned zip-filen til datamaskinen din, og installer den som du ville noe annet WordPress-plugin. Du kan også finne kildekoden i vår GitHub repo.
Gutenberg-utviklingen knekker på et godt tempo, og det har vært en ny signifikant utgivelse siden den siste opplæringen ble publisert. Versjonen av Gutenberg brukt i denne opplæringen har blitt oppdatert til 3.0.1, og noen av redigeringsgrensesnittet kan se litt forskjellig fra skjermbilder vist i tidligere opplæringsprogrammer i denne serien.
Nedtrekkskontrollen vi la til i den forrige opplæringen, ble plassert inne i redigeringsprogrammet, rett under merkingen for tilfeldig bilde. Dette var praktisk, men vi har også andre valg.
Vi kan også legge til blokkkontroller til en verktøylinje (som vises når en blokk er valgt) og et blokkinspeksjonspanel.
I skjermbildet over kan vi se verktøylinjekontrollene for avsnittblokken [1], samt de tilhørende kontrollene i panelinspektøren [3]. Plassering [2] viser rullegardinkontrollen for vår tilfeldige bildeblokk.
Du kan allerede tenke på hvilken plassering du vil velge for dine egne blokkinnstillinger, men du trenger ikke å velge bare en av disse stedene. De utelukker ikke hverandre. For eksempel, for avsnittblokken (vist ovenfor), kan du se at innstillingene er delt mellom blokkinspeksjonspanelet og verktøylinjen.
Videre er det helt greit å ha to separate kontroller på forskjellige steder i redaktøren som påvirker samme innstilling. Du vil kanskje ikke gjøre dette for ofte, men det er nyttig å vite hvordan du implementerer det, så vi får se hvordan du gjør dette litt senere.
La oss starte med den enkleste måten å legge til funksjonalitet i blokken din, som ligger direkte innenfor blokken redigere funksjon. Vi har allerede brukt denne tilnærmingen til å legge til vår tilfeldige bilde nedlastingskontroll fordi det krever svært lite ekstra innsats.
Vi vil ikke gå over å legge til nye kontroller i selve blokken, men vi kan justere oppførselen til rullegardinkontrollen for å være litt mer intuitiv. For å gjøre det gjengitt så nært som mulig til forenden, kan vi begrense rullegardinmenyen fra å vises, med mindre blokken er valgt.
La oss gjøre denne endringen nå. Hvis du følger denne opplæringen fra forrige gang, åpner du den /my-custom-block/src/random-image/index.js i din favorittredaktør. Dette er den viktigste JavaScript-filen for vår tilfeldige bildeblokk.
En av rekvisitter som går til alle blokkene er isSelected, som holder statusen til blokkens synlighet. Vi kan bruke dette til betinget å vise kategorien rullegardin kontroll.
For det første, trekk ut isSelected fra Rekvisitter objekt og legg det til listen over konstanter inne i redigere funksjon. Dette er nyttig, slik at vi kan referere det til et forkortet navn (dvs.. isSelected heller enn props.isSelected).
const attributter: category, setAttributes, isSelected = rekvisitter;
Deretter kan vi bruke denne egenskapen til å avgjøre om rullegardinkontrollen skal vises:
er valgt && ()
Dette er en shorthand måte å teste det på isSelected er sant, siden vi ikke kan bruke en fullblåst JavaScript hvis setning i JSX-koden.
Sørg for at du fremdeles ser på filer for endringer, slik at noen blokkkildekode (JSX, ES6 +, Sass, etc.) blir transpulert til gyldig JavaScript og CSS. Hvis du for øyeblikket ikke ser filer for endringer, åpner du et kommandolinjevindu inni my-custom-blokk Plugg inn rotmappe og skriv inn npm start.
Åpne Gutenberg-editoren og legg til den tilfeldige bildeblokken. Denne gangen er rullegardinkontrollen ikke synlig hvis blokken ikke har blitt klikket enda.
Dette gir blokken en mye mer interaktiv følelse for det.
Hvis du har brukt noen av de kjente Gutenberg-blokkene (for eksempel avsnittblokk), så vil du være kjent med verktøylinjeinnstillinger. Så snart paragrafblokken er valgt, vises en popup-verktøylinje som inneholder knapper for formatering av teksten. Denne typen kontroll er flott for blokkinnstillinger som har en on / off-type-for eksempel tekstjustering eller formatering som fet eller kursiv.
Vi bruker den innebygde justeringsverktøylinjekontrollen for å tillate at rullegardinbildekategorien kontrolleres igjen (standard), høyre eller midtjustert.
Først må vi trekke ut AlignmentToolBar og BlockControls komponenter fra wp.blocks. Disse tillater oss å vise justeringskontroller inne i en flytende verktøylinje over blokken vår når den er valgt. Disse er en del av kjernekomponentene vi kan bruke i våre egne blokker.
const AlignmentToolbar, BlockControls, registerBlockType = wp.blocks;
De BlockControls komponent fungerer som verktøylinjebeholderen, og AlignmentToolbar er plassert inne.
Vi må fortsatt koble opp oppførselen til justeringsverktøylinjen manuelt, som vi kan gjøre ved å legge til en ny categoryAlign attributt til å lagre blokkjusteringsstatus (venstre, høyre eller senter).
Våre egenskaper objektet inneholder nå to innstillinger.
attributter: kategori: type: 'streng', standard: 'natur', kategoriAlign: type: 'streng' standard: "
Standard for categoryAlign Attributtet er en tom streng, som vil føre til at ingen justering blir brukt som standard.
For å referere til det nye attributtet, kan vi trekke denne verdien ut i sin egen konstante variabel på samme måte som vi gjorde for rullegardinmenyen kategori Egenskap.
const attributter: kategori, categoryAlign, setAttributes, isSelected = rekvisitter;
Alt vi trenger å gjøre nå er å slippe de to nye komponentene inn i redigere funksjon og konfigurere egenskapene.
setAttributes (categoryAlign: value) />
Som du kan se alt vi trengte å gjøre var å tildele verdi attributt av Alignmenttoolbar til categoryAlign attributt og ring til setAttributes funksjon når en ny verktøylinjeknapp er blitt klikket. Denne funksjonen oppdaterer i sin tur categoryAlign Tilordne og beholder alt i synkronisering.
For å bruke justeringsstilen til rullegardinkontrollen, må vi legge til en stilegenskap i vårt skjemaelement.
);Denne funksjonen kan da refereres når vi trenger kategorien rullegardin kontroll gjengitt. Markeringen for blokkinspeksjonspanelet må være utenfor blokkoppslaget, slik at vi kan bruke
Deretter må vi legge til blokkinspektør-komponentene for kategorin og bildefilter-rullegardinene. Disse må defineres inne onChange begivenhet. Dette ligner veldig på kategori-drop-down-koden fra den siste opplæringen, så det burde være kjent med deg nå.
Setter dette sammen, den redigere metodens komme tilbake funksjonen ser nå slik ut:
komme tilbake (); showForm () setAttributes (categoryAlign: value) /> isSelected && (showForm ())
Og setFilter tilbakeringing er definert som:
Accentsconagua
funksjon setFilter (hendelse) const selected = event.target.querySelector ('# image-filter option: checked'); setAttributes (imageFilter: selected.value); event.preventDefault (); For å få det filtrerte bildet, må vi oppdatere RandomImage komponent for å godta den nye filterverdien hver gang rullegardinmenyen endres.
funksjonen RandomImage (kategori, filter) if (filter) filter = '/' + filter; const src = 'https://placeimg.com/320/220/' + kategori + filter; komme tilbake;
Legg merke til hvordan vi bruker denne nye komponentegenskapen i redigere metode for å sende den nye filterverdien til PlaceIMG.
Alle disse kodendringene resulterer i at et nytt blokkinspeksjonspanel blir opprettet med to nedtrekkskontroller for å endre bildekategori og filter.
For å få den nye filteregenskapen til å arbeide for frontenden, må vi bare oppdatere lagre metode.
lagre: funksjon (rekvisitter) const attributter: kategori, imageFilter = rekvisitter; komme tilbake ();
I dette innlegget dekket vi tre forskjellige metoder for å legge inn innstillinger i en blokk:
Vi har bare lagt til grunnleggende innstillinger for hver blokk, men vi kan enkelt ta dette enda lenger ved å legge til støtte for flere bilder, legge til bildetekster og styre stiler som grensefarge, radius eller tilfeldig bildeformat.
Jeg er sikker på at du nå sikkert har noen ideer for å lage dine egne tilpassede blokker. Jeg vil gjerne høre hva slags blokker du vil finne nyttige i dine egne prosjekter!
Vi har nettopp kommet i gang med Gutenberg her på Envato Tuts +, så hvis det er noen spesielle aspekter ved Gutenberg-blokkutvikling, vil du gjerne se dekket i dybden i fremtidige opplæringsprogrammer, vennligst gi oss beskjed via kommentarene.
