Tutorial del nuevo editor Gutenberg de WordPress

Desde la versión 5.0 de WordPress, los usuarios de este sistema CMS disponen de un nuevo editor para crear contenidos web: Gutenberg. Utiliza los llamados bloques para crear el sitio web. Se pueden editar bloques individuales. En el siguiente tutorial se explica cómo utilizar este editor a la hora de crear contenidos para el sitio web.

¿Qué es Gutenberg?

Gutenberg es el nuevo editor por defecto de WordPress. Funciona con un principio diferente al del editor TinyMCE utilizado anteriormente. La creación de una página con bloques ofrece una experiencia completamente nueva al crear un sitio. Se puede trabajar con el texto en bloques individuales como en un editor de texto.

Los bloques pueden moverse y agruparse página por página según las preferencias del usuario. Gutenberg permite al usuario personalizar mejor el aspecto y el diseño de la página.

¿Qué es un bloque?

Los bloques son piezas de contenido en una página. Puedes crear un bloque para texto, widgets, imágenes, vídeos, citas, etc. Cada bloque puede editarse posteriormente. La ventaja de crear la web así es la función de arrastrar y soltar que permite mover los bloques con facilidad.

💡 Consejo: Elegir el hosting adecuado es fundamental para un sitio web rápido. Recomiendo confiar en una calidad probada: Banahosting, Nicalia o Raiola.

¿Cómo se crea una web con el editor Gutenberg?

Para crear una nueva página, dirígete a páginas > Añadir nueva en el gestor de sitios. Se abrirá la siguiente página:

Introduce un título en el bloque que aparece en la parte superior. En el nuevo editor la opción para editar el slug de la página se encuentra en el apartado Enlace permanente de los ajustes en la barra lateral derecha.

También puedes editar el Slug en cualquier momento editando el propio título.

Creación de bloques

Una vez introducido el título, se puede añadir más texto al panel de escritura predefinido o incrustar tu propio bloque. Para ello, haz clic en el icono del signo más para seleccionar el tipo de contenido que deseas añadir.

En el ejemplo, hemos añadido un párrafo. En el bloque de párrafos, encontrarás opciones de fuente, alineación y un icono para insertar enlaces. En la parte inferior de la barra de herramientas de edición de bloques, encontrará un botón con tres puntos en vertical que abre Más opciones de edición. Por ejemplo, puede ocultar la configuración del bloque, duplicar, editar como HTML, añadir bloques reutilizables y eliminar un bloque.

Hay otras opciones de texto disponibles en la parte derecha de la pantalla. La configuración de la fuente está disponible aquí. Puedes seleccionar un tamaño de fuente entre varias opciones preestablecidas o establecer tu propio tamaño. También puede seleccionar un color de fondo, un color de texto o hacer sus propias personalizaciones.

Las opciones de edición de los bloques que se encuentran directamente encima del bloque, así como en la parte derecha de la pantalla, varían en función del tipo de bloque.

Cambiar el tipo de bloque

Puedes cambiar el tipo de bloque en cualquier momento durante la creación de la página. Para ello, haz clic en el primer botón situado sobre el bloque activo. Aquí se muestra siempre el símbolo del tipo de bloque activo. Haz clic en este botón para ver una lista de los bloques disponibles para la selección.

💡 Sugerencia para temas: Para temas premium, hemos tenido buenas experiencias con GeneratePress y temas de Elegantthemes y Themeforest.

Tipos de bloques

Al crear páginas, hay varios tipos de bloques disponibles. Están dispuestos en una lista ordenada que se divide en varias partes:

Más utilizados – Aquí puedes ver los tipos de bloques ha sido más utilizados, como párrafos, imágenes, galerías, etc. (Si no te aparecen es porque no está activa esta opción en las Preferencias que puedes establecer en las Opciones de la barra superior a la derecha)

