Layout Paragraphs
Proporciona una interfaz intuitiva de arrastrar y soltar para construir diseños flexibles con Paragraphs utilizando la API de Layout de Drupal.
layout_paragraphs
Install
composer require 'drupal/layout_paragraphs:^2.1'
Overview
Layout Paragraphs ofrece una experiencia intuitiva de arrastrar y soltar para construir diseños flexibles con Paragraphs. El módulo fue diseñado desde cero pensando en paragraphs y funciona perfectamente con los campos de referencia de paragraphs existentes.
Las características principales incluyen una interfaz intuitiva de arrastrar y soltar, configuración flexible donde los administradores del sitio eligen qué paragraphs usar como "secciones de diseño" y qué layouts deben estar disponibles para cada uno, y compatibilidad con Drupal 10 y 11.
El módulo aprovecha la API de Layout de Drupal para construir diseños y utiliza la API de comportamientos de paragraphs para almacenar datos de diseño. A diferencia de Layout Builder en el núcleo de Drupal, Layout Paragraphs no es una herramienta de construcción de sitios sino una herramienta de autoría diseñada específicamente para creadores de contenido.
Layout Paragraphs soporta diseños anidados, cambio rápido entre diferentes layouts dentro de una sección sin eliminar contenido, y proporciona una experiencia de autoría "Lo que ves es lo que obtienes" cuando se configura para usar el formateador de campo "Layout Paragraphs Builder".
Features
- Interfaz intuitiva de arrastrar y soltar para organizar paragraphs dentro de layouts
- Funciona con campos de referencia de paragraphs existentes sin necesidad de migración
- Aprovecha la API de Layout de Drupal y Layout Discovery para definiciones de diseño
- Integración con la API de comportamientos de Paragraphs para almacenar datos de diseño
- Soporte para layouts anidados con profundidad de anidación configurable
- Cambio rápido de layout sin eliminar contenido
- Experiencia de autoría WYSIWYG con el formateador Layout Paragraphs Builder
- Soporte para duplicación de componentes
- Soporte de traducción incluyendo traducciones asimétricas
- Edición de componentes basada en modal con dimensiones configurables
- Selección visual de layout con vistas previas en miniatura
- Soporte de cardinalidad de campos
- Edición basada en tempstore para cambios no guardados
Use Cases
Constructor de páginas de destino
Crear páginas de destino flexibles definiendo un tipo de paragraph 'Sección' con el comportamiento Layout Paragraphs habilitado. Seleccionar layouts como 2 columnas, 3 columnas o ancho completo. Los editores de contenido pueden luego arrastrar y soltar otros tipos de paragraph (Hero, CTA, Tarjetas, Bloques de texto) en las regiones de layout para construir páginas visualmente ricas sin asistencia de desarrolladores.
Artículo con contenido enriquecido
Mejorar el contenido de artículos permitiendo a los autores insertar secciones de diseño dentro del cuerpo. Por ejemplo, un autor puede agregar una sección de 2 columnas a mitad del artículo para mostrar una imagen junto a texto relacionado, y luego continuar con contenido regular debajo. Esto proporciona capacidades de diseño estilo revista dentro del contenido estándar.
Páginas de exhibición de productos
Construir páginas de productos con múltiples secciones: una sección hero con imagen del producto y título, una sección de características con layout de 3 columnas para destacar características, una sección de video de ancho completo, y un gráfico de comparación de 2 columnas. Cada sección puede usar diferentes layouts mientras mantiene una estructura de página cohesiva.
Componentes de contenido reutilizables
Combinado con el submódulo Layout Paragraphs Library, crear bloques de contenido reutilizables como CTAs estandarizados, secciones de pie de página, o banners promocionales. Los editores de contenido pueden construir un componente una vez, promoverlo a la biblioteca, y luego reutilizarlo en múltiples páginas con la opción de desvincular y personalizar instancias individuales.
Sitios de contenido multilingüe
Para sitios con contenido en múltiples idiomas, configurar el campo de referencia de paragraph como traducible para habilitar traducciones asimétricas. Cada versión de idioma puede tener diferentes arreglos de paragraphs y contenido mientras comparte la misma estructura base.
Flujos de trabajo de editores restringidos
Usar el submódulo Layout Paragraphs Permissions para crear permisos de edición por niveles. Permitir que editores básicos agreguen y editen contenido dentro de layouts existentes, mientras se restringe el reordenamiento y duplicación de layouts a editores senior o administradores.
Tips
- Usar el ajuste de widget 'Modo de vista previa' para crear una visualización simplificada específicamente para la interfaz del constructor, ocultando formato de campo complejo que podría ralentizar la edición.
- Establecer 'Profundidad máxima de anidación' a 0 inicialmente, luego incrementar solo si específicamente necesitas layouts anidados - esto mantiene la interfaz más simple para editores de contenido.
- Crear tipos de paragraph dedicados para secciones de diseño (ej. 'Sección', 'Contenedor') y mantenerlos separados de los tipos de paragraph de contenido para una organización más clara.
- Usar la opción 'Requerir que los paragraphs se agreguen dentro de un layout' cuando quieras imponer una estructura de página consistente.
- Considerar usar diferentes modos de visualización de formulario para el constructor (ajuste form_display_mode) para mostrar solo campos esenciales durante la edición en línea.
- El formateador Layout Paragraphs Builder (Experimental) proporciona la mejor experiencia de autoría ya que permite editar directamente en la página de visualización sin navegar al formulario de edición.
Technical Details
Admin Pages 3
/admin/config/content/layout_paragraphs/labels
Configurar ajustes globales del sitio para los widgets de campo de Layout Paragraphs incluyendo visibilidad de etiquetas y posicionamiento del fieldset de comportamientos.
/admin/config/content/layout_paragraphs/sections
Configurar qué tipos de paragraph pueden usarse como secciones de diseño y qué layouts están disponibles para cada uno.
/admin/config/content/layout_paragraphs/modal-settings
Configurar las dimensiones y comportamiento de los diálogos modales usados para editar paragraphs.
Hooks 4
hook_form_layout_paragraphs_component_form_alter
Alterar el formulario de componente de Layout Paragraph (formulario de edición de paragraph dentro del constructor).
hook_preprocess_layout_paragraphs_builder
Preprocesar el elemento Layout Paragraphs Builder. Modificar la interfaz del constructor.
hook_preprocess_layout_paragraphs_builder_controls
Alterar la interfaz de controles de componentes (botones de mover arriba, mover abajo, editar, eliminar, duplicar).
hook_entity_view_alter
Usar con $build['#layout_paragraphs_component'] para modificar el renderizado de paragraph dentro de Layout Paragraphs. Los elementos de la interfaz pueden modificarse a través de $build['drupalSettings']['lpBuilder']['uiElements'].
Troubleshooting 6
Asegurarse de que la biblioteca Dragula esté correctamente instalada. Verificar que: (1) la biblioteca exista en /libraries/dragula/dist/dragula.min.js, (2) fue instalada a través de Composer con Asset Packagist, o (3) el respaldo CDN no esté siendo bloqueado por tu CSP. Limpiar la caché de Drupal después de instalar la biblioteca.
Verificar que el tipo de paragraph tenga el comportamiento 'Layout Paragraphs' habilitado en Estructura > Tipos de paragraph > [tipo] > Editar > Comportamiento. Asegurar que al menos un layout esté seleccionado en el ajuste 'Layouts disponibles' para ese comportamiento.
Si el campo de referencia de paragraph no está marcado como traducible, agregar/eliminar paragraphs está deshabilitado en modo traducción para prevenir inconsistencia de datos. Para habilitar traducciones asimétricas (diferentes paragraphs por idioma), hacer el campo de referencia traducible en el nivel de ajustes del campo.
Ajustar las dimensiones del modal en Administración > Configuración > Autoría de contenido > Configuración de Layout Paragraphs > Configuración de modal. Establecer el ancho a '90%' y la altura a 'auto' con autoredimensionamiento habilitado para mejores resultados.
Esto es por diseño. Los tipos de paragraph que funcionan como secciones de diseño (tienen el comportamiento Layout Paragraphs habilitado) no pueden promoverse a la biblioteca porque contienen información estructural que puede no transferirse correctamente.
Layout Paragraphs usa tempstore para preservar cambios durante la edición. Sin embargo, si navegas fuera sin guardar la entidad padre, los cambios se perderán. Siempre guardar el nodo/entidad después de hacer cambios de layout.
Security Notes 4
- El acceso a las operaciones de Layout Paragraphs está controlado por el acceso estándar de entidades de Drupal (permisos de crear, actualizar, eliminar en paragraphs y la entidad anfitriona).
- El servicio de acceso del constructor verifica tanto el acceso a nivel de campo como a nivel de entidad antes de permitir operaciones.
- Las etiquetas de formulario, atributos de nombre y atributos requeridos se eliminan de las vistas previas de paragraph renderizadas para prevenir secuestro de formularios cuando el constructor se renderiza dentro de otro formulario.
- El submódulo Layout Paragraphs Permissions proporciona permisos granulares adicionales para operaciones específicas como reordenar y duplicar.