Cómo usar el nuevo editor de bloques de WordPress (Tutorial Gutenberg)

En WordPress 5.0, el clásico editor de contenido fue reemplazado por un nuevo editor de bloques, conocido como Gutenberg. Desde entonces, varios de nuestros lectores nos han pedido que creemos un tutorial completo sobre cómo usar el editor de bloques de Gutenberg en WordPress.

El editor de bloques de WordPress es una forma totalmente nueva y diferente de crear contenido en WordPress. En este tutorial, le mostraremos cómo usar el nuevo editor de bloques de WordPress y dominarlo para crear entradas y páginas de blog visualmente impresionantes.

¿Cuál es la diferencia entre Block Editor (Gutenberg) y Classic Editor?

Antes de sumergirnos en el nuevo editor, primero comparemos y entendamos las diferencias entre Gutenberg Block Editor y el Classic Editor.

Así es como se veía el editor clásico de WordPress:

Si se actualiza a WordPress 5.0, el nuevo editor de bloques es así:

Como puedes ver, son dos editores completamente diferentes para crear contenido en WordPress.

El antiguo editor clásico era un editor de texto con botones de formato muy similares a Microsoft Word.

El nuevo editor utiliza un enfoque totalmente diferente, llamadoBloques (de ahí el nombre de Editor de Bloques).

Los bloques son elementos de contenido que se añaden a la pantalla de edición para crear diseños de contenido. Cada elemento que añadas a tu mensaje o página es un bloque.

Puede agregar bloques para cada párrafo, imágenes, videos, galerías, audio, listas, y más. Hay bloques para todos los elementos de contenido comunes y se pueden añadir más con los plugins de WordPress.

¿Cómo es el nuevo editor de bloques de WordPress mejor que el editor clásico?

El nuevo editor de bloques de WordPress ofrece una forma sencilla de añadir diferentes tipos de contenido a tus mensajes y páginas.

Por ejemplo, anteriormente, si querías añadir una tabla a tu contenido, entonces necesitabas un plugin de tabla separado.

Con el nuevo editor, puede simplemente añadir un bloque de tabla, seleccionar sus columnas y filas, y empezar a añadir contenido.

Puede mover elementos de contenido hacia arriba y hacia abajo, editarlos como bloques individuales y crear fácilmente contenido multimedia.

Lo más importante es que el nuevo editor de bloques de WordPress es fácil de usar y aprender.

Esto da una inmensa ventaja a todos los principiantes de WordPress que están empezando su primer blog o construyendo un sitio web de negocio de bricolaje.

Dicho esto, echemos un vistazo a cómo usar el nuevo editor de bloques de WordPress como un profesional para crear un gran contenido.

Esto es lo que cubriremos en este tutorial de Gutenberg:

  1. Usando Gutenberg – El nuevo editor de bloques de WordPress
  2. Creación de una nueva entrada o página de blog
  3. Cómo añadir un bloque en Gutenberg
  4. Trabajar con bloques en el nuevo editor
  5. Guardar y reutilizar bloques en Gutenberg
  6. Publicar y publicar ajustes en Gutenberg
  7. Configuración del plugin en el nuevo editor
  8. Añadir algunos bloques comunes en Gutenberg
  9. Explorando algunos nuevos bloques de contenido en Gutenberg
  10. Consejos adicionales para usar Gutenberg como un profesional
  11. Adición de más bloques al Editor de Bloques de Gutenberg
  12. Preguntas frecuentes sobre Gutenberg

¿Listo? Vamos a zambullirnos.

Usando Gutenberg – El Nuevo Editor de Bloques de WordPress

El editor de bloques está diseñado para ser intuitivo y flexible. Aunque se ve diferente al antiguo editor de WordPress, todavía hace todas las cosas que se podían hacer en el editor clásico.

Comencemos cubriendo las cosas básicas que hiciste en el editor clásico, y cómo se hacen en el editor de bloques.

