Hoy vamos a hablar de Gutenberg, pero no del inventor de la imprenta con teclas móviles moderna, si no del nuevo editor de WordPress que va a cambiar completamente la forma en que publicamos contenido en nuestras páginas web.
Gutenberg es el nombre del proyecto que va a reemplazar en algún momento la forma en que publicamos contenido dentro de WordPress.
Actualmente la herramienta que tenemos para llevar a cabo esa labor es un editor Tiny mce que lo permite básicamente escribir texto, insertar imagenes, citas, listas, etc etc, sin embargo esta experiencia de publicación se ha ido quedando anticuada respecto a los avances tecnológicos de otras plataformas.
La gran diferencia que ofrece Gutenberg respecto al anterior editor es que la gestión de los contenidos se basa en bloques.
En dicho bloques podremos ir editando los contenidos en el orden que nos interese pero manteniendo todas las opciones de página de siempre. Independientemente de estas opciones mencionadas, Gutenberg añade unas nuevas funciones para la configuración de los bloques.
Índice de contenidos
Ajustes generales
Empecemos por lo más esencial. En la barra superior y de izquierda a derecha(recuadro rojo de la imagen):
- Botón para insertar bloques: Para insertar botones en el contenido.
- Botones de rehacer y deshacer: Para rehacer o deshacer acciones realizadas.
- Botón de estructura de contenido: Para ver información detallada de todo el texto.
- Botón de Navegación de bloques: Para ver la estructura de bloques y acceder a cualquier bloque directamente.
- Botón de guardar borrador: Para guardar el post sin publicarlo. Si eliges esta opción el contenido se guardará pero no estará visible para las personas que accedan a tu web.
- Botón de vista previa: Para ver una vista previa de como quedaría el post antes de publicarlo.
- Botón de publicar: Una vez has echo todas las revisiones y el post esta a tu gusto publicalo para que tus lectores puedan leerlo.
- Botón de ajustes(engranaje):Para que la barra de los ajustes de pagina desaparezcan.
- Botón de herramientas y opciones(tres puntos): Para configurar los ajustes de la página.
Debajo de los botones de vista previa y publicar encontraremos las pestañas de documento y bloque. La función de dichas pestañas es configurar las opciones que nos ofrece el post (configuraciones generales del documento) o el bloque que tengamos seleccionado en ese momento. Las funciones de los bloques variaran dependiendo de que tipo de bloque tengamos seleccionado.
Insertando mi primer bloque de texto en Gutenberg
Una vez dentro de Gutenberg lo primero que realizaremos sera darle un titulo a nuestro post o entrada. Lo debemos hacer en la sección donde pone anadir titulo(recuadro verde de la imagen).
Para insertar nuestro primer bloque de contenido pulsaremos en el signo + que hay en la esquina superior izquierda(recuadro rojo de la imagen). Una vez aparezcan las opciones de bloques clicamos sobre párrafo. Automáticamente en el contenido del post se cargara un bloque de párrafo . Ya podemos añadir nuestro primer texto. En la barra superior apareceran las opciones para alinear el texto, marcar texto como negrita, hacer cursiva, crear enlaces, etc etc.
Para finalizar este primer bloque de texto nos fijaremos en las opciones del bloque (recuadro azul de la imagen). Podremos ver las opciones de personalización del bloque de párrafo. Entre ellas podremos definir el tamaño del texto, definir color de fondo y de texto y si tienes nociones de CSS podrás aplicar tu propia clase de estilos.
Si lo que queremos es insertar un bloque de encabezado o titulo de sección o un bloque de lista lo podemos hacer de la misma forma que hemos insertado un bloque de párrafo.
Añadimos un bloque de imagen a Gutenberg
Para ello repetiremos la misma acción que para el bloque de párrafo. Nos situaremos en la esquina superior izquierda y hacemos click sobre el simbolo + (recuadro rojo de la imagen), desplegamos el selector y seleccionamos bloque de imagen.
Desde el bloque nos da diferentes opciones para subir nuestra imagen:
- Botón subir: Para subir y insertar una imagen alojada en tu ordenador.
- Botón biblioteca de medios: Para insertar una imagen que tengamos en la biblioteca de medios. Si queremos insertar una imagen que hemos utilizado en otro contenido no es necesario volverla a subir.
- Botón de insertar desde url: Para insertar una imagen utilizando una url. Hay que recalcar que eticamente no es una buena practica si no es que la url desde donde cargas la imagen no es de tu propiedad o no tienes consentimiento, por lo que no es recomendable hacer uso de esta opcion.
Una vez nos carga la imagen seleccionada en el bloque veremos 2 cosas. En la barra superior nos aparecerán 3 iconos (recuadro rosa de la imagen). Estos botones nos sirven para definir la alineación de la imagen, izquierda, derecha o centrada. Lo segundo que veremos son unos puntos en la imagen (recuadros verdes de la imagen). Seleccionando los puntos y arrastrando podemos modificar el tamaño de la imagen.
Si a esta imagen queremos añadir una leyenda o pie de foto lo haremos insertando el texto en el recuadro naranja de la imagen.
Para finalizar esta sección echemos un vistazo a las opciones del bloque (recuadro azul de la imagen). Podemos definir el texto alternativo de la imagen, definir un enlace que apunte a un archivo multimedia, una pagina de adjutos o una url personalizada.
Tambien nos permite definir el tamaño de la imagen de diferentes formas:
- Tamaño de la imagen: modificar el tamaño de la imagen a alguno de los tamaños definidos en ajustes/medios.
- Dimensión de la imagen: personalizar el tamaño de imagen al que se crea conveniente o por porcentaje en relación al tamaño original.
Si en lugar de insertar una imagen queremos añadir una galería podemos seguir los pasos de esta sección, con la única diferencia que en los ajustes del bloque nos aparecerá para seleccionar cuantas columnas debe tener la galeria.
Recuerda realizar una buena optimización de las imágenes. Haz click aquí para saber como hacerlo.
Insertar un vídeo en Gutenberg
Misma acción. Nos situaremos en la esquina superior izquierda y hacemos click sobre el simbolo + (recuadro rojo de la imagen), desplegamos el selector y seleccionamos bloque de video.
El bloque nos ofrece varias opciones para insertar el video (recuadro azul de la imagen):
- Botón subir: Para subir y insertar una imagen alojada en tu ordenador.
- Botón biblioteca de medios: Para insertar un vídeo que tengamos en la biblioteca de medios.
- Botón de insertar desde url: Para insertar un vídeo utilizando una url. Dicha url es la que aparece en la barra del navegador. Si por ejemplo queremos añadir un video de You Tube la url se parecera bastante a esto: https://www.youtube.com/watch?v=DxpaUuMhPeU
Añadiendo un vídeo o imagen de fondo con Gutenberg
Añadimos un bloque situandonos sobre el simbolo + (recuadro rojo de la imagen), desplegamos el selector y seleccionamos bloque imagen/vídeo de fondo.
El bloque nos ofrece varias opciones para insertar el contenido:
- Botón subir: Para subir y insertar una imagen alojada en tu ordenador.
- Botón biblioteca de medios: Para insertar un vídeo que tengamos en la biblioteca de medios.
Ya presente la imagen o el vídeo en el bloque podemos apreciar que se nos da la opción de insertar un texto para la imagen (recuadro verde de la imagen). Esta opción es ideal para crear cabeceras de contenido.
Pasamos a los ajustes del bloque (recuadro azul de la imagen). La primera opción nos permite definir si queremos que el contenido del fondo sea fijo. Con ello conseguiremos un efecto parecido al famoso efecto parallax.
La segunda opción de personalización es superposición. Lo que nos permite hacer es dale una capa de color al contenido del fondo. Con el selector de opacidad regulamos las cantidad de color.
Añadiendo más funciones de bloque a Gutenberg
Si bien para un maquetado de contenido muy básico podemos tener suficiente con los bloques que trae por defecto, en ocasiones podemos encontrarnos que nos limita nuestras opciones de diseño y personalización. Si buscamos en el repositorio de WordPress ya podemos encontrar varios plugins gratuitos que ofrecen una biblioteca más amplia. Algunos de estos plugins son:
