Configuración de bloques en Drupal 8

1.Bloques, bloques y más bloques

Un bloque es un término genérico que se aplica a cualquier contenido autónomo de contenido, menú o código. Existen bloques predefinidos estándar que vienen con Drupal 8: el bloque de Inicio de sesión de usuario, el bloque de búsqueda, el bloque Quién está en línea, el bloque Quién es nuevo, el bloque Contenido reciente y mucho más. También hay bloques que vienen con módulos aportados, como bloques que comparten el último informe meteorológico, tus publicaciones recientes en Twitter o tu estado de Facebook actual. Como administrador de un sitio, puedes crear tus propios bloques personalizados, como una lista de próximos eventos.

2.Cómo hacer que los bloques aparezcan en las páginas

En el capítulo sobre "Themes" vimos la estructura de los temas y cómo los temas definen regiones en una página. La figura 6-1 mostró cómo se divide el tema en Barra lateral primera, Barra lateral segunda, Destacado, Contenido y otras regiones. Ahora veremos cómo asignar bloques a las distintas regiones de tu tema y explicar cómo hacerlo aumenta el interés de los visitantes en tu sitio al proporcionar características interesantes y de alto valor.

La figura 8-1 es un ejemplo de bloques asignados a varias regiones de una página. En esta página aparecen 7 bloques.

Figura 8-1.

Este ejemplo incluye un bloque de menú (Navegación principal), bloques interactivos (búsqueda e inicio de sesión de usuario) y bloques de información (Quién es nuevo, Contenido reciente, Comentarios recientes y Powered by Drupal).

Echemos un vistazo a los bloques que vienen con Drupal 8 y que asigna algunos de esos bloques a las regiones de tu sitio. A continuación, instalaremos un módulo o dos que proporcionen bloques interesantes que puedes agregar a tu sitio y, a continuación, crearemos un bloque personalizado desde cero.

3.Búsqueda de la lista de bloques disponibles

Para encontrar la lista de bloques que están disponibles para su uso en tu nuevo sitio web, haz clic en el enlace Administrar en la parte superior de la página y, a continuación, haz clic en el enlace Estructura del menú secundario. En la página Estructura, haz clic en el enlace “Bloquear diseño”, que enumera todos los bloques definidos en tu sistema, incluidos los que ya están asignados a regiones y los que no están asignados a una región (ver figura 8-2).

Figura 8-2.

En la página “Diseño de bloques” verás que Drupal 8 proporciona una serie de bloques preconfigurados que se pueden colocar en las páginas de tu sitio. Elige unos seleccionando de la lista de bloques en el cuadro “Colocar bloques” en la columna derecha de la página.

Haz clic en el título de un bloque y, en el formulario “Congurar bloque” selecciona una región de la lista de selección (ej. Barra lateral primera si estás utilizando el tema Bartik). Después de asignar los bloques a las regiones, haz clic en el botón “Guardar bloques”. Si regresas a la página principal de tu sitio, verás los bloques que activaste en las regiones en las que los asignaste.

4.Reorganización de bloques

Es probable que, en algún momento, desees reordenar cómo aparecen los bloques en una página. En el ejemplo anterior mostrado en la figura 8-1, es posible que desees que aparezcan los bloques “Contenido reciente” y “Comentarios recientes” encima del bloque “Quién es nuevo”. Para reordenar los bloques, en la página “Bloquear diseño” que se muestra en la figura 8-2, haz clic y mantén presionado el signo más (+) junto al bloque que desees mover y arrastra ese bloque a la posición en la que deseas que aparezca en la lista de bloques para esa región. Cuando sueltes el botón del ratón, verás que Drupal reordenó los elementos (temporalmente).

Aparecerá un mensaje en la parte superior de la lista de bloques que indica “Tienes cambios no guardados”.

Desplázate hasta la parte inferior de la página y haz clic en “Guardar bloques”. Drupal guardará los cambios y mostrará un mensaje indicando que se realizaron los cambios. Vuelve a la página principal haciendo clic en el enlace “Volver al sitio” en la parte superior izquierda de la página y verás los bloques en su nuevo orden.

5.Reasignación y desactivación de bloques

Drupal también proporciona los mecanismos para mover un bloque a una región diferente y desactivar un bloque que ya está visible en una página. Para realizar los cambios, dirígete a la página “Bloquear diseño” (Estructura ➤ Bloquear diseño).

En la página “Bloquear diseño” (ver figura 8-2), haz clic en la lista desplegable Region de uno de los bloques que activaste y asignaste a una región y selecciona la opción <ninguno>, ese elemento desaparecerá de la sección regional de la página “Bloquear diseño” y volverá a aparecer en la parte inferior de la página en la sección deshabilitada. A continuación, haz clic en la lista desplegable Región para otro de los bloques asignados a una región y selecciona una región diferente de la lista de selección. Inmediatamente después de seleccionar la nueva ubicación, el bloque que seleccionaste se moverá a la región recientemente asignada dentro del listado de bloques y aparecerá en la parte superior de la lista.

Después de realizar los cambios en los bloques, desplázate hasta la parte inferior de la página y haz clic en “Guardar bloques”, que confirma los cambios en la base de datos de Drupal. Revisa la página principal de tu sitio web y verás los cambios que acabas de hacer.