Creación de una nueva entrada o página de blog utilizando el Editor de bloques

Empezarás a crear una nueva entrada o página en el blog como lo harías normalmente. Simplemente haga clic en Posts » Add New menu in your WordPress admin. Si está creando una página, vaya al menú Páginas » Añadir nuevo .

Esto lanzará el nuevo editor de bloques.

Cómo añadir un bloque en Gutenberg

El primer bloque de cada entrada o página es el título.

Después de eso, puedes usar el ratón para moverte debajo del título o presionar la tecla tabulador de tu teclado para moverte hacia abajo y empezar a escribir.

Por defecto, el siguiente bloque es un bloque de párrafos. Esto permite a los usuarios empezar a escribir de inmediato.

Sin embargo, si desea añadir algo diferente, puede hacer clic en el botón Añadir nuevo bloque en la esquina superior izquierda del editor, debajo de un bloque existente o en el lado izquierdo de un bloque.

Al hacer clic en el botón se mostrará el menú de añadir bloque con una barra de búsqueda en la parte superior y bloques de uso común en la parte inferior.

Puede hacer clic en las pestañas para navegar por las categorías de bloques o escribir la palabra clave para buscar rápidamente un bloque.

Si no desea utilizar el ratón para hacer clic en el botón, puede utilizar un atajo de teclado escribiendo / para buscar y añadir un bloque.

Trabajar con bloques en el nuevo editor

Cada bloque viene con su propia barra de herramientas que aparece en la parte superior del bloque. Los botones de la barra de herramientas cambiarían dependiendo del bloque que se esté editando.

Por ejemplo, en esta captura de pantalla, estamos trabajando en un bloque de párrafos que muestra botones de formato básicos como: alineación de texto, negrita, cursiva, insertar enlace y botones tachados.

Aparte de la barra de herramientas, cada bloque puede tener sus propias configuraciones de bloque que aparecerán en la columna derecha de la pantalla de edición.

Puedes mover bloques hacia arriba y hacia abajo simplemente arrastrando y soltando o haciendo clic en los botones arriba y abajo junto a cada bloque.

Guardar y reutilizar bloques en Gutenberg

Una de las mejores cosas de los bloques es que se pueden guardar y reutilizar individualmente. Esto es particularmente útil para los bloggers que frecuentemente necesitan añadir fragmentos de contenido específico a sus artículos.

Simplemente haga clic en el botón del menú situado en la esquina derecha de la barra de herramientas de cada bloque. En el menú, seleccione la opciónAñadir a bloques reutilizables.

Se le pedirá que proporcione un nombre para este bloque reutilizable. Introduzca un nombre para el bloque y haga clic en el botón Guardar.

El editor de bloques guardará el bloque como un bloque reutilizable.

Ahora que has guardado un bloque, veamos cómo añadir el bloque reutilizable en otros posts y páginas de WordPress en tu sitio.

Simplemente edita el mensaje o la página donde quieras añadir el bloque reutilizable. Desde la pantalla de edición de mensajes, haga clic en el botón Agregar bloque.

Encontrará el bloque guardado en la pestañaReutilizable. También puede encontrarla escribiendo su nombre en la barra de búsqueda.

Puede pasar el ratón por encima para ver una vista previa rápida del bloque. Simplemente haz clic en el bloque para insertarlo en tu mensaje o página.

Todos los bloques reutilizables se almacenan en la base de datos de WordPress, y puede gestionarlos haciendo clic en el enlace «gestionar todos los bloques reutilizables».

Esto le llevará a la página del administrador de bloques. Desde aquí, puede editar o eliminar cualquiera de sus bloques reutilizables. También puedes exportar bloques reutilizables y usarlos en cualquier otro sitio web de WordPress.

Opciones de publicación y gestión en el Editor de bloques de Gutenberg

