custom block

      Hoy en día, Drupal sigue siendo una de las mejores alternativas disponibles en el mercado tecnológico, para la creación de cualquier tipo de proyecto, que esté relacionado con el desarrollo de aplicaciones y/o páginas web; gracias a que, a partir de la versión 8, Drupal comenzó a utilizar Symfony como parte central de su estructura, añadiendo con esto el motor de plantillas Twig, apliando considerablemente su potencia, capacidad de escalabilidad y versatilidad, para cumplir con la mayoría de los requerimientos ante cualquier reto.

   La leyenda urbana alrededor de Drupal

        Como suele ocurrir con cualquier tipo de lenguaje de programación o herramienta tecnológica, existen grupos de profesionales del desarrollo web, que mantienen una postura en favor y en contra de trabajar con Drupal, por diversos motivos, y uno de los más extendidos, es su curva de aprendizaje. Por esta razón, muchos eligen aprender a implementar otros sistemas, "más populares, pero no mejores", ya que les permite acceder al mercado laboral, de manera más rápida.

       Por este motivo, en www.drupaladictos.com, queremos ayudarte a que compruebes, por tus propios medios, que puedes llegar a convertirte en Drupaladicto, una vez comiences a conocerlo, experimentar con él y a sugerir a tus posibles clientes, que esta debería ser su primera opción, antes de invertir tiempo en un desarrollo, que podría terminar migrándose, o reconstruyéndose a largo plazo.

   Como generar módulos personalizados con Drush 

     Según la página oficial de Drush :  "Drush es un shell de línea de comandos y una interfaz de scripting Unix para Drupal. Drush core se envía con muchos comandos y generadores útiles. De manera similar, ejecuta update.php, ejecuta consultas SQL, ejecuta migraciones de contenido y utilidades diversas como cron o reconstrucción de caché. Drush se puede ampliar con archivos de comandos de terceros". fuente https://www.drush.org/12.x/

     Esto significa, que ya no es construir toda la estructura, desde cero, cuando estemos diseñando nuestros módulos personalizados, para ampliar o añadir funcionalidades dentro de nuestros proyectos de Drupal; así que ahora te mostraré todos los pasos necesarios, para que, a partir de ahora, puedas ganar tiempo en tus desarrollos, centrándote en otros aspectos, en lugar del montaje inicial.

   Requisitos:

• Tener acceso a la consola, para ejecutar los comandos
• Tener funcionando tu proyecto de Drupal 10
• Tener instalada la versión más reciente de Drush

composer require drush/drush -W

   Pasos para generar un módulo personalizado

        Antes de comenzar a ejecutar comandos de Drush, lo recomendable será asegurarnos de que tenemos disponibles dichos comandos, para ello, abriremos la consola y nos colocaremos en la carpeta raíz de Drupal, y a continuación, ejecutaremos el comando que nos devolverá el listado de opciones disponibles en nuestra versión de drush:

drush

o

vendor/bin/drush

       Deberíamos ver en pantalla el listado completo, donde nos aseguraremos de encontrar el comando gen

    Paso 1 - Generar una estructura básica y activar el módulo

       Si estamos planeando desarrollar un módulo personalizado, lo primero que debemos hacer es generar la estructura base para este módulo; para ello sólo necesitaremos la carpeta principal donde se guardarán todos los archivos del módulo, y dentro de ella, el archivo que identifica y define sus características principales; este archivo se llamará NUESTRO_MODULO.info.

      Los principales datos que se definen dentro de este archivo serán: nombre, descripción, tipo, paquete al que pertence, versión de Drupal. 

     Para generar el archivo y la carpeta con el nombre de nuestro módulo, abriremos nuestra consola, nos colocaremos en la carpeta raíz de Drupal y a continuación, ejecutaremos el comando gen, con la siguiente opción:

drush gen module

     En seguida, se mostrarán en pantalla, varias preguntas, que iremos completando, con los datos de nuestro módulo personalizado.

   Paso 2 - Activación del módulo

     Una vez hayamos terminado con las preguntas de la pantalla anterior, podremos activar nuestro módulo, que todavía no nos mostará nada en pantalla, ya que no tiene ningún controlador, pero sí tendremos constancia de que Drupal lo reconoce y que tendremos vía libre, para seguir añadiendo funcionalidades, a partir de este momento.

     Para activar el módulo, podremos hacerlo desde la interfaz o desde la consola, utilizando el comando de drush:

drush en mi_modulo_personalizado

   Paso 3 - Generar nuestra primera página

     Ahora es el momento de hacer que nuestro módulo, muestre algo en pantalla, para ello, generaremos un controlador o Controller, que es la clase de php, encargada de esta tarea. Para que podamos acceder a una url específica y ver el contenido de esta página, además del Controller, necesitaremos el archivo routing.yml, donde se definen las diferentes rutas y ubicación de cada controlador en nuestro módulo.

     Podremos indicar a Drush, que añada el nuevo controlador dentro del módulo que acabamos de generar, para ello, nos hará falta especificar el nombre del módulo, y a continuación, responder a cada pregunta que se mostrará en pantalla durante este nuevo proceso. El comando que tendremos que utilizar será:

drush gen controller

     Esta vez, al terminar de contestar todas las preguntas, podrás comprobar que se han añadido varios arhivos, además de las carpetas src y Controller, dentro de esta última encontrarás la nueva clase NombreModuloContoller.php, con un método encargado de imprimir en pantalla un mensaje de confirmación.

     Para comprobar que puedes acceder a tu nueva página, deberás borrar la caché de Drupal y, luego, copiar la url, que encontrarás en la segunda línea del archivo modulo_personalizado.routing.yml

   Paso 4 - Añadir una plantilla a la página

       El último paso, en esta fase inicial de nuestro módulo, consistirá en añadir una plantilla twig, que nos permitirá entre otras opciones, pasar valores e imprimirlos en la página, añadir un formulario, mostrar datos desde nuestra base de datos, etc.

       Por ahora, nos enfocaremos en generar esta nueva plantilla y realizar los ajustes, para conectarla con nuestro módulo y se puedan imprimir en pantalla, los valores por defecto, sustituyendo el mensaje inicial del controlador.

       Al igual que en el paso anterior, ejecutaremos el comando gen seguido de la opción template y en la primera pregunta, especificaremos el nombre de nuestro módulo, y contestaremos al resto de preguntas, hasta terminar el proceso.

drush gen template

     Al terminar el proceso, veremos que se han añadido el archivo .module, la carpeta templates, nueva-plantilla.twig. 

   Por último, para imprimir los valores de nuestra plantilla, en la página generada por nuestro Controller, añadiremos dentro del método el atributo siguiente:

'#theme' => 'mi_plantilla',

     Luego refrescaremos el cache de Drupal nuevamente, y podremos comprobar que se imprime el valor de la variable incluida en el hook_theme, que se generó al crear la plantilla con Drush.

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

QUÉ ES UN BLOQUE Y CÓMO FUNCIONAN

     Hoy te quiero hablar sobre los bloques en Drupal, que no son más que regiones, en las que puedes incluir prácticamente cualquier tipo de contenido, imágenes, texto simple o añadir campos editables por el usuario y que luego podrán mostrarse en cualquier área y página de tu web, además de ofrecerte la opción para controlar quiénes podrán ver su contenido, configurando los permisos de usuario.

     Por defecto, una instalación de Drupal viene dividida en varias zonas con "Bloques" en su interior, el nombre y la cantidad de dichos bloques podrían variar, en función del "Theme" o tema que tengas instalado en tu proyecto. 

     Para que entiendas el concepto de Bloques, imagina que tu web es como una casa, con sus respectivas habitaciones, y que el mobiliario o la decoración que puedes añadir, quitar o modificar en cualquier de ellas es el bloque.

     Para administrar los bloques, tendrás que ir a la url "/admin/structure/block", allí encontrarás el listado de todos los bloques activados con las diferentes zonas de tu proyecto.

     Desde esta pantalla, tendrás la oportunidad de añadir cualquier otro bloque en la zona que desees, haciendo clic en el botón "Colocar Bloque" y seleccionando posteriormente cualquiera de los que se mostrará en el listado que te aparecerá a continuación. 

     Además de añadir, también podrás desactivar, recolocar o remover menús, vistas personalizadas del tipo bloque, información del sitio, etc. o si lo necesitaras, utilizar instancias del mismo bloque en zonas diferentes de tu web.

BIBLIOTECA DE BLOQUES PERSONALIZADOS

     Otra de las opciones disponibles al trabajar con bloques, es la Biblioteca de bloques personalizados, donde podrás crear un modelo de bloque, para reutilizarlo como base siempre que te haga falta. 

     Un ejemplo práctico, sería que tuvieras en tu web un tipo de bloque personalizado al que llamaras, por ejemplo "Banner Publicitario", con la opción de añadir, editar o eliminar dentro de él, diferentes imágenes anunciando ofertas o descuentos, en varias partes de la web, sin tener que construir cada vez un bloque nuevo.

     Los bloques personalizados se guardan en la pestaña "Biblioteca de bloques personalizados", y desde este apartado puedes modificar el modelo principal, por ejemplo añadiendo un botón que se llame "precio especial", y que automáticamente estará disponible para todo el resto de bloques que usan este modelo como base.

CÓMO CREAR UN BLOQUE PROGRAMÁTICAMENTE EN DRUPAL 9

PRERREQUISITOS:

• Cómo crear un módulo en Drupal 9

     PASO 1 CREAR MÓDULO PERSONALIZADO:

          Lo primero que debemos hacer para crear un bloque, usando nuestro propio módulo, es añadir una carpeta con el nombre del módulo, dentro de la carpeta "modules/custom", con el objetivo de tener separados los módulos contribuidos de Drupal, que son los que descargamos desde la Página Oficial, y que si utilizamos Composer, se guardarán automáticamente en la ubicación "modules/contrib"

          Una vez hayamos creado la carpeta con el nombre de nuestro módulo, lo siguiente será añadir el archivo que utiliza Drupal para identificar cualquier módulo, el nombre de este archivo deberá coincidir con el nombre de nuestra carpeta y terminar con la extensión ".info.yml", en nuestro caso, nuestro archivo se llamará drupal_block.info.yml.

          Puedes crear el archivo y copiar el siguiente código dentro para continuar con el ejercicio.

name: Drupal Block
description: 'Create custom block'
package: drupaladicto

type: module
core_version_requirement: ^8.8.0 || ^9.0

          Puedes comprobar que todo funciona correctamente, si activas el módulo en la url "/admin/modules/". Aunque no hará más nada que confirmarte con un mensaje en la parte superior de la pantalla, indicándote que se ha activado correctamente.

     Ahora desinstala el módulo nuevamente, antes de continuar con las siguientes modificaciones para evitar errores.

     PASO 2 CREACIÓN DEL BLOQUE PERSONALIZADO:

          Para lograr que nuestro módulo personalizado genere un Bloque, una vez lo hayamos terminado, tendremos que crear varios archivos. 

          Crearemos tres carpetas: "src", "Plugin" y "Block", estas deberán estar una dentro de la otra, respetando los estándares de estructura para que Drupal reconozca su contenido y funcione correctamente.

          A continuación, crearemos el archivo php con la clase responsable de construir nuestro módulo, es recomendable que el nombre de tu clase corresponda con el de tu módulo, utilizando Mayúsculas en el caso de que lo formen varias palabras. Por lo tanto, para nuestro ejemplo, la clase se llamará DrupalBlock.php y tendrá dentro el siguiente contenido:

<?php

namespace  Drupal\drupal_block\Plugin\Block;

use Drupal\Core\Block\BlockBase;

/**
 * @Block(
 *   id = "Drupal Block",
 *   admin_label = @translation("Drupal Block"),
 *   category = @translation("Drupal Block"),
 * )
 */


class DrupalBlock extends BlockBase{

  /**
   * {@inheritdoc }
   */

  public function build(){
    return [
      '#markup' => $this->getFrases(),
      '#cache' => [
        'max-age' => 0,
      ]
    ];
  }
   private function getFrases(){
    $frase = [
      'Hola, que tal',
      'Otras vez por aquí?',
      'Nos vemos pronto!!!'
    ];
    return $frase[array_rand($frase)];
   }
}

     Explicación: 

          En la primera parte del código, tenemos el namespace, que permite a Drupal encontrar la ubicación de nuestro módulo para leer su contenido. A continuación, invocamos a la clase BlockBase, porque será necesaria para genera nuestro bloque, ya que heredaremos de ésta algunas funcionalidades, utilizando la palabra extends, que utilizaremos dentro de nuestra clase.

<?php

namespace  Drupal\drupal_block\Plugin\Block;

use Drupal\Core\Block\BlockBase;

     La siguiente fracción del código, corresponde a lo que se conoce como Annotations, puedes visitar la Página oficial de Drupal para saber más sobre ellas. En resumen, aunque su formato es similar al de los comentarios de Php, su función va mucho más allás, permitiendo pasar varios parámetros necesarios para que Drupal interprete, en este caso, que se trata de un Bloque personalizado y muestre varias informaciones relacionadas, que podremos ver una vez esté activado el módulo, dentro de la pantalla de Administración de Bloques.

/**
 * @Block(
 *   id = "Drupal Block",
 *   admin_label = @translation("Drupal Block"),
 *   category = @translation("Drupal Block"),
 * )
 */

     La última parte que nos falta, es el contenido en sí, de nuestra clase. En esencia, lo que estamos haciendo es, construir el bloque, utilizando el método build(){ }, que nos devolverá un arreglo o array, con un elemento html que envolverá una frase, además al refrescar el navegador, dicha frase también cambiará aleatoriamente, ya que hemos utilizado el array_rand() de php para conseguirlo.

class DrupalBlock extends BlockBase{

  /**
   * {@inheritdoc }
   */

  public function build(){
    return [
      '#markup' => $this->getFrases(),
      '#cache' => [
        'max-age' => 0,
      ]
    ];
  }
   private function getFrases(){
    $frase = [
      'Hola, que tal',
      'Otras vez por aquí?',
      'Nos vemos pronto!!!'
    ];
    return $frase[array_rand($frase)];
   }
}

Si quieres más información sobre los bloques personalizados, puedes visitar la página oficial de Drupal