6.Configuración de bloques

Puedes seleccionar varios ajustes de configuración para bloques en la página “Configurar bloque”. Las opciones de configuración incluyen reemplazar el título del bloque y establecer la visibilidad del bloque en base a varios parámetros opcionales. Como ejemplo de cómo usar estas características en el futuro, cambiemos el bloque “Quién es nuevo” para que aparezca solo en la página principal de tu sitio y sólo cuando el visitante sea un usuario que haya iniciado sesión en el sistema con un ID de usuario y contraseña. Para realizar estos cambios, dirígete a la página “Bloquear diseño” y localiza el bloque “Quién es nuevo”. Si no has asignado ese bloque a una región, hazlo ahora siguiendo los pasos de la sección anterior. A continuación, haz clic en el enlace Configuración del bloque (ver figura 8-3).

Figura 8-3.

En este formulario, puedes modificar si el título del bloque “Quién es nuevo” aparece en la página cuando se muestra el bloque (desmarca la casilla “Mostrar título”), especificar cuántos usuarios aparecerán en la lista (“Elementos por bloque”), modificar el título marcando la casilla e ingresando un nuevo título en el campo de texto que aparece cuando marcas la casilla y asignar el bloque a una nueva región.

Es posible que desees que sólo aparezca este bloque en ciertas páginas de tu sitio. Por defecto aparece en cada página. Por ejemplo, es posible que desees que el bloque aparezca sólo en la página principal de tu sitio. En la parte inferior de la página “Configurar bloque” (ver figura 8-4) verás la pestaña Páginas en la sección Visibilidad. Para que el bloque sólo aparezca en la página de inicio, haz clic en el botón de selección “Mostrar para las páginas enumeradas” y escribe <front> en el cuadro de texto (<front> es el término especial utilizado para representar la página principal de tu sitio).

También puedes especificar otras páginas introduciendo la URL de esa página en el cuadro de texto (ej. /content).

Figura 8-4.

También es posible establecer un bloque para que sólo aparezca para tipos específicos de usuarios en función de las funciones asignadas. Haz clic en la ficha Roles para examinar y establecer la visibilidad mediante las opciones de función de usuario. Por ejemplo, establezcamos que el bloque sólo aparezca cuando la persona que visita el sitio está conectada (ver figura 8-5).

Figura 8-5.

Una vez que hayas hecho clic en la casilla de verificación “Usuario autenticado”, puedes hacer clic en el botón “Guardar bloque” en la parte inferior de la página y volver a la página principal de tu sitio.

Para probar los cambios, navega a una página que no sea la principal y verás que ya no se muestra el bloque “Quién está en línea”. Cierra la sesión y regresa a la página principal y verás que el bloque “Quién es nuevo” ya no aparece porque ya no está conectado.

7.Usando bloques de módulos aportados

Hay literalmente miles de módulos aportados disponibles para Drupal. Muchos de esos módulos generan bloques como medio de mostrar información a los visitantes. Si el módulo ya está instalado y habilitado en tu sitio, los bloques generados por ese módulo aparecerán en la página “Bloquear diseño”. Simplemente coloca los bloques deseados en la región como se describe anteriormente en este capítulo. Si todavía no has instalado el módulo, sigue los pasos descritos en el capítulo sobre módulos.

Un ejemplo de bloque de módulo aportado es el bloque del clima Wunderground que muestra el pronóstico actual (ver figura 8-6).

Figura 8-6.

Hay cientos de módulos que generan bloques. Visita www.drupal.org/project/project_module y navega por la lista.

8.Creación de bloques personalizados

Puede haber casos en los que necesites un bloque e incluso después de examinar la lista de módulos aportados, no puedas encontrar nada que cumpla con tus requisitos específicos. En ese caso, tienes la posibilidad de crear un bloque personalizado. Los bloques personalizados pueden contener cualquier combinación de HTML y Javascript estáticos y pueden ser tan simples como el ejemplo siguiente o tan complejos como quieras.

Para demostrar la creación de un bloque personalizado, crearemos uno que muestre texto HTML estático en forma de “Hello World”. Aunque puede que no sea emocionante, demuestra el proceso para crear un bloque nuevo. El primer paso es navegar de regreso a la página “Diseño de bloque”. Una vez allí (ver figura 8-2), haz clic en la pestaña “Biblioteca de bloques personalizados” en la esquina superior izquierda de la página. En la página “Biblioteca de bloques personalizados” haz clic en el botón “Agregar bloque personalizado”.

En el formulario “Agregar bloque personalizado” introduce una descripción del bloque en el campo “Descripción del bloque”. Para este ejemplo, utilizaremos “Mi primer bloque personalizado”. A continuación, ingresa ¡Hola mundo! En el área de texto Cuerpo y luego haz clic en Guardar (ver figura 8-7).

Figura 8-7.

Después de guardar el bloque, haz clic en la pestaña “Diseño de bloque” en la parte superior de la página y busca tu nuevo bloque en el cuadro “Colocar bloques” en la categoría Personalizados. Haz clic en el nombre del bloque que creaste y asigna el bloque a una región de la página. Haz clic en el botón “Guardar bloque” y regresa a la página principal de tu sitio donde verás el bloque que creaste en la región que especificaste (ver figura 8-8).

Figura 8-8.