Cada entrada de WordPress contiene muchos metadatos. Esto incluye información como fecha de publicación, categorías y etiquetas, imágenes destacadas y más.

Todas estas opciones están ordenadamente colocadas en la columna derecha de la pantalla del editor.

Opciones de plugin en Gutenberg

Los plugins de WordPress pueden aprovechar la API del editor de bloques para integrar sus propias configuraciones en la pantalla de edición.

Algunos plugins populares ya están disponibles como bloques. Por ejemplo, WPForms, el mejor plugin de WordPress form builder, le permite añadir formularios a su contenido utilizando un bloque de widgets.

Así es como Yoast SEO le permite editar su configuración de SEO en el nuevo editor:

WooCommerce también viene con bloques de widgets que puedes añadir fácilmente a cualquiera de tus posts y páginas de WordPress.

Adición de algunos bloques comunes en el nuevo editor

Básicamente, el nuevo editor puede hacer todo lo que hizo el editor clásico. Sin embargo, usted estará haciendo las cosas de manera más rápida y elegante que antes.

1. Añadir una imagen en el nuevo editor de WordPress

Hay un bloque de imagen listo para usar en el nuevo editor de WordPress. Simplemente añada el bloque y luego cargue un archivo de imagen o seleccione de la biblioteca de medios.

También puede arrastrar y soltar imágenes desde su ordenador, y el editor creará automáticamente un bloque de imágenes para ello.

Una vez que haya añadido una imagen, podrá ver la configuración del bloque donde puede añadir metadatos para la imagen como texto alternativo, tamaño y añadir un enlace a la imagen.

2. Añadir un enlace en el nuevo Editor de bloques

El editor de bloques viene con varios bloques donde se puede añadir texto. El más utilizado es el bloque de párrafos que viene con un botón de enlace de inserción en la barra de herramientas.

Todos los demás bloques de texto de uso común también incluyen un botón de enlace en la barra de herramientas.

También puede insertar un enlace usando el atajo de teclado, que es Comando + K para Mac y CTRL + K en ordenadores con Windows.

3. Añadir una galería de imágenes en Gutenberg

El bloque de la galería funciona como el bloque de la imagen. Usted lo agrega y luego carga o selecciona los archivos de imagen.

4. Añadir atajos en los mensajes de WordPress usando Gutenberg

Todos tus atajos funcionarán igual que en el editor clásico. Puede simplemente añadirlos a un bloque de párrafos, o puede utilizar el bloque de código abreviado.

Exploración de algunos bloques de contenido nuevos en Gutenberg

El editor de Gutenberg promete resolver algunos problemas de usabilidad de larga data en WordPress introduciendo algunos bloques nuevos.

A continuación se presentan algunos de los favoritos que creemos que los usuarios encontrarán inmensamente útiles.

1. Añadir una imagen junto a un texto en WordPress

Usando el viejo editor, muchos de nuestros usuarios no pudieron colocar una imagen al lado del texto. Puede hacer esto ahora con el bloque Media & Text .

Este simple bloque viene con dos bloques colocados uno al lado del otro, lo que le permite añadir fácilmente una imagen y añadir texto al lado de la misma.

2. Añadir un botón en los mensajes y páginas de WordPress

Añadir un botón a las entradas o páginas de tu blog fue otra molestia en el editor clásico. Tenías que usar un plugin que creaba un código abreviado para el botón, o tenías que cambiar al modo HTML y escribir código.

Gutenberg viene con un bloque de botones que le permite añadir rápidamente un botón a cualquier mensaje o página.

Puede agregar un enlace para el botón, cambiar los colores y elegir entre tres estilos de botones.

3. Adición de hermosas imágenes de portada en entradas de blog y páginas de destino

Otra característica interesante que puede probar es el bloquePortada, que le permite añadir imágenes de portada a sus mensajes y páginas.

Una imagen de portada es una imagen más amplia que a menudo se utiliza como portada para una nueva sección de una página o el comienzo de una historia. Se ven hermosos y le permiten crear atractivos diseños de contenido.

