Mastering Drupal 9 Layout Builder: una guía completa para personalizar sin esfuerzo el diseño de su sitio web

Cuando se trata de la creación de páginas, los creadores de sitios, los autores de contenido y los editores de contenido buscan constantemente una experiencia fluida y fácil de usar. Cuando desean diseñar y construir páginas, esperan utilizar tecnologías de arrastrar y soltar y CKEditor. Esta experiencia idéntica es proporcionada por la funcionalidad de construcción de página simple de Drupal Layout Builder en el núcleo de Drupal.

El distintivo Drupal Layout Builder ofrece una potente herramienta de diseño visual para permitir que los autores de contenido modifiquen la forma en que se presenta el contenido. Layout Builder, que se agregó al núcleo de Drupal en su versión más reciente, Drupal 9 le permite agregar/eliminar secciones para mostrar el contenido usando varios diseños y personalizar sus páginas según sus necesidades. Con el módulo Layout Builder de Drupal 9, puede combinar estas secciones para crear una página completamente única.

Hay dos formas diferentes de usar el Creador de diseño de Drupal 9: Diseños predeterminados (para diseñar un diseño para todo el contenido del tipo de contenido) y Anulaciones de diseño (para diseñar un diseño para el elemento de contenido específico). Con la ayuda de este blog, puede obtener más información y comenzar a utilizar el módulo Layout Builder de Drupal 9.

¡Esté atento a nuestro próximo artículo de esta serie donde nos sumergimos en el uso del generador de diseño y el módulo Ctools para aplicar patrones de modo de vista!

Introducción al Creador de diseño

Puede cambiar el aspecto de entidades como tipos de contenido, taxonomías, usuarios y más mediante el módulo Drupal 9 Layout Builder. Los creadores de sitios pueden arrastrar y soltar fácilmente bloques, campos y otros elementos en su lugar utilizando esta función.

Al proporcionar una vista previa de los cambios realizados a medida que diseña sus diseños, el módulo de creación de diseños en Drupal 9 facilita el proceso de creación de diseños. El generador de diseño en Drupal 9 permite vistas previas de los cambios realizados para una experiencia de creación de diseño fluida en lugar de requerir que los usuarios guarden cada pequeña modificación que realicen en el diseño y luego lo busquen en la interfaz.

El generador de diseño tiene dos módulos:

Descubrimiento de diseño : brinda a los módulos o temas un medio para registrar diseños.

Creador de diseño : permite a los usuarios agregar y organizar directamente bloques y campos de contenido en el contenido.

Al diseñar un diseño, Layout Builder utiliza dos ideas clave:

Secciones - Columnas o contenedores donde se pueden colocar bloques. Por ejemplo, podría ser un diseño de 2 columnas o un diseño de 3 columnas, etc.

Bloques : elementos de contenido que se pueden colocar en secciones.

Instalación y configuración del módulo Layout Builder

Vaya a Extender y active los módulos Layout Builder y Layout Discovery para instalar y configurar el módulo de diseño de Drupal 9.

Modificar el tipo de contenido y la taxonomía

Una vez que se haya instalado el módulo, vaya a Estructura, Tipos de contenido y seleccione "Administrar visualización" para cualquier tipo de contenido. Para este ejemplo, usaremos el tipo de contenido "artículo".

Haga clic en el menú desplegable Opciones de diseño en la parte inferior para seleccionar "Usar el Creador de diseño" y luego haga clic en Guardar.

Los formateadores de campo se reemplazan con una opción de "Administrar diseño" después de activar el Creador de diseño en el modo de visualización. Cada uno de los modos de vista disponibles se puede utilizar con Layout Builder.

Accederá al diseño de tipo de contenido del artículo cuando haga clic en "Administrar diseño".

Insertar secciones en el diseño

Elimine la sección predeterminada antes de agregar más al generador de diseño. Seleccione el botón "cerrar" (como se muestra en la siguiente captura de pantalla). Además, un botón para eliminar la sección predeterminada estará disponible para usted en el lado derecho de su pantalla. Luego seleccione "Eliminar".

Al seleccionar la opción "Agregar sección", agreguemos algunas secciones a nuestro diseño. En el lado derecho de la pantalla, también se le ofrecerán opciones para que pueda seleccionar un diseño para su sección. Por ahora, elijamos la "Sección de dos columnas".

