Secciones dinámicas en contenido con Layout Paragraphs

layout-paragraphs.png
Solucionex
25
Mar 22

TL;DR: Layout Paragraphs permite a los gestores de contenido una manera más sencilla que Layout Builder para crear contenido con distintos tipos de componentes y estructuras.

Layout Builder trajo mucha flexibilidad a la hora de crear la estructura de páginas y es muy útil para landing pages y similares. Por otra parte, la curva de dificultad para aprender a usarlo es alta, y requiere de varios módulos acompañantes para hacerlo más usable.

Una de las alternativas que se suele usar para dar flexibilidad a los gestores de contenido es el uso de Paragraphs, que también permiten flexibilidad, pero aumenta de complejidad si se requiere el uso de paragraphs anidados (por ejemplo para crear un componente con tres columnas). Al rescate llega Layout Paragraphs, que permite crear la estructura donde se insertarán los paragraphs al estilo Layout Builder, pudiendo arrastrar los componentes de manera visual.

Instalación

Simplemente instalarlo con composer require 'drupal/layout_paragraphs:^2.0@beta' y activarlo con drush en layout_paragraphs -y

Una vez instalado, hay que crear los tipos de paragraph que servirán de estructura:

Página de creación de tipo de paragraph estructuraNo es necesario añadir campos, pero sí es necesario activar la casilla "Layout Paragraphs" y elegir el estilo de estructura que se usará.

Nota: Para este ejemplo se han creado también un tipo de paragraph "Texto" con un campo de texto largo con formato y otro "Imagen" que permite subir una imagen. Para estos no hay que marcar la casilla "Layout Paragraphs".

Una vez creada tanto la estructura como los paragraphs que se podrán insertar dentro de ella, hay que añadir un campo referencia a paragraphs (que permita los tres tipos de paragraphs creados) en un tipo de contenido. Para este ejemplo se ha hecho en el tipo de contenido "Página básica".

Una vez creado ese campo, hay que especificar que use Layout Paragraphs tanto en el widget del formulario de nodo:

Selección de widget Layout Paragraphs

como en la pestaña de "Gestionar presentación":

Mostrar Layout Paragraphs en Gestionar presentación

Una vez hecho esto ya solo falta crear el contenido. La sección donde añadir paragraphs ahora se muestra así:

Widget Layout Paragraphs en formulario de nodo

 

Al igual que en Layout Builder, hay dos tipos: Las secciones (que en este caso serían los paragraphs que tengan marcada la casilla "Layout Paragraphs") y el contenido en sí, que serán los paragraphs normales (Texto e Imagen en este caso).

 

Al pulsar el botón "+" hay que elegir la sección que se ha definido (2col en este caso):

Selector de tipo paragraph

Una vez añadida la estructura se podrán añadir los paragraphs que se quieran en cada sección (pulsando el botón "+"). Pueden reordenarse fácilmente arrastrando los paragraphs:

Widget Layout Paragraphs con la estructura montada

El resultado una vez se hayan insertado los paragraphs deseados y se guarde el nodo será algo como esto:

Sección a dos columnas usando Layout Paragraphs