![\"Kuvavalinnan](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-153621-61e511f57cf93.png\")
<\/a><\/p>\nValittu mediatoiminto on toiminnallisesti t\u00e4sm\u00e4lleen sama kuin WordPressin esittelykuvatoiminto. Lis\u00e4\u00e4mme Inspectoriin paneelin, joka koostuu painikkeesta kuvan valitsemiseksi.<\/p>\n
Kun napsautat painiketta, n\u00e4kyviin tulee "Valitse tai l\u00e4het\u00e4 media" -ikkuna, josta voit valita tiedoston mediakirjastosta. Rajoitamme Mediakirjaston n\u00e4ytt\u00e4m\u00e4\u00e4n vain kuvia. Kun kuva on valittu, ponnahdusikkuna sulkeutuu ja paneeli esikatselee valitun kuvan pieni pikkukuva. Alla n\u00e4kyv\u00e4t esikatselupainikkeet kuvan vaihtamista ja poistamista varten. Aivan kuten esittelykuvassa.<\/p>\n
T\u00e4ss\u00e4 opetusohjelmassa oletetaan, ett\u00e4 k\u00e4yt\u00e4t valittua kuvaa lohkon taustana \u2013 vain esimerkkin\u00e4. T\u00e4st\u00e4 syyst\u00e4 tallennamme kuvan URL-osoitteen. Lis\u00e4\u00e4n esimerkin valitun kuvan k\u00e4ytt\u00e4misest\u00e4 (sek\u00e4 funktiossa Tallennamme mediatunnuksen ja median URL-osoitteen lohkon attribuutteihin. Koodi k\u00e4ytt\u00e4\u00e4 paketissa "Lainaan" my\u00f6s luokkanimi\u00e4 WordPressin esitellyist\u00e4 kuvatoiminnoista varmistaakseni, ett\u00e4 kaikki n\u00e4ytt\u00e4\u00e4 hyv\u00e4lt\u00e4 eik\u00e4 sinun tarvitse kirjoittaa itse CSS:\u00e4\u00e4. T\u00e4m\u00e4 on tietysti valinnaista.<\/p>\n Se, mit\u00e4 sinun on tallennettava lohkosi attribuutteihin, on v\u00e4h\u00e4n sinun p\u00e4\u00e4tett\u00e4viss\u00e4si. Meid\u00e4n on luonnollisesti tallennettava v\u00e4hint\u00e4\u00e4n mediatunnus. T\u00e4m\u00e4 saattaa riitt\u00e4\u00e4, jos sinun ei tarvitse k\u00e4ytt\u00e4\u00e4 median URL-osoitetta miss\u00e4\u00e4n komentosarjakoodissa. Esimerkiksi jos k\u00e4yt\u00e4t Aloitetaan m\u00e4\u00e4rittelem\u00e4ll\u00e4 ominaisuudet. Mediatunnuksen tulee olla tyyppinumero ja oletuksena 0. T\u00e4m\u00e4 tekee vertailusta helppoa. Median URL-osoitteen tulee olla tyyppimerkkijono ja oletuksena tyhj\u00e4 merkkijono.<\/p>\n Jotta koodimme olisi j\u00e4rjestyksess\u00e4, m\u00e4\u00e4rittelemme erillisen komponentin lohkon Komponentin palautuksessa teemme yksinkertaisen Mutta ensin tuhotaan tarvittava komponentti tiedoston alussa:<\/p>\n Yl\u00e4puolella Nyt haluamme tehd\u00e4 t\u00e4m\u00e4n komponentin Jos et tunne Varmistamme, ett\u00e4 kyselemme mediaa vain, jos mediatunnus-attribuutti todellakin on muu kuin 0. Muokkaustoimintomme n\u00e4ytt\u00e4\u00e4 t\u00e4lt\u00e4:<\/p>\n Aivan lopussa, jonon sulkemisen j\u00e4lkeen Lopuksi tulee hauska osa: Tarkastajan osa.<\/p>\n Meit\u00e4 kiinnostava komponentti on Komponentissa Saatavilla on muutama lis\u00e4tarvike Pura ensin uudet komponentit;<\/p>\n Lis\u00e4t\u00e4\u00e4n Yll\u00e4 oleva koodi tuhoaa Komponentin sis\u00e4ll\u00e4 Kun napsautat painiketta, Mediakirjaston ponnahdusikkunan pit\u00e4isi ilmesty\u00e4. Kuvan valitseminen ei kuitenkaan toimi t\u00e4ll\u00e4 hetkell\u00e4, koska meilt\u00e4 puuttuu rekvisiitta M\u00e4\u00e4ritet\u00e4\u00e4n Huomautus<\/strong>: M\u00e4\u00e4rit\u00e4n funktioni nuolifunktioiksi ( Juuri ennen komponentin return-lausetta m\u00e4\u00e4rit\u00e4n Kokeile nyt, niin voit nyt valita kuvan mediakirjastosta. Valittu media tallennetaan lohkon attribuutteihin. Siit\u00e4 ei kuitenkaan ole viel\u00e4 esikatselua Inspectorissa, ja koska olet valinnut kuvan, kuvan valintapainike katoaa. Paneeli on nyt tyhj\u00e4. Seuraava vaihe on esikatselun render\u00f6iminen aina, kun kuva on valittu, sek\u00e4 vaihtoehtojen tarjoaminen sen poistamiseen tai muuttamiseen.<\/p>\n Komponentin sis\u00e4ll\u00e4, K\u00e4yt\u00e4mme komponenttia Ensin tuhoamme tarvittavan komponentin:<\/p>\n Kuten n\u00e4ette, k\u00e4yt\u00e4mme Sinun pit\u00e4isi nyt saada hieno esikatselu valitusta kuvasta!<\/p>\n Koska tuomme esikatselukuvan sis\u00e4lle, T\u00e4ll\u00e4 hetkell\u00e4 valittua kuvaa ei voi poistaa tai nollata. Korjataan se!<\/p>\n Meid\u00e4n tulisi ainakin tarjota k\u00e4ytt\u00e4j\u00e4lle mahdollisuus poistaa valittu kuva. T\u00e4ll\u00e4 hetkell\u00e4 kun olet valinnut kuvan, voit vain muuttaa sit\u00e4, mutta et poistaa sit\u00e4.<\/p>\n Teemme sen samalla tavalla kuin WordPress esitellylle kuvalle: Uusi T\u00e4t\u00e4 tapahtumaa T\u00e4m\u00e4 toiminto vain nollaa kaksi attribuuttiarvoamme.<\/p>\n Meill\u00e4 on nyt mukava, selke\u00e4 linkki kuvan poistamiseen:<\/p>\n Kun napsautat uutta painiketta, valittu kuva ja itse painike katoavat ja kuvan valintapainike tulee uudelleen n\u00e4kyviin.<\/p>\n T\u00e4m\u00e4 vaihe on t\u00e4ysin valinnainen. Kuten aiemmin mainittiin, kuvan esikatselukuvaa napsauttamalla avautuu Mediakirjasto ja voit vaihtaa kuvaa. T\u00e4m\u00e4 ei kuitenkaan v\u00e4ltt\u00e4m\u00e4tt\u00e4 ole niin intuitiivista kaikkien ymm\u00e4rrett\u00e4v\u00e4ksi. WordPress lis\u00e4\u00e4 erillisen painikkeen kuvan vaihtamista varten, jotta se olisi eritt\u00e4in selke\u00e4. Voimme tehd\u00e4 samoin.<\/p>\n Muuta kuva -painikkeen n\u00e4ytt\u00e4miseksi toistamme periaatteessa koodin, joka meill\u00e4 on kuvan valitsemiseksi: toinen Joten nyt sinun pit\u00e4isi saada t\u00e4m\u00e4:<\/p>\nedit<\/code>ett\u00e4 save<\/code>funktiossa). Kuvaa valittaessa kuva n\u00e4kyy lohkomme taustana sek\u00e4 editorin sis\u00e4ll\u00e4 ett\u00e4 k\u00e4ytt\u00f6liittym\u00e4ss\u00e4.<\/p>\nwithSelect<\/code>olevaa korkeamman asteen komponenttia wp.data<\/code>kysy\u00e4kseen lis\u00e4tietoja valitusta mediasta tunnuksella.<\/p>\nValitun median tallentaminen attribuuteissa<\/h2>\n
ServerSideRender<\/code>miss\u00e4 PHP on vastuussa lohkon tulosteen render\u00f6imisest\u00e4. T\u00e4ll\u00f6in voit helposti saada kuvan URL-osoitteen mediatunnuksesta k\u00e4ytt\u00e4m\u00e4ll\u00e4 esimerkiksi [wp_get_attachment_image_src](https:\/\/developer.wordpress.org\/reference\/functions\/wp_get_attachment_image_src\/)()<\/code>. Alla olevassa esimerkiss\u00e4 n\u00e4yt\u00e4n kuitenkin yksinkertaisen esimerkin kuvan n\u00e4ytt\u00e4misest\u00e4 lohkomme taustana, joten tallennan my\u00f6s median URL-osoitteen attribuutiksi. K\u00e4yt\u00e4mme URL-attribuuttia sek\u00e4 edit<\/code>(taustan lis\u00e4\u00e4miseksi editorissa) ett\u00e4 in save<\/code>(taustan lis\u00e4\u00e4miseksi k\u00e4ytt\u00f6liittym\u00e4\u00e4n).<\/p>\nattributes: {\n mediaId: {\n type: 'number',\n default: 0\n },\n mediaUrl: {\n type: 'string',\n default: ''\n }\n},<\/code><\/pre>\nKomponentin luominen<\/h2>\n
edit<\/code>toiminnalle. My\u00f6hemmin v\u00e4lit\u00e4mme t\u00e4m\u00e4n komponentin, jotta withSelect<\/code>voimme k\u00e4\u00e4ri\u00e4 sen komponenttimme ymp\u00e4rille.<\/p>\n<div><\/code>lohkon sis\u00e4ll\u00f6lle. Oletan, ett\u00e4 sinulla on tai sinulla on enemm\u00e4n todellista estosis\u00e4lt\u00f6\u00e4 korvaamaan valeesimerkkisis\u00e4lt\u00f6. My\u00f6s render\u00f6imme InspectorControls<\/code>(paketti wp.blockEditor<\/code>) lis\u00e4t\u00e4ksemme osion tarkastajaan. Toistaiseksi lis\u00e4\u00e4n tyhj\u00e4n PanelBody<\/code>sis\u00e4\u00e4n InspectorControls<\/code>. Lis\u00e4\u00e4n a <div><\/code>, jolla on sama luokka kuin WordPressin esittelykuvaosio k\u00e4ytt\u00e4\u00e4. T\u00e4m\u00e4 varmistaa, ett\u00e4 tyylimme n\u00e4ytt\u00e4\u00e4 hyv\u00e4lt\u00e4. My\u00f6hemmin t\u00e4yt\u00e4mme t\u00e4m\u00e4n PanelBody<\/code>valitun mediatoiminnon koodilla.<\/p>\nconst { InspectorControls } = wp.blockEditor;\nconst { PanelBody } = wp.components;\nconst { Fragment } = wp.element;<\/code><\/pre>\nregisterBlockType<\/code>m\u00e4\u00e4rittelen yksinkertaisen komponentin nimelt\u00e4 BlockEdit<\/code>. Jos haluat siirt\u00e4\u00e4 t\u00e4m\u00e4n erilliseen tiedostoon, voit tehd\u00e4 niin. T\u00e4m\u00e4 on yleist\u00e4 ja suositeltavaa, mutta t\u00e4ss\u00e4 opetusohjelmassa pid\u00e4n asiat yksinkertaisina ja pid\u00e4n sen samassa tiedostossa.<\/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>funktiossamme. Mutta haluamme k\u00e4\u00e4ri\u00e4 sen withSelect<\/code>.<\/p>\nK\u00e4ytt\u00f6 toiminnossa
withSelect<\/code>_edit<\/code><\/h2>\nwithSelect<\/code>, se on hy\u00f6dyllinen korkeamman asteen komponentti, jonka avulla voimme suorittaa kyselyit\u00e4. T\u00e4ll\u00e4 voit esimerkiksi kysell\u00e4 viestej\u00e4. K\u00e4yt\u00e4mme kuitenkin toimintoa select('core').getMedia()<\/code>mediatunnuksen kyselyyn. Vastauksena saamme objektin, jossa on kaikki tiedotusv\u00e4lineiden tiedot. Vastauksena saamamme mediaobjekti toimitetaan sitten BlockEdit<\/code>komponenttimme rekvisiittana k\u00e4ytt\u00f6valmiina. N\u00e4pp\u00e4r\u00e4.<\/p>\nedit: withSelect((select, props) => {\n return { media: props.attributes.mediaId? select('core').getMedia(props.attributes.mediaId): undefined };\n})(BlockEdit),<\/code><\/pre>\nwithSelect<\/code>, #3<\/code>pyyd\u00e4mme withSelect<\/code>palauttamaan BlockEdit<\/code>komponenttimme. T\u00e4ll\u00e4 BlockEdit<\/code>komponentillamme on nyt p\u00e4\u00e4sy props.media<\/code>.<\/p>\nMediavalinnan render\u00f6iminen<\/h2>\n
MediaUpload<\/code>(paketti wp.blockEditor<\/code>). Jos olet kiinnostunut, WordPress Github -repossa Gutenbergille on dokumentaatiota t\u00e4st\u00e4 komponentista<\/a>. K\u00e4\u00e4rimme t\u00e4m\u00e4n komponentin my\u00f6s komponenttiin nimelt\u00e4 MediaUploadCheck<\/code>(paketti wp.blockEditor<\/code>). T\u00e4m\u00e4 komponentti varmistaa, ett\u00e4 nykyinen k\u00e4ytt\u00e4j\u00e4 pystyy k\u00e4ytt\u00e4m\u00e4\u00e4n Mediakirjastoa, joten on hyv\u00e4 k\u00e4yt\u00e4nt\u00f6 k\u00e4ytt\u00e4\u00e4 t\u00e4t\u00e4.<\/p>\nMediaUpload<\/code>on vaadittu tuki: render<\/code>. T\u00e4m\u00e4 komponentti toimii siten, ett\u00e4 m\u00e4\u00e4rit\u00e4mme rekvisiittalle funktion, render<\/code>jossa render\u00f6imme tulosteen "median latausalueelle". Meid\u00e4n tapauksessamme render\u00f6imme Button<\/code>(paketin wp.components<\/code>). MediaUploadin render\u00f6intisovelluksen sis\u00e4ll\u00e4 saamme p\u00e4\u00e4syn open<\/code>toimintoon, jota voimme kutsua saadaksemme WordPressin avaamaan Mediakirjaston ponnahdusikkunan:<\/p>\n<\/a><\/p>\nMediaUpload<\/code>. K\u00e4sittelemme t\u00e4ss\u00e4 opetusohjelmassa t\u00e4rkeimm\u00e4t, jotta se toimisi, mutta voit pelata muutamilla muillakin. Saatat ainakin olla kiinnostunut ehdotuksesta, allowedTypes<\/code>jossa voit rajoittaa sit\u00e4, mit\u00e4 tiedostotyyppej\u00e4 on mahdollista valita kirjastosta. Meid\u00e4n tapauksessamme asetimme sen sallimaan vain kuvat.<\/p>\nLis\u00e4\u00e4m\u00e4ll\u00e4
MediaUpload<\/code><\/h3>\nconst { Button } = wp.components;\nconst { MediaUpload, MediaUploadCheck } = wp.blockEditor;<\/code><\/pre>\nMediaUploadCheck<\/code>ja MediaUpload<\/code>sis\u00e4ll\u00e4mme: div<\/code>_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>funktion sis\u00e4ll\u00e4 render<\/code>. Teemme yksinkertaisen, Button<\/code>jossa sen onClick<\/code>ominaisuus suorittaa open<\/code>funktion. Olen my\u00f6s lis\u00e4nnyt samat luokkien nimet kuin WordPressin esitellyt kuvatoiminnot varmistaakseni, ettei meid\u00e4n tarvitse lis\u00e4t\u00e4 mit\u00e4\u00e4n tyyli\u00e4.<\/p>\nButton<\/code>tarkistamme, onko kuva asetettu (attributes.mediaId<\/code>). Jos n\u00e4in ei ole, toistamme tekstin "Valitse kuva". Meid\u00e4n pit\u00e4isi nyt saada t\u00e4m\u00e4 lohkoomme.<\/p>\nonSelect<\/code>ja. Korjataan se nyt. Asetamme valitun mediatunnuksen ja asetimme suorittamaan toiminnon, jonka m\u00e4\u00e4rit\u00e4mme my\u00f6hemmin komponentissamme.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>funktio komponentissamme.<\/p>\nMedian valinnan k\u00e4sittely<\/h3>\n
onSelectMedia =() => { }<\/code>). Nuolitoiminnot ovat melko uusia ESNextiss\u00e4 ja melko hienoja. Huono puoli on, ett\u00e4 nuolitoimintojen k\u00e4ytt\u00e4minen edellytt\u00e4\u00e4, ett\u00e4 lis\u00e4\u00e4t t\u00e4m\u00e4n tuen Babel-kokoonpanoosi. Jos et ole tehnyt t\u00e4t\u00e4, suosittelen katsomaan t\u00e4m\u00e4n viestin<\/a> otsikon "Babelin m\u00e4\u00e4ritt\u00e4minen" alla .<\/p>\nonSelectMedia<\/code>funktion. Meid\u00e4n tarvitsee vain p\u00e4ivitt\u00e4\u00e4 attribuuttimme k\u00e4ytt\u00e4m\u00e4ll\u00e4 setAttributes()<\/code>. Parametriksi onSelectMedia<\/code>saamme mediaobjektin. Poimimme mediaobjektista vain sen, mit\u00e4 tarvitsemme. Meid\u00e4n tapauksessamme se on mediatunnus ja t\u00e4ysikokoinen URL, jotka ovat ominaisuudet id<\/code>ja url<\/code>vastaavasti.<\/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>\nEsikatselukuvaa render\u00f6id\u00e4\u00e4n<\/h2>\n
Button<\/code>jonka render\u00f6imme propin sis\u00e4ll\u00e4 MediaUpload<\/code>, render<\/code>toistamme tekstin "Valitse kuva", jos kuvaa ei ole viel\u00e4 asetettu. Mutta meid\u00e4n on lis\u00e4tt\u00e4v\u00e4 koodi, kun kuva on asetettu t\u00e4h\u00e4n; esikatselu.<\/p>\nResponsiveWrapper<\/code>(paketti wp.components<\/code>) saadaksemme hyv\u00e4n esikatselun. Jotta ResponsiveWrapper<\/code>se toimisi t\u00e4ysin, meid\u00e4n on tarjottava rekvisiitta korkeudelle ja leveydelle. Tarvitsemme my\u00f6s pikkukuvan URL-osoitteen. Ei ole mit\u00e4\u00e4n j\u00e4rke\u00e4 k\u00e4ytt\u00e4\u00e4 koko URL-osoitetta (joka voi olla j\u00e4ttim\u00e4inen) esikatselun tekemiseen Inspectorissa. T\u00e4st\u00e4 withSelect<\/code>tulee rekvisiitta. Komponentin sis\u00e4ll\u00e4 render\u00f6imme yksinkertaisen <img><\/code>HTML-tunnisteen.<\/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>komponentin meille toimittamaa potkuria, props.media<\/code>. Haemme objektista median pikkukuvan koon leveyden, korkeuden ja URL-osoitteen.<\/p>\nButton<\/code>esikatselukuvan napsauttaminen k\u00e4ynnist\u00e4\u00e4 toiminnon Button<\/code>, onClick<\/code>joka on mediakirjaston avaaminen. N\u00e4in voit jo muuttaa valittua kuvaa.<\/p>\nPoistotoiminnon lis\u00e4\u00e4minen<\/h3>\n
Button<\/code>esikatselukuvan alle (kokonaan sen ulkopuolella MediaUploadCheck<\/code>). Tarjoamalla n\u00e4pp\u00e4r\u00e4\u00e4 rekvisiittaa Button<\/code>saamme sen n\u00e4ytt\u00e4m\u00e4\u00e4n linkilt\u00e4 (isLink<\/code>), jossa on punainen tekstiv\u00e4ri (isDestructive<\/code>). Lue Buttonin dokumentaatio<\/a> n\u00e4hd\u00e4ksesi, mit\u00e4 muuta on mahdollista. K\u00e4\u00e4rimme painikkeen toisen MediaUploadCheck<\/code>sis\u00e4\u00e4n varmistaaksemme, ett\u00e4 k\u00e4ytt\u00e4j\u00e4ll\u00e4 on oikeat ominaisuudet.<\/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>varten onClick<\/code>suoritamme komponenttimme sis\u00e4ll\u00e4 uuden toiminnon: removeMedia()<\/code>. M\u00e4\u00e4rittelemme sen jonnekin juuri ennen komponentin paluufunktiota, kuten teimme onSelectMedia<\/code>.<\/p>\nconst removeMedia =() => {\n props.setAttributes({\n mediaId: 0,\n mediaUrl: ''\n });\n}<\/code><\/pre>\n<\/a><\/p>\nKorvauspainikkeen lis\u00e4\u00e4minen<\/h3>\n
MediaUpload<\/code>komponentti. Tarjoamme saman toiminnon onSelect<\/code>, allowedFileTypes<\/code>ja value<\/code>kuten ennenkin. Rekvisiitin sis\u00e4ll\u00e4 render<\/code>render\u00f6imme MediaUpload<\/code>yksinkertaisesti toisen Button<\/code>, joka avaa Mediakirjaston. Laitetaan t\u00e4m\u00e4 painike ennen Poista-painiketta \u2013 koska t\u00e4m\u00e4 on j\u00e4rkev\u00e4mp\u00e4\u00e4 loppuk\u00e4ytt\u00e4j\u00e4lle:<\/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