Un vistazo al futuro de WordPress, la edición completa de sitio

La edición completa de sitio es, a menos que hayas estado bajo una roca, la característica hacia la que está llendo WordPress en la actualidad y en el futuro cercano; es decir, en un futuro ideal podremos editar todo nuestro sitio con nada más que WordPress, sin necesidad de constructores como Elementor o Divi, similares y/o conexos. Podremos echar guante de los bloques que trae WordPress o si queremos instalaremos más colecciones, y con todas estas herramientas construiremos nuestro sitio. Ahora bien, que quede claro desde ya: esto NO está listo (no está listo para nada), ya hablaré de esto al final, pero quiero ser enfático en que no debes usar esto en un sitio de producción. Si eres muy aventurero, te adelanto que quizás puedas usarlo en un sitio muy sencillo, algo como un blog personal – y para ser honesto, es un “quizás” como en “muy poco probable” que tengas éxito.

Todo esto de la edición completa de sitio o “full site editing” aún es un trabajo en progreso, y va iniciando; muchas piezas internas aún se van a mover, y difícilmente lo que hay ahorita sea lo mismo que habrá dentro de unos meses, es decir, es poco o nada confiable usar esto ahora. Estás advertido.

¿Que hace falta para usar la edición completa de sitio en WordPress?

Para este artículo crearé un entorno local en Local by FlyWheel usando WordPress 5.7 Alpha con el plugin de Gutenberg 9.7, de modo que tenga acceso a lo último de lo último en términos de las tecnologías y características usadas en el modo de edición completa de sitio (al que me referiré intercambiablemente como FSE por sus siglas en inglés). Tengan en cuenta que configuro Gutenberg a que muestre el menú en la parte superior. Si no tienes claro como usarlo, te recuerdo que tengo un tutorial muy completo sobre como usar el editor Gutenberg.

Ya sólo nos falta un componente final para poder usar el modo FSE en nuestro sitio: un tema compatible con FSE.

¿Qué temas son compatibles con edición completa de sitio (FSE) de WordPress?

No hay muchos temas que tengan implementaciones decentes de FSE, así que van algunos que conozco:

• Bosco: este es un remake de un tema normal, pero con compatibilidad con edición completa de sitio
• Q: este fue uno de los primeros si no es que el primero que tuvo compatibilidad con FSE.
• Armando: un tema que aún no llega al repositorio, tienes que instalarlo de las fuentes desde GitHub, está muy completo pues incluye bastantes templates.
• Photo Blocks: un tema dedicado a fotografía, pero con soporte de FSE; aún no está en el repositorio, sino en GitHub. Aún no lo he probado.

En lo que a mi respecta, estaré usando Armando, pues me parece que ofrece el mejor conjunto de características para probar. Sin embargo, pudiera ser un poco inestable, aunque lo mismo puede decirse de toda la característica en general.

Instalando el tema Armando

Descarga el repositorio donde está Armando haciendo clic en el botón verde y luego clic en “Download ZIP”. Descomprime donde gustes, entra en la carpeta extraida e instala el tema por cualquier método que gustes; puedes copiar la carpeta armando hacia la carpeta /wp-content/themes de tu instalación, para ir a tu Escritorio > Apariencia > Temas y habitar Armando; o bien puedes compactar la carpeta armando e instalarlo llendo a Escritorio > Apariencia > Temas > Añadir nuevo > Subir nuevo, seleccionar el ZIP e instalarlo.

Cuando lo hayas instalado, verás el primer cambio en la interfaz de WordPress justo en el menú:

Como puedes ver, el menú muestra una nueva entrada de menú titulada “Editor del sitio” y con una etiqueta de “Beta” con fondo rojo, así como también una advertencia en la parte superior del sitio donde se te indica que te andes con cuidado, pues estás usando una característica experimental. Bien, ya estamos listos para empezar a usar el editor de sitio completo.

Arrancando el editor del sitio

