¿Cómo usar MediaUpload, componente para bloques de Gutenberg?

Último tutorial en lo referente a Gutenberg, el nuevo editor de WordPress, en esta ocasión sobre el uso del componente MediaUpload. Este artículo tiene como base la herramienta “create-guten-block” para estructurar un bloque. Aunque también sirve como referencia para los que no lo usan. Si no estás informado sobre dicha herramienta, te invito a leer este otro artículo relacionado con ella.

Tutorial: MediaUpload

Nota: Recuerda que al final del documento adjunto el resultado del archivo generado con este tutorial.

Como toda herramienta, empezaremos declarándola junto a otros componentes que usaremos. También necesitamos registrar 2 atributos básicos para mostrar correctamente una imagen. Por ejemplo:

Luego dentro del parámetro edit configuramos la función setMedia para guardar los valores en los atributos asignados. Luego a la hora de renderizar los campos necesarios para subir la imagen, se podría optar por dos localizaciones: en el editor o en la barra lateral. Las localizaciones son a libre elección en función de lo que nos parezca más intuitivo para el usuario.

Campos en el editor

Esta forma es la más clásica, pues, como opinión personal, es la mejor para orientarnos en el documento. Para la renderización usaremos un array para generar 3 elementos: configuración para generar el botón de subida (1), el título que se mostrará en el editor (2) y el preview cuando se carga la imagen (3).

El resultado sería el siguiente:

Mediaupload preview example editor gutenber

Campos en la barra lateral

Para mostrarlo en la barra lateral, será necesario usar el componente InspectorControls. Para la renderización usaremos un array para generar 3 elementos: configuración para generar el campo en la barra lateral (1), el título que se mostrará en el editor (2) y el preview cuando se carga la imagen (3).

El resultado sería el siguiente:

Ejemplo MediaUpload Preview Gutenberg

Por último, sin importar la localización que se elija, configuraremos el parámetro save para mostrar la imagen correctamente la imagen con solo los atributos mediaURL y mediaAlt.

La configuración dará como resultado el siguiente HTML.

Hasta aquí finalizamos el tutorial en el uso del componente MediaUpload y espero que sea de ayuda para personalizar los proyectos con Gutenberg. El siguiente tutorial será de cómo cargar imágenes con la herramienta de WordPress en nuestro bloque.

block.js final

Adjunto el aspecto de mi archivo hola-block/src/block/block.js por si algún dato no quedó claro. Si llegase haber algún error, hacérmelo saber en los comentarios.

 



¿Te gusta este post? Es solo un ejemplo de cómo podemos ayudar a tu empresa...
Sobre Victor Vargas

Desarrollador de aplicaciones web y móviles. Mi experiencia se extiende en el desarrollo de módulos, plugins, scripts y temas para diversas plataformas como Wordpress, Prestashop, Magento, MediaWiki, CRM, Odoo, etc.

Queremos tu opinión :)