Se le dará la opción de seleccionar el ancho "Diseño de dos columnas". Por ahora, elijamos un "67%/33%". A continuación, seleccione "Agregar sección".

Después de agregarse, cada región de la sección debe mostrar un enlace "Agregar bloque".

Insertar bloques en las regiones de la sección

Puede agregar bloques a su área después de seleccionarla para el diseño. Simplemente haga clic en "Agregar bloque" y la opción "Elegir un bloque" se deslizará desde la derecha cuando desee agregar un bloque.

Seleccionando un bloque

Simplemente haciendo clic en los bloques en la columna de la derecha, los elegirá. Con el campo de texto "Filtrar por nombre de bloque", incluso puede localizar bloques filtrando la búsqueda en función de sus nombres.
Por ahora, elegiremos el campo de contenido "Cuerpo".

El formateador de campos le permitirá realizar cambios cuando haga clic en el bloque que desea agregar. Haga clic en "Agregar bloque" después de configurar el formateador.

En el lado izquierdo del bloque, habrá un área de contenido "Cuerpo".

Se ha agregado el campo "Cuerpo"; ahora guarda tus cambios. Al seleccionar "Guardar diseño" en el menú en la parte superior de la página de diseño de Drupal 9, puede guardar todos los cambios que ha realizado en su sección.

Para personalizar aún más nuestro generador de diseño, intentemos agregar algunos campos más a nuestro diseño.

Cuando visite una página con el tipo de contenido de artículo después de guardar este diseño, podrá ver una vista previa del diseño que acaba de crear.

Anulaciones de diseño:

El diseño que acabamos de crear funcionará para todos los artículos. Drupal tiene una serie de configuraciones que deben habilitarse para crear un diseño personalizado para un determinado artículo. Para ello, seleccione "Permitir que cada elemento de contenido tenga su diseño personalizado" .

Si visita un artículo después de activar esta opción, aparecerá un botón de pestaña Diseño.

Con la misma interfaz, ahora se puede cambiar el diseño. Sin embargo, esto solo alterará el diseño de este contenido.

Ahora agreguemos un bloque a esta página. Cree una nueva sección de una columna y haga clic en el botón "Agregar bloque". Considere el caso cuando deseamos mostrar contenido editado recientemente de otros usuarios en esta página. Filtre el bloque "Contenido reciente" al agregar un nuevo bloque, luego personalícelo según sus necesidades antes de guardar el diseño.

Eventualmente, cuando hayamos incluido el bloque de artículos más reciente, nuestra página aparecerá así.

Importante: si ha cambiado el diseño de una sola entidad, no podrá desactivar el Creador de diseño.

Solo puede actualizar las opciones de diseño una vez que haya restablecido todos los diseños modificados a su configuración original.

Generador de diseño de código

Cuando se trata de la gestión de GUI, Drupal Layout Builder es sin duda increíble. Sin embargo, los problemas de programación con los que se enfrenta al usar la herramienta de forma regular pueden ser un poco más difíciles. Ahora, puede preguntar cómo usar Layout Builder usando código.

Resulta que es bastante simple habilitar y deshabilitar plantillas para una sola entidad.

Simplemente cargue la pantalla usando el siguiente código:

 $entityViewDisplay = \Drupal::entityTypeManager- >getStorage('entity_view_display')- >load('ENTITY_TYPE.ENTITY_BUNDLE.VIEW_MODE');

Luego devolverá un objeto del tipo LayoutBuilderEntityViewDisplay , que luego debes cambiar de la siguiente manera:

 $entityViewDisplay->enableLayoutBuilder();

Si desea configurar adicionalmente la bandera o activar el Creador de diseño para un modo de vista específico:

 $entityViewDisplay->setOverridable(TRUE);

para habilitar la creación de diseños únicos para una sola entidad.

Después de eso, debes guardar todo.

 $entityViewDisplay->save();

Lo que realmente ocurre en segundo plano es que el módulo Layout Builder agrega la clave_constructor_diseño a la configuración_de_terceros de un determinado tipo de entidad, con valores para los parámetros descritos anteriormente (habilitado, permitir personalización) , y luego almacena el diseño predeterminado para este tipo de entidad en secciones.

