1

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:

2

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.

3

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.).

4

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.

5

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.

6

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.

7

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.

8

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.

9

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.

10

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.

11

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.

12

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.