Simplemente añada un bloque de portada y luego cargue la imagen que desea utilizar. Puede elegir un color de superposición para la portada o convertirla en una imagen de fondo fija para crear un efecto de paralaje cuando los usuarios se desplazan por la página.

4. Creación de tablas dentro de artículos

El editor clásico no tenía un botón para añadir tablas a tus mensajes de WordPress. Tenías que usar un plugin o crear una tabla escribiendo CSS y HTML personalizados.

El nuevo editor de Gutenberg viene con un bloque de tablas por defecto, lo que hace que sea muy fácil añadir tablas a sus mensajes y páginas. Simplemente añada el bloque y luego seleccione el número de columnas y filas que desea insertar.

Ahora puede seguir adelante y empezar a añadir datos a las filas de la tabla. Siempre puede agregar más filas y columnas si es necesario. También hay dos opciones de estilo básico disponibles.

5. Creación de contenido multicolumna

La creación de contenido multi-columna fue otro tema que el editor clásico no manejó en absoluto. El editor de bloques permite añadir el bloque Columnas, que básicamente añade dos columnas de bloques de párrafo.

Este bloque de columnas es bastante flexible. Puede añadir hasta 6 columnas seguidas e incluso utilizar otros bloques dentro de cada columna.

Consejos adicionales para usar Gutenberg como un profesional

Mirando el nuevo editor de bloques, se preguntará si pasará más tiempo añadiendo y ajustando bloques que creando contenido real.

Bueno, el nuevo editor es increíblemente rápido e incluso el uso muy básico durante unos minutos te permitirá añadir bloques al instante sin siquiera pensarlo.

Muy pronto se dará cuenta de lo rápido que será su flujo de trabajo con este nuevo enfoque.

Para los usuarios avanzados, aquí tienes algunos consejos adicionales que te ayudarán a trabajar aún más rápido con el nuevo editor de WordPress.

1. Mueva la barra de herramientas del bloque a la parte superior.

Como habrás notado en las capturas de pantalla, hay una barra de herramientas que aparece en la parte superior de cada bloque. Puede mover esta barra de herramientas a la parte superior del editor.

Simplemente haga clic en el botón de tres puntos en la esquina superior derecha de la pantalla y luego seleccione la opción Barra de herramientas superior.

2. Usar métodos abreviados de teclado

Gutenberg viene con varios atajos prácticos que harán que su flujo de trabajo sea aún mejor. El primero que debe empezar a usar de inmediato es el /.

Simplemente ingrese / y luego comience a escribir, y le mostrará los bloques coincidentes que puede agregar al instante.

Para más atajos, haga clic en el menú de tres puntos en la esquina superior derecha de su pantalla y luego seleccioneAtajos de teclado.

Esto mostrará una ventana emergente con la lista de todos los métodos abreviados de teclado que puede utilizar. La lista tendrá diferentes accesos directos para los usuarios de Windows y Mac.

3. Arrastrar y soltar medios para crear automáticamente bloques de medios

Gutenberg le permite arrastrar y soltar archivos en cualquier lugar de la pantalla y automáticamente creará un bloque para usted.

Puede soltar un solo archivo de imagen o vídeo, y éste creará el bloque por usted. También puede soltar varios archivos de imagen para crear un bloque de galería.

4. Agregar YouTube, Twitter, Facebook, Vimeo y otros incrustaciones

Gutenberg introduce nuevos bloques de incrustación en el editor de bloques. Hay un bloque para todos los tipos de embed soportados, incluyendo YouTube, Twitter, Facebook, y más.

Sin embargo, puede copiar y pegar la URL de incrustación en cualquier punto, y automáticamente creará un bloque para usted.

Por ejemplo, si ha añadido una URL de vídeo de YouTube, creará automáticamente un bloque de incrustación de YouTube y mostrará el vídeo.

