![\"Come](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-153621-61e511f57cf93.png\")
<\/a><\/p>\nLa funzione di selezione dei media sar\u00e0 funzionalmente esattamente la stessa della funzione di immagine in primo piano di WordPress. All’interno di Inspector aggiungeremo un pannello che consiste in un pulsante per scegliere un’immagine.<\/p>\n
Quando si fa clic sul pulsante, viene visualizzata la finestra "Seleziona o carica file multimediali" che consente di selezionare un file dal Catalogo multimediale. Limitiamo il Catalogo multimediale a mostrare solo le immagini. Una volta selezionata un’immagine, il popup si chiude e il pannello visualizza in anteprima un piccola miniatura dell’immagine selezionata. Sotto appariranno i pulsanti di anteprima per modificare e rimuovere l’immagine. Esattamente come con l’immagine in primo piano.<\/p>\n
Questo tutorial presuppone che utilizzerai l’immagine selezionata come sfondo del blocco, solo come esempio. Questo \u00e8 il motivo per cui memorizziamo l’URL dell’immagine. Includer\u00f2 un esempio su come utilizzare l’immagine selezionata (sia nella funzione Memorizziamo l’ID del supporto e l’URL del supporto negli attributi del blocco. Il codice utilizza Sto anche "prendendo in prestito" i nomi delle classi dalla funzionalit\u00e0 dell’immagine in primo piano di WordPress per assicurarmi che tutto appaia a posto e non sia necessario scrivere alcun CSS da soli. Questo \u00e8 ovviamente facoltativo.<\/p>\n Quello che devi salvare negli attributi del tuo blocco dipende un po’ da te. Come minimo dobbiamo memorizzare l’ID del supporto, ovviamente. Questo potrebbe essere sufficiente se non \u00e8 necessario utilizzare l’URL del supporto in un punto qualsiasi del codice dello script. Ad esempio, se utilizzi Iniziamo definendo i nostri attributi. L’ID supporto deve essere il numero del tipo e il valore predefinito \u00e8 0. Ci\u00f2 semplifica il confronto. E l’URL del supporto dovrebbe essere di tipo string con una stringa vuota predefinita.<\/p>\n Per rendere il nostro codice pi\u00f9 ordinato definiamo un componente separato per la Nella restituzione del componente rendiamo semplice Ma prima, destrutturamo il componente necessario all’inizio del file:<\/p>\n Sopra Ora vogliamo rendere questo componente nella nostra Se non hai familiarit\u00e0 con Ci assicuriamo di interrogare il supporto solo se l’attributo ID supporto \u00e8 effettivamente impostato su qualcosa di diverso da 0. Ecco come apparir\u00e0 la nostra funzione di modifica:<\/p>\n Alla fine, dopo aver chiuso Infine arriva la parte divertente: la parte nell’ispettore.<\/p>\n Il componente che ci interessa \u00e8 Il Sono disponibili altri oggetti di scena per Destrutturare prima i nuovi componenti;<\/p>\n Aggiungiamo Il codice sopra destruttura All’interno del Quando si fa clic sul pulsante, dovrebbe apparire il popup Catalogo multimediale. Tuttavia, la selezione di un’immagine non funziona al momento, perch\u00e9 ci mancano gli oggetti di scena Definiamo la Nota<\/strong>: sto definendo le mie funzioni come funzioni freccia ( Subito prima dell’istruzione di ritorno del componente definisco una Provalo ora e ora sarai in grado di selezionare un’immagine dalla Libreria multimediale. Il supporto selezionato viene salvato negli attributi del blocco. Tuttavia non c’\u00e8 ancora un’anteprima nell’Inspector e poich\u00e9 hai selezionato un’immagine il pulsante per selezionare un’immagine scompare. Il pannello ora \u00e8 vuoto. Il passaggio successivo \u00e8 il rendering dell’anteprima ogni volta che \u00e8 stata selezionata un’immagine, oltre a fornire le opzioni per rimuoverla o modificarla.<\/p>\n All’interno del Per aiutarci a rendere una bella anteprima utilizziamo il componente Per prima cosa destrutturiamo il componente necessario:<\/p>\n Come puoi vedere accediamo all’elica che il Ora dovresti ottenere una bella anteprima dell’immagine selezionata!<\/p>\n Poich\u00e9 eseguiamo il rendering dell’immagine di anteprima all’interno del Al momento non \u00e8 possibile rimuovere o ripristinare l’immagine selezionata. Risolviamolo!<\/p>\n Dovremmo almeno offrire all’utente la possibilit\u00e0 di rimuovere l’immagine selezionata. A partire da ora, una volta selezionata un’immagine, puoi solo cambiarla, ma non rimuoverla.<\/p>\n Lo faremo come fa WordPress per l’immagine in primo piano: una nuova Per questo evento eseguiamo una nuova funzione all’interno del nostro componente Tutto ci\u00f2 che fa questa funzione \u00e8 ripristinare i nostri due valori di attributo.<\/p>\n Ora avremo un link carino e chiaro per rimuovere l’immagine:<\/p>\n Quando si fa clic sul nuovo pulsante, l’immagine selezionata e il pulsante stesso scompaiono e viene visualizzato nuovamente il pulsante per la selezione di un’immagine.<\/p>\n Questo passaggio \u00e8 completamente facoltativo. Come accennato in precedenza, facendo clic sull’immagine di anteprima dell’immagine si aprir\u00e0 la Libreria multimediale e ti consentir\u00e0 di modificare l’immagine. Tuttavia questo potrebbe non essere cos\u00ec intuitivo da capire per tutti. WordPress aggiunge un pulsante separato per modificare l’immagine, solo per renderlo molto chiaro. Possiamo fare lo stesso.<\/p>\n Per rendere un pulsante cambia immagine ripetiamo sostanzialmente il codice che abbiamo per selezionare l’immagine: un altro Quindi ora dovresti ottenere questo:<\/p>\nedit<\/code>che nella save<\/code>funzione). Quando si sceglie un’immagine, l’immagine apparir\u00e0 come sfondo del nostro blocco, sia all’interno dell’editor che nel frontend.<\/p>\nwithSelect<\/code>, un componente di ordine superiore fornito nel wp.data<\/code>pacchetto, per richiedere ulteriori informazioni sul supporto selezionato, in base all’ID.<\/p>\nSalvataggio del supporto selezionato negli attributi<\/h2>\n
ServerSideRender<\/code>dove PHP \u00e8 responsabile del rendering dell’output del blocco. In tal caso puoi facilmente ottenere l’URL dell’immagine dall’ID del supporto utilizzando ad esempio [wp_get_attachment_image_src](https:\/\/developer.wordpress.org\/reference\/functions\/wp_get_attachment_image_src\/)()<\/code>. Tuttavia, nell’esempio seguente sto mostrando un semplice esempio di visualizzazione dell’immagine come sfondo del nostro blocco, quindi memorizzo anche l’URL multimediale come attributo. Useremo l’attributo URL sia in edit<\/code>(per aggiungere lo sfondo nell’editor) che in save<\/code>(per aggiungere lo sfondo nel frontend).<\/p>\nattributes: {\n mediaId: {\n type: 'number',\n default: 0\n },\n mediaUrl: {\n type: 'string',\n default: ''\n }\n},<\/code><\/pre>\nCreazione del componente<\/h2>\n
edit<\/code>funzione del blocco. In seguito passeremo questo componente withSelect<\/code>per avvolgerlo attorno al nostro componente.<\/p>\n<div><\/code>per il contenuto del blocco. Presumo che avrai o avrai pi\u00f9 contenuti di blocco effettivi per sostituire il contenuto di esempio fittizio. Eseguiamo anche il rendering InspectorControls<\/code>(pacchetto wp.blockEditor<\/code>) per aggiungere una sezione all’ispettore. Per ora aggiungo un vuoto PanelBody<\/code>all’interno del file InspectorControls<\/code>. Aggiungo una <div><\/code>con la stessa classe utilizzata dalla sezione delle immagini in primo piano di WordPress. Questo assicura che il nostro stile abbia un bell’aspetto. In seguito lo riempiremo PanelBody<\/code>con il codice per la funzionalit\u00e0 del supporto selezionato.<\/p>\nconst { InspectorControls } = wp.blockEditor;\nconst { PanelBody } = wp.components;\nconst { Fragment } = wp.element;<\/code><\/pre>\nregisterBlockType<\/code>definisco un semplice componente chiamato BlockEdit<\/code>. Se preferisci spostarlo in un file separato, puoi farlo. Questo \u00e8 comune e consigliato, ma per questo tutorial manterr\u00f2 le cose semplici e lo tengo nello stesso file.<\/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>funzione. Ma vogliamo avvolgerlo in un withSelect<\/code>.<\/p>\nUtilizzo
withSelect<\/code>nella edit<\/code>funzione<\/h2>\nwithSelect<\/code>, \u00e8 un utile componente di ordine superiore che ci consente di eseguire query. Ad esempio, puoi interrogare i post con questo. Utilizzeremo tuttavia la funzione select('core').getMedia()<\/code>per interrogare l’ID del supporto. Come risposta otterremo un oggetto con tutte le informazioni dei media. L’oggetto multimediale che otteniamo in risposta verr\u00e0 quindi fornito come supporto nel nostro BlockEdit<\/code>componente, pronto per l’uso. Elegante.<\/p>\nedit: withSelect((select, props) => {\n return { media: props.attributes.mediaId? select('core').getMedia(props.attributes.mediaId): undefined };\n})(BlockEdit),<\/code><\/pre>\nwithSelect<\/code>in fila, #3<\/code>\u00e8 dove chiediamo withSelect<\/code>di restituire il nostro BlockEdit<\/code>componente. Con questo il nostro BlockEdit<\/code>componente ora ha accesso a props.media<\/code>.<\/p>\nRendering di una selezione multimediale<\/h2>\n
MediaUpload<\/code>(pacchetto wp.blockEditor<\/code>). Se sei interessato, il repository Github di WordPress per Gutenberg ha della documentazione su questo componente<\/a>. Avvolgeremo anche questo componente all’interno di un componente chiamato MediaUploadCheck<\/code>(package wp.blockEditor<\/code>). Questo componente si assicura che l’utente corrente disponga delle capacit\u00e0 per utilizzare il Catalogo multimediale, quindi \u00e8 buona norma utilizzarlo.<\/p>\nMediaUpload<\/code>componente ha un prop richiesto: render<\/code>. Il modo in cui funziona questo componente \u00e8 che definiamo una funzione per l’ oggetto di render<\/code>scena in cui eseguiamo il rendering dell’output per "l’area di caricamento multimediale". Nel nostro caso renderemo un Button<\/code>(pacchetto wp.components<\/code>). All’interno del supporto di rendering di MediaUpload otteniamo l’accesso alla open<\/code>funzione che possiamo chiamare per fare in modo che WordPress apra il popup della Libreria multimediale:<\/p>\n<\/a><\/p>\nMediaUpload<\/code>. Tratteremo quelli importanti per renderlo funzionale in questo tutorial, ma ce ne sono altri con cui puoi giocare. Potresti almeno essere interessato al supporto allowedTypes<\/code>in cui puoi limitare i tipi di file che \u00e8 possibile selezionare nella Libreria. Nel nostro caso lo impostiamo per consentire solo le immagini.<\/p>\nAggiungendo il
MediaUpload<\/code><\/h3>\nconst { Button } = wp.components;\nconst { MediaUpload, MediaUploadCheck } = wp.blockEditor;<\/code><\/pre>\nMediaUploadCheck<\/code>e MediaUpload<\/code>dentro il nostro div<\/code>nel nostro 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>all’interno della funzione per render<\/code>. Rendiamo semplice Button<\/code>dove la sua onClick<\/code>propriet\u00e0 eseguir\u00e0 la open<\/code>funzione. Ho anche aggiunto gli stessi nomi di classe della funzionalit\u00e0 dell’immagine in primo piano di WordPress per assicurarci di non dover aggiungere alcuno stile.<\/p>\nButton<\/code>componente controlliamo se \u00e8 stata impostata o meno un’immagine (attributes.mediaId<\/code>). In caso contrario, facciamo eco al testo "Scegli un’immagine". Ora dovremmo averlo nel nostro blocco.<\/p>\nonSelect<\/code>e su. Risolviamolo ora. Impostiamo l’ID del supporto selezionato e impostiamo l’esecuzione di una funzione che definiremo in seguito all’interno del nostro componente.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>funzione all’interno del nostro componente.<\/p>\nGestione della selezione dei media<\/h3>\n
onSelectMedia =() => { }<\/code>). Le funzioni delle frecce sono piuttosto nuove in ESNext e piuttosto eleganti. Lo svantaggio \u00e8 che l’utilizzo delle funzioni freccia richiede l’aggiunta del supporto per questo nella configurazione di Babel. Se non l’hai fatto, ti consiglio di guardare sotto il titolo "Impostazione di Babel" in questo post<\/a>.<\/p>\nonSelectMedia<\/code>funzione. Tutto quello che dobbiamo fare \u00e8 aggiornare i nostri attributi usando setAttributes()<\/code>. Come parametro onSelectMedia<\/code>otteniamo un oggetto multimediale. Estraiamo semplicemente ci\u00f2 di cui abbiamo bisogno dall’oggetto multimediale. Nel nostro caso sono l’ID del supporto e l’URL a grandezza naturale, che sono rispettivamente le propriet\u00e0 id<\/code>e 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>\nRendering di un’immagine di anteprima<\/h2>\n
Button<\/code>componente che renderizziamo all’interno MediaUpload<\/code>del render<\/code>prop di ‘ echeggiamo un testo "Scegli un’immagine" se un’immagine non \u00e8 ancora impostata. Ma abbiamo bisogno di aggiungere del codice per quando un’immagine \u00e8 impostata all’interno qui; un’anteprima.<\/p>\nResponsiveWrapper<\/code>(pacchetto wp.components<\/code>). Al fine di ResponsiveWrapper<\/code>funzionare completamente, dobbiamo fornire puntelli per l’altezza e la larghezza. Abbiamo anche bisogno dell’URL della miniatura. Non ha senso usare l’URL completo (che pu\u00f2 essere gigantesco) per eseguire il rendering di un’anteprima all’interno dell’Inspector. \u00c8 qui che withSelect<\/code>entra in gioco il sostegno. All’interno del componente eseguiamo il rendering di un semplice <img><\/code>tag HTML.<\/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>componente ci ha fornito, props.media<\/code>. Recuperiamo la larghezza, l’altezza e l’URL in base alle dimensioni della miniatura del supporto dall’oggetto.<\/p>\nButton<\/code>clic sull’immagine di anteprima si attiver\u00e0 la funzione Button<\/code>di ‘ onClick<\/code>, che \u00e8 quella di aprire il Catalogo multimediale. In questo modo puoi gi\u00e0 modificare l’immagine selezionata.<\/p>\nAggiunta di una funzione di rimozione<\/h3>\n
Button<\/code>immagine sotto l’anteprima (interamente al di fuori del suo MediaUploadCheck<\/code>). Fornendo alcuni oggetti di scena intelligenti, lo Button<\/code>facciamo sembrare un collegamento (isLink<\/code>) con il colore del testo rosso (isDestructive<\/code>). Leggi la documentazione per Button<\/a> per vedere cos’altro \u00e8 possibile. Avvolgiamo il pulsante all’interno dell’ennesimo MediaUploadCheck<\/code>, solo per garantire che l’utente abbia le giuste capacit\u00e0.<\/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>:. Lo definiamo da qualche parte subito prima della funzione di ritorno del componente, come abbiamo fatto con .onClick``removeMedia()``onSelectMedia<\/code><\/p>\nconst removeMedia =() => {\n props.setAttributes({\n mediaId: 0,\n mediaUrl: ''\n });\n}<\/code><\/pre>\n<\/a><\/p>\nAggiunta di un pulsante di sostituzione<\/h3>\n
MediaUpload<\/code>componente. Forniamo la stessa funzione per e onSelect<\/code>come prima. All’interno dell’oggetto di scena ne realizziamo semplicemente un altro che apre la Libreria multimediale. Mettiamo questo pulsante prima del pulsante Rimuovi, poich\u00e9 ha pi\u00f9 senso per l’utente finale:allowedFileTypes``value``render``MediaUpload``Button<\/code><\/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