30%dto
Oferta Cyber Monday

¿Qué nos llega del Full Site Editing en WordPress 5.8?

Publicada en WordPress.

A finales del año 2020, en el State of the Word Matt Mullenweg nos presentó, como hace cada año, las novedades del editor de bloques que llegarían con las nuevas versiones de WordPress en este año 2021.

Matt nos avanzó que una de las metas de este año era cambiar la experiencia del usuario construyendo webs de WordPress: la idea era que acabáramos creando no sólo entradas y páginas, si no toda la web usando los bloques. Es decir, que también podamos crear menús de navegación, barras laterales con widgets, plantillas, etc., desde el mismo editor de bloques de WordPress. A esta idea la llamó Full Site Editing, FSE (en español, «Edición Completa del Sitio» o «Edición Total del Sitio») y era el objetivo principal de la Fase 2 de Gutenberg.

Full Site Editing no es más que un término colectivo para un conjunto de proyectos en desarrollo para alcanzar esta nueva experiencia. Josepha Haden anunció en abril de este mismo año que en la versión WordPress 5.8, cuyo lanzamiento estaba previsto para julio de 2021, se incluye una primera versión del Full Site Editing.

Full site editing is a collection of projects and together they represent a big change, arguably too much for a single release. The most important context to share is that it isn’t shipping as the full, default experience for users. One of the clearest pieces of feedback from the Phase One merge process was that there wasn’t enough time for our extenders (agencies, theme authors, plugin developers, site builders, etc.) to prepare for the upcoming changes.

With that in mind, this merge process won’t be an on/off switch. The focus now is not on a full and nuanced user experience, but more of an open public beta within WordPress 5.8.

Make WordPress Core By Josepha Haden

Josepha aclaró que WordPress 5.8 no incluye todos los proyectos que forman parte del FSE pero algunos de los que nos han llegado sí que suponen un cambio en cómo vamos a trabajar en WordPress. Ya os avancé algunas de las novedades que vendrían incluidas en WordPress 5.8, como es la posibilidad de editar imágenes y añadir filtros dúotono, las transformaciones de bloques y el tipo de bloque de menú de navegación. También comenté una pincelada sobre la opción de diseñar plantillas desde el propio editor de bloques.

En esta entrada veremos más funcionalidades de las que os avancé incluidas en el proyecto Full Site Editing que ya tenemos integradas en esta nueva versión WordPress 5.8. Ten en cuenta que hay otras funcionalidades de Full Site Editing que continuan desarrollándose y que si quieres irlas probando tienes la opción de instalarte la última versión que se está desarrollando siguiendo las instrucciones que se explican aquí.

Modo de edición de plantillas

Una de las primeras herramientas de Full Site Editing que nos llega con WordPress 5.8 es el editor de plantillas. El editor de plantillas es un modo especial disponible en el editor de entradas que permite crear, asignar y editar plantillas de bloques a entradas y páginas específicas.

Activa la edición de plantillas

No te desesperes si después de instalarte está versión no encuentras por ningún lado la opción de editar las plantillas. Para empezar, por defecto esta opción está desactivada para cualquier tema, pero los temas pueden optar por activarlo con la siguiente línea añadida a su archivo functions.php.

add_theme_support( 'block-templates' );

Así que eso es lo que he hecho en el tema Twenty Twenty-One para poder comentarte su funcionamento.

Crea y edita una plantilla

Lo primero que encontramos en la barra lateral derecha de edición de una entrada es la opción de crear una nueva plantilla.

Nueva opción para crear plantillas en WordPress 5.8
Nueva opción para crear plantillas en WordPress 5.8.

Tras hacer clic en el enlace «Nuevo» te aparece una ventana emergente en el que debes indicar el nombre de la plantilla que vas a crear.

Ventana emergente para indicar el nombre de una nueva plantilla personalizada
Ventana del editor de WordPress para introducir el nombre de la nueva plantilla personalizada.

Tras darle al botón de «Crear»ya te encuentras en el editor de plantillas que es muy parecido al editor de bloques que ya conoces con algunas pequeñas diferencias.

Editor de plantillas de WordPress
Editor de plantillas de WordPress.

Como puedes ver en la imagen, en la barra superior encontramos el nombre de la plantilla que estamos editando y el botón de actualizar la plantilla, ahora tiene un punto la izquierda para que en todo momento diferencies que no estás actualizando la página (o entrada) si no la plantilla. Además también tienes el enlace para volver a la página que estabas editando.

La edición de la plantilla es muy parecida a la edición de una página o entrada. Puedes añadir los bloques y patrones que quieras de la misma forma que has hecho siempre con el editor de bloques. Aunque ahora, como ya te comento más adelante, tenemos unos nuevos bloques de tema que nos pueden ser particularmente útiles en la edición de plantillas.

Añade nuevos patrones de WordPress en el editor de plantillas
Añade patrones predefinidos en el editor de plantillas de WordPress.

Una vez hayas hecho todos los cambios que creas necesarios, sólo tienes que guardarla y verás cómo te avisa de las páginas que se pueden ver afectadas con los cambios de la plantilla.

Guardar plantilla de WordPress
Guardar plantilla de WordPress.

Y ya está, ya puedes asignarle a todas las páginas que quieras la nueva plantilla creada. Esta plantilla se habrá guardado en la base de datos como un Custom Post Type llamado wp_template. Además, en el futuro también tendrás la plantilla disponible para poderla exportar o importar a cualquier otro sitio web como se te antoje (de momento, esta funcionalidad sólo la tienes si tienes instalado el plugin de Gutenberg).

Bloques de temas

