1.1.1.1.1.

1 Pr

MANUAL DE USUARIO DEL EDITOR GUTENBERG

PARA WORDPRESS

Contenido

Manual de usuario del editor Gutenberg para Wordpress .................................. 1

1 ¿Qué es Gutenberg? ......................................................................... 1
2 Conozcamos su interfaz .................................................................... 1
3 Como crear una entrada/página .......................................................... 4
3.1 Agregar un título ...................................................................... 4
3.2 Agregar un bloque ..................................................................... 5
3.2.1 Tipos de bloques ................................................................. 5
3.3 Mover un bloque ....................................................................... 6
3.4 Eliminar un bloque .................................................................... 7
4 Herramientas auxiliares.................................................................... 7
5 Opciones de visibilidad del documento / Opciones de bloque ...................... 11
6 Opciones de la entrada/página .......................................................... 11
7 Como seguir utilizando el editor clásico................................................ 12

1 ¿Qué es Gutenberg?
WordPress, en su última actualización, incorpora como novedad un nuevo editor de
entradas y páginas, al que han bautizado como “Gutenberg”.

La principal diferencia con el editor clásico es que este está basado en bloques.
Mientras que, en el editor antiguo, se iba componiendo la entrada con las herramientas
del editor como si fuera un documento, con el editor Gutenberg, se compone la página
de forma modular, a base de añadir bloques que pueden contener diferentes tipos de
contenido.

2 Conozcamos su interfaz
En un primer vistazo, podemos ver que la nueva interfaz es muy limpia, ofrece un
entorno muy despejado, lo que no implica que no podamos hacer grandes cosas.
Veamos las diferentes partes:

1
1.1.1.1.1.1 Pr

En esta sección, encontramos las opciones:

- Añadir un bloque.
- Deshacer acciones.
- Rehacer acciones.
- Estructura de contenidos (nos brinda información sobre número de palabras,
bloques, párrafos, etc.).
- Navegación de bloques (nos muestra un esquema de la estructura de nuestra
página).

- En esta parte, encontramos:

- El botón de programar (publicar).
- El botón para mostrar/ocultar las opciones de la página/bloque.
- El botón a más opciones.

2
1.1.1.1.1.1 Pr

En el panel de opciones encontramos dos pestañas:

- Documento: aquí tenemos las opciones generales propias del post o la página,
tales como la categoría o etiquetas que clasifiquen nuestra entrada, la imagen
destacada del post, las opciones de publicación, etc.

- Bloque: son las opciones propias del bloque que estemos editando en un
momento concreto y variaran en función del tipo de bloque que estemos
manejando. Por ejemplo, si estamos editando un bloque de texto, aparecerán
las opciones propias del texto (tamaño, color, formato, etc.).

3
1.1.1.1.1.1 Pr

Finalmente, en el centro de la pantalla, encontraremos el contenido de la página o del

post, incluyendo el título y, a continuación, los bloques de contenido que vayamos
añadiendo.

3 Como crear una entrada/página

Una vez que pulsemos en añadir entrada o página desde el menú lateral de WordPress,
accederemos al editor Gutenberg.

3.1 Agregar un título

Lo primero será rellenar el campo de título, para dar un título a la entrada.

4
1.1.1.1.1.1 Pr

3.2 Agregar un bloque

Para empezar a añadir contenido basta con situar el cursor en el campo de texto que

hay debajo del título y pulsar el botón para elegir uno de los múltiples bloques
de contenido disponibles. Se abrirá un menú donde, ordenados por su funcionalidad,
podemos encontrar los bloques disponibles.

3.2.1 Tipos de bloques

Los bloques más relevantes de cada sección son:

- Bloques comunes: son los elementos más comunes a la hora de crear un post o
una página.
o Párrafo: introduce un párrafo básico.
o Párrafo clásico: introduce un párrafo básico utilizando el editor clásico.
o Imagen: para introducir una imagen.
o Lista: para introducir una lista.
o Video: para introducir un video.
o Encabezado: añade un encabezado.
o Galería: nos permite crear una galería de imágenes.
o Cita: para introducir citas, con su correspondiente referencia. La cita
saldrá correctamente formateada.
o Audio: para introducir un audio.
o Fondo: permite crear una imagen de fondo sobre la que podemos situar
párrafos, encabezados o botones.
o Botón: para insertar un botón al que podemos añadir un enlace.

- Formato: son los elementos disponibles para formatear el contenido.

o Clásico: introduce un párrafo básico utilizando el editor clásico.

5
1.1.1.1.1.1 Pr

o Código: para introducir un bloque de texto formateado en forma de

código de programación. No interpreta etiquetas o sentencias de código
que pudiéramos incluir.
o Pre formateado: para introducir texto sin saltos de línea automáticos.
o Cita: para introducir citas, con su correspondiente referencia. La cita
saldrá correctamente formateada.
o HTML personalizado: permite añadir código html directamente.
o Verso: similar a un bloque de párrafo, pero con menos opciones de
personalización. Está pensado para quienes escriben poemas o llevan un
blog literario.
o Tabla: permite crear tablas.

- Elementos de diseño: son los elementos destinados a maquetar el contenido.

o Botón: para insertar un botón al que podemos añadir un enlace.
o Columnas: crea un espacio en columnas donde podemos añadir cualquier
tipo de bloque.
o Medios y texto: crea un bloque a dos columnas, donde una de las
columnas corresponde a un elemento multimedia y la otra a uno o varios
elementos del tipo encabezado o párrafo.
o Más: permite definir el punto de la entrada a partir de la cual se oculta
en la vista de blog.
o Salto de página: permite dividir un artículo en varias partes. Y coloca
debajo unos enlaces para pasar a la página siguiente.
o Espaciador: Nos permite dejar un espacio en blanco de la altura exacta
que nosotros queramos.
o Separador: inserta una línea horizontal en medio del contenido.