Añadir más bloques al editor de bloques de Gutenberg en WordPress

El nuevo editor de bloques de WordPress permite a los desarrolladores crear sus propios bloques. Hay algunos plugins de WordPress que ofrecen paquetes de bloques para el nuevo editor.

He aquí algunos de ellos:

1. Avanzado Gutenberg

Advanced Gutenberg viene con varios bloques para elementos de contenido populares como el slider de productos WooCommerce, testimonios, mapas, contadores, pestañas, acordeones, y más.

También le ofrece un control avanzado en el que los usuarios pueden acceder a los bloques en función de sus roles de usuario. Puede crear perfiles de usuario y seleccionar qué bloques pueden añadir.

2. Apilable – Gutenberg Blocks

Apilable – Gutenberg Blocks es una colección de bloques Gutenberg bellamente diseñados que puede utilizar en su sitio web. Incluye bloques para el contenedor, postes, cuadrícula de características, acordeón, caja de imágenes, lista de íconos, llamada a la acción, y más.

3. Editor de bloques

Editor Blocks es otra buena colección de bloques de Gutenberg que puede utilizar. Viene con bloques útiles como el perfil del autor, la imagen del héroe, la tabla de precios, las marcas, las características, y más.

Preguntas frecuentes sobre Gutenberg – El nuevo editor de bloques en WordPress

Desde que Gutenberg se convirtió en el nuevo editor de WordPress, hemos estado recibiendo muchas preguntas. Aquí están las respuestas a algunas de las preguntas más frecuentes sobre Gutenberg.

1. ¿Qué sucede con mis publicaciones y páginas anteriores? ¿Puedo seguir editándolas?

Sus antiguos mensajes y páginas son completamente seguros y no se ven afectados por el Gutenberg. Todavía puede editarlos, y Gutenberg los abrirá automáticamente en un bloque que contiene el editor clásico.

Puede editarlos dentro del editor antiguo, o puede convertir los artículos más antiguos en bloques y utilizar el nuevo editor de bloques.

2. ¿Puedo seguir usando el viejo editor?

Sí, todavía puedes seguir usando el viejo editor. Simplemente instale y active el plugin Classic Editor.

Tras la activación, desactivará el editor de bloques, y podrá seguir utilizando el editor clásico.

Tenga en cuenta que Classic Editor será compatible hasta 2022.

3. ¿Qué hacer si el nuevo editor no funciona con un plugin o tema que estoy usando?

El proyecto Gutenberg estuvo en desarrollo durante mucho tiempo. Esto dio a los autores de plugins y temas mucho tiempo para probar la compatibilidad de su código.

Sin embargo, todavía existe la posibilidad de que algunos plugins y temas no funcionen bien con el nuevo editor. En ese caso, puede instalar el clásico plugin de editor, solicitar al desarrollador que añada soporte para Gutenberg, o simplemente encontrar un plugin o tema alternativo.

4. ¿Cómo aprender más trucos y consejos de Gutenberg?

AprenderWP es el mejor lugar para aprender sobre el nuevo editor de bloques en WordPress. Somos el sitio de recursos de WordPress más grande de Internet.

Publicaremos nuevos artículos y actualizaremos nuestros viejos recursos para ayudarle a dominar el nuevo editor de bloques.

Mientras tanto, si tiene alguna pregunta, no dude en ponerse en contacto con nosotros dejando un comentario o utilizando el formulario de contacto en nuestro sitio web.

Esperamos que este tutorial de Gutenberg le haya ayudado a aprender a utilizar el nuevo editor de bloques de WordPress. También puede ver nuestra guía completa de rendimiento de WordPress para mejorar la velocidad de su sitio web.

Si te ha gustado este artículo, suscríbete a nuestros tutoriales de vídeo de YouTube Channel for WordPress. También puede encontrarnos en Twitter y Facebook.

Deja un comentario