Si no ves el video, puedes refrescar el navegador, presionando (Ctrl+Shift+R | Ctrl+F5 o Shift+F5), o abrirlo directamente desde el Canal de Youtube... HAZ CLIC AQUI
IMPORTANTE: Emulsify nos permite crear un THEME a partir de Emulsify NO un Subtheme
Desde la aparición de Pattern Lab y su adaptación para poder implementarlo con Drupal 8, se han ido realizando un gran número de cambios, tanto en la estructura de todos los módulos relacionados, especialmente Emulsify Drupal, como en la manera de activar y utilizar comandos, librerías y el código dentro de las plantillas, que permiten conectar nuestro diseño con el proyecto.
En este capítulo trataré de abarcar todos los prerrequisitos, que necesitarás conocer, antes de comenzar a trabajar de lleno con Pattern Lab y Emulsify en Drupal 9. Y que tengas la información más actual relacionada, ya que en el momento en que escribo este artículo, si visitas la Página Oficial de Emulsify, y ves sus videos, te darás cuenta, de que no están actualizados desde su lanzamiento en 2016, a pesar de que casi todo ha sido modificado para adaptarlo a Drupal 9 y posteriores.
Novedades y Prerrequisitos en Pattern Lab para Drupal 9
El módulo Pattern Lab no es compatible para Drupal 9
La primera noticia es bastante impactante, ya que los primeros cuatro videos, que están publicados en la Página Oficial de Emulsify, en el apartado de Videos y tutoriales, nos muestran las pantallas y algunos comandos y ejemplos, implementando el módulo Pattern Lab, compatible con Drupal 8, pero que ha sido totalmente sustituido por el nuevo módulo Emulsify Drupal, cuya instalación ya tienes disponible dentro de este curso y que nos permite generar un Theme basado en Emulsify, no un Subtheme, como estábamos acostumbrados.
Las Páginas de referencia para Twig ya no son de Sensiolbas sino de Symfony
Esto también es bastante importante, ya que lo enlaces que aparecen en casi todos los videos relacionados con Pattern Lab y Drupal, nos llevan a los enlaces de la documentación de la empresa Sensiolabs, que ahora ya están bajo el dominio de Symfony. Por lo tanto, si quieres aprender sobre el uso de las funcionalidades como include, embed o extends de Twig deberías visitarte la Página Oficial de Synfony para Twigs
La compatibilidad con Drush ha cambiado
Como todo evoluciona, también es el turno de actualizarnos, con respecto a los comandos drush de los videos, relacionados con la instalación y ejecución de Emulsify Drupal, el cambio más importante es que el comando yarn start o npm start, que nos permitía arrancar nuestra Guía de estilos, ha sido cambiado por el siguiente comando:
npm run storybook
yarn develop
npm run develop
Nuevos módulos para trabajar con las plantillas Twig y Emulsify
Otro de los cambios más importantes en esta evolución, sobre la implementación de Pattern Lab en Drupal 9, es la creación de varios módulos, que nos facilitarán la compatibilidad entre las plantillas y el código, y que al principio teníamos que instalar desde el repositorio github de four kichen, a continuación te añado el enlace a las páginas de cada uno de ellos:
-
Components! El módulo Componentes facilita que un tema organice sus componentes. Permite que los temas (y módulos) registren los espacios de nombres de Twig y proporciona algunas funciones y filtros adicionales de Twig para usar en las plantillas de Drupal.
-
Twig Attributes Twig Attributes permite a los desarrolladores establecer atributos HTML (como clases o una identificación) en una plantilla Twig principal a elementos en una plantilla secundaria, eliminando la necesidad de crear una anulación de plantilla o implementar un enlace de preproceso solo para agregar un atributo.
-
Emulsify Twig Este módulo proporciona dos extensiones Twig utilizadas en el Emulsify Design System.
-
Twig Field Value Twig Field Value permite a los usuarios de Drupal 8 obtener datos parciales de matrices de renderizado de campo.
-
Twig Typography Este módulo proporciona un filtro Twig que integra la biblioteca PHP Typography y la aplica a cadenas.
-
Twig Render This Este módulo le permite representar campos y entidades en sus plantillas Twig.
-
More Global Variables Este es un pequeño módulo que brinda a los usuarios algunas variables globales que luego pueden imprimirse en cualquier plantilla de ramitas.
-
Twig Tweak Twig Tweak es un pequeño módulo que proporciona una extensión Twig con algunas funciones y filtros útiles que pueden mejorar la experiencia de desarrollo.
-
BEM Un tema base de Drupal obstinado que proporciona clases de estilo BEM en todas partes.
-
Devel Que nos servirá para depurar nombres de las variables
-
Devel Kint Extras Los complementos de Kint responsables de mostrar los métodos disponibles de los objetos y las propiedades de las clases estáticas se eliminaron del módulo Devel para Drupal 8 desde la versión 3.0. Este módulo vuelve a agregar esas características como un módulo externo.
-
kint-php/kint: Añade funcionalidades a Devel y se instala con composer "composer require kint-php/kint"
Requisitos de instalación implementación Guia o Storybook en Drupal 9
Como ya sabrás, esta clase de implementación está pensada para que los diseñadores y desarrolladores puedan trabajar en paralelo, por lo tanto, una vez esté funcionando el Drupal9 y se haya generado el Theme basdo en Emulsify, podremos acceder a la guía de diseño con el comando mencionado al principio e instalar y configurar algunas herramientas para comenzar a diseñar.
Errores con Twig
En toda implementación existe la posibilidad de encontrarnos con algunos errores, uno de ellos es el uso del include en las plantillas Twig. Te dejo el enlace al issue reportado en la Página de Drupal https://www.drupal.org/project/drupal/issues/2817553