Tras ver las presentaciones de la WordCamp Europe 2021 y, en particular, la charla entre Matt Mullenweg y Matías Ventura que incluía un vídeo de las novedades que nos vienen en el editor de bloques, me entró el gusanillo de probar esta nueva versión de WordPress 5.8 que está a punto de lanzarse a mitad de julio.
Así que me he instalado la versión WordPress 5.8-beta2 para poderte comentar las nuevas funcionalidades que nos llegan e ir preparando motores. Ten en cuenta que esta versión la he probado con el tema Twenty Twenty-one de WordPress.org y puede ocurrir que alguna de las funcionalidades comentadas, dependiendo del tema que tengas instalado en tu sitio, no las tengas disponibles.
Bloques anidados y patrones
Con la llegada de WordPress 5.5, el editor de bloques incluyó el concepto de patrones de bloques. La idea de un patrón de bloques es muy sencilla: son secciones o fragmentos predefinidos formados por un grupo de bloques que puedes utilizar en la creación de páginas y entradas. Los patrones de bloques pueden ser algo tan simple como una sección en la que se muestran dos botones o un apartado de precios con diseños llamativos y complejos, o incluso el diseño de toda una página.
Se está trabajando mucho en facilitar que la edición de los bloques y los patrones de bloques sea más fácil y cómoda. Y, en particular, que la inserción y desplazamiento de ellos sea más rápido. Para empezar, se ha añadido la opción de que podamos, desde el listado de bloques y patrones que se muestran en la barra de menú lateral izquierda, seleccionarlos y arrastralos a la zona de la página en la que queremos insertarlos.
Recientemente también se incorporó el icono de arrastrar (icono de 6 puntitos) para que pudieramos mover cualquier bloque dentro del contenedor dónde se encuentra.
Cuando te posicionas en un bloque, con la tecla Esc puedes pasar a modo selección y con la tecla Intro volver a modo edición.
En el modo selección (recuerda pulsar Esc), se optimiza la navegación entre la estructura de bloques. Al mover el ratón dentro de un bloque podemos ver los límites de cada uno de los bloques que contiene. De esta forma, es más fácil entender la estructura y arrastrar bloques dentro del bloque padre.
Y ahora, con esta nueva versión, al cambiar a modo edición (pulsar en Intro), al mover un bloque también se visualizan los límites de su contenedor, de forma que el proceso de seleccionar, arrastrar y soltar es mucho más fácil e intuitivo.
Edición de imágenes
Siguiendo con la idea de mejorar la edición de los bloques, un bloque crítico es el bloque de tipo imagen. Ya hemos visto que ahora podemos insertar imágenes arrastrándolas en bloques de tipo imagen, texto y media, o en cualquier bloque de tipo contenedor como puede ser una columna.
Pero la gran novedad ahora con las imágenes insertadas es que, en el propio editor, sin necesidad de ir a la biblioteca de imágenes, podemos editarlas y modificarlas.
Adicionalmente a los iconos de centrar y añadir enlace de una imagen, con WordPress 5.8 tenemos tres nuevos iconos: el de Recortar, el de Añadir Texto y el de Filtros duotono.
Recortar imágen
Al hacer clic en el icono de recortar imágen, nos aparecen tres opciones de menú adicionales: la de hacer zoom, cambiar el ratio de aspecto y rotar la imagen.
Como ves, ya no tienes ninguna necesidad de ir a la biblioteca de medios para que tu imagen tenga el aspecto que necesitas.
Nelio Forms
Un plugin de contacto fantástico que usa el editor de bloques. En su simplicidad está la potencia del plugin. Me encanta, es muy versátil y funciona de maravilla para mí.
Wajari Velasquez
Filtros dúotono
Otra novedad que nos llega con WordPress 5.8 es la posibilidad de filtrar cualquier imágen en dúotono. Selecciona los dos colores del filtro que quieras aplicar a la imagen y ya está, la imagen sólo tendrá dos tonos.
Añadir texto
Este nuevo icono, el de añadir texto a una imagen, es equivalente al de transformar la imagen a un bloque de tipo fondo. Y evidentemente, tras este cambio, ya puedes añadir el texto que quieras al bloque de tipo fondo como hayas hecho en otras ocasiones.
Además, como puedes ver en las propiedades del bloque, ahora también puedes modificar el espaciado y añadirle padding al texto, de forma que el texto te quede exactamente donde quieras en la imagen. El padding puedes definirlo igual o distinto para cada uno de los 4 laterales del texto.
Personalmente, encuentro que está genial que puedas añadir y realizar todas estas transformaciones directamente en el editor sin necesidad de ir a la biblioteca de medios. Aún así, si quieres optimizar tus imágenes para el SEO, mucho me temo que tendrás que seguir yendo a la biblioteca.
Tranformaciones de bloques
De la misma forma que hemos visto cómo transformar un bloque de tipo imagen a tipo fondo, el editor de bloques ahora incorpora otro tipo de transformaciones. Por ejemplo, puedes seleccionar tres párrafos y transformarlos a encabezados, a columnas, a una lista, etc. Y antes de realizar la transformación, se previsualiza el nuevo aspecto que tendrá dicha transformación.
Previsualización de la transformación de párrafos a columnas. Previsualización de la transformación de párrafos a lista.
De forma similar, puedes cambiar un conjunto de bloques de tipo imagen a un bloque de tipo galería de imágenes, o incluso a un conjunto de botones, etc.
El bloque tipo fondo
Con todas estas nuevas funcionalidades incluídas en el propio editor, el bloque de tipo fondo nos permite crear diseños muy distintos a los que teníamos hasta ahora. Por ejemplo, ahora podemos tener dos bloques de tipo fondo anidados (con un padding entre el hijo y el padre) y cada uno con sus características de colores, sus textos y el enfoque que nos parezca adecuados.
El bloque de navegación
Otra de las grandes novedades del editor de bloques que avanzan en el vídeo presentado en la WordCamp es el nuevo bloque de navegación. Vemos que este bloque no está incluido en la versión beta instalada pero sí que la encontrarás en la última versión 10.8.1 del plugin Gutenberg.
Este bloque te permite añadir en cualquier página, un menú de enlaces para que tus visitantes puedan ir a cualquier otra página. No pretende ser un sustituto a los menús de navegación que ya conocemos de WordPress, pero sí una alternativa para cuando te interese insertar algún menú adicional en una página.
Aparte de indicar si quieres el menú horizontal o vertical, tienes varias opciones cuando creas dicho menú:
- Crearlo a partir de un menú existente: puedes elegir mostrar un menú que ya tienes creado en tu sitio.
- Crearlo vacío: esto crea un menú en blanco para que añadas manualmente cada enlace que quieras mostrar en la navegación.
- Crearlo a partir de todas las páginas de nivel superior: esto agregará automáticamente cada página existente de tu sitio como un enlace, que luego puedes editar y reorganizar. Aquí sólo se añaden las páginas de nivel superior.
Para añadir un nuevo enlace a la navegación, tienes que hacer clic en el icono + que te permite elegir entre:
- Enlace de página: una página de tu sitio.
- Enlace de entrada: una entrada de tu sitio.
- Enlace de categoría: todas las entradas con una categoría específica.
- Enlace de etiqueta: todas las entradas con una etiqueta específica.
- Enlace personalizado: una URL externa.
- Iconos sociales: iconos para las redes sociales.
- Búsqueda: un cuadro de búsqueda para que los visitantes busquen en tu contenido.
Una vez creado cualquier menú, también tienes opción de cambiar su estilo (tipografía y color de fuente y fondo), añadir submenús, mover los elementos, etc.
De esta forma, con este bloque puedes crear diseños de menús muy fácilmente.
Como ves, este nuevo tipo de bloque ofrecerá muchas más posibilidades en el diseño de nuestras páginas y entradas.
Diseño de plantillas
Otro gran cambio que nos viene con esta nueva versión del editor de WordPress es que el diseño de plantillas se integra totalmente en el editor de bloques. De esta forma puedes crear una plantilla a partir de una página creada, y también se añade la opción de que en la barra lateral izquierda puedas listar de listar la estructura de la misma.
Podemos movernos por la estructura de la página o entrada y cada elemento se va viendo resaltado en el editor, de forma que es muy fácil hacer cambios donde corresponda y tienes una vista rápida de todos los elementos anidados en cada bloque contenedor.
Y aún hay más…
Y finalmente, en el vídeo que nos presentaron en la WordCamp también nos mostraron la opción de definir directamente en el editor de bloques estilos globales del tema para cambiar la paleta de colores, la tipografía etc. Por si todavía tenías alguna duda, con esta nueva versión WordPress 5.8 cada vez nos vamos acercando más al objetivo de que no necesites ningún otro maquetador visual para la creación de las páginas de tu web.
Deja una respuesta