Una de las características más interesantes de drupal, es el de poder usar bloques personalizados para usarlos en cualquier lugar de nuestra página web, para esto usamos un lenguaje llamado twig que nos permite mostrar y personalizar los campos de nuestros bloques. A continuación se mostrarán el cómo crear la plantilla de twig:
1. La primera vez que usemos un bloque, vamos a tener asignado un twig por defecto, para modificarlo, solo debemos crear un nuevo archivo twig con el nombre sugerido por el CMS en esta ubicacion themes/custom/depura_theme/templates/blocks/, para ver este nombre sugerida primero vamos a establecer y guardar un bloque de ejemplo, luego con las opciones de desarrollo activas y con ayuda del inspector del navegador vamos a la cabecera del elemento y veremos los nombres sugeridos (se recomienda usar el primero)
2. Para iniciar puedes copiar el contenido de un twig de un componente que se le parezca, por ejemplo, si vas a construir un slider puedes usar como base a main-slider, o si necesitas un grid puedes usar mosaico-iconos, etc… Gran parte de estos elementos están documentados en la página de componentes.
3. En la variables class_block guardamos el nombre de la clase por la cual vamos a hacer referencia en el CSS y con la que vamos a nombrar el resto de elementos usando los principios de BEM.
En el array classes tienes todas las clases mostradas en el bloque, comenzando por las clases por defecto, segundo las clase para dar formato, como son: section-padding (padding de las section) transition-scroll (para animaciones) y por último se agrega la clase principal con la variable de class_block.
4. En esta parte vamos a guardar todos los elementos que vamos a mostrar en variables, para ver con más detalles cómo guardar específicamente algún tipo de campo, ve este artículo ¿Cómo añadir los principales tipos de campos en Drupal?
Como puedes ver, todos los campos obtenidos parten del objeto content, ya que este guarda la información de los bloques.
5. La variación de color es algo muy importante, ya que nos ahorra mucho tiempo en la codificación. Aquí tenemos un ejemplo, queremos que por defecto cuando un componente se le asigne un color de fondo oscuro, el texto sea blanco. En esta tipografía en particular(Coandes) tenemos 7 colores, de los cuales 4 son oscuros, (En cuestión de código, es más optimo preguntar por 3 variables que por 4) por lo que, en esta ocasión preguntaremos de forma negativa, haciendo un condicional que será verdadero, solo cuando la variable no sea un color claro.
Ejemplo, si la variable es “white” y la clase principal “block-basic” vamos a obtener una variante “block-basic—bg-white”. En caso de ser un color oscuro como “blue-dk” se obtiene no solo la clase “block-basic—bg-blue-dk” sino adicionalmente la clase “co-white”
6. Para que todas las variables funcionen correctamente, estas deberían estar envueltas con la {%block content%}
7. El attributes agregamos las clases y las clases variantes al bloque.
8. Importante colocar los prefix (Se recomienda dejarlos envolviendo el título) ya que es lo que nos permite poder ver el botón de edición en la edición de la página.
9. Ya el resto es mostrar los distintos elementos en el bloque.
Continua con este artículo ¿Cómo añadir los principales tipos de campos en Drupal?