Al hacer clic en el menú Editor de sitio se nos muestra lo siguiente:

Como puedes ver, es el editor Gutenberg; pero como también podrás ver, ahora muestra los elementos que tradicionalmente están “fuera” del post o página, es decir, ves todo el encabezado, los menús, las entradas y todos ellos son editables como te podrás imaginar; prueba a hacer clic sobre lo que quieras.

Estilos globales en el editor Gutenberg

Una parte importante de que puedas editar todo el sitio es que tu diseño sea consistente; esto se logrará a través de plantillas y de los estilos globales, que son estilos que una vez que se definen se toman por default para todo el sitio; en la imagen siguiente puedes ver abierta la pestaña de propiedades de estilos globales, que se abre haciendo clic en el botón titulado “Aa“:

Las opciones globales actualmente son las necesarias; tipografía por familia, tamaño, altura de línea y apariencia, así como algunos colores (texto, fondo y enlaces, y colores personalizados, que por cierto se muestran sin nombres).

Sin embargo, a nivel de bloque puedes especificar también estilos globales; como puedes ver, hay una segunda pestaña titulada “Por tipo de bloque”, que muestra una larga lista de bloques en su mayoría basados en texto:

De los cuales por lo general puedes controlar la tipografía y en algunos cuantos apenas hay un control de relleno (padding). En este aspecto me parece que la implementación de controles de modelo de caja CSS es bastante deficiente, aunque me queda claro que todo esto es temprano y seguramente mejorará con el tiempo. Por el momento te aconsejo revisar las propiedades disponibles por cada bloque.

Así que en resumen no es mucho, pero es más que nada por ahora.

Plantillas, plantillas parciales y estilos en modo de edición de sitio completo

En la parte superior de la pantalla verás que hay un texto que dice “Índice”, con una flecha hacia abajo; eso indica el template actual que estás editando; en este caso, es el template para la página de inicio de nuestro sitio. Si le das clic, verás que se despliega un menú donde se despliega más información del template actualment en edición, así como una descripción y un enlace “Ver todas las plantillas“; ese enlace y la en la esquina superior izquierda hacen exactamente lo mismo, es decir, te llevan al listado de plantillas disponibles del sitio:

Una vez que despliegues las plantillas disponibles, verás muchas caras conocidas: la que estamos editando (índice), pero también está “Resultados de búsqueda” y “Archivo”, y una que generalmente no vemos y que tenemos que instalar un plugin para editarla (antes de pasar a código u algo similar), que es el template para el contenido no encontrado, o lo que es lo mismo, un código HTTP 404. También vemos tres grupos que son “Todo”, que hace lo obvio, y un grupo para “Páginas” y otro para “Entradas”; estos dos es por si el tema ofrece templates basados en uno u otro.

Una reflexión rápida sobre esto es que significará la muerte de otra tanda de plugins, como por ejemplo los plugins que hay para hacer páginas 404 personalizadas.

Las plantillas parciales en la edición de sitio completo

Seguro viste que encima de todo hay un enlace para regresar que dice “Tema”, es decir, estamos dentro de una opción. Vamos para atrás para ver que encontramos:

Ahora llegamos al primer nivel del menú, y encima de este hay un enlace de vuelta al Escritorio. Ahora tiene más sentido ese ícono de del que tanto se han quejado, ¿no te parece? pero bueno, sigamos experimentando con la edición de sitio completo: en la sección “Tema” vemos un grupo de menú “Partes de plantilla“, vamos a hacer clic en el:

Esto nos muestra las partes de cada plantilla, de una forma poco descriptiva; si lees verás comentarios, contenido sencillo, pie de página y otros más. Cambiando cualquiera de estos, cambiarás la apariencia de todo el sitio. Vamos a hacer una prueba: haz clic en header; siendo que es Gutenberg, puedes editar técnicamente lo que quieras, dentro de los límites de Gutenberg (que son muchos). Por ejemplo, cambia la barra del menú de fondo azul a fondo rojo haciendo clic sobre ella y eligiendo el color de fondo de las propiedades.

Si ves una vista previa de tu sitio, verás que todas las instancias han cambiado. Pero ¿qué tal si queremos cambiar la estructura como tal del encabezado? eso también es posible; lo único que tienes que saber es que una plantilla usa a su vez una parte de plantilla, así que lo que hay que hacer es 1) editar la parte de plantilla que quieras usar y 2) cambiar la plantilla que desees usar. Para eso vamos a cambiar la parte de plantilla header-two, que es la que quiero usar en mi diseño final.

Como cambiar la plantilla Índice en Gutenberg

A manera de ejemplo vamos a cambiar el template de la página de índice del sitio; regresa al menú principal del tema (el que sale cuando presionas la o el enlace que está debajo del título de la plantilla que se está editando), y ve a Plantillas > Índice; como podrás ver, en mi caso muestra la cabecera con el menú primero, luego el título y luego el tagline; ese encabezado no me gusta, así que lo cambiaré. ¿Cómo? bueno, justo ahora tiene un poco de truco hacerlo…

Cambiar la estructura del menú y colores del encabezado

La forma más sencilla es a través del navegador de bloques; ábrelo y busca “header”; nota que cuando lo hagas la barra de herramientas muestra un selector titulado “Nombre”, que es donde puedes elegir que parte de plantilla quieres mostrar.

Aquí vale la pena hacer unas notas sobre la usabilidad del editor; primero que nada, el selector Nombre muestra plantillas parciales sin importar de que tipo sean; es decir, verás plantillas de header, footer, contenido, etc., así que ten cuidado de cual aplicas donde; también es de hacer notar que la previsualización del bloque pudiera no mostrar cambios recientes; en mi caso no muestra header-two con el fondo azul que le puse. Así que, con estas dos aclaraciones, despliega el menú Nombre y elige header-two de la lista; verás que el encabezado cambia:

Como puedes ver, aunque la vista previa no se muestra bien, el nuevo encabezado si se incrusta con el color correcto.

Modificaciones adicionales al encabezado

Modificar el encabezado no es problema; por ejemplo para añadir íconos sociales basta con que vayas al final de la barra azul y presiones el botón “+” para insertar el bloque de íconos sociales; unos ajustes aquí y allá, bam, listo. Algo que me gustó es que al guardar tus cambios Gutenberg te muestra todas las plantillas y plantillas parciales que sufrieron cambios, de modo que estés enterado de lo que hiciste:

De igual manera puedes agregar casi cualquier bloque que tengas en tu biblioteca.

¿Cómo cambiar la estructura del contenido en la página frontal usando edición de sitio completo?

Tal como cambiaste la estructura del encabezado, también puedes cambiar la estructura del contenido. Sin embargo, esto requiere todavía de cierta manipulación mañosa y conocimiento de algunas cosas que aún están muy, pero muy en pañales; sucede que para aplicar cambios de manera eficiente en esa parte de contenido (para ser específicos, entradas de blog), hace falta poder seleccionar un bloque especial…

Conoce el nuevo bloque Consulta

Es un bloque que está disponible en las últimas versiones del plugin de Gutenberg y que todavía no tiene una forma sencilla de ser seleccionado. La forma más simple es hacerlo a través del navegador de bloques; haz clic junto al título de la entrada y luego haz clic en el navegador; verás algo como lo siguiente:

Para los que sepan como trabaja WordPress, ese bloque de consulta es básicamente el loop de WordPress, el ciclo que carga las entradas de la base de datos y los muestra donde tu quieras. Haciendo clic en “Consulta” verás que las opciones de la barra cambian, y ahora lucen así:

Las opciones son muy sencillas:

1. El primer botón es para las opciones de la consulta; como puedes ver son muy sencillas y no hace falta explicarlas.
2. El segundo grupo de botones es para las opciones de visualización; puedes mostrar por lista o por malla (grid).

Sin embargo, en el inspector de bloques las cosas se ponen interesantes cuando deshabilitas “Heredar la consulta de la URL“, cosa que tiene como resultado el que puedas modificar todos los parámetros de la consulta, con lo cual puedes mostrar exactamente lo que tú quieras. Esto permite flexibilidad de que puedas hacer diseños de acuerdo a requisitos precisos.

Regresando al diseño, en mi caso lo puse en ocho entradas y en vista de malla, lo cual producirá una vista de “tarjetas” a tres columnas.

Lo que es realmente interesante del bloque general de entradas es que puedes personalizar todo lo que aparece dentro de este; título de la entrada, meta datos de entrada, etc. Entre el bloque Consulta y las personalizaciones al resultado de la consulta puedes producir diseños muy decentes en poco tiempo; lo más cercano sería el control de consulta de Elementor Pro, que si está implementado con opciones más finas de interfaz, pero que en funcionalidad son bastante parecidos, lo cual me parece bastante impresionante.

Reflexiones sobre el uso de plantillas y plantillas parciales

Aunque el mecanismo y la estructuración básica funcionan razonablemente bien, creo que falta un eslabón en la cadena de la forma del editor de temas de Elementor Pro, en el que puedes definir un template y definir a través de reglas donde se usa. Con esto puedes tener dos páginas o cien mil, y no hay diferencia, pues si creas un template de cabecera e indicas que se use en todo el sitio, entonces ya no tienes que hacer más cambios; cuando cambias el template, cambia en cualquier lugar que sea usado; Gutenberg ahora no tiene esto, y necesitas trabajar más para reflejar los cambios en las diversas plantillas que componen el tema. Para la gran mayoría de sitios no es una calamidad, pero para aquellos que se desvían de la norma un poco será un problema trabajar de esta manera.

¿Puedo usar la edición de sitio completo en mi página?

No, definitivamente no, y por favor no lo hagas. A pesar de que no experimenté algún problema serio, casi todo se siente parado sobre palillos, y la falta de un modelo de caja integrado en los bloques del core hace que sea difícil hacer, por decir algo, los “diseños perfectos a nivel de pixel” de Elementor, por mencionar a un builder: basta con que le pidas a alguien que mueva un elemento cinco pixeles a cualquier dirección que se te ocurra; hacerlo es engorroso pues requiere de varios pasos, los cuales no vamos a estar haciendo todo el tiempo, ya no digamos los clientes; y esto hace que no se puedan producir fácilmente diseños complejos, aunado a algunas deficiencias en la interfaz de Gutenberg al momento de seleccionar bloques.

Es un futuro prometedor, pero aún le falta muchísimo camino por recorrer.

Palabras finales

La característica experimental de edición de sitio completo de Gutenberg que se está implementando poco a poco en WordPress promete bastante; los avances actuales son un buen inicio, aunque todo funciona de manera bastante torpe en su mayoría; claro, hay que entender la complejidad de la tarea a la mano, que no es menos que monumental. Vale la pena mencionar que ahora es buen momento de muchos desarrolladores para determinar que hacer respecto a estos avances de WordPress; ya con Gutenberb empezó a sufrir el ecosistema de plugins, y en poco tiempo lo harán los temas, es básicamente inevitable, y creo que será un gran parteaguas, un antes y un después.

Por otro lado, también hay que pensar en los que viven de WordPress, en el sentido de “cómo” es que llevan a cabo su trabajo; en la encarnación actual la edición de sitio completo es virtualmente inutilizable por agencias o hasta freelancers, que quedarían desvalidos ante sus clientes en cuanto a modificaciones se refiere; no tendrían manera de proteger su trabajo. Esto supongo que igual estará mejor integrado con las otras características de WordPress de modo que todo se lleve bien.

¿Y ustedes que piensan? ¿es un avance o definitivamente no le ven utilidad? anímense y dejen un comentario.

Créditos de imagen de cabecera

Foto por Quino Al