![\"Kuidas](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-153621-61e511f57cf93.png\")
<\/a><\/p>\nValitud meediumifunktsioon on funktsionaalselt t\u00e4pselt sama, mis WordPressi esilet\u00f5stetud pildifunktsioon. Lisame inspektorisse paneeli, mis koosneb nupust pildi valimiseks.<\/p>\n
Kui kl\u00f5psate nupul, avaneb aken "Vali v\u00f5i laadige \u00fcles meedium", mis v\u00f5imaldab teil valida faili meediumiteegist. Meediumiteek on piiratud ainult piltide kuvamisega. Kui pilt on valitud, h\u00fcpikaken sulgub ja paneel kuvab faili eelvaate. valitud pildi v\u00e4ike pisipilt. All kuvatakse eelvaate nupud pildi muutmiseks ja eemaldamiseks. T\u00e4pselt nagu esiletoodud pildi puhul.<\/p>\n
See \u00f5petus eeldab, et kasutate valitud pilti ploki taustana \u2013 lihtsalt n\u00e4itena. Seet\u00f5ttu salvestame pildi URL-i. Lisan n\u00e4ite, kuidas valitud pilti kasutada (nii funktsioonis Meediumi ID ja meediumi URL-i salvestame ploki atribuutidesse. Kood kasutab ID-ga valitud meediumi kohta lisateabe p\u00e4rimiseks paketis Samuti "laenan" klassinimesid WordPressi esilet\u00f5stetud pildifunktsioonidest, et k\u00f5ik n\u00e4eks hea v\u00e4lja ja poleks vaja ise CSS-i kirjutada. See on loomulikult vabatahtlik.<\/p>\n See, mida peate oma ploki atribuutidesse salvestama, on pisut teie enda otsustada. Ilmselgelt peame salvestama meediumi ID. Sellest v\u00f5ib piisata, kui te ei pea skriptikoodis kuskil kasutama meedia URL-i. N\u00e4iteks kui kasutate Alustame oma atribuutide m\u00e4\u00e4ratlemisest. Meediumi ID peaks olema t\u00fc\u00fcbinumber ja vaikimisi 0. See muudab v\u00f5rdlemise lihtsaks. Ja meediumi URL peaks olema t\u00fc\u00fcpstring ja vaikimisi t\u00fchi string.<\/p>\n Koodi korrap\u00e4rasemaks muutmiseks m\u00e4\u00e4ratleme ploki Kuid k\u00f5igepealt h\u00e4vitame faili alguses vajaliku komponendi:<\/p>\n \u00dclalpool N\u00fc\u00fcd tahame selle komponendi oma Kui te ei tunne Teeme meediumi p\u00e4ringu ainult siis, kui meediumi ID atribuudiks on tegelikult seatud midagi muud kui 0. Meie redigeerimisfunktsioon n\u00e4eb v\u00e4lja selline:<\/p>\n P\u00e4ris l\u00f5pus, p\u00e4rast L\u00f5puks tuleb l\u00f5bus osa: inspektori osa.<\/p>\n Komponent, millest oleme huvitatud, on Komponendil Saadaval on veel m\u00f5ned rekvisiidid Destruktureerige esmalt uued komponendid;<\/p>\n Lisame Eespool olev kood destruktureerib Komponendi sees Kui kl\u00f5psate nuppu, peaks ilmuma h\u00fcpikaken Media Library. Kujutise valimine aga praegu ei toimi, kuna meil puuduvad k\u00fcljes olevad rekvisiidid M\u00e4\u00e4ratleme M\u00e4rkus<\/strong>: defineerin oma funktsioonid noolefunktsioonidena ( Vahetult enne komponendi tagastuslauset defineerin Proovige seda kohe ja saate n\u00fc\u00fcd valida pildi meediumiteegist. Valitud meedium salvestatakse ploki atribuutidesse. Kuid Inspektoris pole selle eelvaadet veel n\u00e4ha ja kuna olete pildi valinud, kaob pildi valimise nupp. Paneel on n\u00fc\u00fcd t\u00fchi. J\u00e4rgmine samm on eelvaate renderdamine iga kord, kui pilt on valitud, samuti valikuv\u00f5imaluste pakkumine selle eemaldamiseks v\u00f5i muutmiseks.<\/p>\n Rekvisiidis Kena eelvaate renderdamiseks kasutame komponenti K\u00f5igepealt destruktureerime vajaliku komponendi:<\/p>\n Nagu n\u00e4ete, p\u00e4\u00e4seme juurde rekvisiidile, mille N\u00fc\u00fcd peaksite saama valitud pildist kena eelvaate!<\/p>\n Kuna renderdame eelvaatepildi sees Praegu ei saa valitud pilti eemaldada ega l\u00e4htestada. Teeme selle korda!<\/p>\n Peaksime pakkuma v\u00e4hemalt kasutajale v\u00f5imalust valitud pilt eemaldada. Praeguse seisuga saate p\u00e4rast pildi valimist seda ainult muuta, kuid mitte eemaldada.<\/p>\n Teeme seda sama, mida WordPress teeb esilet\u00f5stetud pildi puhul: uus Selle s\u00fcndmuse jaoks K\u00f5ik see funktsioon on meie kahe atribuudi v\u00e4\u00e4rtuse l\u00e4htestamine.<\/p>\n N\u00fc\u00fcd on meil kena ja selge link pildi eemaldamiseks:<\/p>\n Kui kl\u00f5psate uuel nupul, kaob valitud pilt ja nupp ise ning uuesti ilmub pildi valimise nupp.<\/p>\n See samm on t\u00e4iesti vabatahtlik. Nagu varem mainitud, avaneb pildi eelvaatepildil kl\u00f5psamine Media Library ja v\u00f5imaldab pilti muuta. Kuid see ei pruugi k\u00f5igile nii intuitiivne olla. WordPress lisab pildi muutmiseks eraldi nupu, et see oleks v\u00e4ga selge. Meie saame sama teha.<\/p>\n Pildi muutmise nupu renderdamiseks kordame p\u00f5him\u00f5tteliselt koodi, mis meil on pildi valimiseks: teine N\u00fc\u00fcd peaksite saama selle:<\/p>\nedit<\/code>kui ka save<\/code>funktsioonis). Pildi valimisel kuvatakse pilt meie ploki taustana nii redaktoris kui ka eesmises.<\/p>\nwithSelect<\/code>sisalduvat k\u00f5rgema j\u00e4rgu komponenti .wp.data<\/code><\/p>\nValitud kandja salvestamine atribuutidesse<\/h2>\n
ServerSideRender<\/code>kohta, kus PHP vastutab ploki v\u00e4ljundi renderdamise eest. Sel juhul saate h\u00f5lpsasti meediumi ID-st pildi URL-i hankida, kasutades n\u00e4iteks [wp_get_attachment_image_src](https:\/\/developer.wordpress.org\/reference\/functions\/wp_get_attachment_image_src\/)()<\/code>. Allolevas n\u00e4ites n\u00e4itan aga lihtsat n\u00e4idet pildi kuvamisest meie ploki taustana, seega salvestan atribuudina ka meediumi URL-i. Kasutame URL-i atribuuti nii edit<\/code>(tausta lisamiseks redaktoris) kui ka save<\/code>(tausta lisamiseks kasutajaliidesesse).<\/p>\nattributes: {\n mediaId: {\n type: 'number',\n default: 0\n },\n mediaUrl: {\n type: 'string',\n default: ''\n }\n},<\/code><\/pre>\nKomponendi loomine<\/h2>\n
edit<\/code>funktsiooni jaoks eraldi komponendi. Edastame selle komponendi hiljem withSelect<\/code>oma komponendi \u00fcmber m\u00e4hkimiseks.<\/p>\n<div><\/code>Komponendi tagastuses renderdame ploki sisu jaoks lihtsa. Eeldan, et n\u00e4idissisu asendamiseks blokeerite v\u00f5i blokeerite tegeliku sisu. Samuti renderdame InspectorControls<\/code>(pakett wp.blockEditor<\/code>), et lisada inspektorile jaotis. Praegu lisan t\u00fchja PanelBody<\/code>sees InspectorControls<\/code>. Lisan <div><\/code>sama klassiga, mida kasutab WordPressi esilet\u00f5stetud piltide jaotis. See tagab, et meie stiil n\u00e4eb hea v\u00e4lja. Hiljem t\u00e4idame selle PanelBody<\/code>valitud meediumifunktsiooni koodiga.<\/p>\nconst { InspectorControls } = wp.blockEditor;\nconst { PanelBody } = wp.components;\nconst { Fragment } = wp.element;<\/code><\/pre>\nregisterBlockType<\/code>m\u00e4\u00e4ratlen lihtsa komponendi nimega BlockEdit<\/code>. Kui eelistate selle teisaldada eraldi faili, v\u00f5ite seda teha. See on tavaline ja soovitatav, kuid selle \u00f5petuse jaoks hoian asjad lihtsana ja hoian seda samas failis.<\/p>\nconst BlockEdit = (props) => {\n const { attributes, setAttributes } = props;\n\u00a0\n return (<Fragment>\n <InspectorControls>\n <PanelBody\n title={__('Select block background image', 'awp')}\n initialOpen={ true }\n >\n <div className=\"editor-post-featured-image\">\n ...We will add code here...\n <\/div>\n <\/PanelBody>\n <\/InspectorControls>\n <div>\n ... Your block content here...\n <\/div>\n <\/Fragment>\n );\n};<\/code><\/pre>\nedit<\/code>funktsioonis renderdada. Kuid me tahame selle pakkida withSelect<\/code>.<\/p>\nFunktsioonis kasutamine
withSelect<\/code>_edit<\/code><\/h2>\nwithSelect<\/code>, on see kasulik k\u00f5rgemat j\u00e4rku komponent, mis v\u00f5imaldab meil p\u00e4ringuid teha. Selle abil saate n\u00e4iteks postitusi p\u00e4rida. Siiski kasutame funktsiooni select('core').getMedia()<\/code>meediumi ID p\u00e4ringu tegemiseks. Vastuseks saame objekti kogu meedia teabega. Meediaobjekt, mille me vastuseks saame, esitatakse seej\u00e4rel meie BlockEdit<\/code>komponendi rekvisiidina, mis on kasutusvalmis. Tubli.<\/p>\nedit: withSelect((select, props) => {\n return { media: props.attributes.mediaId? select('core').getMedia(props.attributes.mediaId): undefined };\n})(BlockEdit),<\/code><\/pre>\nwithSelect<\/code>j\u00e4rjekorras sulgemist, #3<\/code>palume withSelect<\/code>oma BlockEdit<\/code>komponendi tagastada. Sellega on meie BlockEdit<\/code>komponendil n\u00fc\u00fcd juurdep\u00e4\u00e4s props.media<\/code>.<\/p>\nMeediumivaliku renderdamine<\/h2>\n
MediaUpload<\/code>(pakett wp.blockEditor<\/code>). Kui olete huvitatud, on Gutenbergi WordPressi Githubi repos selle komponendi kohta dokumentatsiooni<\/a>. Samuti m\u00e4hime selle komponendi komponendi sisse nimega MediaUploadCheck<\/code>(pakett wp.blockEditor<\/code>). See komponent tagab, et praegusel kasutajal on meediateegi kasutamise v\u00f5imalused, seega on selle kasutamine hea tava.<\/p>\nMediaUpload<\/code>on vajalik tugi: render<\/code>. See komponent t\u00f6\u00f6tab nii, et m\u00e4\u00e4ratleme render<\/code>rekvisiidi jaoks funktsiooni, kus renderdame v\u00e4ljundi \u201emeediumi \u00fcleslaadija ala" jaoks. Meie puhul renderdame Button<\/code>(paketi wp.components<\/code>). MediaUploadi renderdusrekvisiidis saame juurdep\u00e4\u00e4su open<\/code>funktsioonile, mida saame kutsuda, et panna WordPress avama Media Library h\u00fcpikakna:<\/p>\n<\/a><\/p>\nMediaUpload<\/code>. Selles \u00f5petuses k\u00e4sitleme selle funktsionaalseks muutmiseks olulisi, kuid saate m\u00e4ngida veel m\u00f5nega. Teid v\u00f5ib v\u00e4hemalt huvitada rekvisiit, allowedTypes<\/code>kus saate piirata, milliseid failit\u00fc\u00fcpe on v\u00f5imalik teegis valida. Meie puhul m\u00e4\u00e4rasime selle lubama ainult pilte.<\/p>\nLisades
MediaUpload<\/code><\/h3>\nconst { Button } = wp.components;\nconst { MediaUpload, MediaUploadCheck } = wp.blockEditor;<\/code><\/pre>\nMediaUploadCheck<\/code>ja MediaUpload<\/code>meie div<\/code>sisse PanelBody<\/code>:<\/p>\n<div className=\"editor-post-featured-image\">\n <MediaUploadCheck>\n <MediaUpload\n allowedTypes={ ['image'] }\n render={({open}) => (<Button \n className={attributes.mediaId == 0? 'editor-post-featured-image__toggle': 'editor-post-featured-image__preview'}\n onClick={open}\n >\n {attributes.mediaId == 0 && __('Choose an image', 'awp')}\n <\/Button>\n )}\n \/>\n <\/MediaUploadCheck>\n<\/div><\/code><\/pre>\n<\/a><\/p>\nopen<\/code>funktsiooni render<\/code>. Teeme lihtsaks, Button<\/code>kus selle onClick<\/code>atribuut funktsiooni k\u00e4ivitab open<\/code>. Lisasin ka samad klassinimed, mis WordPressi esilet\u00f5stetud pildifunktsioonidele, tagamaks, et meil pole vaja stiili lisada.<\/p>\nButton<\/code>kontrollime, kas pilt on seatud v\u00f5i mitte (attributes.mediaId<\/code>). Kui ei ole, kordame teksti "Vali pilt". Peaksime selle n\u00fc\u00fcd oma plokki saama.<\/p>\nonSelect<\/code>ja. Teeme selle n\u00fc\u00fcd korda. Seadsime valitud meediumi ID-le ja k\u00e4ivitame funktsiooni, mille hiljem oma komponendi sees m\u00e4\u00e4ratleme.value``MediaUpload``value``onSelect<\/code><\/p>\n...\n<MediaUploadCheck>\n <MediaUpload\n onSelect={onSelectMedia}\n value={attributes.mediaId}\n allowedTypes={ ['image'] }\n ...<\/code><\/pre>\nonSelectMedia<\/code>funktsiooni meie komponendis.<\/p>\nMeediumivaliku k\u00e4sitlemine<\/h3>\n
onSelectMedia =() => { }<\/code>). Noolefunktsioonid on ESNextis \u00fcsna uued ja \u00fcsna nutikad. Negatiivne k\u00fclg on see, et noolefunktsioonide kasutamine eeldab selle toe lisamist oma Babeli konfiguratsioonis. Kui te pole seda teinud, soovitan vaadata selle postituse<\/a> pealkirja "Babeli seadistamine" alt .<\/p>\nonSelectMedia<\/code>funktsiooni. K\u00f5ik, mida me peame tegema, on v\u00e4rskendada oma atribuute kasutades setAttributes()<\/code>. Parameetrina onSelectMedia<\/code>saame meediumiobjekti. Me lihtsalt ammutame meediaobjektist selle, mida vajame. Meie puhul on see meediumi ID ja t\u00e4issuuruses URL, mis on vastavalt atribuudid id<\/code>.url<\/code><\/p>\nconst BlockEdit = (props) => {\n const { attributes, setAttributes } = props;\n\u00a0\n const onSelectMedia = (media) => {\n props.setAttributes({\n mediaId: media.id,\n mediaUrl: media.url\n });\n }\n\u00a0\n return(\n ...<\/code><\/pre>\nEelvaatepildi renderdamine<\/h2>\n
Button<\/code>renderdatava komponendi sees kordame teksti "Vali pilt", kui pilt pole veel m\u00e4\u00e4ratud MediaUpload<\/code>. render<\/code>Kuid me peame lisama koodi, kui pilt on siin seatud; eelvaade.<\/p>\nResponsiveWrapper<\/code>(pakett wp.components<\/code>). T\u00e4ielikuks ResponsiveWrapper<\/code>toimimiseks peame tagama k\u00f5rguse ja laiuse rekvisiidid. Vajame ka pisipildi URL-i. Inspektori sees eelvaate kuvamiseks pole m\u00f5tet kasutada t\u00e4ielikku URL-i (mis v\u00f5ib olla hiiglaslik). Siit tulebki rekvisiit withSelect<\/code>. Komponendi sees renderdame lihtsa <img><\/code>HTML-m\u00e4rgendi.<\/p>\nconst { ResponsiveWrapper } = wp.components;<\/code><\/pre>\n<Button \n className={attributes.mediaId == 0? 'editor-post-featured-image__toggle': 'editor-post-featured-image__preview'}\n onClick={open}\n>\n {attributes.mediaId == 0 && __('Choose an image', 'awp')}\n {props.media != undefined && \n <ResponsiveWrapper\n naturalWidth={ props.media.media_details.width }\n naturalHeight={ props.media.media_details.height }\n >\n <img src={props.media.source_url} \/>\n <\/ResponsiveWrapper>\n }\n<\/Button><\/code><\/pre>\nwithSelect<\/code>komponent meile andis, props.media<\/code>. Toome objektilt meediumi pisipildi suuruse laiuse, k\u00f5rguse ja URL-i.<\/p>\nButton<\/code>, k\u00e4ivitab eelvaatepildil kl\u00f5psamine funktsiooni, Button<\/code>milleks onClick<\/code>on meediateegi avamine. Nii saad juba valitud pilti muuta.<\/p>\nEemaldamisfunktsiooni lisamine<\/h3>\n
Button<\/code>eelvaatepildi all (t\u00e4iesti v\u00e4ljaspool seda MediaUploadCheck<\/code>). Pakkudes sellele nutikaid rekvisiite, Button<\/code>muudame selle isLink<\/code>punase tekstiv\u00e4rviga () lingiks (isDestructive<\/code>). Lugege Buttoni dokumentatsiooni,<\/a> et n\u00e4ha, mis veel on v\u00f5imalik. M\u00e4hkime nupu veel \u00fche sisse MediaUploadCheck<\/code>, et tagada kasutajal \u00f5iged v\u00f5imalused.<\/p>\n ...\n <\/MediaUploadCheck>\n {attributes.mediaId != 0 && \n <MediaUploadCheck>\n <Button onClick={removeMedia} isLink isDestructive>{__('Remove image', 'awp')}<\/Button>\n <\/MediaUploadCheck>\n }\n <\/div>\n<\/PanelBody><\/code><\/pre>\nButton<\/code>k\u00e4ivitame onClick<\/code>oma komponendi sees uue funktsiooni: removeMedia()<\/code>. M\u00e4\u00e4ratleme selle kuskil vahetult enne komponendi tagastusfunktsiooni, nagu tegime onSelectMedia<\/code>.<\/p>\nconst removeMedia =() => {\n props.setAttributes({\n mediaId: 0,\n mediaUrl: ''\n });\n}<\/code><\/pre>\n<\/a><\/p>\nAsendusnupu lisamine<\/h3>\n
MediaUpload<\/code>\u200b\u200bkomponent. Pakume sama funktsiooni onSelect<\/code>nagu allowedFileTypes<\/code>varemgi value<\/code>. Rekvisiidi sees render<\/code>renderdame MediaUpload<\/code>lihtsalt teise Button<\/code>, mis avab meediumiteegi. Asetame selle nupu enne nuppu Eemalda \u2013 kuna see on l\u00f5ppkasutaja jaoks m\u00f5ttekam:<\/p>\n<\/MediaUploadCheck>\n{attributes.mediaId != 0 && \n <MediaUploadCheck>\n <MediaUpload\n title={__('Replace image', 'awp')}\n value={attributes.mediaId}\n onSelect={onSelectMedia}\n allowedTypes={['image']}\n render={({open}) => (<Button onClick={open} isDefault isLarge>{__('Replace image', 'awp')}<\/Button>\n )}\n \/>\n <\/MediaUploadCheck>\n}\n{attributes.mediaId != 0 && \n <MediaUploadCheck>\n <Button onClick={removeMedia} ...<\/code><\/pre>\n