Cómo utilizar Gutenberg en WordPress: una guía para principiantes sobre el editor de bloques de WordPress

WordPress 5.0 introdujo Gutenberg como su editor predeterminado. Este proporcionó una nueva interfaz y experiencia para la creación de contenido mediante el uso de bloques.

Los desarrolladores de la plataforma llevaron el concepto de edición de bloques al siguiente nivel al introducir la edición completa del sitio en WordPress 5.9. Esencialmente, el editor de bloques ahora reemplaza al Personalizador de WordPress como la herramienta principal para editar el tema y la apariencia del sitio.

Este artículo te mostrará cómo utilizar el nuevo editor de bloques de WordPress, Gutenberg, para la edición completa de tu sitio.

Gutenberg es el nuevo editor de WordPress que viene preinstalado a partir de WordPress 5.0. Este introduce un nuevo enfoque en el proceso de creación de contenido, el cual te brinda más control sobre los aspectos visuales del mismo.

¿Cómo funciona el editor Gutenberg de WordPress?

El editor Gutenberg de WordPress utiliza el concepto de bloques de contenido para agregar y editar varios elementos en entradas y páginas, tales como el texto, las imágenes, los archivos y los enlaces. El anterior editor predeterminado de WordPress, TinyMCE, se centraba en la edición de texto.

Tip profesional

Si bien el nuevo editor de bloques viene preinstalado a partir de WordPress 5.0, los usuarios con versiones anteriores de WordPress también pueden utilizarlo al instalar el plugin de Gutenberg. Sin embargo, recomendamos actualizar el software principal de WordPress a la última versión.

Después de la actualización de WordPress 5.9, el editor Gutenberg funciona como algo más que un simple editor de contenido. Este incluye todos los aspectos de la personalización del sitio, tales como la edición de temas y la creación de páginas o entradas.

El nuevo editor también proporciona una mejor representación visual de la página. Esta característica lo hace más parecido a un creador de páginas que el editor anterior de WordPress.

Nuevo editor de WordPress

Este divide los elementos del sitio web, como el encabezado, el texto y las imágenes en bloques, haciéndolos más manejables y personalizables.

Seleccionando cualquier bloque, puedes personalizarlo individualmente. Por ejemplo, puedes establecer un color de fondo o tipografía diferente sin afectar a otros bloques o elementos. Esto amplía las opciones de personalización y la flexibilidad en la edición del sitio.

La nueva interfaz es fácil de usar, lo que permite a los nuevos usuarios aprender a utilizar WordPress rápidamente. Todos los bloques se enumeran en una lista desplegable según su estructura. Ajustar su posición en el sitio es fácil, ya que solo hace falta arrastrar y soltar los bloques individuales en la vista de lista.

Los usuarios pueden agregar bloques haciendo clic en el botón más (+) en la barra superior o en la vista previa de la página.

Cada bloque tiene ajustes y herramientas de diseño diferentes. Por ejemplo, los bloques de párrafo vienen con herramientas para cambiar el color y la tipografía. Por otro lado, el bloque de imagen tiene herramientas para agregar un texto alternativo y ajustar las dimensiones de la imagen.

El nuevo enfoque de edición del sitio completo también reduce la necesidad de programación y CSS personalizado. El editor de bloques de Gutenberg presenta el panel de estilos globales, que controla el archivo theme.json. Esto permite a los usuarios cambiar los estilos de todo el sitio. Con este puedes, por ejemplo, agregar colores personalizados y cambiar la tipografía directamente desde el editor. 

Utilizando el editor de bloques de Gutenberg

La interfaz del editor Gutenberg de WordPress puede resultar confusa para un usuario nuevo o cualquiera que esté acostumbrado a trabajar con el editor clásico. Aquí te dejamos algunas guías sobre cómo construir tu sitio web y administrar el contenido a través del editor Gutenberg.

1. Añadir una nueva página o entrada de blog

La creación de contenido para tu sitio web comienza agregando una nueva entrada o página con el editor de bloques de Gutenberg.

Una entrada de blog tiene una fecha de publicación y generalmente aparece en orden cronológico inverso en el sitio. En cambio, una página es estática y proporciona información atemporal, como las páginas Acerca de, Política de privacidad y Contacto.

Si tienes la intención de crear una nueva entrada, debes acceder a Entradas-> Añadir nueva en tu escritorio de WordPress.

Una vez que estés en el editor de contenido predeterminado, verás un borrador en blanco con marcadores de posición para el título de la entrada y el bloque del primer párrafo. Agrega el título de la entrada y nuevos bloques para crear el contenido.

Nueva entrada en WordPress

Puedes encontrar los ajustes de la entrada en la barra lateral derecha. Aquí es donde se configura el autor, la plantilla, el enlace permanente y las categorías de la misma.

Crear una nueva página es un proceso similar. Dirígete a Páginas -> Añadir nueva, y verás la misma interfaz que la que se utiliza para crear una entrada. La única diferencia es la configuración de Atributos de página en la barra lateral derecha, que especifica la página principal y el orden de las páginas. Además, tampoco existen configuraciones de categorías o etiquetas para las páginas.

Nueva página en WordPress

2. Interfaz de estilos globales

El editor actual de WordPress tiene una interfaz de estilos globales para personalizar los colores, la tipografía y el diseño de todo el sitio sin necesidad de programación.

Sin embargo, esta función sólo está disponible cuando se utiliza un tema basado en bloques en WordPress 5.9, incluidos los temas hijo basados ​​en bloques. Dirígete al editor del sitio navegando a Apariencia -> Editor y haz clic en el ícono en blanco y negro en la esquina superior derecha de la pantalla. La interfaz de estilos globales aparecerá en el lado derecho.

Sección de Estilos en el editor de WordPress

Habrá cuatro aspectos para modificar: tipografía, colores, disposición y bloques.

En los ajustes de tipografía, puedes administrar la familia, el tamaño, la altura de línea y la apariencia de la fuente para el texto y los enlaces.

En los ajustes de colores, encontrarás dos elementos principales: la paleta y los elementos. La paleta de colores muestra los colores disponibles para los elementos del sitio web: la paleta de colores del tema y los colores predeterminados se pueden utilizar en todo el sitio. El selector de color personalizado te permite agregar más colores a la paleta.

Paleta de colores en el editor de WordPress

La sección de elementos para la personalización del color comprende tres aspectos: el fondo, el texto y los enlaces. Haz clic en cualquiera de estos para personalizar su color.

El siguiente elemento para los estilos globales es la disposición. Esencialmente, esto te permite especificar el relleno para cada elemento del sitio web.

El último elemento en la interfaz de estilos globales es la pestaña de bloques, la cual te permite personalizar un bloque específico. Al seleccionar esta opción, verás una lista de bloques disponibles. Elige cualquiera de ellos para empezar a personalizar. Dependiendo del bloque, puedes modificar su diseño, color, tipografía o todos estos.

Bloques en el editor de WordPress

3. Modo de edición de plantillas

El nuevo editor de bloques de WordPress incluye un modo de edición de plantillas. La mayoría de los temas basados ​​en bloques son compatibles con esta función, por lo tanto, con el editor de bloques puedes editar las plantillas de temas para entradas, páginas o páginas 404. Incluso puedes crear una nueva plantilla.

Dirígete al editor del sitio navegando a Apariencia -> Editor. Abre la barra lateral de navegación desplegable haciendo clic en el logotipo de WordPress en la esquina superior izquierda de la pantalla y seleccionando Plantillas. Deberías ver la lista de plantillas disponibles y el botón Añadir nueva en la esquina superior derecha.

Plantillas en el nuevo editor de WordPress

4. Insertar un patrón de bloque

Puedes utilizar los patrones de bloques integrados si no tienes tiempo de personalizar cada bloque. Haz clic en el botón más (+) en la parte superior de la pantalla del editor y selecciona la pestaña Patrones para encontrar varios patrones de bloques preconstruidos en diferentes estilos.

Haz clic en el menú desplegable para buscar patrones de bloques para botones, columnas, galerías y cabeceras.

Patrones en el editor de WordPress

5. Añadir un nuevo bloque

Los bloques son la característica principal del editor Gutenberg. Cada bloque alberga un elemento, por lo que es más accesible crear diseños de contenido personalizados para tus entradas y páginas.

Si agregas una nueva entrada o página, el editor de bloques de WordPress establece un bloque de párrafo como el bloque de contenido predeterminado. Esto hace que sea más fácil comenzar a crear contenido. 

