Gutenberg

Contactar con el profesor

Es el editor de contenido por defecto de WordPress desde la versión 5.0. Sustituye al editor TinyMCE, que fue la opción por defecto durante 15 años.

Interfaz

Inserción de bloques:

Tenemos 3 formas de hacerlo:

1. Utilizando la cruceta de la barra superior.

Gutenberg 1

2. Utilizando la cruceta que aparece al pasar el cursor por encima de nuestro contenido.

Gutenberg 2

3. Comenzando a escribir la contrabarra (/) en un párrafo (forma recomendada).

Estructura de contenido

Esta opción nos será útil para ayudarnos a mejorar el SEO de nuestro contenido.

Nos permitirá conocer el número de palabras y la estructura de encabezados de nuestro contenido.

Gutenberg 3
Gutenberg 4

Puede ser útil cuando nuestra página tiene muchos bloques. Personalmente, nunca la uso.

Gutenberg 5

Publicación

Cuando le damos al botón de publicar (poner nuestro contenido online para que todo el mundo pueda verlo) WordPress nos pregunta acerca de algunas condiciones de publicación. Digamos que es una publicación en dos pasos. Para que nuestro contenido se publique automáticamente, sin tener que dar dos pasos, podemos desmarcar la check inferior.

Gutenberg 6

Cambiar el enlace permanente de la entrada.

Tenemos dos formas:

1. Pulsando en el título de la entrada:

Gutenberg 7

2. Modificando el slug en la barra lateral:

Gutenberg 8

Mas herramientas y opciones

Aquí podremos configurar algunas opciones de la página:

Gutenberg 9

Opción Ver:

  • Barra de herramientas superior (yo la prefiero desactivada). Por defecto, las herramientas de edición de cada bloque aparecen al pasar el cursor por encima, justo en la posición del bloque. Esto es lo que más cómodo me resulta, porque no hace falta mover mucho el ratón para gestionarlas. Esta opción pasa esta barra de herramientas a la parte superior de la página.

Con la opción desactivada:

Gutenberg 10

Con la opción activada:

Gutenberg 11
  • Modo de enfoque. Esta opción difumina los bloques con los que no estamos trabajando. Personalmente, me gusta tenerlo activo.
  • Modo a pantalla completa. Elimina la visualización de múltiples barras de herramientas para que podamos centrarnos en el contenido. Personalmente, prefiero no tener esta opción activa, ya que alterno la creación de contenidos con el uso de las barras de herramientas que esta opción hace desaparecer.

Opción Editor:

Podremos alternar entre editor visual y de código. Pese a ser programador, nunca utilizo el editor de código. No obstante, esta opción puede ser útil si queremos llevar nuestro contenido a otra página que no haya sido desarrollada en WordPress.

Opción Herramientas:

Aquí podremos gestionar los bloques que usaremos, así como los bloques reutilizables (bloques definidos por nosotros mismos; lo veremos más adelante).

  • Atajos del teclado. Te comento los más habituales:
    • ctrl + s → salva el documento.
    • ctrl + z → deshace la última acción.
    • ctrl + shift + z → rehace lo que acabas de deshacer.
    • ctrl + a → selecciona todos los bloques.
    • ctrl + alt + t → introduce un bloque antes del bloque seleccionado.
    • ctrl + alt + y → introduce un bloque después del bloque seleccionado.
    • shift + alt + z → elimina el bloque seleccionado.
    • ctrl + b → cambia el texto seleccionado a negrita (bold).
    • ctrl + i → cambia el texto seleccionado a cursiva (italic).
    • ctrl + k → convierte el texto seleccionado en un enlace.
  • Opciones: Nos permite personalizar que opciones se visualizarán en nuestra página de edición de contenido.

Herramientas de bloque

Barra de herramientas de bloque

Aparece cuando pulso sobre un bloque. Permite configurar varios aspectos del mismo dependiendo de su tipología. Es bastante intuitivo.

Gutenberg 12

Desplazar bloques

Lo podremos ahcer con la pequeña barrita de herramientas que aparece al seleccionar un bloque.

Gutenberg 13

Tipos de bloques

Bloques comunes de texto

Bloque de párrafo

Cada vez que hagamos un salto de línea (pulsemos enter), se introducirá un nuevo bloque. Si queremos evitarlo, usaremos shift + enter.

Gutenberg 14

Gutenberg 15

Bloque de Encabezado

Gutenberg 16
Gutenberg 17

Bloque de lista

Gutenberg 18

Bloque de cita

Gutenberg 19
Gutenberg 20

Bloques comunes de imagen

Bloque de imagen

Gutenberg 21

Para que las opción Wide width y Full width funcione, el tema debe estar adaptado a Gutenberg.

Gutenberg 22
Gutenberg 23

Bloque de galería

Gutenberg 24
  • Para que el diseño no se rompa, es recomendable tener activada la opción de recortar imagen.
  • En el apartado de enlace, media file enlace con la imagen y Attachment Page con una página en la que está la imagen.
