Kuvavalinnan lisääminen mukautettuun WordPress Gutenberg -lohkoon

Tämä viesti on sinulle, joka luo mukautettua Gutenberg-lohkoa ja tarvitset tavan valita tai ladata kuva mediakirjastosta. Useimmat muut kenttätyypit, kuten valintaruudut, tekstinsyötteet tai värivalitsimet, ovat melko helppoja lisätä, mutta median latausohjelma vaatii hieman enemmän koodia. Luomme Inspector-komponentin, joka vastaa painikkeen luomisesta mediakirjaston avaamiseen, kuvan valitsemiseen ja valinnaisesti poistamiseen tai muuttamiseen myöhemmin. Kaikki käyttämällä tavallisia WordPress-komponentteja.

Ennen kuin sukeltaamme koodiin, muista, että tämä viesti vaatii Gutenbergin tietämystä mukautettujen lohkojen kirjoittamisesta. Keskitymme vain median lataajaosaan emmekä rekisteröitymiseen ja Gutenberg-lohkon tekemiseen sinänsä. Jos et ole varma kuinka kirjoittaa mukautettu Gutenberg-lohko, minulla on opetusohjelmasarja, joka kattaa juuri tämän:

Kun se on poissa tieltä, sukeltakaamme suoraan sisään!

Mitä teemme

Valittu mediatoiminto on toiminnallisesti täsmälleen sama kuin WordPressin esittelykuvatoiminto. Lisäämme Inspectoriin paneelin, joka koostuu painikkeesta kuvan valitsemiseksi.

Kun napsautat painiketta, näkyviin tulee "Valitse tai lähetä media" -ikkuna, josta voit valita tiedoston mediakirjastosta. Rajoitamme Mediakirjaston näyttämään vain kuvia. Kun kuva on valittu, ponnahdusikkuna sulkeutuu ja paneeli esikatselee valitun kuvan pieni pikkukuva. Alla näkyvät esikatselupainikkeet kuvan vaihtamista ja poistamista varten. Aivan kuten esittelykuvassa.

Tässä opetusohjelmassa oletetaan, että käytät valittua kuvaa lohkon taustana – vain esimerkkinä. Tästä syystä tallennamme kuvan URL-osoitteen. Lisään esimerkin valitun kuvan käyttämisestä (sekä funktiossa editettä savefunktiossa). Kuvaa valittaessa kuva näkyy lohkomme taustana sekä editorin sisällä että käyttöliittymässä.

Tallennamme mediatunnuksen ja median URL-osoitteen lohkon attribuutteihin. Koodi käyttää paketissa withSelectolevaa korkeamman asteen komponenttia wp.datakysyäkseen lisätietoja valitusta mediasta tunnuksella.

"Lainaan" myös luokkanimiä WordPressin esitellyistä kuvatoiminnoista varmistaakseni, että kaikki näyttää hyvältä eikä sinun tarvitse kirjoittaa itse CSS:ää. Tämä on tietysti valinnaista.

Valitun median tallentaminen attribuuteissa