Se crea un nuevo campo de entidad llamado layout_builder__layout y se usa para contener el diseño actualizado para esta entidad específica si la opción setOverridable se establece en TRUE .

Por el contrario, se necesita un poco más de trabajo para crear una sección usando código y llenarla con contenido relevante.

Comenzando, agreguemos una nueva sección. El parámetro layout_id , que sirve como identificador de diseño, debe incluirse al crear una nueva instancia de la clase \Drupal\layout_builder\Section para lograr esto.

Consejo profesional: el módulo de descubrimiento de diseño contiene las plantillas predeterminadas. Los diseños se definen en archivos *.layouts.yml . Para obtener información más detallada, consulte el siguiente artículo sobre cómo crear diseños personalizados en Drupal.

Entonces, agregar un nuevo elemento directamente a la sección sería el curso de acción más simple. Para ello, utilice el método appendComponent , que acepta una instancia de la clase \Drupal\layout_builder\SectionComponent como argumento. Sin embargo, antes de que pueda desarrollar un componente de sección de este tipo, primero debe organizar algunas cosas. Para empezar, necesitarás:

• el uuid del elemento incrustado,
• el nombre de la región en la sección,
• configuración de complementos.

En este tutorial, insertaremos un nodo de muestra en una sección de una sola columna utilizando el complemento proporcionado por Entity Blocks :

 $section = new Section('layout_onecol'); $uuid = $node->uuid(); $region = 'content'; $pluginConfiguration = [ 'id' => 'entity_block:node', 'provider' => 'entity_block', 'label_display' => FALSE, 'view_mode' => 'default', 'entity' => $node->id(), ]; $component = new SectionComponent($uuid, $region, $pluginConfiguration); $section->appendComponent($component);

Tenga siempre en cuenta que los diseños se guardan en configuraciones de terceros o en un campo; por lo tanto, para guardar la sección, debe hacerlo en una de estas ubicaciones.

En nuestro caso, se está utilizando un campo, por lo que:

 $entity->layout_builder__layout->setValue($section); $entity->save();

Ahora ha agregado una sección de una sola columna a una entidad y ha mostrado un nodo de ejemplo siguiendo todos estos pasos.

También puede estar interesado en Mejorar la experiencia del generador de diseño de Drupal.

Pros y contras de Layout Builder

Hemos compilado una breve lista de algunas ventajas y desventajas de Layout Builder a continuación:

Ventajas:

• La implementación es simple porque no es necesario agregar nuevos tipos de entidades porque el módulo ya está incluido en el núcleo.
• Interfaz de usuario fácil de usar con capacidades de arrastrar y soltar.
• Opciones para la personalización de entidades individuales.
• Un método sencillo para combinar campos con otras entidades sin necesidad de añadir más campos de referencia.
• Un método simple de aprovechar bloques de entidades para incrustar entidades existentes.

Contras:

• Los nuevos tipos de entidades y los elementos integrables se suman al tamaño del sitio web, lo que aumenta significativamente el tiempo que tardan en cargarse todos los elementos.
• El módulo se centra en la interfaz de usuario, por lo que crear nuevos diseños podría ser más sencillo. En este momento, tenemos que escribir código para generar archivos y plantillas.yml.
• Arrastrar elementos entre secciones puede ser un poco complicado cuando hay muchas partes en el diseño.
• Los nombres de Twig tienen el sufijo uuid, lo que dificulta representar una sección específica y restringe el acceso a las secciones.

Pensamientos finales

Drupal Layout Builder nos abre a una amplia gama de interesantes posibilidades para administrar diseños a través de la interfaz de usuario y el código. ¿Reemplazará todas las soluciones actuales?
Es la herramienta ideal, en mi opinión, para tratar el tema del diseño a gran escala. Parece que el mejor curso de acción sería usar módulos ampliamente utilizados como Paragraphs y Field Group para crear componentes cerrados, y luego Layout Builder para crear diseños prefabricados compuestos por estos componentes.

Layout Builder tiene un propósito único, como cualquier otro módulo de Drupal. Como resultado, siempre funcionará mejor en algunas situaciones mientras que en otras funcionará sustancialmente peor. ¡Compruébalo por ti mismo!

Si está buscando expertos que lo ayuden con algo de Drupal, ¡estamos a solo un correo electrónico de distancia!