Texto – Aquí se pueden encontrar bloques relacionados con el texto como párrafos, encabezados, listas o contenido con formato como las citas, tablas, códigos, editor de texto clásico de WordPress, etc.

Medios – Aquí se pueden encontrar bloques para Imágenes, Vídeos, Archivos, Galerías… y otras áreas de la página relacionadas con los medios.

Diseño – Aquí puedes encontrar bloques de Botón, Columnas, Grupo, Espaciador o bloques relacionados con el diseño de la página.

Widgets – Permite añadir shortcodes, categorías, una lista de comentarios recientes, HTML personalizado y mucho más.

Incrustados – Permite incrustar contenido externo como YouTube, Twitter, Instagram, Facebook y muchos más.

¿Cómo crear el diseño de página sencillo?

En primer lugar, vamos a crear una página sencilla. Todo lo que se necesita es un título, un texto, una imagen, una lista con viñetas y una galería de imágenes.

Añadir un texto

Una vez introducido el título, basta con empezar a escribir en un bloque preestablecido. Gutenberg crea un bloque separado para cada párrafo. No es necesario añadirlo a la página cada vez. Sólo tienes que pulsar la tecla Enter. Se creará un nuevo bloque de párrafo por sí mismo.

Añadir una imagen

Para añadir una imagen, selecciona el bloque en la lista de bloques. La lista de bloques se muestra pulsando el icono del signo más en la parte superior izquierda de la pantalla. Puedes seleccionar una imagen de la biblioteca multimedia o subirla a la página.

Aparecerá en el diseño de la página tan pronto como se cargue. En la parte derecha de la pantalla, ajusta el tamaño de la imagen, introduce un texto alternativo o añade un enlace.

Añadir una lista con viñetas

Seleccione el bloque adecuado de la lista. Al editar el texto, también tienes la opción de seleccionar una lista numerada, insertar un enlace, etc.

Añadir una galería de imágenes

Selecciona el bloque de la galería en la lista de bloques. A continuación, sube tus imágenes. Puedes editar la alineación, añadir o eliminar una imagen del bloque de la galería. En la parte derecha de la pantalla, encontrarás funciones para establecer el número de columnas y recortar las imágenes de la galería.

Cómo mover los bloques

Puede mover bloques individuales en la página. Los botones necesarios aparecen cuando se mueve el cursor sobre el bloque que se quiere mover. Hay dos flechas, una para subir y otra para bajar. Estas mueven el bloque seleccionado una posición hacia arriba o hacia abajo. Entre las flechas está el icono de arrastrar y soltar. Al pasar el puntero del ratón por encima, aparece un puntero que permite encajar fácilmente el bloque y moverlo al lugar deseado.

¿Cómo reutilizar los bloques creados?

Si has creado un bloque que quieres reutilizar más adelante, haz clic en el icono de Más opciones (3 puntos verticales). Se encuentra en el menú de funciones de la parte superior del bloque. Seleccione aquí Añadir a bloques reutilizables.

De esta manera, siempre tendrás acceso a los bloques creados cuando crees una nueva entrada. Los bloques guardados aparecerán en la lista de tipos de bloque en Reutilizable. También se pueden gestionar. Puedes volver a convertirlos en un bloque normal o eliminarlos del menú.

Otras funciones

Hay algunas funciones útiles disponibles al crear páginas o entradas. Veamos primero los botones de la parte superior de la página.

• He mencionado el primero de los iconos. Se utiliza para Añadir un bloque a la página.
• El segundo enlace, Modos, permite elegir entre la herramienta Editar y Seleccionar los bloques.
• Las flechas de Deshacer y rehacer: te llevarán un paso hacia adelante o hacia atrás.
• El icono de Detalles permite ver la estructura del contenido.
• El último botón, Contorno ofrece una función interesante. Además de mostrar el orden de cada bloque, también realiza un salto rápido al bloque seleccionado.

En el lado derecho encontrarás más funciones. Es posible que ya conozcas algunos de ellos por haber trabajado anteriormente con WordPress. Otras son nuevas.