Bloque de párrafo en el editor Gutenberg

Para agregar más bloques al contenido, presiona Intro y el editor agregará automáticamente otro bloque de párrafo, lo cual es conveniente cuando se está escribiendo un texto largo.

Sin embargo, es posible que desees agregar otros elementos de bloque al texto. Para hacerlo, haz clic en el botón más (+) en la esquina superior izquierda de la pantalla y elige o busca el bloque deseado.

Bloques de Gutenberg en WordPress

Al cliquear en el botón más en el área de contenido, se mostrará una ventana emergente con seis bloques utilizados recientemente, lo que facilita la inserción de un bloque de uso frecuente. Alternativamente, puedes utilizar la barra de búsqueda para encontrar un bloque específico.

Agregar bloque de Gutenberg en WordPress

6. Inserción de widgets

Ahora los widgets están integrados en el editor Gutenberg, por lo que agregar uno de estos es lo mismo que agregar otros bloques.

En la versión anterior del núcleo de WordPress, era necesario utilizar la página específica del widget y el personalizador de temas para administrarlos.

Haz clic en el botón más (+) en la parte superior de la pantalla del editor y selecciona la pestaña Bloques. Desplázate hacia abajo hasta la sección Widgets para encontrar todos los bloques disponibles para widgets.

Widgets en Gutenberg

7. Trabajar con bloques

Comprender cómo trabajar con bloques de Gutenberg mejorará tu experiencia como blogger y acelerará tu flujo de trabajo.

El editor Gutenberg proporciona una barra de herramientas para formatear y alinear elementos al igual que el editor clásico. Esta aparece encima del bloque actualmente activo y consta de diferentes herramientas según el tipo de bloque.

Por ejemplo, el bloque de párrafo tendrá opciones para poner el texto en negrita, cursiva y ajustar su alineación.

Opciones del bloque de párrafo

Por otra parte, el bloque de imagen te permitirá cambiar la alineación de la imagen y cambiar a un tipo de bloque diferente.

Bloque de imagen en Gutenberg

Las flechas hacia arriba y hacia abajo te permiten mover el bloque para reorganizar el orden. También puedes hacer clic en el icono de vista de lista en la parte superior de la pantalla, este mostrará todos los bloques de contenido en el orden en que aparecen en la página.

Arrastra y suelta cualquier bloque para moverlo a una nueva posición en la lista. Esta característica facilita el trabajo con estructuras de contenido complejas, especialmente si hay varios bloques anidados.

Vista de lista en WordPress

Cada bloque también tiene diferentes herramientas de diseño según su tipo. Haz clic en el botón Ajustes en la esquina superior derecha de la pantalla y aparecerá una barra lateral en el lado derecho.

Ajustes de bloque en Gutenberg

Por ejemplo, el bloque de imagen tiene un campo para ingresar el texto alternativo, mientras que el bloque de navegación ofrece ajustes de diseño y visualización.

También es posible agregar bloques dentro de bloques para crear una estructura de contenido única. Esto funciona con bloques como los de grupo, fila y columnas, ya que actúan como un contenedor para múltiples bloques.

8. Opciones de texto de portada

Gutenberg proporciona más libertad en el diseño de bloques de párrafos y encabezados. Puedes crear capitulares y establecer colores personalizados para el texto y el fondo del bloque. Sin embargo, ten en cuenta que las opciones de texto de portada solo están disponibles para bloques basados ​​en texto.

Se puede acceder a esta función de Gutenberg a través de Opciones -> Mostrar más ajustes desde el bloque activo. Los ajustes adicionales aparecerán en el lado derecho de la pantalla.

Mostrar más ajustes de un bloque

Encontrarás varias opciones para personalizar el bloque en la sección Bloque. La tipografía controla el tamaño de la fuente y la altura de la línea, mientras que los ajustes de color determinan los colores del texto y del fondo. Si habilitas la opción de capitalizar, se mostrará una letra mayúscula grande al principio del párrafo.

Otra forma de personalizar el bloque de texto es utilizando el panel de estilos globales. Este método es útil para establecer una tipografía específica y un ajuste de color para los bloques de encabezados y párrafos de todo el sitio.

9. Detalles del contenido

Para ver los detalles del contenido de las entradas y páginas en el editor de bloques de WordPress, simplemente haz clic en el botón Detalles.

Detalles del contenido en Gutenberg

Aquí verás información sobre la cantidad de palabras, caracteres, encabezados y bloques en el contenido, lo que te ayudará a crear una longitud de contenido óptima.

Otro dato que aparecerá es el esquema del documento. Esta sección solo está disponible cuando utilizas más de un encabezado. Aquí se mostrará la estructura de los encabezados, ayudándote a organizar el contenido y mejorar el SEO.

10. Soporte de anclaje

Los anclajes son enlaces que permiten a los lectores saltar a un bloque específico en el contenido de WordPress. Esta característica ayuda a resaltar partes específicas del mismo y proporciona un mejor contexto para los visitantes del sitio.

También es útil como una herramienta de navegación rápida para contenido largo. Puedes agregar texto de navegación al comienzo de la entrada que se vincule a encabezados específicos. El soporte de anclaje también funciona cuando se comparte una URL que dirige a un encabezado específico.

Los siguientes pasos te mostrarán cómo crear un anclaje HTML en Gutenberg.

  1. Crea un nuevo bloque o elige uno existente.
  2. Desde la barra de herramientas del bloque, haz clic en Opciones -> Mostrar más ajustes
  3. En la pestaña Bloque, expande el menú avanzado.
  4. Agrega un anclaje HTML único al cuadro de texto del anclaje.
Crear un anclaje HTML en Gutenberg

Después de crear el anclaje, solo necesitas vincularlo al elemento deseado.

  1. Resalta la parte del contenido donde deseas insertar el anclaje. Puede ser texto, una imagen o un botón. 
  2. Haz clic en el botón Enlace en la barra de herramientas del bloque.
  3. Inserta un hashtag # seguido del anclaje HTML deseado, luego presiona Intro o haz clic en Enviar.
Enlazar anclaje HTML en Gutenberg

Estos enlaces solo funcionarán en páginas o entradas publicadas.

Al crear un anclaje en el nuevo editor, ten en cuenta que:

  • Debe ser único.
  • Es sensible a mayúsculas y minúsculas.
  • No puede incluir espacios, pero puede contener símbolos como guiones (-), guiones bajos (_), dos puntos (:) y puntos (.).
  • Debe comenzar con una letra.

11. Trabajar con Bloques de Imagen

Al insertar un bloque de imagen en el contenido, el editor de bloques de WordPress te dará la opción de cargar una imagen desde tu computadora, elegir una de la biblioteca de medios o añadir una con una URL. 

El nuevo editor también te permite arrastrar y soltar imágenes en cualquier parte del contenido sin haber creado un nuevo bloque.

Solo necesitas abrir el administrador de archivos y arrastrar y soltar la imagen elegida en el espacio de trabajo de Gutenberg. El editor de bloques creará automáticamente un bloque de imagen para alojar el archivo, el cual puedes personalizar según sea necesario.

Al abrir los ajustes del bloque, encontrarás un campo para el texto alternativo y las opciones de tamaño de la imagen.

Texto alternativo de la imagen

Gutenberg también proporciona espacio debajo de la imagen para una leyenda. Haz clic para activarlo y agregar el texto.

Puedes establecer el enlace de la imagen y la alineación en la barra de herramientas del bloque. También hay una función de duotono para transformar el color de la imagen con cualquiera de los ajustes preestablecidos de dos tonos disponibles.

Opción de duotono en la imagen de WordPress

Otra forma de trabajar con imágenes es utilizando el bloque de galería de imágenes. Este es un tipo de bloque contenedor para agregar un grupo de imágenes. Puedes establecer el número de columnas de la galería para crear una bonita visualización con un diseño de cuadrícula.

Bloque de galería en WordPress

Todos los bloques de imágenes dentro de una galería se contarán como bloques individuales. De esta manera, puedes personalizar cada imagen con un texto alternativo y borde único.

12. Bloques reutilizables

El editor de bloques de Gutenberg hace que guardar y reutilizar un bloque en otras páginas y entradas sea más fácil. Si utilizas el mismo tipo de bloque repetidamente, te ahorrarás tiempo al no tener que personalizarlo una y otra vez.

Aquí te explicamos cómo guardar y reutilizar bloques de Gutenberg:

  1. Selecciona el bloque que deseas guardar y haz clic en Opciones -> Añadir a los bloques reutilizables.
    Añadir bloque a bloques reutilizables en Gutenberg
  2. Introduce un nombre para el bloque y haz clic en Guardar.
    Crear nuevo bloque reutilizable
  3. Para reutilizar un bloque, crea un nuevo bloque en el editor de Gutenberg.
  4. Haz clic en el ícono más (+) y abre la pestaña Reutilizable, donde encontrarás todos los bloques reutilizables.
    Pestaña Reutilizable en Gutenberg
  5. Inserta el bloque que guardaste anteriormente.

Puedes eliminar o editar cualquier bloque reutilizable a través del administrador de bloques. Para hacerlo, selecciona Gestionar bloques reutilizables en la pestaña Reutilizable.

Gestionar bloques reutilizables

Eliminar la página o entrada en la que se creó el bloque reutilizable provocará un error en otros proyectos que utilicen el mismo bloque.

13. Bloque de tabla

Gutenberg renovó la función de tabla de WordPress al introducir el bloque de tabla, el cual elimina la necesidad de instalar un plugin de tabla o utilizar un código HTML personalizado.

Aquí te explicamos cómo crear una tabla con el editor de bloques de Gutenberg.

  1. Arrastra y suelta un bloque de tabla desde el Directorio de bloques en el espacio de trabajo de Gutenberg.
  2. Establece el número de columnas y filas, luego haz clic en Crear una tabla.
  3. Gutenberg creará una nueva tabla con bloques de columnas adaptables.
Bloque de columna en Gutenberg

La barra de herramientas del bloque tiene varias opciones de personalización, incluidos el formato de texto, la inserción de filas y columnas y la alineación de texto.

Hay dos estilos prediseñados disponibles en el panel de ajustes del bloque. Además, este bloque viene con herramientas de diseño para personalizar el color y el estilo del borde.

Las tablas creadas con este bloque tendrán un ancho de columna adaptable predeterminado. Sin embargo, puedes cambiar esto en los ajustes de la tabla. Desplázate hacia abajo en el panel de ajustes del bloque, expande la sección Ajustes de la tabla y activa la opción Celdas de tabla de ancho fijo.

Celdas de tabla de ancho fijo en tablas de Gutenberg

14. Bloques de columnas 

Los bloques de columnas presentan una manera fácil de dividir el contenido en hasta tres columnas. Esta función ayuda a mejorar la legibilidad del contenido al agregar elementos visuales junto al texto.

Alternativamente, puedes utilizar este nuevo bloque para mejorar la eficiencia del espacio de tu sitio al mostrar múltiples tipos de contenido sin necesidad de que los visitantes se desplacen demasiado hacia abajo.

Los siguientes pasos te mostrarán cómo agregar un nuevo bloque de columnas a tu sitio.

  1. Haz clic en el icono más (+) y selecciona el bloque Columnas.
    Columnas en WordPress
  2. Elige uno de los patrones de columna disponibles.
    Patrones de columnas en Gutenberg
  3. El editor de Gutenberg generará nuevos bloques basados ​​en el estilo elegido. Haz clic en el ícono más (+) para agregar nuevos elementos a esos bloques.

Un buen uso para el bloque de columnas de Gutenberg es crear una barra lateral. Elige la variación de columna 30/70 o 70/30 e inserta un bloque de lista de contenidos en la columna más grande. Utiliza un bloque de grupo en el más pequeño para contener el bloque de widgets de la barra lateral.

15. Bloques HTML en vivo

El nuevo editor de bloques de WordPress tiene un bloque HTML en vivo para la vista previa del código. Esta función te permite verificar si el código funciona correctamente en el sitio de WordPress sin tener que alternar entre el editor visual y el de texto.

Aquí te explicamos cómo utilizar el bloque HTML del editor Gutenberg para insertar código personalizado:

  1. Haz clic en el icono más (+) y busca el bloque HTML personalizado.
    Elegir bloque HTML personalizado
  2. Inserta el HTML personalizado en el bloque que aparecerá.
    Ejemplo de bloque HTML
  3. Haz clic en Vista previa para ver cómo se ve el código en el sitio de WordPress.
    Vista previa del bloque HTML

16. Elementos incrustados

Agregar elementos de audio o visuales desde tu biblioteca de medios de WordPress u otros sitios como YouTube, Reddit y Twitter ayudará a que tu contenido sea más atractivo.

El editor de bloques facilita la incrustación de dichos elementos en el contenido, ya que existe una gran variedad de medios y bloques incrustados disponibles.

Incrustar archivos multimedia

Los bloques de medios permiten cargar y mostrar varios archivos en el sitio, ofreciendo diferentes configuraciones de bloque según el medio. Selecciona el bloque correcto según el tipo de archivo que deseas cargar.

Sigue estos pasos para insertar un bloque multimedia:

  1. Abre el insertador de bloques cliqueando el icono más (+).
  2. Desplázate hacia abajo hasta la sección Medios y elige el bloque apropiado.
Bloques de medios

Ya hemos discutido cómo incrustar imágenes utilizando los bloques de imagen y galería. Ahora veamos otros bloques de medios.

  • Video: inserta un reproductor de video en tu contenido con parámetros configurables, como controles de reproducción, reproducción automática y bucle de video. También puedes mostrar una imagen de portada cuando no se reproduce el video.
  • Audio: agrega un reproductor de audio con configuraciones simples para la reproducción automática y en bucle.
  • Fondo: agrega una imagen o video con una superposición de texto. Este bloque es útil para crear un encabezado o banner con una imagen o video de fondo.
  • Archivo: agrega un enlace al archivo multimedia con una opción para incluir un botón de descarga. Este bloque también es compatible con un visor de PDF, por lo que no necesitas un plugin de visor de PDF para incrustar un archivo de este tipo.

Incrustar contenido externo

El siguiente grupo de bloques, los bloques incrustados te permiten integrar contenido de sitios externos como YouTube, Twitter y Spotify. Utilizar un bloque incrustado es muy fácil, ya que solo necesitas copiar y pegar la URL deseada.

  1. Haz clic en el ícono más (+) y desplázate hacia abajo hasta la sección Incrustados.
    Sección de bloques incrustados en Gutanberg
  2. Si el sitio web no está en la lista, utiliza el bloque Incrustado. Para este ejemplo, utilizaremos el bloque de YouTube.
  3. Copia y pega la URL de los medios que deseas incrustar en el cuadro de texto proporcionado.
  4. Haz clic en Incrustar y los medios aparecerán en la página o entrada de WordPress.
Video incrustado en WordPress

17. Botones

Los botones permiten a los visitantes interactuar con el sitio, ya sea para navegar o para completar una acción específica. Estos también ayudan a aumentar las tasas de conversión cuando se utilizan como llamadas a la acción para registrarse o comprar artículos.

El bloque Botones te ayuda a insertar botones en cualquier lugar del sitio, incluidas las entradas. Aquí se explica cómo insertar un botón utilizando el editor de bloques de WordPress:

  1. Abre el insertador de bloques haciendo clic en el icono más (+) y seleccionando el bloque Botones.
    Bloque de botones en Gutenberg
  2. Escribe la etiqueta en el bloque. Por ejemplo, crearemos un botón de suscripción.
  3. Haz clic en el icono de enlace para agregar un enlace al botón. El editor Gutenberg también da la opción de abrir el enlace en una nueva pestaña.
    Crear botón en WordPress
  4. Haz clic en Intro para guardar los cambios.
  5. Para agregar más botones al grupo, haz clic en el ícono más en la esquina inferior derecha del grupo de bloques.

18. Bloque de cita y cita de extracción

Con Gutenberg, es más fácil crear bloques para citas de fuentes externas. Además, el nuevo bloque de citas de extracción ayuda a enfatizar información importante de tu página o entrada de WordPress.

A continuación se explica cómo crear una cita de extracción con el editor Gutenberg de WordPress:

  1. Dirígete a  Directorio de bloques -> Párrafo de cita.
    Bloque párrafo de cita
  2. Escribe la cita extraída en el bloque.
    Crear párrafo de cita
  3. Cambia la alineación de la misma para que se ajuste al resto del texto. Además de la configuración estándar, Gutenberg también ofrece alineación amplia y de ancho completo.

Los pasos para agregar una cita en bloque son similares a los de un bloque de cita de extracción. La única diferencia es que esta utiliza el bloque Cita.

¿Qué pensamos del editor Gutenberg de WordPress?

El editor de WordPress Gutenberg es un desarrollo que supera al editor clásico de WordPress en cuanto a personalización y flexibilidad. Sin embargo, el editor Gutenberg aún tiene sus pros y sus contras.

Pros

  • Programación mínima. Con la interfaz de estilos globales, no es necesaria la programación para personalizar la apariencia del tema. La variedad de bloques en el editor Gutenberg también facilita la creación y edición de contenido.
  • Compatible con dispositivos móviles. Gutenberg es más responsive que el editor clásico de WordPress. Tener la capacidad de publicar contenido sobre la marcha puede mejorar tu flujo de trabajo, especialmente si viajas con frecuencia.
  • Menos plugins. Algunos bloques proporcionan características que reemplazan la necesidad de plugins adicionales. Si crees que los bloques predeterminados son insuficientes, puedes instalar un plugin de bloques para agregar muchas más opciones.
  • Bloques personalizados flexibles. Gutenberg permite a los desarrolladores crear bloques personalizados para temas y plugins, agregando valor a los complementos y abriendo más posibilidades de personalización.
  • Soporte de meta caja. El editor de Gutenberg es compatible con la mayoría de las cajas meta para crear campos personalizados y agregar metadatos a una entrada.

Contras

  • Curva de aprendizaje. Los usuarios de WordPress sin experiencia previa con un creador de páginas o que están más acostumbrados al antiguo editor de WordPress puede que necesiten tiempo para acostumbrarse al nuevo diseño y ubicación de herramientas.
  • Problemas de compatibilidad. El editor de bloques solo está disponible cuando se utiliza un tema basado en bloques.

Si bien Gutenberg brinda más libertad para personalizar proyectos, no es un creador de páginas. Comprensiblemente, los bloques de WordPress carecen de algunas de las opciones de diseño que ofrecen la mayoría de los creadores de páginas.

Afortunadamente, los plugins de bloques están disponibles para ampliar las funcionalidades de Gutenberg. Estos son algunos de los más populares que vale la pena considerar.

  • Stackable. Un plugin de creación de páginas freemium que proporciona diseños de bloques y kits de interfaz de usuario. Este te permite crear animaciones flotantes y cambiar la configuración de tipografía del bloque.
  • Gutenberg Blocks. Otro plugin de bloques gratuito que ofrece bloques útiles para ayudarte a crear formularios, taxonomías y líneas de tiempo.
  • Orbit Fox. Este proporciona varias herramientas para mejorar las tasas de conversión, como la supervisión del tiempo de actividad, la integración de Google Analytics y los iconos para compartir.
  • PublishPress Blocks. Un plugin gratuito y versátil que ofrece 20 bloques nuevos y control de acceso sobre tus bloques.

Instalar un plugin para bloques de WordPress te brindará una mejor experiencia de usuario y un flujo de trabajo más rápido.

Conclusión

El editor de Gutenberg introdujo una nueva forma de editar contenido con bloques. Es parte del objetivo de WordPress implementar la edición completa del sitio y mejorar la experiencia del usuario.

El nuevo editor de bloques está integrado al software principal desde WordPress 5.0 en adelante. Si todavía utilizas una versión anterior de WordPress, instala el plugin de Gutenberg para utilizar el editor.

Trabajar con bloques facilitará la personalización del sitio, ya que puedes reestructurar fácilmente el sitio web moviendo los bloques. Los patrones de bloques disponibles también te permiten cambiar los diseños al instante.

Los bloques también ayudan a agilizar tu proyecto al ofrecer funciones como, entre otras, las de los bloques reutilizables, los cuales ayudan a evitar el trabajo repetitivo. Además, el panel de estilos globales te permite cambiar el diseño de todo el sitio sin necesidad de utilizar código CSS.

Por último, no dudes en instalar un plugin de bloques de WordPress. Este agregará más opciones de diseño a tu editor al introducir muchos nuevos bloques de WordPress para mejorar tu flujo de trabajo.

Author
El autor

Deyimar A.

Deyi es una entusiasta del marketing digital, con experiencia en diseño de páginas web, creación de contenido, copywrite y SEO. Forma parte del equipo de SEO & Localization de Hostinger. En su tiempo libre, le gusta desarrollar proyectos, leer un libro o ver una buena película.