Gutemberg WordPress: El editor visual de Bloques recomendado


Publicado: 10 octubre, 2021 | César Bla |
Comparte este artículo

Al día de hoy, y desde que se presentó Gutemberg 6.5 es el editor por defecto de WordPress, así como de los cuatro temas propuestos por los desarrolladores del potente CMS hasta la actualidad, de los cuales el último y más versátil es el Twenty Twenty Two.

Gutemberg editor de bloques

Teniendo en cuenta los grandes beneficios de este editor con respecto a otros, parece que tenemos editor visual para largo, no será una solución definitiva ya que en tecnología la caducidad llega de un día para otro . Si lo conoces pero no lo usas lee este artículo que seguro te dará razones para probarlo.

Editor de Bloques

Para utilizar los bloques necesitamos acceder al editor de nuestro WordPress y dentro de una página o entrada. En el cuerpo del mensaje vemos que aparece un recuadro negro con un símbolo «Más» para añadir un bloque nuevo.

Si hacemos clic en el bloque nuevo vemos que aparece una pantalla emergente con una selección de los últimos utilizados además del botón inferior para ver todos los bloques.

Junto al menú Bloques aparece otro con los Patrones, que nos va a ayudar con composiciones más elaboradas que ya vienen definidas por defecto.

menu lateral

Menú lateral

Cada uno de los bloques que trabajemos muestra en el menú lateral una serie de opciones que permitirá trabajar la gráfica y el estilo de una forma muy rápida e intuitiva. En pocos segundos convertiremos un bloque plano en nuestro diseño único que se adapte a la gráfica corporativa de nuestra empresa.

En el menú desplegable de la derecha encontramos dos opciones muy interesantes dentro del apartado «Avanzado»:

  • Anclaje HTML

Seleccionamos una cadena de textos y añadimos un identificador con la etiqueta id=»» con el texto que escribamos. En este campo evitamos crear espacios en blanco, por lo que definiremos el texto con guiones del siguiente modo: ejemplo-de-identificador

  • Clase(s) CSS adicional(es)

Cualquier elemento que trabajemos puede además tener una o varias clases adicionales. Si trabajamos con Bootstrap 5 en este apartado podremos añadir clases a nuestros párrafos, imágenes, tablas, etc. para multiplicar las opciones de personalización de nuestros bloques.

menú avanzado bloques

Ventajas del editor de Bloques

Es muy fácil de combinar con las páginas diseñadas en HTML y PHP, por ejemplo en entradas del blog que requieren un diseño más sencillo se pueden crear en pocos minutos.

  • Es gratuito
  • Es muy intuitivo y fácil de usar
  • Etiquetas HTML semánticas
  • Muchas opciones predefinidas
  • Se pueden crear bloques reutilizables
  • Los bloques se pueden exportar e importar en otras webs
  • El CSS para los bloques es el mismo en otros WordPress

Inconvenientes del editor Gutemberg

  • No es realmente un Page Builder, construyes la página añadiendo bloques
  • CSS inline: Algunas opciones (como los colores) introducen estilos inline
  • Para construir bloques elaborados se necesita dedicación
  • No hay tantas opciones como en otros editores

Otros editores visuales para WordPress

Los siguientes editores visuales son los más utilizados para la maquetación de proyectos WordPress a un bajo precio. Son editores Drag and Drop, es decir que no necesitas saber nada de código para conseguir resultados atractivos. Los resultados se muestran en tiempo real, durante años han sido los más elegidos por diseñadores.

  1. Elementor
  2. DIVI
  3. Visual Composer
  4. WP Page Builder

El principal inconveniente común es que añaden mucho código como este ejemplo de una página diseñada con DIVI que incluye un exceso de elementos DOM.

Problema con elementos DOM
Los editores visuales crean excesivos elementos DOM que perjudita a la optimización del código

Aunque parezca fácil, la curva de aprendizaje es muy superior a los bloques de Gutemberg.

Los bloques reutilizables

Podemos acceder al catálogo de bloques reutilizables desde el menú superior derecha haciendo clic en los 3 puntitos.

Por defecto no aparece ninguno, pero si que podemos ir creando de uno en uno desde este panel. La otra opción para añadir bloques propios a este catálogo es ir haciendo composiciones de diseño en el cuerpo de nuestro artículo y hacer clic en el menú emergente para «añadir bloque reutilizable».

A continuación puedes ver uno de los bloques reutilizables de esta página web, para suscribirse al Newsletter de SMiLE:

Suscríbete al Newsletter

Los Bloques más usados:

Ahora sí, vamos a ver cuáles son los bloques que nos presenta Gutemberg y cuáles son las opciones principales que tenemos a nuestra disposición.

Bloques de texto

Párrafo

Escribe texto en un párrafo que se transformará dentro de una etiqueta html <p>. En la columna de la derecha encontramos las opciones de personalización para el tipo de letra, color de texto o fondo, etc.

Encabezados

Nos permite definir fácilmente nuestros encabezados o etiquetas H1, H2, H3, etc.

Por defecto el encabezado se convierte en H2 y tenemos que navegar en el menú emergente haciendo clic en H2 y remplazarlo por el Header que más nos convenga.

👉 Recordemos que el título debería de ser el único H1, para mantener una estructura de contenido tradicional para nuestra página.

Listas

Podemos seleccionar el bloque de lista o seleccionamos distintos párrafos y en el editor emergente le atribuimos el estilo de lista. A continuación aparecerá la opción de cambiar la apariencia de los puntitos a lista numerada, similar que en cualquier editor de texto como Word.

Tablas

Con el bloque Tabla podemos insertar y editar una tabla en pocos segundos.

Seleccionamos la cantidad de filas y columnas con el menú que aparece sobre el bloque así como las opciones de alineación y algunas preferencias más que aparecen en el menú derecho.

bloques de texto

👉 Si quieres añadir a tu Tabla los estilos de Bootstrap 5 puedes conseguir que una extensa tabla horizontal sea totalmente responsive y tenga el aspecto que deseemos.

Bloques de Medios

Los medios ayudan a que los artículos sean más dinámicos siempre que estén colocados de forma natural entre el contenido. Los principales medios visuales son las imágenes, galería de imágenes, audio, video y el más resultón es el fondo de imagen con texto sobrepuesto.

bloques de medios

Bloques de Diseño

Estos bloques configuran el aspecto general del diseño de la página como son los espaciados, saltos de línea, botones, columnas, etc.

Gutemberg Diseño

Bloques de Widgets

Podemos mostrar los widgets de WordPress, fundiona del mismo modo que la sección que encontramos en la sección Apariencia > Widgets.

En la última versión también aparece la opción Shortcodes.

Gutemberg Widgets

Bloques de Tema

Importa funciones relacionadas con el tema y los artículos publicados como el título, fecha, imagen destacada, extracto, etc.

Gutemberg tema

Bloques Incrustados

Muestran contenido de otros sitios como Twitter, Tik Tok, Instagram o Youtube y lo incrusta añadiendo la URL de la publicación.

Gutemberg Temas

👉 Además de ser una solución fácil y rápida para editar el aspecto visual del contenido de tu web, los bloques de Gutemberg te van a permitir evitar los problemas comunes de WordPress que nadie te cuenta en los tutoriales.



Comparte este artículo

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *


Auditoría Web

Te ofrecemos este análisis fundamental para que conozcas el estado de tu página web. Detectamos los principales errores de diseño, seguridad o contenidos y que tengas una visión objetiva de aquello que impide que mejore tu posicionamiento y aumente tu tráfico web.