La edición de plantillas, como ya te he comentado antes, nos ha venido con un nuevo conjunto de bloques de WordPress que son particularmente útiles en la creación de plantillas y temas. Son los siguientes:

  • Logo del sitio
  • Descripción corta del sitio
  • Título del sitio
  • Título de la entrada
  • Contenido de la entrada
  • Fecha de la entrada
  • Extracto de la entrada
  • Imagen destacada de la entrada
  • Categorías de la entrada
  • Etiquetas de la entrada
  • Enlace de login/out
  • Últimos comentarios
  • Últimas entradas
  • Lista de entradas / contenidos
Bloques de post que puedes añadir a una plantilla de WordPress
Nuevos bloques de post que puedes añadir a una plantilla de WordPress.

Para cada uno de estos bloques, puedes modificar sus características como cualquier otro bloque.

Las características de cada uno de ellos son muy intuitivas y no creo que requieran una explicación adicional pero sí que me parece interesante entrar en el detalle de tres tipos de bloques un poco más complejos: Últimas entradas, Lista de entradas y Lista de contenidos. Estos tres tipos de bloques los puedes tanto añadir en una plantilla como en una entrada o página.

Bloque Últimas entradas

Si insertas el bloque de tipo últimas entradas, verás que tienes un montón de características que puedes definir para la visualización de las mismas.

Puedes seleccionar tres estilos distintos de visualización de las entradas, si quieres que se muestre la descripción o toda la entrada, el máximo número de palabras, el autor, la fecha de publicación y la imagen destacada (el tipo, tamaño, alineación y link a la entrada). Además puedes ordenarlas alfabéticamente o por antigüedad en orden creciente o decreciente, o filtrar las entradas que se muestran por una categoría. Finalmente, también puedes indicar el número de entradas que quieres que se muestren y en cuántas columnas.

Bloques Lista de contenidos y Lista de entradas

El bloque lista de contenidos te permite mostrar un listado de entradas, páginas o cualquier otro custom post type con estilos distintos y pudiendo aplicar filtros dependiendo del tipo de contenido que se muestra.

Bloque de tipo lista de contenidos
Bloque de tipo lista de contenidos/entradas

Como puedes ver en la imagen anterior, primero puedes seleccionar en la barra lateral izquierda, el estilo en el que queremos que se muestre el contenido. En caso de haber seleccionado el estilo estándar, puedes seleccionar la vista carrusel o cuadrícula. Y en el caso de carrusel puedes seleccionar entre distintas variaciones de visualización y escoger entre distintas combinaciones sobre si mostrar el título, la fecha, la descripción de la entrada y/o la imagen.

Variaciones de visualización del bloque lista de contenidos
Variaciones de visualización del bloque lista de contenidos.

Una vez seleccionado se habrá creado un bloque de tipo plantilla de contenido que contendrá los distintos sub-bloques seleccionados. Y sea cual sea la variación que hayas elegido, puedes luego añadir y/o quitar los bloques de tema y hacer los cambios que quieras de cada uno de los bloques dentro del bloque de lista de contenidos, de forma que se ajusten a tus preferencias.

Además tienes un conjunto de propiedades del listado que también puedes parametrizar como són los colores del bloque, el tipo de contenido que quieres mostrar, el orden en el que se muestra el contenido y los filtros que puedes aplicar dependiendo del contenido que has seleccionado.

Sección de una página creada con el bloque de listado de contenidos
Sección de una página creada con el bloque de listado de contenidos.

De esta forma, puedes añadir de forma rápida una sección de los contenidos que tienes en el blog o cursos, etc. en cualquier plantilla o página sin salir en ningún momento del editor de bloques.

Vista de lista

Otra funcionalidad de Full Site Editing que ya tenemos disponible en WordPress 5.8 es la vista de lista. En la barra superior del menú de edición de una página o entrada, ahora encontramos el icono de vista de lista a la derecha del icono con la «i». Al hacer clic se nos despliega una barra lateral con la estructura de los distintos bloques que forman el contenido que estamos editando. Y queda resaltado el bloque en el que nos encontramos.

Vista de lista en WordPress
Vista de lista en WordPress.

Esta lista de vista te permite navegar de forma rápida por los distintos bloques del contenido. Posicionando el ratón en cualquier bloque de la lista, te llevará al contenido de ese bloque.

Navegando por la vista de lista de bloques
Navegando por la vista de lista de bloques.

Una propiedad muy útil de esta vista de lista es que también se muestran los anclajes HTML que añadas al contenido.

Visualización de los anclajes en la vista de lista de bloques
Visualización del anclaje HTML en la vista de lista de bloques.

Esta te facilita que en todo momento puedas revisar de forma fácil si te falta algún anclaje HTML y los estás llamando con el nombre correcto.

Resumiendo

WordPress 5.8 ha marcado un hito en el camino hacia el Full Site Editing. Juntamente con algunas de las funcionalidades que ya expliqué que nos llegaban, vemos que poco a poco nos vamos acercando al objetivo de ser capaces de desarrollar nuevas webs sin necesidad de escribir código.

Todavía encontramos que el funcionamiento de algunas funcionalidades a veces falla y necesita mejorarse pero esto es un proyecto de código abierto en el que la participación de todos hará posible que WordPress acabe siendo la plataforma favorita de webs.

¿Y tú, qué opinas? ¿Te has animado a instalar esta versión de WordPress? Nos encantará que compartas tu experiencia.

Foto destacada de Andrew Neel en Unsplash.

Deja una respuesta

No publicaremos tu correo electrónico. Los campos obligatorios están marcados con: •

He leído y acepto la Política de privacidad de Nelio Software

Al marcar la casilla de aceptación estás dando tu legítimo consentimiento para que tu información personal se almacene en SiteGround y sea usada por Nelio Software con el propósito único de publicar aquí este comentario. Contáctanos para corregir, limitar, eliminar o acceder a tu información.