Entrada / Página – Permite acceder a la configuración del documento, como la edición de la URL de una página, la adición de una imagen destacada y la posibilidad de permitir comentarios. La asignación de categorías y etiquetas también está disponible. También puede añadir un texto de resumen.

Bloque – Ya hemos mencionado algunas de las características de este apartado en la sección de creación de bloques. Varían en función del tipo de bloque que se elija.

Vista previa – El botón de vista previa muestra una vista previa en vivo de la página o la entrada.

Publicar – Utiliza este botón para publicar la página. Si estás editando una página existente, aparecerá el botón Actualizar en lugar del botón Publicar.

Enlace permanente – Edita aquí la parte de texto de la URL.

Propiedades de la página – Se utiliza para configurar una plantilla de página y asignar una página principal.

Opciones – El último botón en la esquina superior derecha de la página son las opciones. Aquí encontrarás varias funciones, como el Modo de enfoque, que permite centrarse en el contenido de un bloque concreto al crear la página.

También encontrarás un interruptor entre el editor visual y el editor de código, así como el modo de pantalla completa. Encontrarás atajos de teclado, la posibilidad de gestionar bloques reutilizables y otras opciones de configuración de la página.

Consejos para usuarios avanzados

Vamos a mencionar algunas características avanzadas del editor:

Creación rápida de bloques

Para evitar tener que buscar siempre un bloque concreto en la lista, puedes facilitar tu trabajo. Lo único que hay que hacer es escribir las primeras letras del nombre del bloque por defecto en la caja del buscador.

Una vez que empieces a escribir, se mostrará una lista de opciones coincidentes.

Editar el código fuente

En cada paso de la creación del contenido de la página, puedes editar el código fuente. Para ello, haz clic en el icono de Opciones y busca el Editor de código aquí.

Activar el modo de pantalla completa

En el editor de Gutenberg, puedes trabajar sin distracciones innecesarias. Navega hasta la esquina superior derecha de la página y haga clic en Opciones. Puedes encontrar el Modo de pantalla completa aquí. También puede seleccionar el Modo de enfoque para centrarte más en un bloque concreto.

Utilizar los atajos de teclado

En Gutenberg, puedes utilizar muchos atajos especiales además de los habituales. Por ejemplo:

• Mostrar u ocultar la configuración de la barra lateral Ctrl+Shift+,
• Deshacer los últimos cambios Ctrl+Z
• Volver a aplicar los cambios no realizados Ctrl+Shift+Z
• Utiliza Shift+Alt+H para abrir la lista de atajos de teclado.

Amplía tus opciones con plugins

Instala cualquiera de los plugins de Gutenberg para ampliar tus capacidades de diseño. El plugin Stackable, por ejemplo, ofrece una colección de bloques prefabricados. Creará páginas principales interesantes. Otro gran plugin es Otter Blocks. Permite crear bloques como precios, Google Maps y más.

Algunas respuestas a las preguntas más frecuentes

¿Qué pasa si no quiero usar Gutenberg?

Algunos usuarios preguntan si se puede utilizar el anterior editor TinyMCE con WordPress. Sí, es posible. En este caso se puede desactivar Gutenberg. En este caso, sólo tienes que instalar el plugin de WordPress Classic Editor.

¿Cambiará el contenido antiguo?

Todo el contenido que ya tiene en la página permanecerá sin cambios. Gutenberg inserta una página o artículo específico en un bloque. Para ello, Gutenberg dispone de lo que se llama un bloque clásico. De esta manera, puedes trabajar con el contenido original como lo harías en el editor clásico de TinyMCE.

Puedes editar fácilmente el contenido original de un bloque clásico o convertirlo en bloques. Puedes encontrar la función deseada en el icono de Más opciones. Además, puedes trabajar con el contenido como si lo hubieras creado en un editor de bloques.

También te puede interesar: