Hola a tod@s.
Hoy nos gustaría hablaros de una de las características que nuestros amigos de WordPress han estado integrando en nuestro CMS favorito, y que lo han implementado de forma canónica tras las últimas versiones.
Aunque no lo parezca, es un cambio muy importante, porqué aunque el editor de Bloques de Gutenberg ya se introdujo hace un tiempo en la versión 5, y que ha recibido más críticas que otra cosa (basta pensar que es un editor creado por la comunidad, sin ánimo de lucro como otros builders de pago que están en el mercado).
Ahora está siendo el momento de que podamos utilizarlo con todo su potencial: un proyecto que está aún en evolución y que tiene muy buena pinta a corto-medio plazo. Voy a exponeros de forma resumida FSE o la opción de poder editar toda tu página web mediante Gutenberg.
1. ¿Qué es esto del Full Site Editing?
Es la última parte del proyecto de edición Gutenberg: seguro que todos lo conocemos como el editor de bloques, pero es más que eso. Es todo un conjunto de nuevas características para permitir el diseño completo de la web. Es decir, WordPress está integrando de forma completa su propio «theme/plugin builder». No será necesario contratar plugins/temas externos para poder editar tu página web de forma autónoma y completa.
De esta forma, se pretende tener un formato más moderno de edición, con un proceso más visual y menos «programático» como ocurría cuando intentábamos editar temas base de WP. Una aproximación modular para que puedas tener lista tu página web sin necesidad de software de terceros.
2. Qué características trae el Full Site Editing a nivel de creación de contenido.
A los ya conocidos «bloques personalizados» que hasta ahora creamos como un plugin, gracias a @wordpress/scripts, se le incluyen mejoras de edición global a todo el paradigma de Gutenberg.
Una de las mejoras que trae Gutenberg para los desarrolladores es la posibilidad de modificar los themes que utilizamos normalmente para poderlos adaptar a FSE, como underscores, los propios «old twenties», o temas híbridos y temas universales. Ahora tilizaremos un fichero theme.json para controlar los estilos del tema, entre otras muchas funcionalidades.
Y a partir de aquí, lo que creemos que es la auténtica «magia» para FSE.
2.1 Sistema de plantillas:
Con Full Site Editing podremos utilizar lo que se conoce por Templates (utilizados en otros plugins de edición): elementos por los que podremos realizar una edición y poder reutilizarlo en diferentes sitios.
Como ejemplo para que veáis esto, podemos utilizar el tema TT1 Blocks: el twenty twenty-one «oficial», una variante preparada para bloques. Cuando la activemos, nos aparecerán en «apariencia» el sistema de plantillas, y lo «Nuevo» de edición del sitio.
Este tema está aún en evolución, pero os lo recomendamos para que veáis como funciona lo que os estamos explicando en este post.
Se podría dividir en:
- Plantillas estructurales: este tipo de plantillas modificarán la visual de como se verán nuestras entradas del blog o nuestros Post Type personalizados.
- Plantillas reutilizables: como su nombre indica, partes reutilizables que se editan una vez y pueden ser utilizadas en diferentes espacios de nuestro sitio. Aquí entrarían elementos como la cabecera o el pie, un CTA de contacto que aparece en diferentes partes de la web, etc…
- Los «block patterns»: una de las nuevas características a la hora de editar mediante Gutenberg, es una nueva pestaña al lado de la introducción de bloques: los patterns. Este nuevo modelo, lo que te permite es crear pequeñas layouts a partir de otros bloques existentes. De esta forma, si tenemos una galería con texto, o un full width CTA con botón a contacto que vamos a poder reutilizar constantemente, se genera como un pattern que se puede categorizar. Por ejemplo tenemos patterns de galería, patterns de texto, etc…
3. Mejoras que podemos encontrar
Como pequeño resumen, vamos a mencionar a continuación algunas de las mejoras extra que podemos encontrar, a parte de lo que hemos comentado antes. Estas mejoras influyen también al editor de bloques.
3.1 Editor visual de plantillas
Para que podamos editar las plantillas anteriormente comentadas, se ha integrado lo que diríamos un Constructor Visual de plantillas: como en otros casos de pago, podremos editar las templates de forma visual mediante Gutenberg. Sin necesidad de código, con bloques dinámicos, como el título de un post.
3.2 Mejoras a nivel accesibilidad
El editor está recibiendo mejoras donde se establecen (y esto evoluciona) normas de accesibilidad en el futuro inmediato de la edición de bloques. Algunos criterios que se están estableciendo es la navegación del bloque de menú, la navegación por teclado, controles de formulario, cabeceras, etiquetado ARIA y muchas más características.
3.3 Uso de html en lugar de php
Refiriéndonos al tema comentado en el punto anterior, con el TT1 Blocks, se introduce una de las posibilidades que permite la actualización de FSE es el uso de un sistema de páginas html, en lugar del clásico uso de las search.php, single.php, etc…
El nuevo etiquetado de WordPress, permite diseñar las páginas en un clásico formato HTML, e integrar funcionalidad del editor de bloques. Por ejemplo, el tema que he puesto de ejemplo, si entráis a sus páginas del directorio de block-templates empieza con un <!– wp:template-part.
3.4 La mejora en el rendimiento de la web
Uno de los quebraderos de cabeza a la hora de utilizar WordPress y editores visuales, es la escasa performance que traen algunos editores por defecto y que obliga a realizar tareas extra de WPO. Se está poniendo todo el empeño en mejorarlo, ya que es un punto muy importante a la hora de posicionar nuestra web en las SERP, y sobre todo para que nuestros potenciales clientes/usuarios no se desesperen a la hora de ver cuánto tarda en cargar nuestra página web.
4. Conclusión
Aunque esta entrada ha sido bastante resumida, nuestra intención es demostraros que FSE ha venido para quedarse, y más temprano que tarde, deberíamos todos los wordpressholics ser capaces de editar nuestras páginas web sin necesidad de contratar editores externos.
Y tú, ¿ya has empezado a crear tus páginas web mediante el Full Site Editing de Gutenberg? ¿Has tenido buenas experiencias con el Full Site Editing directamente desde Gutenberg? Déjanos tus comentarios al respecto, nos interesa saber qué os parecen los esfuerzos que la comunidad de WordPress está realizando con su constructor.
