GUTENBERG BÁSICO

¿Qué son los bloques?

Los bloques son secciones de contenido que podemos añadir a nuestro artículo.

Cada vez que insertamos un texto o una imagen en nuestro artículo, el editor Gutenberg lo convierte en un bloque, que permite darle formato y manejarlo de forma mucho más sencilla.

Cada bloque es como una caja que tiene su propia barra de herramientas formada por las propias del bloque y las comunes a todos. En la parte izquierda están los botones de desplazamiento que te permiten arrastrar y cambiar la posición del bloque dentro del artículo.

Tipos de bloques en Gutenberg

Los bloques se dividen en categorías según su contenido o función. Ten en cuenta que con cada actualización de WordPress y cuando Portaledu incorpora nuevos plugins, aparecen nuevos bloques y funcionalidades!:

1. Bloques comunes

Son los más habituales, nos permiten añadir textos, imágenes y contenido multimedia.

2. Bloque de Párrafo

Nos permiten insertar texto y darle formato. Podemos cambiar la alineación del texto, añadir negritas, cursivas y tachados e incluir enlaces.

Ajustes avanzados: en las herramientas de la columna derecha encontraremos ajustes como tamaño de fuente, capitalizar y ajustes de color.

Permite cambiar a los siguientes bloques: Encabezado, Lista, Cita, Preformateado y Verso.

3. Bloque de Listas

Crea una lista numérica o con viñetas para estructurar mejor tu contenido. Además, se puede variar la sangría, añadir negritas, cursivas, tachado y enlaces.

4. Bloque de Encabezado (Si quieres un control más avanzado, puedes utilizar el bloque Titular)

Solamente podemos añadir un H1 (el del título) pero con este bloque podemos estructurar nuestro artículo con diferentes H2 y H3. Podemos añadirle negritas, cursivas, enlaces y tachados.

Ajustes avanzados: nivel de encabezado (H1, H2, H3…), alineamiento del texto.

Para encabezados con mayores opciones de estilo y personalización, utiliza el bloque Titular de generateblocks.

5. Bloque de Cita

Podemos destacar la frase que prefiramos. Tenemos las mismas herramientas que el bloque de texto. Además nos permite añadir la referencia o autor de la cita.

6. Bloque de Imagen

Podemos añadir imágenes subiéndolas nosotros mismos desde nuestro pc, desde la biblioteca de medios o desde una URL y modificar su alineado en el contenido.

Consejo avanzado: Hay un bloque de imagen más avanzado, que permite una mayor configuración. Es el bloque de imagen de generateblocks. Podrás identificarlo porque se muestra con color azul en la parrilla de bloques.

7. Bloque de Galería

Nos permite añadir varias imágenes a la vez y estructurarlas en columnas y mucho más. Más información aquí.

8. Bloque de Fondo

Es un bloque de imagen o vídeo que nos permite añadir un texto sobreescrito. Muy útil si queremos hacer una cabecera de página o un destacado con un toque de diseño. Nos permite alinearlo y modificar el estilo del texto.

Ajustes avanzados: color de superposición, opacidad y clase CSS adicional.

9. Bloque de Archivo (Ideal para mostrar PDFs!)

Funciona igual que el bloque de imagen, pero nos permite añadir cualquier archivo y crear un enlace para verlo en el explorador o descargarlo a nuestro ordenador.

10. Bloque de Audio

Bloque similar a los de imagen y archivo. Nos permite vincular un archivo de audio que se podrá reproducir directamente en la página.

Ajustes avanzados: reproducción automática, repetir y precarga.

11. Bloque de Vídeo

Nos permite vincular un archivo de vídeo que se podrá reproducir directamente en el artículo.

Los bloques recogidos en este post son sólo un ejemplo. Con cada actualización de WordPress y con algunos plugins incorporados, como GenerateBlocks, encontrarás en el editor bloques cada vez más funcionales y variados. ¡Entra en el editor y compruébalo!

¿Qué es Gutenberg?

Gutenberg es el editor visual o editor de bloques de WordPress, que nos permite crear y personalizar los contenidos de nuestros artículos

La principal diferencia de Gutenberg con el antiguo editor clásico es su estructura de bloques. Con un diseño simplificado, este editor nos permite gestionar cualquier texto o archivo de nuestras entradas mediante bloques.

Estructura del editor Gutenberg

En la parte central tenemos el contenido o vista previa de la entrada. Inicialmente aparece un apartado para insertar el título y otro para añadir el texto y demás contenido que irá en el cuerpo de nuestro artículo.

A la derecha tenemos un panel lateral, que ofrece ajustes del documento (entrada o página) (categoría, etiquetas, imagen…) o de bloque, si tenemos algún bloque seleccionado. Podemos ocultar y mostrar este panel pulsando sobre el icono correspondiente en a barra superior, arriba a la derecha.

Junto a este icono tenemos también los botones de Vista Previa y Publicar.

En la parte izquierda de la barra superior tenemos el icono «+», que nos permite insertar los diferentes tipos de bloques. Mediante las flechas podemos deshacer o rehacer los cambios realizados. Por último, el icono de las líneas nos muestra una vista de lista con los diferentes bloques del artículo para navegarlos rápidamente. Desde ahí podemos copiar, pegar, mover o duplicar bloques sin dificultad.

Primeros pasos

Para insertar un bloque tenemos varias opciones:

• Desde el icono “+” situado arriba a la izquierda. Ahí podemos, o bien buscar el bloque que necesitemos en los menús desplegables, o bien directamente introducir su nombre en el buscador.

• Cuando pulsamos la tecla «Enter» al insertar un texto en el contenido, automáticamente se crea un nuevo bloque de texto.

• Consejo para usuarios avanzados!: Tal como nos indica el editor, cuando el cursor está en una posición vacía del área de contenido, (Teclea / para añadir un nuevo bloque) escribiendo la barra derecha «/» podemos comenzar a escribir el nombre del bloque e insertarlo rápidamente.

• Pulsando sobre los iconos “+” que aparecen al pasar el ratón sobre el contenido, automáticamente se crea un nuevo bloque de texto.

Una vez insertado un bloque, al seleccionarlo, aparecerá una barra con las diferentes herramientas para el mismo. La primera nos permite cambiar el tipo de bloque por otro similar. El resto son opciones para variar el formato, en función del tipo de bloque.

En la parte izquierda de la barra de herramientas del bloque están los botones de desplazamiento, que nos permiten mover el bloque por el contenido de la página.

Al tenerlo seleccionado podremos ver también, en el Panel lateral derecho, las opciones avanzadas que nos permite ese bloque.

Bloques básicos

Gutenberg posee numerosos bloques, aquí tienes los más útiles y habituales:

• Párrafo: desde este bloque se puede añadir texto y modificar sus propiedades básicas (alineados, negrita, cursiva) o añadir enlaces.
• Encabezado: solamente se puede añadir un H1 (el del título), pero con este bloque es posible estructurar la entrada con diferentes H2, H3…
• Imagen: permite añadir imágenes, subiéndolas desde la biblioteca de medios o desde una URL.
• Lista: crea una lista numérica o con viñetas para estructurar mejor el contenido.
• Cita: destaca la frase que prefieras del contenido.

Estos son solo algunos de los bloques más comunes, puedes conocerlos más en detalle trabajando directamente sobre un post en Portaledu.

Gutenberg pone a nuestra disposición otros muchos bloques para manejar los diferentes contenidos de nuestros artículos. Además, cada bloque tiene sus propios ajustes, se puede navegar por ellos y revisar todas sus opciones.