![\"Hur](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-153621-61e511f57cf93.png\")
<\/a><\/p>\nFunktionen f\u00f6r att v\u00e4lja media kommer funktionellt att vara exakt densamma som WordPress utvalda bildfunktion. Vi kommer inuti Inspector att l\u00e4gga till en panel som best\u00e5r av en knapp f\u00f6r att v\u00e4lja en bild.<\/p>\n
N\u00e4r du klickar p\u00e5 knappen kommer f\u00f6nstret "V\u00e4lj eller ladda upp media" att dyka upp s\u00e5 att du kan v\u00e4lja en fil fr\u00e5n mediebiblioteket. Vi begr\u00e4nsar mediebiblioteket till att endast visa bilder. N\u00e4r en bild har valts st\u00e4ngs popup-f\u00f6nstret och panelen f\u00f6rhandsgranskar en liten miniatyr av den valda bilden. Nedan visas f\u00f6rhandsgranskningsknapparna f\u00f6r att \u00e4ndra och ta bort bilden. Exakt som med utvald bild.<\/p>\n
Denna handledning f\u00f6ruts\u00e4tter att du kommer att anv\u00e4nda den valda bilden som blockets bakgrund – bara som ett exempel. Det \u00e4r d\u00e4rf\u00f6r vi lagrar bildens URL. Jag ska inkludera ett exempel p\u00e5 hur man anv\u00e4nder den valda bilden (b\u00e5de i Vi lagrar media-ID och media-URL i blockets attribut. Koden anv\u00e4nder Jag "l\u00e5nar" \u00e4ven klassnamn fr\u00e5n WordPresss utvalda bildfunktionalitet f\u00f6r att s\u00e4kerst\u00e4lla att allt ser bra ut och att det inte finns n\u00e5got behov av att skriva n\u00e5gon CSS sj\u00e4lv. Detta \u00e4r naturligtvis valfritt.<\/p>\n Vad du beh\u00f6ver spara i ditt blocks attribut \u00e4r lite upp till dig. Som ett minimum m\u00e5ste vi lagra media-ID, s\u00e5 klart. Detta kan vara tillr\u00e4ckligt om du inte beh\u00f6ver anv\u00e4nda medias URL n\u00e5gonstans i skriptkoden. Till exempel om du anv\u00e4nder L\u00e5t oss b\u00f6rja med att definiera v\u00e5ra attribut. Media ID ska vara typnummer och standard till 0. Detta g\u00f6r det enkelt att j\u00e4mf\u00f6ra mot. Och media URL ska vara typ str\u00e4ng med standard tom str\u00e4ng.<\/p>\n F\u00f6r att g\u00f6ra v\u00e5r kod mer \u00f6versk\u00e5dlig definierar vi en separat komponent f\u00f6r blockets I komponentens retur g\u00f6r vi ett enkelt Men f\u00f6rst, l\u00e5t oss destrukturera den n\u00f6dv\u00e4ndiga komponenten i b\u00f6rjan av filen:<\/p>\n Ovanf\u00f6r Nu vill vi \u00e5terge denna komponent i v\u00e5r Om du inte \u00e4r bekant med Vi ser till att bara fr\u00e5ga media om media ID-attributet faktiskt \u00e4r inst\u00e4llt p\u00e5 n\u00e5got annat \u00e4n 0. S\u00e5 h\u00e4r kommer v\u00e5r redigeringsfunktion att se ut:<\/p>\n I slutet, efter att ha st\u00e4ngt \u00c4ntligen kommer den roliga delen: delen i Inspekt\u00f6ren.<\/p>\n Komponenten vi \u00e4r intresserade av \u00e4r Komponenten Det finns n\u00e5gra fler rekvisita tillg\u00e4ngliga f\u00f6r Destrukturera de nya komponenterna f\u00f6rst;<\/p>\n L\u00e5t oss l\u00e4gga till Koden ovan destrukturerar Inuti N\u00e4r du klickar p\u00e5 knappen b\u00f6r popupen Media Library visas. Men att v\u00e4lja en bild fungerar inte just nu, eftersom vi saknar L\u00e5t oss definiera Obs<\/strong>: Jag definierar mina funktioner som pilfunktioner ( Precis f\u00f6re komponentens retursats definierar jag en Prova det nu och du kommer nu att kunna v\u00e4lja en bild fr\u00e5n mediebiblioteket. Det valda mediet sparas i blockets attribut. Det finns dock ingen f\u00f6rhandsgranskning av den i Inspekt\u00f6ren \u00e4nnu, och eftersom du har valt en bild f\u00f6rsvinner knappen f\u00f6r att v\u00e4lja en bild. Panelen \u00e4r nu tom. N\u00e4sta steg \u00e4r att \u00e5terge f\u00f6rhandsgranskningen n\u00e4r en bild har valts samt att tillhandah\u00e5lla alternativ f\u00f6r att ta bort eller \u00e4ndra den.<\/p>\n Inuti F\u00f6r att hj\u00e4lpa oss att g\u00f6ra en snygg f\u00f6rhandsvisning anv\u00e4nder vi komponenten F\u00f6rst destrukturerar vi den n\u00f6dv\u00e4ndiga komponenten:<\/p>\n Som du kan se kommer vi \u00e5t rekvisiten Du b\u00f6r nu f\u00e5 en fin f\u00f6rhandsvisning av den valda bilden!<\/p>\n Eftersom vi \u00e5terger f\u00f6rhandsgranskningsbilden inuti F\u00f6r n\u00e4rvarande finns det inget s\u00e4tt att ta bort eller \u00e5terst\u00e4lla den valda bilden. L\u00e5t oss fixa det!<\/p>\n Vi b\u00f6r \u00e5tminstone erbjuda m\u00f6jligheten f\u00f6r anv\u00e4ndaren att ta bort den valda bilden. Fr\u00e5n och med nu n\u00e4r du har valt en bild kan du bara \u00e4ndra den, men inte ta bort den.<\/p>\n Vi kommer att g\u00f6ra det p\u00e5 samma s\u00e4tt som WordPress g\u00f6r f\u00f6r utvalda bilder: En ny F\u00f6r detta Allt denna funktion g\u00f6r \u00e4r att \u00e5terst\u00e4lla v\u00e5ra tv\u00e5 attributv\u00e4rden.<\/p>\n Vi kommer nu att ha en trevlig, tydlig l\u00e4nk f\u00f6r att ta bort bilden:<\/p>\n N\u00e4r du klickar p\u00e5 den nya knappen f\u00f6rsvinner den valda bilden och sj\u00e4lva knappen och knappen f\u00f6r att v\u00e4lja en bild visas igen.<\/p>\n Detta steg \u00e4r helt valfritt. Som n\u00e4mnts tidigare, genom att klicka p\u00e5 bildens f\u00f6rhandsgranskningsbild \u00f6ppnas Media Library och l\u00e5ter dig \u00e4ndra bilden. Men detta kanske inte \u00e4r lika intuitivt f\u00f6r alla att f\u00f6rst\u00e5. WordPress l\u00e4gger till en separat knapp f\u00f6r att \u00e4ndra bilden, bara f\u00f6r att g\u00f6ra det v\u00e4ldigt tydligt. Vi kan g\u00f6ra detsamma.<\/p>\n F\u00f6r att \u00e5terge en \u00e4ndra bildknapp upprepar vi i princip koden vi har f\u00f6r att v\u00e4lja bilden: en annan S\u00e5 nu borde du f\u00e5 det h\u00e4r:<\/p>\nedit<\/code>och i save<\/code>funktionen). N\u00e4r du v\u00e4ljer en bild kommer bilden att visas som bakgrund till v\u00e5rt block, b\u00e5de i editorn och i frontend.<\/p>\nwithSelect<\/code>, en h\u00f6gre ordningskomponent som tillhandah\u00e5lls i wp.data<\/code>paketet, f\u00f6r att s\u00f6ka mer information om det valda mediet, med ID.<\/p>\nSpara det valda mediet i attribut<\/h2>\n
ServerSideRender<\/code>d\u00e4r PHP \u00e4r ansvarig f\u00f6r att rendera blockets utdata. I s\u00e5 fall kan du enkelt f\u00e5 bildens URL fr\u00e5n media-ID med [wp_get_attachment_image_src](https:\/\/developer.wordpress.org\/reference\/functions\/wp_get_attachment_image_src\/)()<\/code>t.ex. Men i exemplet nedan visar jag ett enkelt exempel p\u00e5 att visa bilden som bakgrund till v\u00e5rt block, s\u00e5 jag lagrar \u00e4ven media-URL som attribut. Vi kommer att anv\u00e4nda URL-attributet i b\u00e5de edit<\/code>(f\u00f6r att l\u00e4gga till bakgrunden i editorn) och i save<\/code>(f\u00f6r att l\u00e4gga till bakgrunden i frontend).<\/p>\nattributes: {\n mediaId: {\n type: 'number',\n default: 0\n },\n mediaUrl: {\n type: 'string',\n default: ''\n }\n},<\/code><\/pre>\nSkapar komponenten<\/h2>\n
edit<\/code>funktion. Vi kommer senare att vidarebefordra denna komponent till withSelect<\/code>att linda den runt v\u00e5r komponent.<\/p>\n<div><\/code>f\u00f6r blockinneh\u00e5llet. Jag antar att du kommer eller har mer faktiskt blockinneh\u00e5ll f\u00f6r att ers\u00e4tta dummy-exemplets inneh\u00e5ll. Vi renderar ocks\u00e5 InspectorControls<\/code>(paket wp.blockEditor<\/code>) f\u00f6r att l\u00e4gga till ett avsnitt till inspekt\u00f6ren. F\u00f6r nu l\u00e4gger jag till en tom PanelBody<\/code>inuti InspectorControls<\/code>. Jag l\u00e4gger till en <div><\/code>med samma klass som WordPress’ utvalda bildsektion anv\u00e4nder. Detta g\u00f6r att v\u00e5r styling ser bra ut. Senare kommer vi att fylla detta PanelBody<\/code>med koden f\u00f6r den valda mediafunktionen.<\/p>\nconst { InspectorControls } = wp.blockEditor;\nconst { PanelBody } = wp.components;\nconst { Fragment } = wp.element;<\/code><\/pre>\nregisterBlockType<\/code>definierar jag en enkel komponent som heter BlockEdit<\/code>. Om du f\u00f6redrar att flytta detta till en separat fil \u00e4r du v\u00e4lkommen att g\u00f6ra det. Detta \u00e4r vanligt och rekommenderat, men f\u00f6r den h\u00e4r handledningen h\u00e5ller jag saker enkelt och h\u00e5ller det i samma fil.<\/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>funktion. Men vi vill sl\u00e5 in det i en withSelect<\/code>.<\/p>\nAnv\u00e4nder
withSelect<\/code>i edit<\/code>funktionen<\/h2>\nwithSelect<\/code>, \u00e4r det en anv\u00e4ndbar h\u00f6gre ordningskomponent som l\u00e5ter oss utf\u00f6ra fr\u00e5gor. Du kan till exempel fr\u00e5ga inl\u00e4gg med detta. Vi kommer dock att anv\u00e4nda funktionen select('core').getMedia()<\/code>f\u00f6r att fr\u00e5ga media-ID:t. Som svar f\u00e5r vi ett objekt med all medias information. Medieobjektet vi f\u00e5r som svar kommer sedan att tillhandah\u00e5llas som rekvisita i v\u00e5r BlockEdit<\/code>komponent, redo att anv\u00e4ndas. Tjusig.<\/p>\nedit: withSelect((select, props) => {\n return { media: props.attributes.mediaId? select('core').getMedia(props.attributes.mediaId): undefined };\n})(BlockEdit),<\/code><\/pre>\nwithSelect<\/code>i k\u00f6 #3<\/code>\u00e4r det d\u00e4r vi ber withSelect<\/code>om att returnera v\u00e5r BlockEdit<\/code>komponent. Med detta har v\u00e5r BlockEdit<\/code>komponent nu tillg\u00e5ng till props.media<\/code>.<\/p>\n\u00c5terge ett mediaval<\/h2>\n
MediaUpload<\/code>(paket wp.blockEditor<\/code>). Om du \u00e4r intresserad har WordPress Github repo f\u00f6r Gutenberg lite dokumentation om den h\u00e4r komponenten<\/a>. Vi kommer ocks\u00e5 att linda in den h\u00e4r komponenten i en komponent som heter MediaUploadCheck<\/code>(paket wp.blockEditor<\/code>). Den h\u00e4r komponenten ser till att den aktuella anv\u00e4ndaren har kapacitet att anv\u00e4nda mediebiblioteket, s\u00e5 det \u00e4r bra att anv\u00e4nda detta.<\/p>\nMediaUpload<\/code>har en n\u00f6dv\u00e4ndig rekvisita: render<\/code>. S\u00e4ttet som den h\u00e4r komponenten fungerar p\u00e5 \u00e4r att vi definierar en funktion f\u00f6r render<\/code>rekvisitan d\u00e4r vi renderar utdata f\u00f6r "mediauppladdningsomr\u00e5det". I v\u00e5rt fall kommer vi att g\u00f6ra ett Button<\/code>(paket wp.components<\/code>). Inuti MediaUploads renderingspropp f\u00e5r vi tillg\u00e5ng till open<\/code>funktionen som vi kan anropa f\u00f6r att f\u00e5 WordPress att \u00f6ppna popupen Media Library:<\/p>\n<\/a><\/p>\nMediaUpload<\/code>. Vi kommer att t\u00e4cka de viktiga f\u00f6r att g\u00f6ra det funktionellt i denna handledning, men det finns n\u00e5gra fler du kan spela med. Du kan \u00e5tminstone vara intresserad av rekvisiten allowedTypes<\/code>d\u00e4r du kan begr\u00e4nsa vilka filtyper som \u00e4r m\u00f6jliga att v\u00e4lja i biblioteket. I v\u00e5rt fall st\u00e4ller vi in \u200b\u200bdet p\u00e5 att endast till\u00e5ta bilder.<\/p>\nL\u00e4gger till
MediaUpload<\/code><\/h3>\nconst { Button } = wp.components;\nconst { MediaUpload, MediaUploadCheck } = wp.blockEditor;<\/code><\/pre>\nMediaUploadCheck<\/code>och MediaUpload<\/code>in i v\u00e5r div<\/code>i v\u00e5r 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>inuti funktionen f\u00f6r render<\/code>. Vi g\u00f6r en enkel Button<\/code>d\u00e4r dess onClick<\/code>egenskap kommer att k\u00f6ra open<\/code>funktionen. Jag har ocks\u00e5 lagt till samma klassnamn som WordPress utvalda bildfunktionalitet f\u00f6r att s\u00e4kerst\u00e4lla att vi inte beh\u00f6ver l\u00e4gga till n\u00e5gon styling.<\/p>\nButton<\/code>komponenten kontrollerar vi om en bild har st\u00e4llts in eller inte (attributes.mediaId<\/code>). Om det inte \u00e4r det, upprepar vi texten "V\u00e4lj en bild". Vi borde nu f\u00e5 det h\u00e4r i v\u00e5rt block.<\/p>\nonSelect<\/code>och value<\/code>rekvisita p\u00e5 MediaUpload<\/code>. L\u00e5t oss fixa det nu. Vi st\u00e4ller value<\/code>in det valda media-ID:t och vi st\u00e4ller in onSelect<\/code>att k\u00f6ra en funktion som vi senare kommer att definiera inuti v\u00e5r komponent.<\/p>\n...\n<MediaUploadCheck>\n <MediaUpload\n onSelect={onSelectMedia}\n value={attributes.mediaId}\n allowedTypes={ ['image'] }\n ...<\/code><\/pre>\nonSelectMedia<\/code>funktionen inom v\u00e5r komponent.<\/p>\nHantera val av media<\/h3>\n
onSelectMedia =() => { }<\/code>). Pilfunktioner \u00e4r ganska nya i ESNext och ganska snygga. Nackdelen \u00e4r att anv\u00e4ndning av pilfunktioner kr\u00e4ver att du l\u00e4gger till st\u00f6d f\u00f6r detta i din Babel-konfiguration. Om du inte har gjort detta rekommenderar jag att du tittar under rubriken ”S\u00e4tta upp Babel" i det h\u00e4r inl\u00e4gget<\/a>.<\/p>\nonSelectMedia<\/code>funktion. Allt vi beh\u00f6ver g\u00f6ra \u00e4r att uppdatera v\u00e5ra attribut med setAttributes()<\/code>. Som parameter onSelectMedia<\/code>f\u00e5r vi ett mediaobjekt. Vi extraherar helt enkelt det vi beh\u00f6ver fr\u00e5n medieobjektet. I v\u00e5rt fall \u00e4r det media-ID:t och webbadressen i full storlek, som \u00e4r id<\/code>respektive egenskaper 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>\n\u00c5terge en f\u00f6rhandsgranskningsbild<\/h2>\n
Button<\/code>komponenten vi renderar inuti MediaUpload<\/code>s render<\/code>rekvisita ekar vi en text "V\u00e4lj en bild" om en bild \u00e4nnu inte \u00e4r inst\u00e4lld. Men vi m\u00e5ste l\u00e4gga till lite kod f\u00f6r n\u00e4r en bild st\u00e4lls in h\u00e4r; en f\u00f6rhandsvisning.<\/p>\nResponsiveWrapper<\/code>(paketet wp.components<\/code>). F\u00f6r att ResponsiveWrapper<\/code>fungera fullt ut m\u00e5ste vi tillhandah\u00e5lla rekvisita f\u00f6r h\u00f6jd och bredd. Vi beh\u00f6ver ocks\u00e5 webbadressen f\u00f6r miniatyrbilder. Det \u00e4r ingen id\u00e9 att anv\u00e4nda hela URL-adressen (som kan vara gigantisk) f\u00f6r att g\u00f6ra en f\u00f6rhandsgranskning inuti inspekt\u00f6ren. Det \u00e4r h\u00e4r rekvisiten withSelect<\/code>kommer in. Inuti komponenten renderar vi en enkel <img><\/code>HTML-tagg.<\/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>som komponenten gav oss, props.media<\/code>. Vi h\u00e4mtar bredd, h\u00f6jd och webbadress till mediets miniatyrstorlek fr\u00e5n objektet.<\/p>\nButton<\/code>kommer klickningen p\u00e5 f\u00f6rhandsgranskningsbilden att utl\u00f6sa Button<\/code>funktionen onClick<\/code>– som \u00e4r att \u00f6ppna mediebiblioteket. P\u00e5 s\u00e5 s\u00e4tt kan du redan \u00e4ndra den valda bilden.<\/p>\nL\u00e4gger till en borttagningsfunktion<\/h3>\n
Button<\/code>under f\u00f6rhandsgranskningsbilden (helt utanf\u00f6r dess MediaUploadCheck<\/code>). Genom att tillhandah\u00e5lla n\u00e5gra smarta rekvisita Button<\/code>f\u00e5r vi det att se ut som en l\u00e4nk (isLink<\/code>) med r\u00f6d textf\u00e4rg (isDestructive<\/code>). L\u00e4s dokumentationen f\u00f6r Button<\/a> f\u00f6r att se vad mer som \u00e4r m\u00f6jligt. Vi lindar in knappen i \u00e4nnu en MediaUploadCheck<\/code>, bara f\u00f6r att s\u00e4kerst\u00e4lla att anv\u00e4ndaren har r\u00e4tt kapacitet.<\/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>evenemang onClick<\/code>k\u00f6r vi en ny funktion i v\u00e5r komponent: removeMedia()<\/code>. Vi definierar det n\u00e5gonstans precis innan komponentens returfunktion, som vi gjorde med onSelectMedia<\/code>.<\/p>\nconst removeMedia =() => {\n props.setAttributes({\n mediaId: 0,\n mediaUrl: ''\n });\n}<\/code><\/pre>\n<\/a><\/p>\nL\u00e4gger till en ers\u00e4tt-knapp<\/h3>\n
MediaUpload<\/code>komponent. Vi tillhandah\u00e5ller samma funktion f\u00f6r onSelect<\/code>och allowedFileTypes<\/code>som value<\/code>tidigare. Inuti render<\/code>rekvisitan MediaUpload<\/code>g\u00f6r vi helt enkelt en annan Button<\/code>som \u00f6ppnar mediebiblioteket. L\u00e5t oss placera den h\u00e4r knappen f\u00f6re knappen Ta bort \u2013 eftersom detta \u00e4r mer meningsfullt f\u00f6r slutanv\u00e4ndaren:<\/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