✅ WEB- ja WordPress -uutiset, -teemat, -laajennukset. Täällä jaamme vinkkejä ja parhaita verkkosivustoratkaisuja.

Luo mukautettu Gutenberg-lohko – Osa 3: Rekvisiitta ja WordPress-komponentit

8

Tämän opetusohjelmasarjan edellisessä vaiheessa käytiin läpi mukautetun lohkon rekisteröinti sekä Javascriptissä että PHP:ssä. Tässä vaiheessa opimme käyttämään WordPressin komponentteja erilaisten kenttien ja asetusten lisäämiseen.

Jotta voimme hyödyntää WordPressin komponentteja lohkossamme, meidän on ensin tiedettävä rekvisiitta.

Rekvisiitta

Props on Reactin tärkeä ominaisuus, ja se on pohjimmiltaan tapa siirtää muuttujia tai toimintoja muille komponenteille. Jos et ole tutustunut React-rekvisiittiin, voit lukea Reactin virallisen opetusohjelman tästä.

WordPress tarjoaa joitain rekvisiittapalveluita editja savetoimintoja varten registerBlockType(). Näiden rekvisiittajen sisällä saamme pääsyn kriittisiin asioihin, kuten attribuutteihin ja menetelmään ominaisuuksiemme päivittämiseen. Käymme attribuutit läpi yksityiskohtaisesti seuraavassa vaiheessa!

Tähän mennessä lohkossamme olemme kirjoittaneet funktion editja savekuten näin:

Sinun pitäisi tottua lisäämään parametri propsmolempiin editja save, kuten näin:

Nyt sinulla on täysi pääsy muuttujaan propsja kaikkeen sen sisältämään sisältä editja save. Jos olet utelias, voit lisätä funktioon console.log(props);lauseen edelle. Sinun pitäisi nähdä, mitä rekvisiitta on saatavilla konsolin debuggerissa.edit``return

WordPressin komponenttien käyttäminen

Kuten aiemmin mainittiin, meillä on pääsy valtavaan kirjastoon komponentteja ja hyödyllisiä toimintoja globaalin paketin sisällä wp. Löydät käyttövalmiita komponentteja kaikenlaisille tuloon liittyville komponenteille, joita voit ajatella. Esimerkkejä ovat tekstinsyötteet, Rich Text -syötteet, pudotusvalikot, vaihtopainikkeet, valintaruudut, eri tyyliset painikkeet, median latausohjelma ja värivalitsimet. Mukana on myös toimintoja ja komponentteja edistyneempään toimintoon. Esimerkiksi sisällön (viestit, luokat jne.) kysely WordPressistä joko sisäänrakennetuilla funktioilla tai hakemalla REST API:lla.

On helpompaa ja suositeltavaa käyttää WordPressin käyttöliittymäkomponentteja. Tällä varmistetaan, että suunnittelu ja toiminnallisuus ovat mahdollisimman virtaviivaisia, jotta käyttäjiä ei hämmennetä tai häiritä.

Mutta valitettavasti tätä kirjoittaessa Gutenbergin dokumentaatio on hyvin niukka. Olen löytänyt parhaan tavan oppia wppaketin sisällöstä ja komponenttien toiminnasta tarkastelemalla heidän virallista Gutenberg Github -repoa. Joissakin paketeissa (kansioissa) on readme-teksti, joka tarjoaa hieman dokumentaatiota. Katso esimerkiksi painikkeen tai vaihtokytkimen readme .

Githubin repon tulee vastata wppaketin sisältöä (riippuen siitä, mikä versio sinulla on ja mitä haaraa tarkastelet Githubissa). Tämä tarkoittaa, että jokainen packagesGithubin juurihakemistossa näkemäsi kansio on globaalissa wppaketissa. Muista esimerkiksi, että edellisessä vaiheessa käyttämämme funktio registerBlockType()oli sisällä wp.blocks, mikä tarkoittaa, että löydät tämän funktion lähdekoodin vietynä sisällä packages/blocks/.

Kun olen kehittänyt useita mukautettuja Gutenberg-lohkoja ja kaivanut paljon Githubin repossa, olen huomannut, että on olemassa muutamia paketteja, jotka sisältävät yleisimmät mukautettujen lohkojen luomiseen käytetyt toiminnot. Lisään ne alle.

Saadaksesi täydellisemmän yleiskatsauksen saatavilla olevista komponenteista, suosittelen lataamaan ilmaisen e-kirjani, joka kattaa Gutenbergin saatavilla olevat komponentit! Se sisältää yleisimmät ja hyödyllisimmät komponentit sekä tarvikkeita ja koodiesimerkkejä koskevat asiakirjat:

Nopea yleiskatsaus yleisimmistä lohkoihin käyttämistäsi paketeista

Ilmeisesti saatavilla on paljon enemmän, mutta alla oleva on yleisintä lohkojen kehittämisessä. Käytämme useimpia ellei kaikkia näistä tässä opetusohjelmasarjassa. Aina kun haluat käyttää komponenttia, sinun on tiedettävä, missä pakkauksessa se on.

wp.components

