Layout Kit es un módulo para Drupal 8 que ofrece un conjunto de plantillas listas para utilizar y compatibles con cualquier tema. En la primera versión encontramos:
- Acordeón.
- Conmutador (acordeón en los que se puede plegar/desplegar todas sus secciones).
- Solapas horizontales.
- Solapas verticales.
Layout Kit
Antes de nada, ésto es lo que puedes hacer con Layout Kit:
Hasta la fecha, si necesitábamos mostrar contenido mediante un acordeón, solapas o similar, aún siendo componentes sencillos y muy utilizados, debíamos optar por la inclusión de Bootstrap (o similar) como tema principal o había que realizarlo con código propio. Con Field Group también se podría llegar a conseguir crear alguno de estos componentes aunque implica una mayor configuración ya que se aplica a otro nivel, especialmente si queremos que cada "brick" o "paragraph" perteneciente a un mismo campo suponga un elemento de nuestro acordeón (por ejemplo), y más aún si queremos dar la posibilidad al editor de modificar el modo de presentación. Ahora, con Layout Kit, podemos usar estos componentes con Bartik o cualquier tema, ya que tienen todo lo necesario para que se visualicen correctamente independientemente del tema, lo que simplifica enormemente la tarea de adaptación a un diseño.
De esta forma, mediante Layout Kit se amplía la oferta de componentes disponibles out-of-the-box con una configuración mínima, y sin la necesidad de tener que emplear pesados temas como Bootstrap sólo por la inclusión de componentes de este tipo.
Las plantillas adoptan BEM para nombrar a sus componentes y modificadores.
Se ha prestado especial atención en que éstas plantillas sean funcionales con los siguientes módulos:
- Field Layout (core): Lo que nos permite configurar la visualización de cualquier entidad con sus campos a modo de acordeón, por ejemplo.
- Field Group: Útil si, por ejemplo, necesitamos agrupar varios campos en un único elemento del acordeón.
- Bricks: Muy recomendable ya que de base se integra con Layout API. Esto nos permite crear un brick de tipo 'layout' y definir qué plantilla utiliza, visualizando sus elementos anidados en función de lo que seleccionemos. De esta forma además podemos cambiar la forma de visualización sin tener que volver a construir el brick entero, simplemente a golpe de ratón. Los editores te agradecerán no tener que repetir la carga de la misma información una y otra vez solo para cambiar cómo se visualiza.
También puedes usar bricks con Paragraphs si lo prefieres (ten en cuenta que Paragraphs no tiene el atributo label de base por lo que tendrás que añadirle un ''field_title").
Si quieres utilizar Layout Kit y Bricks, necesitas usar la versión de desarrollo y aplicar un parche (está todo explicado en la descripción/readme del módulo).
Puedes instalar "Bricks Default ECK" o "Bricks Default Paragraphs" (acorde a lo que necesites) para tener el setup inicial (crea las entidades y tipos de entidad necesarias para usar Layout API). Aunque si prefieres hacerlo tú, solo tienes que asegurarte de que añades un subtipo de entidad "layout".
Lo que conseguimos empleando Bricks y Layout API es reducir enormemente el número de tipos de entidad (ECK o Paragraphs) necesarios para construir este tipo de componentes, ya que todos los que no tienen contenido y solo sirven para definir el "layout" o el modo de representación se aúnan en plantillas aplicables a un único tipo de entidad "layout". El único requisito es que tengan un campo/atributo que sirva como título.
Veamos ahora unos ejemplos de uso.
Layout Kit + Field Layout + Field Group (opcional)
En este primer ejemplo vamos a configurar un conmutador con dos elementos, el primero contiene una imagen y el segundo dos campos de texto. La configuración es sencilla:
Y el resultado puede verse en esta imagen:
Layout Kit + Bricks
Para el segundo ejemplo vamos a usar Layout Kit con Bricks, añadiendo elementos para mostrar las cuatro plantillas disponibles: conmutador, acordeón y solapas horizontales y verticales.
La configuración se puede ver aquí:
Y el resultado sería lo que muestra la siguiente imagen:
Layout Kit + Bricks + Anidar componentes
¿Y si hay que anidar componentes? No hay problema, Layout Kit lo permite fácilmente:
El resultado de la configuración de la imagen anterior es el que se puede ver en la siguiente imagen. Cómo puede comprobarse los componentes se muestran sin problemas.
Eso es todo, si echas en falta alguna plantilla más, háznoslo saber y lo tendremos en cuenta para futuras versiones.
