See postitus on mõeldud teile, kes loote kohandatud Gutenbergi plokki ja vajate viisi meediateegist pildi valimiseks või üleslaadimiseks. Enamikku muid väljatüüpe, nagu märkeruudud, tekstisisendid või värvivalijad, on üsna lihtne lisada, kuid meediumi üleslaadija nõuab natuke rohkem koodi. Loome komponendi Inspector, mis vastutab meediateegi avamise nupu renderdamise, pildi valimise ja soovi korral selle hiljem eemaldamise või muutmise eest. Kõik kasutavad standardseid WordPressi komponente.
Enne koodi sukeldumist pidage meeles, et see postitus nõuab teatud Gutenbergi teadmisi kohandatud plokkide kirjutamise kohta. Keskendume ainult meedia üleslaadija osale, mitte sellele, kuidas registreerida ja teha Gutenbergi blokk. Kui te pole kindel, kuidas kohandatud Gutenbergi plokki kirjutada, on mul õpetuste seeria, mis hõlmab täpselt seda:
Kui see on eemal, sukeldume otse sisse!
Mida me teeme
Valitud meediumifunktsioon on funktsionaalselt täpselt sama, mis WordPressi esiletõstetud pildifunktsioon. Lisame inspektorisse paneeli, mis koosneb nupust pildi valimiseks.
Kui klõpsate nupul, avaneb aken "Vali või laadige üles meedium", mis võimaldab teil valida faili meediumiteegist. Meediumiteek on piiratud ainult piltide kuvamisega. Kui pilt on valitud, hüpikaken sulgub ja paneel kuvab faili eelvaate. valitud pildi väike pisipilt. All kuvatakse eelvaate nupud pildi muutmiseks ja eemaldamiseks. Täpselt nagu esiletoodud pildi puhul.
See õpetus eeldab, et kasutate valitud pilti ploki taustana – lihtsalt näitena. Seetõttu salvestame pildi URL-i. Lisan näite, kuidas valitud pilti kasutada (nii funktsioonis editkui ka savefunktsioonis). Pildi valimisel kuvatakse pilt meie ploki taustana nii redaktoris kui ka eesmises.
Meediumi ID ja meediumi URL-i salvestame ploki atribuutidesse. Kood kasutab ID-ga valitud meediumi kohta lisateabe pärimiseks paketis withSelectsisalduvat kõrgema järgu komponenti .wp.data
Samuti "laenan" klassinimesid WordPressi esiletõstetud pildifunktsioonidest, et kõik näeks hea välja ja poleks vaja ise CSS-i kirjutada. See on loomulikult vabatahtlik.
Valitud kandja salvestamine atribuutidesse
See, mida peate oma ploki atribuutidesse salvestama, on pisut teie enda otsustada. Ilmselgelt peame salvestama meediumi ID. Sellest võib piisata, kui te ei pea skriptikoodis kuskil kasutama meedia URL-i. Näiteks kui kasutate ServerSideRenderkohta, kus PHP vastutab ploki väljundi renderdamise eest. Sel juhul saate hõlpsasti meediumi ID-st pildi URL-i hankida, kasutades näiteks [wp_get_attachment_image_src](https://developer.wordpress.org/reference/functions/wp_get_attachment_image_src/)(). Allolevas näites näitan aga lihtsat näidet pildi kuvamisest meie ploki taustana, seega salvestan atribuudina ka meediumi URL-i. Kasutame URL-i atribuuti nii edit(tausta lisamiseks redaktoris) kui ka save(tausta lisamiseks kasutajaliidesesse).
Alustame oma atribuutide määratlemisest. Meediumi ID peaks olema tüübinumber ja vaikimisi 0. See muudab võrdlemise lihtsaks. Ja meediumi URL peaks olema tüüpstring ja vaikimisi tühi string.
attributes: {
mediaId: {
type: 'number',
default: 0
},
mediaUrl: {
type: 'string',
default: ''
}
},Komponendi loomine
Koodi korrapärasemaks muutmiseks määratleme ploki editfunktsiooni jaoks eraldi komponendi. Edastame selle komponendi hiljem withSelectoma komponendi ümber mähkimiseks.
<div>Komponendi tagastuses renderdame ploki sisu jaoks lihtsa. Eeldan, et näidissisu asendamiseks blokeerite või blokeerite tegeliku sisu. Samuti renderdame InspectorControls(pakett wp.blockEditor), et lisada inspektorile jaotis. Praegu lisan tühja PanelBodysees InspectorControls. Lisan <div>sama klassiga, mida kasutab WordPressi esiletõstetud piltide jaotis. See tagab, et meie stiil näeb hea välja. Hiljem täidame selle PanelBodyvalitud meediumifunktsiooni koodiga.
Kuid kõigepealt hävitame faili alguses vajaliku komponendi:
const { InspectorControls } = wp.blockEditor;
const { PanelBody } = wp.components;
const { Fragment } = wp.element;Ülalpool registerBlockTypemääratlen lihtsa komponendi nimega BlockEdit. Kui eelistate selle teisaldada eraldi faili, võite seda teha. See on tavaline ja soovitatav, kuid selle õpetuse jaoks hoian asjad lihtsana ja hoian seda samas failis.
Nüüd tahame selle komponendi oma editfunktsioonis renderdada. Kuid me tahame selle pakkida withSelect.
Funktsioonis kasutamine withSelect_edit
Kui te ei tunne withSelect, on see kasulik kõrgemat järku komponent, mis võimaldab meil päringuid teha. Selle abil saate näiteks postitusi pärida. Siiski kasutame funktsiooni select('core').getMedia()meediumi ID päringu tegemiseks. Vastuseks saame objekti kogu meedia teabega. Meediaobjekt, mille me vastuseks saame, esitatakse seejärel meie BlockEditkomponendi rekvisiidina, mis on kasutusvalmis. Tubli.
Teeme meediumi päringu ainult siis, kui meediumi ID atribuudiks on tegelikult seatud midagi muud kui 0. Meie redigeerimisfunktsioon näeb välja selline:
Päris lõpus, pärast withSelectjärjekorras sulgemist, #3palume withSelectoma BlockEditkomponendi tagastada. Sellega on meie BlockEditkomponendil nüüd juurdepääs props.media.
Meediumivaliku renderdamine
Lõpuks tuleb lõbus osa: inspektori osa.
Komponent, millest oleme huvitatud, on MediaUpload(pakett wp.blockEditor). Kui olete huvitatud, on Gutenbergi WordPressi Githubi repos selle komponendi kohta dokumentatsiooni. Samuti mähime selle komponendi komponendi sisse nimega MediaUploadCheck(pakett wp.blockEditor). See komponent tagab, et praegusel kasutajal on meediateegi kasutamise võimalused, seega on selle kasutamine hea tava.
Komponendil MediaUploadon vajalik tugi: render. See komponent töötab nii, et määratleme renderrekvisiidi jaoks funktsiooni, kus renderdame väljundi „meediumi üleslaadija ala" jaoks. Meie puhul renderdame Button(paketi wp.components). MediaUploadi renderdusrekvisiidis saame juurdepääsu openfunktsioonile, mida saame kutsuda, et panna WordPress avama Media Library hüpikakna:
Saadaval on veel mõned rekvisiidid MediaUpload. Selles õpetuses käsitleme selle funktsionaalseks muutmiseks olulisi, kuid saate mängida veel mõnega. Teid võib vähemalt huvitada rekvisiit, allowedTypeskus saate piirata, milliseid failitüüpe on võimalik teegis valida. Meie puhul määrasime selle lubama ainult pilte.
LisadesMediaUpload
Destruktureerige esmalt uued komponendid;
const { Button } = wp.components;
const { MediaUpload, MediaUploadCheck } = wp.blockEditor;Lisame MediaUploadCheckja MediaUploadmeie divsisse PanelBody:
Eespool olev kood destruktureerib openfunktsiooni render. Teeme lihtsaks, Buttonkus selle onClickatribuut funktsiooni käivitab open. Lisasin ka samad klassinimed, mis WordPressi esiletõstetud pildifunktsioonidele, tagamaks, et meil pole vaja stiili lisada.
Komponendi sees Buttonkontrollime, kas pilt on seatud või mitte (attributes.mediaId). Kui ei ole, kordame teksti "Vali pilt". Peaksime selle nüüd oma plokki saama.
Kui klõpsate nuppu, peaks ilmuma hüpikaken Media Library. Kujutise valimine aga praegu ei toimi, kuna meil puuduvad küljes olevad rekvisiidid onSelectja. Teeme selle nüüd korda. Seadsime valitud meediumi ID-le ja käivitame funktsiooni, mille hiljem oma komponendi sees määratleme.value``MediaUpload``value``onSelect
Määratleme onSelectMediafunktsiooni meie komponendis.
Meediumivaliku käsitlemine
Märkus: defineerin oma funktsioonid noolefunktsioonidena (onSelectMedia =() => { }). Noolefunktsioonid on ESNextis üsna uued ja üsna nutikad. Negatiivne külg on see, et noolefunktsioonide kasutamine eeldab selle toe lisamist oma Babeli konfiguratsioonis. Kui te pole seda teinud, soovitan vaadata selle postituse pealkirja "Babeli seadistamine" alt .
Vahetult enne komponendi tagastuslauset defineerin onSelectMediafunktsiooni. Kõik, mida me peame tegema, on värskendada oma atribuute kasutades setAttributes(). Parameetrina onSelectMediasaame meediumiobjekti. Me lihtsalt ammutame meediaobjektist selle, mida vajame. Meie puhul on see meediumi ID ja täissuuruses URL, mis on vastavalt atribuudid id.url
Proovige seda kohe ja saate nüüd valida pildi meediumiteegist. Valitud meedium salvestatakse ploki atribuutidesse. Kuid Inspektoris pole selle eelvaadet veel näha ja kuna olete pildi valinud, kaob pildi valimise nupp. Paneel on nüüd tühi. Järgmine samm on eelvaate renderdamine iga kord, kui pilt on valitud, samuti valikuvõimaluste pakkumine selle eemaldamiseks või muutmiseks.
Eelvaatepildi renderdamine
Rekvisiidis Buttonrenderdatava komponendi sees kordame teksti "Vali pilt", kui pilt pole veel määratud MediaUpload. renderKuid me peame lisama koodi, kui pilt on siin seatud; eelvaade.
Kena eelvaate renderdamiseks kasutame komponenti ResponsiveWrapper(pakett wp.components). Täielikuks ResponsiveWrappertoimimiseks peame tagama kõrguse ja laiuse rekvisiidid. Vajame ka pisipildi URL-i. Inspektori sees eelvaate kuvamiseks pole mõtet kasutada täielikku URL-i (mis võib olla hiiglaslik). Siit tulebki rekvisiit withSelect. Komponendi sees renderdame lihtsa <img>HTML-märgendi.
Kõigepealt destruktureerime vajaliku komponendi:
const { ResponsiveWrapper } = wp.components;Nagu näete, pääseme juurde rekvisiidile, mille withSelectkomponent meile andis, props.media. Toome objektilt meediumi pisipildi suuruse laiuse, kõrguse ja URL-i.
Nüüd peaksite saama valitud pildist kena eelvaate!
Kuna renderdame eelvaatepildi sees Button, käivitab eelvaatepildil klõpsamine funktsiooni, Buttonmilleks onClickon meediateegi avamine. Nii saad juba valitud pilti muuta.
Praegu ei saa valitud pilti eemaldada ega lähtestada. Teeme selle korda!
Eemaldamisfunktsiooni lisamine
Peaksime pakkuma vähemalt kasutajale võimalust valitud pilt eemaldada. Praeguse seisuga saate pärast pildi valimist seda ainult muuta, kuid mitte eemaldada.
Teeme seda sama, mida WordPress teeb esiletõstetud pildi puhul: uus Buttoneelvaatepildi all (täiesti väljaspool seda MediaUploadCheck). Pakkudes sellele nutikaid rekvisiite, Buttonmuudame selle isLinkpunase tekstivärviga () lingiks (isDestructive). Lugege Buttoni dokumentatsiooni, et näha, mis veel on võimalik. Mähkime nupu veel ühe sisse MediaUploadCheck, et tagada kasutajal õiged võimalused.
Selle sündmuse jaoks Buttonkäivitame onClickoma komponendi sees uue funktsiooni: removeMedia(). Määratleme selle kuskil vahetult enne komponendi tagastusfunktsiooni, nagu tegime onSelectMedia.
Kõik see funktsioon on meie kahe atribuudi väärtuse lähtestamine.
Nüüd on meil kena ja selge link pildi eemaldamiseks:
Kui klõpsate uuel nupul, kaob valitud pilt ja nupp ise ning uuesti ilmub pildi valimise nupp.
Asendusnupu lisamine
See samm on täiesti vabatahtlik. Nagu varem mainitud, avaneb pildi eelvaatepildil klõpsamine Media Library ja võimaldab pilti muuta. Kuid see ei pruugi kõigile nii intuitiivne olla. WordPress lisab pildi muutmiseks eraldi nupu, et see oleks väga selge. Meie saame sama teha.
Pildi muutmise nupu renderdamiseks kordame põhimõtteliselt koodi, mis meil on pildi valimiseks: teine MediaUploadkomponent. Pakume sama funktsiooni onSelectnagu allowedFileTypesvaremgi value. Rekvisiidi sees renderrenderdame MediaUploadlihtsalt teise Button, mis avab meediumiteegi. Asetame selle nupu enne nuppu Eemalda – kuna see on lõppkasutaja jaoks mõttekam:
Nüüd peaksite saama selle:
Valitud pildi kasutamine
Nüüdseks peaks juba üsna selge olema, kuidas saad valitud pilti kasutada. Meediumi ID ja meediumi URL on salvestatud ploki atribuutidesse. Lihtsa näitena lisan aga koodi, mis seab valitud pildi ploki taustaks. Koodi saab teha täpselt sama nii funktsioonides editkui ka savefunktsioonides. Loome lihtsalt stiiliobjekti, mille rakendame ploki ümbrislausele. Stiiliobjektis määrame meediumi URL-i taustapildi.
Ülejäänud kohandatud ploki sisuga võib see hõlpsasti välja näha umbes selline:
Kui rakendate plokistiili mõlemas editja save, peaks teie plokk saama valitud meediumi taustaks. Nii toimetaja sees kui ka frontendis.
Järeldus
Meediumiteegist pildi (või faili) valimine on funktsioon, mida Gutenbergi arendajana kahtlemata oma plokkide jaoks vajate. Oleme õppinud, kuidas lisada oma kohandatud Gutenbergi plokis funktsiooni meediumiteegist pildi valimiseks. Oleme seda teinud samamoodi nagu WordPress ise teeb seda esiletoodud pildi puhul. (Redigeeri mai 2020: WordPress on nüüd värskendanud kasutamiseks esiletoodud pilti useSelect, selle asemel Reacti konks). See tagab, et meie kood ei ole "häkkinud" ja tulevaste värskenduste puhul on suur oht, et see puruneb.
Andke mulle teada, kui teil on sellest kasu olnud!
Täielik kood
Allpool on täielik kood kohandatud ploki jaoks, millel on valitud meediumifunktsioon. Ja tegelikult ei midagi muud. See osa on teie otsustada!