Crear un bloque en drupal 8 y maquetar en un theme

Os voy a mostrar como crear un bloque en drupal 8 y lo mas importante, como se maquetan los bloques en drupal 8.

Los bloques en drupal son una parte muy importante en la programación y desarrollo de una web ya que nos permiten crear partes personalizadas e incluirlo en nuestras regiones.

Las regiones en drupal 8

Las regiones en drupal 8 nos sirven para dividir las zonas de nuestra página, no voy a explicar como se manejan las zonas en este post ya que no es el fin de este. si no sabéis manejar las regiones y los bloque de drupal 8 mirar este vídeo para haceros una idea, luego podéis seguir con el post, donde os enseñaré lo verdaderamente interesante.

Solo deciros que dentro de cada región podemos meter los bloques. En este ejemplo voy a crear un bloque en nuestro código de nuestro módulo, y lo más importante, le vamos a mandar datos y lo vamos a maquetar a nuestro antojo en nuestro template.html.tiwg, vamos a ello !!!

Definir un bloque en drupal 8 y activarlo

Vamos a dar de alta nuestro bloque en nuestro módulo, mira como instalar un módulo en drupal 8, para ello tenemos que crear las siguientes carpetas:

En este archivo creamos una clase con el nombre de nuestro bloque que extiende de BlockBase, os dejo el código.

Con esto ya hemos declarado lo suficiente para que se muestre nuestro bloque, si nos vamos a la sección de “diseño de bloques” en nuestro panel de drupal y le “damos a colocar bloque” lo encontraremos fácilmente.

como construir un bloque en drupal 8

Perfecto, ya hemos colocado nuestro bloque y ahora nos vamos a nuestra web a ver si es verdad… si hemos copiado bien el texto nos mostrará algo como lo que he seleccionado en esta imagen abajo, saldrá el titulo de nuestro bloque “Mi bloque” y el markup que le hemos enviado por variable al crear el bloque.

como construir un bloque personalizado en drupal 8

He seleccionado el texto del bloque con el ratón para que podáis verlo con claridad, lo demás es de un proyecto que estoy construyendo.

Maquetar un bloque en drupal 8

Bueno asta aquí bien, pero lo interesante sería poder manejar datos del modelo en un controlador y mandarlos a una vista. Pues bien como drupal 8 está basado en Symfony podemos hacer algo así muy fácilmente. Vamos a maquetar nuestro bloque con un “template.html.twig”. Para poder hacerlo tenemos que usar el hook_theme() para poder definir las varibles que vamos a mandar y el nombre del theme. Para ello en el archivo mi_modulo.module usamos este hook.

Con esto le hemos mandado las variables por defecto, puede ser NULL y en nuesto MiBloqueBlock() que definimos antes, que lo vamos ha usar como un controlador, podemos hacer la lógica que necesitamos y acceder a los datos del usuario usando las clases Node, User o File como os explico en este ejemplo. Para ello volvemos a nuestro archivo y modificamos el return que hicimos anteriormente.

Ahora solo nos toca crear nuestro “theme.html.twig”, para ello creamos una carpeta en nuestro módulo que se tiene que llamar “templates” y dentro de ella creamos una archivo twig con el nombre que le pusimos en nuestro hook_theme(), en este caso mi-bloque.html.twig. Aquí ya podemos trabajar a nuestro antojo con las variables recibidas.

Con esto se abre un mundo de posibilidades, podemos insertar bloque donde queramos, con los datos que queramos y maquetarlos exactamente como queramos, digamos que nos quitamos un poco de encima la manera de trabajar del “drupal CMS” y pasamos a un plano de programación como si estuviéramos con algún framework tipo symfony. Esto se puede hacer también así con las páginas, otro día os enseñaré como se crean páginas y se maquetan, de momento podemos crear bloques en drupal 8.

Aquí tenéis todos los archivos en github del ejemplo de crear un bloque con drupal 8

About ignacio Farré

Técnico en programación web, amigo de MVC y experto en Drupal, Symfony, Prestashop y bootstrap.

Check Also

construir módulo en drupal 8

Cómo crear un módulo en drupal 8 con una página de ejemplo

Drupal en su última versión viene con muchos cambios y uno de ellos es la …

Formularios hechos con ajax en drupal

Ejemplo básico de formulario Ajax en drupal 7

Si queremos utilizar Drupal para realizar páginas web, hay algunas funcionalidades que son fundamentales saber hacer …

drupal-8

Instalar Drupal 8 en un ubuntu server por consola

Drupal 8 ya está aquí, y está siendo una revolución en cuanto a estructura de …