Descargar Recurso

Bloque de fondo

Gutenberg 25

Es posible añadir tanto imágenes como videos. Tener en cuenta que para subir un video el servidor debe permitir la subida de ficheros de cierto peso.

Descargar video para hacer pruebas

Bloques comunes multimedia

Automáticamente mostrará un reproductor.

Bloque de archivo

Bloques de formatos

Bloque de HTML personalizado

Su botón de vista previa nos muestra cómo se vería el código HTML cuando sea intepretado.

Bloque de código

Me permiten mostrar ejemplos de código fuente con un diseño diferente.

Bloque clásico

Permite introducir un bloque de texto que utilizará el editor de contenido clásico TinyMCE.

Este bloque tiene la opción convertir en bloques, que nos permitirá descomponer el contenido de nuestro bloque clásico en los nuevos bloques de Gutenberg. Esto es especialmente útil cuando estoy editando contenido de un WordPress que no usaba Gutenberg.

Gutenberg 29

Bloque de preformateado (<pre>)

No se me ocurre una situación en la que necesitases usar este bloque.

Párrafo de cita

Permite añadir una cita célebre a nuestro contenido.

Bloque de tabla

Gutenberg 30
Gutenberg 31

Bloque de verso

Le dá un diseño especial a nuestro poema.

Permite tener multilínea dentro de un mismo bloque. El bloque de párrafo, sin embargo, al hacer un salto de línea inicia un nuevo bloque.

Gutenberg 32

Bloques de diseño

Bloque de columnas

Una vez insertado, para acceder a las características del bloque de columnas debemos pulsar en el espacio que hay entre columnas.

Bloque de botón

Gutenberg 33
Gutenberg 34

Bloque de medios y texto

El resultado de utilizarlos es similar a crear una fila de dos columnas con una imagen y un texto.

Bloque de separador

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Repellendus officiis, in asperiores esse unde eius.


Corporis itaque obcaecati nam facilis suscipit veniam tenetur dignissimos odit maxime? Provident quibusdam ullam animi!


Lorem ipsum dolor, sit amet consectetur adipisicing elit. Repellendus officiis, in asperiores esse unde eius.


Gutenberg 35

Bloque espaciador

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Repellendus officiis, in asperiores esse unde eius, corporis itaque

obcaecati nam facilis suscipit veniam tenetur dignissimos odit maxime? Provident quibusdam ullam animi!

Gutenberg 36

Bloque más

Permite introducir el corte de “Leer más” cuando el sitio web lo utilice al mostrar el previo de las entradas.

Bloques incrustados

Permiten incluir servicios de terceros en nuestra página web: videos de youtube, de vimeo, canciones de spotify, tweets de twitter, publicaciones de instagram, de facebook, de otro WordPress, etc.

Podremos insertar cualquier servicio de terceros que se encuentre detallado en embed.com.

Bloques de widgets y shortcodes

Bloque de archivos

Muestra una lista con los meses de las últimas publicaciones.

Gutenberg 37

Bloque de categorías

Bloque de Últimas entradas

Bloque de RSS

Bloque de shortcode

Permite insertar shortcodes.

Bloques reutilizables

Es un bloque que diseñamos para poder reutilizar en todo nuestro sitio web sin tener que rehacer su configuración cada vez que lo querramos insertar.

Cuando editamos un bloque reutilizable, se editan todas las instancias del mismo.

Además será posible exportarlo e importarlo en otras páginas web creadas con wordpress.

Para exportar el bloque reutilizable:

Gutenberg 41

Para importar el bloque tenemos dos formas:

  • Utilizar el nombre que le hemos dado al bloque reutilizable.
Gutenberg 42
  • Filtrar la búsqueda de bloques escribiendo reutilizable saldrá el listado de bloques reutilizables:
Gutenberg 43

Gestión de los bloques reutilizables:

Llendo a esta opción podemos gestionar todos los bloques reutilizables:

Desde aquí podremos exportar e importar los bloques como un archivo JSON para importarlo en otro WordPress.

Gutenberg 44
Gutenberg 45

Duplicar un bloque reutilizable

Tendremos que insertarlo en la web → convertirlo en un bloque normal → editarlo → volver a salvarlo como un bloque reutilizable nuevo.

Colecciones de bloques:

A continuación tienes algunas de las más famosos. Personalmente, yo no las uso. Lo que me da Gutenberg me basta y me sobra:

Subida de imágenes

Cuando subes una imagen a través de WordPress, este la triplica, creando 3 versiones más de diferentes tamaños.

El tamaño de estas versiones se puede gestionar en ajustes -> medios

Si queremos regenerar el tamaño de las imágenes ya subidas, podemos usar el plugin: Regenerate Thumbnails

Ejercicio para practicar

← Categorías y Tags
Crear el menú de navegación principal →

Aviso Legal | Política de privacidad