Se, mitä sinun on tallennettava lohkosi attribuutteihin, on vähän sinun päätettävissäsi. Meidän on luonnollisesti tallennettava vähintään mediatunnus. Tämä saattaa riittää, jos sinun ei tarvitse käyttää median URL-osoitetta missään komentosarjakoodissa. Esimerkiksi jos käytät ServerSideRendermissä PHP on vastuussa lohkon tulosteen renderöimisestä. Tällöin voit helposti saada kuvan URL-osoitteen mediatunnuksesta käyttämällä esimerkiksi [wp_get_attachment_image_src](https://developer.wordpress.org/reference/functions/wp_get_attachment_image_src/)(). Alla olevassa esimerkissä näytän kuitenkin yksinkertaisen esimerkin kuvan näyttämisestä lohkomme taustana, joten tallennan myös median URL-osoitteen attribuutiksi. Käytämme URL-attribuuttia sekä edit(taustan lisäämiseksi editorissa) että in save(taustan lisäämiseksi käyttöliittymään).

Aloitetaan määrittelemällä ominaisuudet. Mediatunnuksen tulee olla tyyppinumero ja oletuksena 0. Tämä tekee vertailusta helppoa. Median URL-osoitteen tulee olla tyyppimerkkijono ja oletuksena tyhjä merkkijono.

attributes: {
    mediaId: {
        type: 'number',
        default: 0
    },
    mediaUrl: {
        type: 'string',
        default: ''
    }
},

Komponentin luominen

Jotta koodimme olisi järjestyksessä, määrittelemme erillisen komponentin lohkon edittoiminnalle. Myöhemmin välitämme tämän komponentin, jotta withSelectvoimme kääriä sen komponenttimme ympärille.

Komponentin palautuksessa teemme yksinkertaisen <div>lohkon sisällölle. Oletan, että sinulla on tai sinulla on enemmän todellista estosisältöä korvaamaan valeesimerkkisisältö. Myös renderöimme InspectorControls(paketti wp.blockEditor) lisätäksemme osion tarkastajaan. Toistaiseksi lisään tyhjän PanelBodysisään InspectorControls. Lisään a <div>, jolla on sama luokka kuin WordPressin esittelykuvaosio käyttää. Tämä varmistaa, että tyylimme näyttää hyvältä. Myöhemmin täytämme tämän PanelBodyvalitun mediatoiminnon koodilla.

Mutta ensin tuhotaan tarvittava komponentti tiedoston alussa:

const { InspectorControls } = wp.blockEditor;
const { PanelBody } = wp.components;
const { Fragment } = wp.element;

Yläpuolella registerBlockTypemäärittelen yksinkertaisen komponentin nimeltä BlockEdit. Jos haluat siirtää tämän erilliseen tiedostoon, voit tehdä niin. Tämä on yleistä ja suositeltavaa, mutta tässä opetusohjelmassa pidän asiat yksinkertaisina ja pidän sen samassa tiedostossa.

Nyt haluamme tehdä tämän komponentin editfunktiossamme. Mutta haluamme kääriä sen withSelect.

Käyttö toiminnossa withSelect_edit

Jos et tunne withSelect, se on hyödyllinen korkeamman asteen komponentti, jonka avulla voimme suorittaa kyselyitä. Tällä voit esimerkiksi kysellä viestejä. Käytämme kuitenkin toimintoa select('core').getMedia()mediatunnuksen kyselyyn. Vastauksena saamme objektin, jossa on kaikki tiedotusvälineiden tiedot. Vastauksena saamamme mediaobjekti toimitetaan sitten BlockEditkomponenttimme rekvisiittana käyttövalmiina. Näppärä.

Varmistamme, että kyselemme mediaa vain, jos mediatunnus-attribuutti todellakin on muu kuin 0. Muokkaustoimintomme näyttää tältä:

Aivan lopussa, jonon sulkemisen jälkeen withSelect, #3pyydämme withSelectpalauttamaan BlockEditkomponenttimme. Tällä BlockEditkomponentillamme on nyt pääsy props.media.

Mediavalinnan renderöiminen

Lopuksi tulee hauska osa: Tarkastajan osa.

Meitä kiinnostava komponentti on MediaUpload(paketti wp.blockEditor). Jos olet kiinnostunut, WordPress Github -repossa Gutenbergille on dokumentaatiota tästä komponentista. Käärimme tämän komponentin myös komponenttiin nimeltä MediaUploadCheck(paketti wp.blockEditor). Tämä komponentti varmistaa, että nykyinen käyttäjä pystyy käyttämään Mediakirjastoa, joten on hyvä käytäntö käyttää tätä.

Komponentissa MediaUploadon vaadittu tuki: render. Tämä komponentti toimii siten, että määritämme rekvisiittalle funktion, renderjossa renderöimme tulosteen "median latausalueelle". Meidän tapauksessamme renderöimme Button(paketin wp.components). MediaUploadin renderöintisovelluksen sisällä saamme pääsyn opentoimintoon, jota voimme kutsua saadaksemme WordPressin avaamaan Mediakirjaston ponnahdusikkunan:

Saatavilla on muutama lisätarvike MediaUpload. Käsittelemme tässä opetusohjelmassa tärkeimmät, jotta se toimisi, mutta voit pelata muutamilla muillakin. Saatat ainakin olla kiinnostunut ehdotuksesta, allowedTypesjossa voit rajoittaa sitä, mitä tiedostotyyppejä on mahdollista valita kirjastosta. Meidän tapauksessamme asetimme sen sallimaan vain kuvat.

LisäämälläMediaUpload

Pura ensin uudet komponentit;

const { Button } = wp.components;
const { MediaUpload, MediaUploadCheck } = wp.blockEditor;

Lisätään MediaUploadCheckja MediaUploadsisällämme: div_PanelBody

Yllä oleva koodi tuhoaa openfunktion sisällä render. Teemme yksinkertaisen, Buttonjossa sen onClickominaisuus suorittaa openfunktion. Olen myös lisännyt samat luokkien nimet kuin WordPressin esitellyt kuvatoiminnot varmistaakseni, ettei meidän tarvitse lisätä mitään tyyliä.

Komponentin sisällä Buttontarkistamme, onko kuva asetettu (attributes.mediaId). Jos näin ei ole, toistamme tekstin "Valitse kuva". Meidän pitäisi nyt saada tämä lohkoomme.

Kun napsautat painiketta, Mediakirjaston ponnahdusikkunan pitäisi ilmestyä. Kuvan valitseminen ei kuitenkaan toimi tällä hetkellä, koska meiltä puuttuu rekvisiitta onSelectja. Korjataan se nyt. Asetamme valitun mediatunnuksen ja asetimme suorittamaan toiminnon, jonka määritämme myöhemmin komponentissamme.value``MediaUpload``value``onSelect

Määritetään onSelectMediafunktio komponentissamme.

Median valinnan käsittely

Huomautus: Määritän funktioni nuolifunktioiksi (onSelectMedia =() => { }). Nuolitoiminnot ovat melko uusia ESNextissä ja melko hienoja. Huono puoli on, että nuolitoimintojen käyttäminen edellyttää, että lisäät tämän tuen Babel-kokoonpanoosi. Jos et ole tehnyt tätä, suosittelen katsomaan tämän viestin otsikon "Babelin määrittäminen" alla .

Juuri ennen komponentin return-lausetta määritän onSelectMediafunktion. Meidän tarvitsee vain päivittää attribuuttimme käyttämällä setAttributes(). Parametriksi onSelectMediasaamme mediaobjektin. Poimimme mediaobjektista vain sen, mitä tarvitsemme. Meidän tapauksessamme se on mediatunnus ja täysikokoinen URL, jotka ovat ominaisuudet idja urlvastaavasti.

Kokeile nyt, niin voit nyt valita kuvan mediakirjastosta. Valittu media tallennetaan lohkon attribuutteihin. Siitä ei kuitenkaan ole vielä esikatselua Inspectorissa, ja koska olet valinnut kuvan, kuvan valintapainike katoaa. Paneeli on nyt tyhjä. Seuraava vaihe on esikatselun renderöiminen aina, kun kuva on valittu, sekä vaihtoehtojen tarjoaminen sen poistamiseen tai muuttamiseen.

Esikatselukuvaa renderöidään

Komponentin sisällä, Buttonjonka renderöimme propin sisällä MediaUpload, rendertoistamme tekstin "Valitse kuva", jos kuvaa ei ole vielä asetettu. Mutta meidän on lisättävä koodi, kun kuva on asetettu tähän; esikatselu.

Käytämme komponenttia ResponsiveWrapper(paketti wp.components) saadaksemme hyvän esikatselun. Jotta ResponsiveWrapperse toimisi täysin, meidän on tarjottava rekvisiitta korkeudelle ja leveydelle. Tarvitsemme myös pikkukuvan URL-osoitteen. Ei ole mitään järkeä käyttää koko URL-osoitetta (joka voi olla jättimäinen) esikatselun tekemiseen Inspectorissa. Tästä withSelecttulee rekvisiitta. Komponentin sisällä renderöimme yksinkertaisen <img>HTML-tunnisteen.

Ensin tuhoamme tarvittavan komponentin:

const { ResponsiveWrapper } = wp.components;

Kuten näette, käytämme withSelectkomponentin meille toimittamaa potkuria, props.media. Haemme objektista median pikkukuvan koon leveyden, korkeuden ja URL-osoitteen.

Sinun pitäisi nyt saada hieno esikatselu valitusta kuvasta!

Koska tuomme esikatselukuvan sisälle, Buttonesikatselukuvan napsauttaminen käynnistää toiminnon Button, onClickjoka on mediakirjaston avaaminen. Näin voit jo muuttaa valittua kuvaa.

Tällä hetkellä valittua kuvaa ei voi poistaa tai nollata. Korjataan se!

Poistotoiminnon lisääminen

Meidän tulisi ainakin tarjota käyttäjälle mahdollisuus poistaa valittu kuva. Tällä hetkellä kun olet valinnut kuvan, voit vain muuttaa sitä, mutta et poistaa sitä.

Teemme sen samalla tavalla kuin WordPress esitellylle kuvalle: Uusi Buttonesikatselukuvan alle (kokonaan sen ulkopuolella MediaUploadCheck). Tarjoamalla näppärää rekvisiittaa Buttonsaamme sen näyttämään linkiltä (isLink), jossa on punainen tekstiväri (isDestructive). Lue Buttonin dokumentaatio nähdäksesi, mitä muuta on mahdollista. Käärimme painikkeen toisen MediaUploadChecksisään varmistaaksemme, että käyttäjällä on oikeat ominaisuudet.

Tätä tapahtumaa Buttonvarten onClicksuoritamme komponenttimme sisällä uuden toiminnon: removeMedia(). Määrittelemme sen jonnekin juuri ennen komponentin paluufunktiota, kuten teimme onSelectMedia.

Tämä toiminto vain nollaa kaksi attribuuttiarvoamme.

Meillä on nyt mukava, selkeä linkki kuvan poistamiseen:

Kun napsautat uutta painiketta, valittu kuva ja itse painike katoavat ja kuvan valintapainike tulee uudelleen näkyviin.

Korvauspainikkeen lisääminen

Tämä vaihe on täysin valinnainen. Kuten aiemmin mainittiin, kuvan esikatselukuvaa napsauttamalla avautuu Mediakirjasto ja voit vaihtaa kuvaa. Tämä ei kuitenkaan välttämättä ole niin intuitiivista kaikkien ymmärrettäväksi. WordPress lisää erillisen painikkeen kuvan vaihtamista varten, jotta se olisi erittäin selkeä. Voimme tehdä samoin.

Muuta kuva -painikkeen näyttämiseksi toistamme periaatteessa koodin, joka meillä on kuvan valitsemiseksi: toinen MediaUploadkomponentti. Tarjoamme saman toiminnon onSelect, allowedFileTypesja valuekuten ennenkin. Rekvisiitin sisällä renderrenderöimme MediaUploadyksinkertaisesti toisen Button, joka avaa Mediakirjaston. Laitetaan tämä painike ennen Poista-painiketta – koska tämä on järkevämpää loppukäyttäjälle:

Joten nyt sinun pitäisi saada tämä:

Valitun kuvan käyttäminen

Tähän mennessä pitäisi olla melko selvää, kuinka voit käyttää valittua kuvaa. Mediatunnus ja median URL-osoite on tallennettu lohkosi attribuutteihin. Kuitenkin yksinkertaisena esimerkkinä sisällytän koodin, joka asettaa valitun kuvan lohkon taustaksi. Koodi voidaan tehdä täsmälleen samalla tavalla sekä toiminnoissa editettä savetoiminnoissa. Luomme yksinkertaisesti tyyliobjektin, jota käytämme lohkon rivitysdiv:ssä. Asetamme tyyliobjektissa taustakuvan median URL-osoitteeseen.

Muun mukautetun lohkon sisällön kanssa se voi helposti näyttää tältä:

Jos käytät lohkotyyliä sekä editja saveettä, lohkosi pitäisi nyt saada valittu media taustaksi. Sekä editorin sisällä että käyttöliittymässä.

Johtopäätös

Kuvan (tai tiedoston) valitseminen Mediakirjastosta on toiminto, jota sinä Gutenberg-kehittäjänä epäilemättä tarvitset lohkoihisi. Olemme oppineet lisäämään toiminnon kuvan valitsemiseksi mediakirjastosta mukautetussa Gutenberg-lohkossamme. Olemme tehneet sen samalla tavalla kuin WordPress itse tekee sen esitellylle kuvalle. (Muokkaa toukokuuta 2020: WordPress on nyt päivittänyt käytettäväksi esittelykuvan useSelect, sen sijaan React-koukun). Tämä varmistaa, että koodimme ei ole "hakkeroitu" ja suuri riski rikkoutua tulevissa päivityksissä.

Kerro minulle, jos olet käyttänyt tätä!

Täysi koodi

Alla on koko koodi mukautetulle lohkolle, joka sisältää valitun mediatoiminnon. Eikä oikeastaan ​​mitään muuta. Se osa on sinun!