Pasar al contenido principal

custom block

Cómo crear un bloque programáticamente en Drupal 9

  • URL de Video remoto

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:

     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

Mostrar bloque vista usando Preprocess Function Drupal 8/9

Este código te permitirá mostrar una vista tipo bloque en un nodo o paragraphs

Para Nodos:
/** * Implements hook_preprocess_node() for node.html.twig. */
function TUSUBTHEME_preprocess_node(array &$variables) {
  $variables['nombre_variable_para_mostrar'] = views_embed_view('nombre_maquina', 'nombre_vista_dentro');

}

Para Paragraphs

/* Implement hook_preprocess_paragraph() */
function wct_oct2020_preprocess_paragraph(&$variables) {
  $variables['nombre_variable_para_mostrar'] = views_embed_view('nombre_maquina', 'nombre_vista_dentro');

}

Pros y contras de utilizar en Drupal Blocks y/o Paragraphs

Conoce las diferencias y opciones que exiten al utilizar paragraphs o bloques en Drupal 8 y 9

   Si te consideras como yo, uno de los apasionados por utilizar Drupal, o estás a punto de comenzar a probar las versiones más actuales, en las que se implementaron grandes cambios, como la estructura a partir del Framework Symfony, o la integración en el núcleo, de varios módulos que en versiones anteriores a Drupal8, debían descargarse manualmente, es posible que te haya saltado una duda razonable, ¿cuál sería la mejor manera de comenzar a diseñar tu proyecto web?.

     Debido a la gran cantidad de opciones disponibles en este CMS, a veces podría resultar abrumador encontrar las primeras indicaciones, que te permitan comenzar poco a poco a experimentar, las mejores alternativas, para lograr una web fácil de mantener, actualizar y con diseño sea flexible y adaptado a cualquier dispositivo.

   ¿QUÉ ES MEJOR DE UTILIZAR EN DRUPAL BLOCKS O PARAGRAPHS?

        Todos los que hemos trabajado en las versiones 6 o 7 de Drupal, pudimos conocer o experimentar, en algún momento, con el uso de los bloques, para aplicarlo sobretodo en la página principal, ya que nos permitía dividir en zonas, cualquier página y a su vez añadir contenidos referenciados, a través del uso del campos especiales o vistas.

        A partir de la versión 8, además de la implementación en entidades, se añadió el módulo que marcó para siempre, según mi punto de vista, la forma en que podríamos construir una web más versátil, tanto de cara a los administradores, o gestorese de contenidos, como al usuario final. Me refiero a los Paragraphs; que añadieron múltiples maneras de manipulación de los contenidos, además de ofrecer un sustituyo mucho más potente, que el fieldgroup o los bloques convencionales.

       No obstante, cada proyecto tiene sus propias necesidades y es decisión nuestra implementar, las mejores alternativas, para sacar provecho a cualquiera de las opciones con las que disponemos.      

Comparativa entre Bloques y Paragraphs
OPCIONES DISPONIBLES BLOQUES PARAGRAPHS
Uso de campos referenciados (apuntandos a vistas, otros contenidos, imágenes, etc) SI SI
Capacidad de integración dentro de Páginas y/o Tipos de contenido NO SI
Plantillas idependientes SI SI
Capacidad de edición en línea SI SI (Módulo Geysir)
Control de acceso por permisos y roles SI SI
Reutilizable SI SI

     EJEMPLO PRÁCTICO (WEB BÁSICA) CON PARAGRAPHS

          Supongamos que los requerimientos fundamentales de nuestro proyecto serán, una página de inicio y varias páginas interiores, como por ejemplo, Conctacto, Quienes somos, Blog y/o Listado de productos. Además en la página principal, tendremos varios elementos: un carrusel con las promociones, un pequeño resumen sobre lo que hace nuestra empresa, otro apartado con los productos o servicios destacados, una galería de imágenes y un formulario. Y para nuestras páginas interiores, tendremos una imagen de cabecera, con algún texto descriptivo del contenido, un título principal, y algunos textos, imágenes o formulario de contacto, cuyos contenidos variarán según la página, compartiendo el mismo diseño de cabecera y estructura general.

          Podríamos crear o configurar dos tipos de contenido principales, uno llamado "pagina_inicio", al que añadiríamos un sólo campo llamado, del tipo paragraphs, por ejemplo "contenidos", y dentro tendríamos varios paragraph, que a su vez apuntaran a todos los contenidos que pensamos mostrar.De esta forma, la página principal sería muy sencilla de personalizar y actualizar sin necesidad de grandes conocimientos ni experiencia previa.

          Puedes visitar https://demo.webcontodo.com/ para ver cómo queda.

    En el caso de la páginas interiores, como compartirán la cabecera, los títulares principales, y envolveremos el resto de elementos dentro de algún contenedor, tipo bootstrap, para garantizar un diseño responsivo; el enfoque sería parecido al anterior, con algunas variaciones y podríamos reaprovechar algunos de los paragraphs, para no tener que crear nuevas plantillas individuales en cada caso.

     En resumen, con este planteamiento, podríamos ofrecer la posibilidad de personalizar rápidamente todas las páginas de la web, cambiando de orden los elementos, añadiendo o removiendo elementos existentes, creando estructura que podrían llegar a ser bastante complejas, dependiendo de las necesidades y todo sin la necesidad de invertir demasiado tiempo en la aplicación de correcciones o definición de los estilos, ya que casi todo el contenido mostrado sería reutilizable, escalable como proyecto y fácil de aplicar, incluso en entornos diferentes con algunos cambios.

     Aunque el uso de los bloques tradiciones nos permite un resultado parecido para nuestra página de inicio, tiene la desventaja de no formar parte de la página como tal, sino que tendríamos que modificarla desde su propia página de configuración en la url "estructura/diseño de bloques", esto no resulta nada práctico para el gestor de contenidos, además de que puede crear mucha confusión al tener que cambiar de pantallas para comprobar los resultados. 

     Además, con respecto a las páginas interiores, aunque pudiéramos poner un bloque "Cabecera", que apareciera en todas las páginas interiores, tampoco sería parte de su estructura, tendríamos que añadir una nueva cabecera por cada una de las páginas, volviendo al problema principal que es la configuración fuera de nuestro contenido.

     Como dije al principio, Drupal nos ofrece múltiples maneras de enfocar nuestros proyectos, y es decisión nuestra aplicar la que mejor nos convenga. Los bloques también ofrecen la novedad de "Bloques personalizados", que podrían resolver algunas de los inconvenientes con respecto a los tradicionales, pero en definitiva, considero que será mucho más práctico el uso de paragraphs para implementar en cualquier proyecto.

     Si tomamos en cuenta, la posibilidad de crear módulos personalizados, para cada tipo de paragrahps, signficaría que en cada proyecto nuevo podríamos simplemente instalar dichos módulos y realizar unos cambios mínimos de configuración y tendríamos un resultado cuyas prestaciones nos ahorrarían muchos dolores de cabeza.