Gutenberg, el nuevo editor de WordPress 5.0
INDICE
¿Que es Gutenberg?
Gutenberg, asi se llama el nuevo editor de WordPress a partir de la versión 5.0. Este nuevo editor permite a los usuarios crear publicaciones y paginas mediante el uso de bloques. Su propósito es facilitar la creación de paginas, donde el usuario puede estructurar los contenidos a gusto.
¿Que son los bloques?
WordPress los define como: “el termino abstracto utilizado para describir unidades de código HTML que, juntas, forman el contenido o el diseño de una pagina web”.
Pero, para que lo podamos entender, los bloques están formados por uno o varios formatos de contenido que incluyen texto, imágenes, vídeos y complementos de otros tipos.
El usuario elige la mejor forma de organizar los bloques, dentro de una publicación o pagina, simplemente moviéndolos al lugar deseado.
El objetivo es conseguir diseños atractivos para tus contenidos, sin tener que conocer ni usar código HTML.
Estructura de Gutenberg
- Área para escribir contenido. Se divide a su vez en titulo y cuerpo de la publicación.
- Ajustes del documento o bloque. Según la pestaña seleccionada puedes configurar uno u otro.
- Barra de herramientas. Esta barra contiene todas las herramientas que se pueden aplicar al contenido.
- Otras funciones. En esta barra se encuentran las funciones de Solo guardar, Vista previa o Publicar. También esta la opción de mostrar/ocultar los ajustes.
Como ajustar la configuración de cada bloque
En el área 1 esta el bloque, donde insertaremos el contenido que se vera. Al estar seleccionado el bloque, en la parte superior se ve la barra de herramientas, la cual permite cambiar el tipo de bloque, alineación del texto, añadir enlace, etc.
El área 2 muestra los ajustes del bloque, donde nos indica el tipo de bloque y nos permite algunos cambios como el tamaño de texto y color.
Cambio de tipo de bloque
Para cambiar el tipo de bloque, en la barra de herramientas, le damos al icono del bloque y nos permite transformar el bloque actual en otro tipo.
Ten en cuenta que no puedes cambiar a cualquier tipo de bloque. Según el tipo de bloque que es puedes cambiar a uno similar, por ejemplo el bloque de párrafo solo puede cambiar a un bloque de tipo texto.
¿Se puede trabajar con código HTML en el editor Gutenberg?
En la barra de herramientas, en el apartado de mas opciones hay la opción de “Editar como HTML”, y al contrario, si estamos editando en HTML podemos cambiar al editor visual.
¿Como se escribe un post?
El titulo no se considera un bloque pero cuando nos situamos en el aparece el espacio para modificar el slug de la URL. Una vez escrito el titulo y editado el slug, añadimos algo de contenido en el bloque de párrafo que aparece por defecto o añadimos otro tipo de bloque.
Tipos de bloques y como usarlos
Hay diversos tipos de bloques, que se dividen en varios tipos. A continuación veremos los bloques según el tipo a que pertenecen.
Bloques comunes
Párrafo
El bloque de parrafo es el mas sencillo de todos, y es como indica su nombre un bloque para escribir un parrafo. En un parrafo, desde la barra de herramientas, podemos ajustar la alineacion del texto, añadir texto en negrita y cursiva, añadir un enlace, o tachar palabras.
Desde los ajustes podemos definir el tamaño de la fuente, si queremos capitalizar (mostrar una letra inicial grande) y seleccionar color de fondo y de texto.
Encabezado
El encabezado añade contenido de texto para títulos o secciones. Su barra de herramientas es similar al del párrafo, podemos definir negrita, cursiva, tachado y enlace. Desde ajustes podemos definir el nivel del encabezado (H1, H2, etc.), desde un nivel 1 de letras grandes a un nivel 6 de letras pequeñas y la alineación de texto.
Imagen
Un bloque de imagen nos deja añadir una imagen desde nuestro equipo, biblioteca de medios de WordPress o desde URL. Al añadir una imagen podemos cambiar el tamaño manualmente desde el bloque o desde ajustes. Desde la barra de herramientas podemos elegir la posición de la imagen.
Lista
Tan simple como su nombre, añade una lista. Podemos alternar entre lista desordenada y lista ordenada desde la barra de herramientas.
Fondo
Con este bloque podemos añadir una imagen de fondo con ancho de todo un bloque.
Welcome to the jungle
Galería
Añade varias imágenes en un solo bloque. En este bloque ya no se pueden cambiar el tamaño de imágenes.
Cita
Nos permite añadir una frase mencionada por alguien.
Hay dos cosas que son infinitas: el universo y la estupidez humana; de la primera no estoy muy seguro. (Albert Einstein)
Audio
Añade un audio. Desde ajustes podemos definir si queremos reproducción automática y se repita.
Guns N’ Roses – Sweet Child O’ Mine
Archivo
Permite subir un archivo de cualquier extensión para descargar.
Vídeo
Podemos subir un vídeo desde el equipo o desde URL.
Bloques de Formatos
Código
Puedes escribir en código, y en la pagina web se vera toda la estructura preparada para copiar.
<html>
<head>
<title>Hola mundo</title>
</head>
<body>
El contenido de este documento...
</body>
</html>Clásico
Este te permite editar un bloque como si estuvieras en el editor anterior.
HTML personalizado
HTML personalizado nos deja escribir en código HTML. Lo que se vera en web no sera código, sino que se vera la parte visual del propio.
Preformateado
El bloque de preformateado nos va a respetar tanto los espacios como las tabulaciones que pongamos. A este bloque de texto podremos añadirle estilos con CSS.
El bloque nos añade el texto dentro de etiquetas <pre></pre> de HTML.
Como puedes ver este texto esta escrito en un solo bloque de texto preformateado.
Párrafo de cita
Con el párrafo de cita podemos citar a otros autores. Tenemos dos huecos, uno para escribir la cita y otro para escribir la referencia.
Era el mejor de los tiempos, era el peor de los tiempos, era la edad de la sabiduría, era la edad de la insensatez, era la época de la creencia, era la época de la incredulidad, era la estación de la luz, era la estación de la oscuridad, era la primavera de la esperanza, era el invierno de la desesperación.
Historia de dos Ciudades (Charles Dickens)
Tabla
Con el bloque tabla podemos insertar tablas HTML. Cuando insertemos una nos pedirá el numero de filas y columnas.
Cuando seleccionamos una celda tendremos la posibilidad de añadir o borrar filas o columnas con la opción en la barra de herramientas.
| Párrafo | Verso | Clásico | Encabezado | Código | |
| Formato | No | Si | Si | No | Si |
| Bloque común | Si | No | No | Si | No |
Verso
Con el bloque verso podemos insertar poesía, no tiene ajustes.
En mi casa nunca falta
El amor al que le hace falta.
Bloques de Elementos de Diseño
Columnas
Este bloque nos deja añadir columnas que pueden tener bloques de cualquier tipo. El único ajuste de este bloque es cuantas columnas hay hasta un máximo de 6.
Medios y Texto
Como su nombre indica, nos permite añadir una composición de una imagen junto a un texto. El bloque nos permitirá elegir si queremos la imagen a la derecha o a la izquierda, pero no podremos cambiar el tamaño de la imagen.
En la columna de contenido no podremos poner cualquier tipo de bloque, nos limita a ciertos bloques como párrafo, títulos, listas y botones.
Botón
Podemos añadir botones a los que podemos poner cualquier URL, pero no podemos añadirle la opción de abrir en nueva pestaña. Podemos añadirle el texto que queramos y cambiarle el color al botón como al texto. Ademas, podemos cambiar el estilo de botón.
Bloque de “Más”
El bloque de “más” no es un bloque visual a primeras. Lo que hace es que la página donde se muestran todos los artículos (archivo) cortará el extracto donde hayamos colocado este bloque. No tiene ajustes.
Salto de pagina
El bloque de salto de página nos permitirá separar nuestras entradas en distintas páginas. Es algo muy útil que nos permitirá ordenar mejor nuestros contenidos. Además, no tiene configuración alguna, es colocar el bloque y listo.
Separador
El bloque separador nos añade un línea para separar nuestros contenidos. Tiene tres estilos distintos, el por defecto que es una línea corta centrada, la línea ancha y por puntos.
Espaciador
El bloque de espaciador nos permite añadir espacio entre bloques. Su única configuración es poder elegir el alto que tiene el bloque.
Bloques de Widget
Shortcode
Nos permite añadir un shortcode. Un shortcode es un pequeño código que se inserta en las paginas o entradas de tu web para que aparezca un determinado elemento que no viene por defecto.
Archivos
Nos muestra por lista de meses las entradas de nuestro blog. Por defecto viene como lista, pero en ajustes podemos hacer que se muestre como desplegable y nos muestre contador de entradas.
Categorías
Nos muestra al igual que archivos una lista, pero de las categorías de la web.
Últimos comentarios
Nos muestra los últimos comentarios de nuestro blog. En ajustes podemos definir cuantos comentarios aparecen, la fecha que se publico ese comentario, el avatar de quien lo publico y el extracto (resumen muy corto).
Ultimas entradas
Nos muestra las ultimas entradas. Desde la barra de herramientas podemos alternar entre la vista de lista y la de columnas. En ajustes podemos definir el orden, categorías, numero de entradas a mostrar, la fecha de publicación y el numero de columnas.
Bloques de Incrustados
Estos tipos de bloques nos permite añadir contenido de otras plataformas como por ejemplo videos de YouTube, fotos de Instagram, música de Spotify etc.
Elementos Integrados
Imagen integrada
La imagen integrada te permite añadir una imagen en ciertos bloques (párrafo, listas, citas, botones, etc.) y cambiar el tamaño manualmente.
