![\"C\u00f3mo](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-153621-61e511f57cf93.png\")
<\/a><\/p>\nLa funci\u00f3n de selecci\u00f3n de medios ser\u00e1 funcionalmente exactamente igual que la funci\u00f3n de imagen destacada de WordPress. Agregaremos dentro de Inspector un panel que consistir\u00e1 en un bot\u00f3n para elegir una imagen.<\/p>\n
Al hacer clic en el bot\u00f3n, aparecer\u00e1 la ventana "Seleccionar o cargar medios" que le permitir\u00e1 seleccionar un archivo de la Biblioteca de medios. Limitamos la Biblioteca de medios para mostrar solo im\u00e1genes. Una vez que se selecciona una imagen, la ventana emergente se cierra y el panel muestra una vista previa de una peque\u00f1a miniatura de la imagen seleccionada. Debajo de los botones de vista previa para cambiar y eliminar la imagen aparecer\u00e1n. Exactamente como con la imagen destacada.<\/p>\n
Este tutorial asume que utilizar\u00e1 la imagen seleccionada como fondo del bloque, solo como ejemplo. Es por eso que almacenamos la URL de la imagen. Incluir\u00e9 un ejemplo de c\u00f3mo usar la imagen seleccionada (tanto en el Almacenamos la ID del medio y la URL del medio en los atributos del bloque. El c\u00f3digo usa Tambi\u00e9n estoy "tomando prestados" los nombres de las clases de la funcionalidad de imagen destacada de WordPress para garantizar que todo se vea bien y que no haya necesidad de escribir ning\u00fan CSS. Esto es, por supuesto, opcional.<\/p>\n Lo que necesita guardar en los atributos de su bloque depende un poco de usted. Como m\u00ednimo, necesitamos almacenar la identificaci\u00f3n de medios, obviamente. Esto podr\u00eda ser suficiente si no necesita usar la URL de los medios en ninguna parte del c\u00f3digo del script. Por ejemplo, si usa Comencemos definiendo nuestros atributos. La ID de medios debe ser un n\u00famero de tipo y el valor predeterminado es 0. Esto facilita la comparaci\u00f3n. Y la URL de los medios debe ser una cadena de tipo con una cadena vac\u00eda predeterminada.<\/p>\n Para que nuestro c\u00f3digo sea m\u00e1s ordenado, definimos un componente separado para la En el retorno del componente hacemos un simple Pero primero, desestructuramos el componente necesario al comienzo del archivo:<\/p>\n Encima Ahora queremos representar este componente en nuestra Si no est\u00e1 familiarizado con Nos aseguramos de consultar los medios solo si el atributo de ID de medios realmente est\u00e1 configurado en algo distinto de 0. As\u00ed es como se ver\u00e1 nuestra funci\u00f3n de edici\u00f3n:<\/p>\n Al final, despu\u00e9s de cerrar la Finalmente viene la parte divertida: La parte del Inspector.<\/p>\n El componente que nos interesa es El Hay algunos accesorios m\u00e1s disponibles para Primero desestructura los nuevos componentes;<\/p>\n Agreguemos El c\u00f3digo anterior se desestructura Dentro del Al hacer clic en el bot\u00f3n, deber\u00eda aparecer la ventana emergente de la biblioteca multimedia. Sin embargo, seleccionar una imagen no funciona en este momento, porque nos faltan los accesorios Definamos la Nota<\/strong>: Estoy definiendo mis funciones como funciones de flecha ( Justo antes de la declaraci\u00f3n de devoluci\u00f3n del componente, defino una Pru\u00e9belo ahora y ahora podr\u00e1 seleccionar una imagen de la Biblioteca multimedia. Los medios seleccionados se guardan en los atributos del bloque. Sin embargo, todav\u00eda no hay una vista previa en el Inspector, y debido a que ha seleccionado una imagen, el bot\u00f3n para seleccionar una imagen desaparece. El panel ahora est\u00e1 vac\u00edo. El siguiente paso es mostrar la vista previa siempre que se haya seleccionado una imagen, as\u00ed como proporcionar opciones para eliminarla o cambiarla.<\/p>\n Dentro del Para ayudarnos a generar una buena vista previa, usamos el componente Primero desestructuramos el componente necesario:<\/p>\n Como pod\u00e9is ver accedemos al prop \u00a1Ahora deber\u00eda obtener una buena vista previa de la imagen seleccionada!<\/p>\n Debido a que representamos la imagen de vista previa dentro, al Actualmente no hay forma de eliminar o restablecer la imagen seleccionada. \u00a1Arreglemos eso!<\/p>\n Como m\u00ednimo, deber\u00edamos ofrecer la posibilidad de que el usuario elimine la imagen seleccionada. A partir de ahora, una vez que haya seleccionado una imagen, solo puede cambiarla, pero no eliminarla.<\/p>\n Haremos lo mismo que hace WordPress para la imagen destacada: una nueva Para este evento Todo lo que hace esta funci\u00f3n es restablecer nuestros dos valores de atributo.<\/p>\n Ahora tendremos un enlace agradable y claro para eliminar la imagen:<\/p>\n Al hacer clic en el bot\u00f3n nuevo, la imagen seleccionada y el bot\u00f3n mismo desaparecen, y vuelve a aparecer el bot\u00f3n para seleccionar una imagen.<\/p>\n Este paso es totalmente opcional. Como se mencion\u00f3 anteriormente, hacer clic en la imagen de vista previa de la imagen abrir\u00e1 la Biblioteca multimedia y le permitir\u00e1 cambiar la imagen. Sin embargo, esto podr\u00eda no ser tan intuitivo para que todos lo entiendan. WordPress agrega un bot\u00f3n separado para cambiar la imagen, solo para que quede muy claro. Podemos hacer lo mismo.<\/p>\n Para renderizar un bot\u00f3n de cambio de imagen b\u00e1sicamente repetimos el c\u00f3digo que tenemos para seleccionar la imagen: otro As\u00ed que ahora deber\u00edas obtener esto:<\/p>\nedit<\/code>como en la save<\/code>funci\u00f3n). Al elegir una imagen, la imagen aparecer\u00e1 como fondo de nuestro bloque, tanto dentro del editor como en la interfaz.<\/p>\nwithSelect<\/code>, un componente de orden superior provisto en el wp.data<\/code>paquete, para consultar m\u00e1s informaci\u00f3n sobre los medios seleccionados, por ID.<\/p>\nGuardar los medios seleccionados en atributos<\/h2>\n
ServerSideRender<\/code>donde PHP es responsable de representar la salida del bloque. En ese caso, puede obtener f\u00e1cilmente la URL de la imagen de la ID de medios usando, por ejemplo [wp_get_attachment_image_src](https:\/\/developer.wordpress.org\/reference\/functions\/wp_get_attachment_image_src\/)()<\/code>,. Sin embargo, en el siguiente ejemplo, muestro un ejemplo simple de mostrar la imagen como fondo de nuestro bloque, por lo que tambi\u00e9n almaceno la URL de medios como atributo. Usaremos el atributo URL tanto en edit<\/code>(para agregar el fondo en el editor) como en save<\/code>(para agregar el fondo en la interfaz).<\/p>\nattributes: {\n mediaId: {\n type: 'number',\n default: 0\n },\n mediaUrl: {\n type: 'string',\n default: ''\n }\n},<\/code><\/pre>\nCreando el componente<\/h2>\n
edit<\/code>funci\u00f3n del bloque. M\u00e1s adelante pasaremos este componente a withSelect<\/code>as para envolverlo alrededor de nuestro componente.<\/p>\n<div><\/code>para el contenido del bloque. Supongo que tendr\u00e1 o tendr\u00e1 m\u00e1s contenido de bloque real para reemplazar el contenido de ejemplo ficticio. Tambi\u00e9n renderizamos InspectorControls<\/code>(paquete wp.blockEditor<\/code>) para agregar una secci\u00f3n al inspector. Por ahora agrego un vac\u00edo PanelBody<\/code>dentro del archivo InspectorControls<\/code>. Agrego una <div><\/code>con la misma clase que usa la secci\u00f3n de im\u00e1genes destacadas de WordPress. Esto asegura que nuestro estilo se vea bien. M\u00e1s adelante, completaremos esto PanelBody<\/code>con el c\u00f3digo para la funci\u00f3n de selecci\u00f3n de medios.<\/p>\nconst { InspectorControls } = wp.blockEditor;\nconst { PanelBody } = wp.components;\nconst { Fragment } = wp.element;<\/code><\/pre>\nregisterBlockType<\/code>defino un componente simple llamado BlockEdit<\/code>. Si prefiere mover esto a un archivo separado, puede hacerlo. Esto es com\u00fan y recomendado, pero para este tutorial mantendr\u00e9 las cosas simples y las mantendr\u00e9 en el mismo archivo.<\/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>funci\u00f3n. Pero queremos envolverlo en un withSelect<\/code>.<\/p>\nUsando
withSelect<\/code>en la edit<\/code>funci\u00f3n<\/h2>\nwithSelect<\/code>, es un componente \u00fatil de orden superior que nos permite realizar consultas. Puede, por ejemplo, consultar publicaciones con esto. Sin embargo, utilizaremos la funci\u00f3n select('core').getMedia()<\/code>para consultar la ID del medio. Como respuesta obtendremos un objeto con toda la informaci\u00f3n del medio. El objeto multimedia que obtengamos como respuesta se proporcionar\u00e1 como accesorio en nuestro BlockEdit<\/code>componente, listo para usar. H\u00e1bil.<\/p>\nedit: withSelect((select, props) => {\n return { media: props.attributes.mediaId? select('core').getMedia(props.attributes.mediaId): undefined };\n})(BlockEdit),<\/code><\/pre>\nwithSelect<\/code>fila, #3<\/code>es donde solicitamos withSelect<\/code>la devoluci\u00f3n de nuestro BlockEdit<\/code>componente. Con esto, nuestro BlockEdit<\/code>componente ahora tiene acceso a props.media<\/code>.<\/p>\nRepresentaci\u00f3n de una selecci\u00f3n de medios<\/h2>\n
MediaUpload<\/code>(paquete wp.blockEditor<\/code>). Si est\u00e1 interesado, el repositorio de WordPress Github para Gutenberg tiene documentaci\u00f3n sobre este componente<\/a>. Tambi\u00e9n envolveremos este componente dentro de un componente llamado MediaUploadCheck<\/code>(paquete wp.blockEditor<\/code>). Este componente se asegura de que el usuario actual tenga capacidades para usar la biblioteca de medios, por lo que es una buena pr\u00e1ctica usar esto.<\/p>\nMediaUpload<\/code>componente tiene un accesorio requerido: render<\/code>. La forma en que funciona este componente es que definimos una funci\u00f3n para el render<\/code>accesorio donde representamos la salida para el "\u00e1rea de carga de medios". En nuestro caso, representaremos un Button<\/code>(paquete wp.components<\/code>). Dentro del accesorio de representaci\u00f3n de MediaUpload, tenemos acceso a la open<\/code>funci\u00f3n a la que podemos llamar para que WordPress abra la ventana emergente de la Biblioteca multimedia:<\/p>\n<\/a><\/p>\nMediaUpload<\/code>. Cubriremos los m\u00e1s importantes para hacerlo funcional en este tutorial, pero hay algunos m\u00e1s con los que puede jugar. Al menos, podr\u00eda estar interesado en el accesorio allowedTypes<\/code>donde puede limitar qu\u00e9 tipos de archivos son posibles de seleccionar en la Biblioteca. En nuestro caso, lo configuramos para permitir solo im\u00e1genes.<\/p>\nAgregando el
MediaUpload<\/code><\/h3>\nconst { Button } = wp.components;\nconst { MediaUpload, MediaUploadCheck } = wp.blockEditor;<\/code><\/pre>\nMediaUploadCheck<\/code>y MediaUpload<\/code>dentro de nuestro div<\/code>en nuestro 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>dentro de la funci\u00f3n para render<\/code>. Representamos un simple Button<\/code>donde su onClick<\/code>propiedad ejecutar\u00e1 la open<\/code>funci\u00f3n. Tambi\u00e9n agregu\u00e9 los mismos nombres de clase que la funcionalidad de imagen destacada de WordPress para garantizar que no necesitemos agregar ning\u00fan estilo.<\/p>\nButton<\/code>componente comprobamos si se ha configurado o no una imagen (attributes.mediaId<\/code>). Si no es as\u00ed, hacemos eco del texto \u00abElegir una imagen". Ahora deber\u00edamos tener esto en nuestro bloque.<\/p>\nonSelect<\/code>y en. Arreglemos eso ahora. Configuramos la ID de medios seleccionada y configuramos para ejecutar una funci\u00f3n que luego definiremos dentro de nuestro 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>funci\u00f3n dentro de nuestro componente.<\/p>\nManejo de selecci\u00f3n de medios<\/h3>\n
onSelectMedia =() => { }<\/code>). Las funciones de flecha son bastante nuevas en ESNext y bastante ingeniosas. La desventaja es que el uso de funciones de flecha requiere que agregue soporte para esto en su configuraci\u00f3n de Babel. Si no lo ha hecho, le recomiendo que busque bajo el t\u00edtulo "Configuraci\u00f3n de Babel" en esta publicaci\u00f3n<\/a>.<\/p>\nonSelectMedia<\/code>funci\u00f3n. Todo lo que necesitamos hacer es actualizar nuestros atributos usando setAttributes()<\/code>. Como par\u00e1metro onSelectMedia<\/code>obtenemos un objeto multimedia. Simplemente extraemos lo que necesitamos del objeto multimedia. En nuestro caso, es la ID del medio y la URL de tama\u00f1o completo, que son las propiedades id<\/code>y url<\/code>respectivamente.<\/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>\nRepresentaci\u00f3n de una imagen de vista previa<\/h2>\n
Button<\/code>componente que renderizamos dentro MediaUpload<\/code>de la render<\/code>prop hacemos eco del texto "Elegir una imagen" si una imagen a\u00fan no est\u00e1 configurada. Pero necesitamos agregar algo de c\u00f3digo para cuando se establece una imagen aqu\u00ed; una vista previa<\/p>\nResponsiveWrapper<\/code>(paquete wp.components<\/code>). Para que ResponsiveWrapper<\/code>funcione completamente, necesitamos proporcionar accesorios para la altura y el ancho. Tambi\u00e9n necesitamos la URL de la miniatura. No tiene sentido usar la URL completa (que puede ser gigantesca) para generar una vista previa dentro del Inspector. Aqu\u00ed es donde withSelect<\/code>entra la propiedad. Dentro del componente representamos una <img><\/code>etiqueta HTML simple.<\/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>que nos ha facilitado el componente, props.media<\/code>. Obtenemos el ancho, el alto y la URL al tama\u00f1o de la miniatura de los medios del objeto.<\/p>\nButton<\/code>hacer clic en la imagen de vista previa se activar\u00e1 la Button<\/code>funci\u00f3n onClick<\/code>de, que es abrir la Biblioteca de medios. De esa manera ya puedes cambiar la imagen seleccionada.<\/p>\nAgregar una funci\u00f3n de eliminaci\u00f3n<\/h3>\n
Button<\/code>debajo de la imagen de vista previa (totalmente fuera de su MediaUploadCheck<\/code>). Al proporcionarle algunos accesorios inteligentes Button<\/code>, hacemos que se vea como un enlace (isLink<\/code>) con color de texto rojo (isDestructive<\/code>). Lea la documentaci\u00f3n de Button<\/a> para ver qu\u00e9 m\u00e1s es posible. Envolvemos el bot\u00f3n dentro de otro MediaUploadCheck<\/code>, solo para asegurarnos de que el usuario tenga las capacidades correctas.<\/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>ejecutamos onClick<\/code>una nueva funci\u00f3n dentro de nuestro componente: removeMedia()<\/code>. Lo definimos en alg\u00fan lugar justo antes de la funci\u00f3n de retorno del componente, como hicimos con onSelectMedia<\/code>.<\/p>\nconst removeMedia =() => {\n props.setAttributes({\n mediaId: 0,\n mediaUrl: ''\n });\n}<\/code><\/pre>\n<\/a><\/p>\nAgregar un bot\u00f3n de reemplazo<\/h3>\n
MediaUpload<\/code>componente. Proporcionamos la misma funci\u00f3n para onSelect<\/code>, allowedFileTypes<\/code>y value<\/code>que antes. Dentro del render<\/code>accesorio para MediaUpload<\/code>simplemente renderizamos otro Button<\/code>que abre la Biblioteca multimedia. Coloquemos este bot\u00f3n antes del bot\u00f3n Eliminar, ya que tiene m\u00e1s sentido para el usuario final:<\/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