Diseño web

WordPress 5.4 – Parte 3: Análisis de Gutenberg

Bienvenido a la tercera y última parte de nuestro artículo sobre la última gran actualización de WordPress. En el artículo anterior comenzamos a desengranar el editor visual de WordPress 5. Esta tercera parte la dedicaremos a analizar el resto de bloques de Gutenberg y las novedades que presenta en WordPress 5.4. Comenzamos.

Bloques específicos de Gutenberg

En el artículo anterior vimos los bloques más comunes y elementales, pero en este análisis de Gutenberg veremos que aún hay mucho por descubrir. El editor presenta varios bloques adicionales con contenido específico para dar formato, personalizar la edición y agregar funciones especiales.

Formatos

En este grupo se encuentran los bloques referentes al estilo y formato del texto de la página o entrada. Además, para los usuarios acostumbrados a maquetar mediante HTML, Gutenberg ha incorporado aquí el bloque «HTML personalizado».

Código

Con funcionamiento similar a la etiqueta HTML para escribir fragmentos de código en nuestras páginas o entradas. Para sitios enfocados al desarrollo web o de apps puede resultar útil.

Clásico

Para los más reacios al uso de Gutenberg, WordPress incorpora este útil bloque con el editor visual de versiones anteriores. Aunque como ya mencionamos en la primera parte del artículo, WordPress pone a disposición de los usuarios un plugin que sustituye Gutenberg por el editor visual anterior, esta iniciativa nos parece mucho mejor. Además, de esta manera los usuarios se familiarizaran con Gutenberg sin prescindir del antiguo editor.

HTML personalizado

Si el bloque «Clásico» muestra el editor visual de WordPress 4, este bloque hace lo propio con el antiguo editor HTML. En este bloque podremos escribir nuestro código HTML si preferimos maquetar nuestras páginas o entradas con, por ejemplo, frameworks como Bootstrap.

Preformateado

Similar a la etiqueta «pre» de HTML. Al igual que con el bloque «Código», solo le encontramos utilidad en sitios web enfocados al desarrollo web o de programación.

Cita

De funcionamiento similar a la etiqueta «blockquote» de HTML. Gutenberg permite ajustar rápidamente los estilos, el color de texto, de fondo, etc…

Tabla

Este interesante módulo crea tablas de una manera rápida y cómoda. Si bien es cierto que las opciones son algo escasas, requiriendo CSS para mayor personalización, para usuarios poco exigentes puede resultar suficiente.

Elementos de diseño

Una de las partes más llamativas de este análisis de Gutenberg son sin duda los elementos de diseño de este. WordPress 5 se tomó en serio el apartado visual y la experiencia de usuario y estos bloques dan fe de ello.

Botón

Mediante este bloque podemos insertar un botón de enlace en nuestras páginas y entradas. Podemos configurar su comportamiento más básico, sus estilos (bordes redondeados, cuadrados, contorneados…) y ajustar el color.

Mención especial para los avisos y sugerencias sobre combinaciones estridentes de color. Adiós a los botones molestos e ilegibles.

Columnas

Este es uno de los bloques más especiales y prometedores, pero con un amplio margen de mejora. Mediante este bloque podemo disponer bloques (de texto, imagen, etc …) en columnas, como en cualquier otro framework. Suena bien, pero el resultado no es el esperado. En tamaños y resoluciones concretas las columnas son prácticamente ilegibles. No obstante, puede con el tiempo haya un ajuste de «mediaqueries» o los desarrolladores se saquen algún truco de la manga. Por el momento, nos parece que deja qué desear.

Salto de página

Otro bloque innovador y sorprendente. Permite introducir saltos de página dentro de una misma página o entrada. De esta manera se puede paginar una entrada automáticamente, creándose un selector de página con botones automáticamente.

Especiador y Separador

El separador es similar a la etiqueta «hr» de HTML, creando una linea horizontal para dividir contenido.

Por su parte el espaciador consiste en un bloque en blanco con una altura personalizable. Un recurso bastante socorrido.

Widgets

Una de las novedades más satisfactorias de WordPress 5 es la posibilidad de incrustar widgets en entradas y páginas. Anteriormente el CMS ofrecía la posibilidad de hacerlo en elementos separados al contenido, como pies de página y menús laterales. Con esta opción la capacidad de incorporar contenido se eleva enormemente. Además, la posibilidad de añadir «Shortcodes» evitará en más de un caso la necesidad de editar los delicados archivos PHP de WordPress.

El alcance de este menú dependerá de los plugins que hayamos instalado y sus widgets pertinentes.

Incrustados

Este grupo engloba una serie de elementos a los que WordPress 5 llama «incrustados». Quizá más conocidos como «iframes», estos bloques permiten insertar en la página o entrada elementos externos como videos de Youtube o Vimeo, listas de reproducción de Spotify y Soundcloud (enlace), y muchos otros más…

Nuevos bloques de Gutenberg en WordPress 5.4

Como ya avanzamos anteriormente, con el lanzamiento de la versión 5.4 de WordPress, Gutenberg se actualiza y ofrece nuevas posibilidades. Veamos algunas de ellas.

Bloque social media

Un widget con una batería de botones que enlazan de manera muy visual a los distintos perfiles de redes sociales que queramos indicar.

Grupos de botones

Este nuevo bloque permite agrupar botones, quedando estos visualmente unidos. Esto permite crear elementos de navegación y otros recursos.

Mejoras de Gutenberg en WordPress 5.4

Esta nueva versión no solo trae consigo unos cuantos nuevos bloques. También se han mejorado algunos de los ya mencionados, como por ejemplo los siguientes.

Tablas mejoradas

Ahora, Gutenberg permite personalizar aún más las tablas. Podremos especificar un ancho de columna igual a todas ellas, o resaltar la cabecera y el pie de la tabla para poder diferenciarlos del resto de celdas.

Botones mejorados

Podemos definir con mayor exactitud el «border-radius» o redondeo de las esquinas de nuestros botones. También podemos escoger si el enlace abre una nueva ventana o no, y sobre todo resulta de agradecer, la posibilidad de especificar la relación de este.

Otras mejoras

El entorno gráfico de Gutenberg ha sido mejorado, y ahora permite alternar entre el editor en HTML y el visual de manera muy rápida. Además, se ha incluido un modo a pantalla completa, que combinada con la opción de ocultar la barra lateral del menú, logra una gran amplitud.

Conclusión tras el análisis de Gutenberg

Por último, queremos compartir nuestras impresiones. Aunque las novedades son numerosas y muy interesantes, parece que su funcionamiento continúa sin ser el deseado.

Las opciones de configuración de los bloques siguen siendo muy simples y básicas. Si bien es cierto que están orientadas a usuarios que pudieran carecer de conocimientos acerca de código CSS, algunas de las opciones siguen faltas de propiedades básicas.

También echamos en falta un «scroll» de pantalla que acompañe al cursor a la hora de ordenar los bloques. Cuando las entradas o páginas son largas, si queremos mover un bloque de principio a fin, la tarea sigue resultando compicada.

En conclusión, la apuesta de WordPress por Gutenberg resultó arriesgada en su día, pero muy necesaria. La tendencia marcaba la creciente demanda de editores visuales frente al uso de editores de texto o código. Aunar ambas en un solo editor polivalente es a nuestro parecer, una jugada maestra. Eso sí, no es oro todo lo que reluce y aunque en nuestro equipo estamos encantados con WordPress 5.4 y su Gutenberg, creemos que hay un amplio margen de mejora. Nos alegra saber que tas la última actualización, la comunidad va bien encaminada.

Esperamos que te haya gustado nuestro artículo. ¡Te esperamos en el próximo!


Análisis de WordPress 5.4: parte 1 | parte 2 | parte 3

David de Lamo

David de Lamo te descubre, en el blog de Caronte Web Studio, las tendencias de diseño, tanto gráfico como web. Nuestro responsable del área de diseño en Caronte Web Studio te cuenta todo lo que debes saber sobre imagen de empresa, cartelería, diseño gráfico, diseño web, papelería, rotulaciones... Aprende con él y sumérgete en el apasionante mundo del diseño.

Ver comentarios

Compartir
Publicado por
David de Lamo
Etiquetas: WordPress

Entradas recientes

Colores HTML

Como en todas las áreas del diseño, el color tiene un papel fundamental. Comprenderlo y… Leer más

4 días hace

WordPress 6.5 Regina

Ha llegado el momento. Al fin tenemos entre nuestras manos la primera gran actualización de… Leer más

6 días hace

Zapier: ¿Qué es y cómo funciona? Guía de iniciación a Zapier

¿No has oído hablar de Zapier todavía? ¿Quizás te han hablado por encima de Zapier… Leer más

1 semana hace

Etiquetas Hreflang: Optimiza el SEO de tu web multidioma

Imagina que un usuario que esté ubicado en Inglaterra encuentre tu web en la versión… Leer más

2 semanas hace

Cómo desindexar una URL de Google

En este artículo no solo te explicaremos algunas formas para conseguir quitar una página de… Leer más

2 semanas hace

Cómo duplicar un curso en Moodle

Dentro de la gestión de cursos de Moodle, existe una característica destacada, su capacidad para… Leer más

3 semanas hace