- Widget: algunos widgets pueden ser agregados a las propias entradas o páginas.
- Incrustados: podemos incorporar contenido de otras plataformas mediante la
incrustación, simplemente con la url del objeto destino.
Una vez que conocemos todos los bloques disponibles basta con ir agregándolos en
nuestra entrada.

3.3 Mover un bloque

Es posible desplazar y reorganizar dentro de una entrada o página cualquiera de los
bloques utilizados. Para ello, basta con pulsar sobre el bloque que queremos mover y
usar las opciones de desplazamiento, situadas en el borde exterior superior izquierdo
del bloque:

Se puede pulsar sobre los puntos para arrastrar el bloque y soltarlo en el lugar deseado,
o subirlo o bajarlo pulsando sobre las flechas.

6
1.1.1.1.1.1 Pr

3.4 Eliminar un bloque

Para eliminar un bloque basta con situarse sobre el bloque en cuestión y pulsar la tecla

“Supr” o pulsar sobre el icono y posteriormente, en el menú que se despliega

“Quitar bloque”.

4 Herramientas auxiliares
El editor Gutenberg incorpora una serie de herramientas que pueden ayudarnos a la
hora de publicar nuestras entradas. Las podemos encontrar en:

- Parte superior izquierda de la pantalla.

7
1.1.1.1.1.1 Pr

Deshacer acciones

Rehacer acciones

Estructura del contenido: proporciona un esquema o índice del contenido,

indicándonos información sobre el contenido. Nos permite además acceder a dicho
contenido pinchando en cada elemento de este índice.

Navegación de bloques: una vez vayamos incorporando bloques, se mostrarán

en esta ventana y podremos ver cómo están apilados y organizados.

8
1.1.1.1.1.1 Pr

- Parte derecha de la pantalla.

o Opciones de guardado: en la zona derecha de la cabecera se pueden
encontrar las diferentes opciones relativas al estado de la
entrada: borrador, publicada/no publicada, vista previa…

o Ajustes: es el icono de la rueda dentada. Permite mostrar u ocultar la

barra lateral de la derecha de la pantalla, para proporcionarte más
espacio.

o Mostrar más herramientas y opciones: en la parte derecha del todo, en

el icono de los tres puntos se encuentran varias opciones más.

9
1.1.1.1.1.1 Pr

Estas vienen divididas en los siguientes bloques:

• Ver:
o Barra de herramientas superior: por defecto, las opciones de cada
bloque aparecerán justo sobre el propio bloque. Si prefieres que, en vez
de verse de esta forma, se vea en la cabecera principal superior, activa
esta opción.
o Modo de enfoque: para evitar distracciones mientras se trabaja en un
bloque, se puede activar esta opción y los demás bloques bajarán
automáticamente su opacidad para que el foco quede en el bloque
activo.
o Modo a pantalla completa: esta opción ya existe en el editor clásico y
permite ocultar los menús de WordPress.

• Editor:
o Editor visual: para trabajar en modo visual con los bloques.
o Editor de código: para trabajar en modo código HTML con los bloques.

• Herramientas:
o Gestionar todos los bloques reutilizables: existe la posibilidad de
guardar bloques para poder reutilizarlos. Desde aquí se te abrirá una
pantalla de WordPress donde gestionarlos todos.
o Atajos de teclado: visualiza aquí todos los atajos de teclado disponibles
en Gutenberg.

• Copiar todo el contenido: permite copiar todo el contenido y pegarlo en otra

entrada o en la misma.
• Opciones: aquí puedes activar o desactivar las diferentes opciones que quieras
que aparezcan en la barra lateral del editor u otros lugares.

10
1.1.1.1.1.1 Pr

5 Opciones de visibilidad del documento / Opciones de

bloque
En esta zona de la interface existen dos pestañas, “Documento” y “Bloque”.

• Documento: aquí se ve la información relativa a la visibilidad de la entrada, la

fecha de publicación, el formato de la entrada y otros parámetros.

• Bloque: cuando se tiene seleccionado un bloque se puede ver aquí su

configuración y modificar parámetros específicos de cada bloque en cuestión.

6 Opciones de la entrada/página
Finalmente, en la parte inferior de la barra lateral, existen otra serie de opciones ya
conocidas para configurar la entrada: enlace permanente (slug), categorías, etiquetas,
imagen destacada, extracto y comentarios, etc.

11
1.1.1.1.1.1 Pr

7 Como seguir utilizando el editor clásico

Aunque el editor Gutenberg nos permite realizar maquetaciones muy interesantes y es
bastante sencillo e intuitivo de utilizar, es posible seguir utilizando el editor clásico si
no se necesitan las prestaciones del nuevo editor.

Hay dos formas de poder utilizar el editor clásico de WordPress:

• Desde el propio editor Gutenberg añadiendo bloques del tipo “Párrafo clásico”.
Este nos abrirá en el espacio que ocupa el bloque a insertar, el editor clásico
de WordPress, con el que se puede añadir contenido a dicho bloque.

• Utilizando el plugin “Editor clásico”. Este plugin desactiva el editor Gutenberg

y permite editar con el editor clásico de WordPress, incluido en versiones
anteriores. Para activar este plugin contacte con el administrador de la
plataforma.

12