Useimmat käyttöliittymän syöttökomponentit ovat sisällä wp.components. Esimerkkejä ovat erilaiset tekstinsyötöt, valintaruudut, valintaruudut, valintanapit, vedettävät komponentit, painikkeet, värinvalitsin, päivämääränvalitsin ja niin edelleen. Löydät myös käyttöliittymäkomponentteja, joita voit käyttää estotyökalurivin ja asetussivupalkin sisällössä (nimeltään InspectorControls) editorissa.

Tarkista kansiot Githubin repossa.

wp.blockEditor ja wp.editor

Näistä kahdesta paketista löydät hyödyllisiä komponentteja RTF-tekstiin, kuvien/median latausohjelman käsittelyyn sekä työkalurivien tai mukautettujen Inspector (sivupalkki) -paneelien lisäämiseen.

Tämän sarjan lopussa tarkastellaan dynaamisten lohkojen rakentamista, joissa käytämme PHP:tä lohkotulosteen renderöimiseen, ja siihen käytetään komponenttia wp.editor.

Ymmärtääkseni useimmat komponentit alkoivat wp.editorGutenbergin aikoina, mutta varsinkin WordPress 5.3:n jälkeen monet niistä siirrettiin wp.blockEditor. Jos käytät komponenttia, wp.editorjohon WordPress aikoo siirtyä, wp.blockEditorse ei toistaiseksi epäonnistu, mutta konsolin debuggerissa saat varoituksia, että se on vanhentunut ja sinun tulee vaihtaa siihen, wp.blockEditorkun voit. Ja palautuvasti, jos seuraat tätä sarjaa vanhemmalla WordPress-versiolla jostain syystä saatat kohdata virheitä kutsuttaessa komponentteja, joihin ei ole wp.blockEditorvielä siirretty.

Luo mukautettu Gutenberg-lohko - Osa 3: Rekvisiitta ja WordPress-komponentit

wp.element

Sisältä wp.elementlöydät komponentteja, jotka vastaavat React-komponentteja. Esimerkiksi Component(joka vastaa React.Component) ja Fragment( React.Fragment). Käytämme näitä, kun alamme jakaa koodimme erillisiin osiin.

wp.i18n

Kuten nimi kertoo, wp.i18npaketti sisältää toimintoja kääntämisen käsittelyyn. Se sisältää samat käännöstoiminnot kuin tunnemme ne PHP:ssä; esimerkiksi __()ja _e(). Tarkastelemme tätä yksityiskohtaisesti kohdassa <<<>>>>, kun opimme kääntämään lohkomme.

wp.data

Paketti wp.dataon tarkoitettu tietojen kyselyyn WordPressistä editorin ulkopuolelta. Viestien lähettämiseen on komponentteja, withSelectjoita selectkäytämme myöhemmin tässä sarjassa lohkomme sisällä olevien viestien kyselyyn.

wp.compose

Edellinen paketti ja wp.composeovat edistyneempään lohkorakennukseen. Tämän paketin sisältä löydät komponentteja ja toimintoja ns. korkeamman asteen komponenttien luomiseen. Korkeamman asteen komponentit on Reactin mallitekniikka komponenttien ja logiikan uudelleenkäyttöön, ja käytämme tätä yhdessä kanssa wp.datakyselyiden tekemiseen.

Keskustelua riittää – miten käytät joitain näistä komponenteista käytännössä?

Kuten aiemmin mainittu; Jotta voit käyttää WordPressin komponentteja, sinun on tiedettävä, missä ne ovat. Toivottavasti yllä oleva yleiskatsaukseni yhdistettynä Githubin repoon antaa sinulle käsityksen, mistä niitä saa.

Älä unohda, että voit aina lisätä tavallisia HTML-tageja, kuten div, span, otsikot ja niin edelleen. Muista vain noudattaa Reactin ohjeita määritteissä. Esimerkiksi classvarattu avainsana Reactissa (luokkapohjaisten komponenttien luomiseen), joten jos haluat lisätä luokan HTML-elementtiin, sinun on käytettävä className.

Huomautus: Kun kehität, älä unohda aloittaa npm run startkoodisi kääntäminen.

Yksinkertaisena esimerkkinä kokeillaan muutamia komponentteja nähdäksesi, miltä ne näyttävät. Puramme ne vastaavista paketeista ja käytämme niitä edittoiminnassamme.

Tämä johtaa esimerkiksi siihen, että lohkomme näyttää tältä editorissa.

Luo mukautettu Gutenberg-lohko - Osa 3: Rekvisiitta ja WordPress-komponentit

Huomaat, että saat virheilmoituksia konsolissa, kun kirjoitat niitä, ja että se ei tallenna kirjoittamaasi viestiä päivitettäessä (ja päivittäessäsi). Tämä johtuu siitä, että meiltä puuttuu rekvisiitta komponenteista, jotka muodostavat yhteyden attribuutteihin, joihin kaikki lohkotietomme on tallennettu. Rekvisiitta on vastuussa tallennettujen arvojen välittämisestä ja funktioista, jotka vastaavat attribuuttiemme päivittämisestä, kun jotain muuttuu syötteissämme. Näin teemme seuraavassa vaiheessa, jossa alamme vihdoin kirjoittaa jotain koodia oikeasti.

Tämä verkkosivusto käyttää evästeitä parantaakseen käyttökokemustasi. Oletamme, että olet kunnossa, mutta voit halutessasi kieltäytyä. Hyväksyä Lisätietoja