Mejorando la experiencia de Layout Builder de Drupal

Cuando Layout Builder se introdujo en Drupal 8.6 y se estabilizó en Drupal 8.7, creó una deriva en el mecanismo de creación de páginas que se utiliza en el ecospace de Drupal. El creador de diseños ofreció una dura competencia a otras herramientas como Párrafos, Ladrillos, Paneles y Display Suite. Su capacidad única para arrastrar y soltar componentes y obtener una vista previa de ellos en tiempo real fue una concesión real para una herramienta de creación de páginas y para los autores.

Sin embargo, a pesar de ser una herramienta prodigiosa para crear páginas, tiene sus deficiencias cuando se usa para aplicaciones empresariales que requieren una mejor capacidad de creación, selecciones restringidas, acceso rápido y, lo que es más importante, permisos granulares para diferentes roles de usuario.

En este artículo, cubriré 10 módulos aportados por Drupal que se pueden usar junto con el brillante módulo Layout Builder que hará que la herramienta sea más fascinante y autorizada. Para agregar a esta maravilla, ¡todos estos módulos y también son compatibles con Drupal 9!

Los módulos se dividen en determinadas categorías:

• Estilo : capacidad de proporcionar acceso al editor para elegir entre una biblioteca de estilos que se puede aplicar a secciones y bloques.
• Experiencia de autor : mejore la experiencia de autor de los editores que les encantarán.
• Reutilización : disposición para reutilizar componentes o secciones en diferentes páginas para reducir el tiempo de creación de la página.
• Acceso rápido : brinde acceso rápido a los editores para realizar ciertas acciones, ahorrando así tiempo.
• Permisos : otorgue acceso restringido a editores u otros roles de usuario en función de su acceso.

Estilos de Layout Builder

Layout Builder Styles es un poderoso módulo de Drupal que le permite agregar estilos a los bloques y secciones directamente desde la interfaz de usuario. Se puede utilizar para proporcionar a los autores la capacidad de elegir de una lista de estilos preestablecidos definidos en el backend.

Un "estilo" es solo una representación de una o más clases de CSS que se aplicarán. Además, para los bloques, se agrega una sugerencia de plantilla de bloque para el estilo seleccionado.

Los estilos son básicamente entidades de configuración que contienen las clases CSS. Las clases que se agregan en la configuración deben definirse en la hoja de estilo del tema del frontend para que se reflejen en el frontend cuando se aplican a una sección o bloque en particular. Existe una disposición disponible para tener varios estilos que se pueden aplicar a un solo bloque o sección.

Dado que los estilos se almacenan como configuración, se pueden exportar fácilmente a archivos de configuración utilizando la gestión de configuración de Drupal.

Sin embargo, debe ser responsable al agregar estilos, ya que brinda una capacidad poderosa a los autores para alterar los estilos de los componentes que se colocan en una página. Si no se planifica adecuadamente, las cosas pueden ir al sur con estilos en conflicto.

Atributos del componente de Layout Builder

El módulo Atributos de componentes de Layout Builder proporciona una disposición similar a los autores pero con más opciones y es solo para los bloques que se colocan en un Layout.

A menudo, los autores necesitan agregar ciertos atributos de datos o ciertas clases / ID de CSS a un bloque para representar los datos de cierta manera. Hay módulos disponibles para casos como los atributos de bloque y la clase de bloque, pero carecen del soporte de Layout Builder o necesitan parches para funcionar. El módulo Atributos de componentes de Layout Builder ofrece opciones para agregar estos detalles como atributos a los bloques directamente en la interfaz de usuario de Layout Builder.

Los módulos proporcionan opciones ID, Clase (s), Estilos [estilos en línea para el bloque], Datos- * atributos. Estos atributos se pueden agregar a 1) el elemento (externo) del bloque, 2) el título del bloque y 3) el elemento (interno) del contenido del bloque. Las opciones son configurables para cada tipo de elemento, es decir, si no desea que el campo de ID esté disponible para los títulos de los bloques, se pueden desmarcar en el formulario de configuración de módulos en

"/ Admin / config / content / layout-builder-componente-atributos"

Generador de diseño modal

El módulo modal Layout Builder de Drupal moderniza la interfaz de usuario y la experiencia de creación para los formularios de configuración de bloques o los formularios de creación (en el caso de bloques en línea). El formulario que se muestra en la barra lateral del cuadro de diálogo fuera del lienzo puede volverse realmente engorroso porque es muy estrecho. Especialmente si se trata de campos complejos, campos de texto enriquecido, referencias de medios, etc. El cuadro de diálogo fuera del lienzo reduce en gran medida la usabilidad y no es ideal para tales situaciones.

El módulo abre los formularios en una ventana emergente donde hay una buena cantidad de espacio para respirar y una mayor usabilidad. Hay configuraciones disponibles en las que puede establecer el ancho y el alto de la ventana emergente modal. También puede seleccionar qué tema usar para el contenido modal, donde puede elegir los temas habilitados por defecto (Olivero en el caso de la captura de pantalla anterior) y el viejo tema de administración Seven. Actualmente, Claro no es compatible, pero se está trabajando en este frente para que Claro esté disponible como una alternativa.

En general, el módulo mejora enormemente la experiencia de creación de los editores y la usabilidad de Layout Builder.

Biblioteca de Layout Builder

Consideremos una situación en la que los editores necesitan configurar rápidamente una página en la que necesitan mostrar ciertos componentes de bloques de contenido en función de ciertos criterios, por ejemplo, la selección de términos de taxonomía particulares. Ahora, esto se puede hacer de una manera difícil: los editores crean una página de destino y luego crean el mismo diseño una y otra vez para varias páginas con el mismo contenido pero diferentes condiciones. O bien, use el módulo de biblioteca Layout Builder.

Los módulos de la biblioteca del constructor de diseños brindan al administrador del sitio la capacidad de crear diseños predefinidos para cada combinación de tipo de entidad y paquete. Ahora, estos diseños estarán disponibles para los editores del sitio mientras crean el contenido de la página de destino. Esto hará que la tarea sea mucho más fácil y rápida donde los editores no tendrán que rehacer la misma tarea repetidamente. El módulo también proporciona permisos granulares para restringir a los editores a crear sus propios diseños a medida, pero les da la capacidad de personalizar diseños por contenido y elemento.

Biblioteca de secciones

De manera similar a la situación mencionada anteriormente, en la que los editores pueden necesitar elegir un diseño existente de una biblioteca, puede haber una circunstancia en la que los editores tengan que reutilizar ciertas secciones de Layout Builder en varias páginas. Aquí es donde entra en juego la biblioteca de secciones. Con el módulo, los editores pueden crear sus propios mini diseños que pueden reutilizar en otras páginas. Esto les permite crear páginas más rápido sin volver a repetir lo mismo.

La diferencia clave entre este módulo y el módulo de biblioteca de Layout Builder es que este último crea una plantilla de página completa y se basa en la configuración. La biblioteca de secciones se basa en contenido, por lo que el editor de contenido puede crear plantillas sobre la marcha sin importar / exportar configuraciones, también crea plantillas para la sección o varias plantillas de secciones combinadas (página).

No hay superposición entre los dos módulos y puede usar ambos al mismo tiempo.

Adición directa de Layout Builder

Una de las características clave de Layout Builder es la capacidad de agregar bloques en línea que son bloques no reutilizables específicos de una página. Ahora bien, si las páginas de su sistema dependen principalmente de estos bloques en línea como componentes, Layout Builder Direct Add puede ahorrar algo de tiempo al editor al ahorrar unos pocos clics.

El módulo simple reemplaza el botón "Agregar bloque" con un botón desplegable rápido a los tipos de bloque disponibles en el sistema con una opción "Más" que abre la barra lateral de diálogo fuera del lienzo. Cuando un editor selecciona cualquiera de los tipos de bloque de la lista, abre directamente el formulario de bloque para crear ese componente.

Enlace de operación del Creador de diseños

Este pequeño módulo es una buena característica para un sitio. Para acceder a la interfaz de usuario de Layout Builder para una entidad, un editor debe visitar la página y luego hacer clic en la pestaña Diseño en la barra de tareas. El enlace de operación del Creador de diseños agrega una opción de Diseño, el botón desplegable al contenido de la página de descripción general del contenido.

La opción de diseño se mostrará para todos los paquetes de tipo de entidad donde Layout Builder está habilitado. Este enlace les ahorra a los editores de contenido un clic / carga de página cuando quieren acceder a la página de diseño de una entidad directamente sin cargar su página de edición primero.

Restricciones del Creador de diseños

Layout Builder listará todos los bloques disponibles en el sistema proporcionados por varios complementos y módulos, los campos están disponibles como bloques y hay opciones de bloques en línea para crear bloques únicos. Aparte de eso, todos los diseños proporcionados por otros módulos y el tema también enumeran cuándo se coloca una sección. Esto puede resultar un poco confuso y abrumador para los editores y plantea un problema de usabilidad, ya que la cantidad de bloques puede crecer rápidamente en una aplicación empresarial.

Layout Builder Restrictions resuelve este problema proporcionando un diseño configurable con las opciones necesarias. Estas opciones estarán presentes siempre que Layout Builder esté habilitado para cualquier visualización de entidad. La interfaz de usuario configurable del módulo para bloques y diseños de listas de permisos / denegaciones. Los sitios pueden permitir todas las opciones de un determinado proveedor, restringir todas las opciones por proveedor o especificar bloques y diseños individuales permitidos. Los administradores del sitio pueden permitir / denegar aquellos bloques que son útiles para que los editores creen las páginas y solo esos bloques y diseños estarán disponibles para que los editores elijan.

Permisos avanzados de Layout Builder

Aunque Drupal proporciona un poderoso sistema de permisos para los roles de los usuarios, puede haber posibilidades de permisos más granulares basados ​​en los roles. La situación puede surgir cuando hay múltiples roles de usuario que interactúan con el sistema y las páginas.

El módulo de permisos avanzados de Layout Builder brinda esa capacidad a los administradores del sitio para proporcionar permisos restringidos para usar en función de su función. Estos permisos son globales y se aplican a todos los tipos de entidades donde Layout Builder está habilitado. Para llevar las cosas más lejos y restringir el acceso a un nivel más básico, el bloqueo del generador de diseños será útil, que se tratará en la siguiente sección.

Bloqueo del generador de diseños

Como se mencionó anteriormente, Layout Builder Lock proporcionará un acceso más burdo para los usuarios. Permite a los administradores bloquear secciones de un diseño predeterminado para que los usuarios no puedan realizar ciertas acciones al anular el diseño de una entidad individual.

Estos ajustes de bloqueo estarán disponibles cuando se instale el módulo y estarán disponibles para todas las secciones. Hay permisos globales disponibles para administrar el acceso a las funciones de bloqueo. Estas son funciones editoriales avanzadas que deben agregarse y usarse de manera muy responsable. Bloquear una sección o cualquier componente dentro de una sección significa que la sección tendrá un acceso muy limitado para cambiar.

Resumen rápido

1. Estilos del generador de diseños : permite a los creadores de sitios seleccionar de una lista de estilos para aplicarlos a los bloques del generador de diseños y las secciones del generador de diseños.
2. Atributos de componentes de Layout Builder : permite a los editores agregar atributos HTML a los componentes (bloques) de Layout Builder.
3. Layout Builder Modal : le permite agregar y configurar bloques existentes en un modal en la interfaz de usuario de Layout Builder.
4. Biblioteca de creación de diseños: proporciona una biblioteca de diseños que permite a los editores de contenido elegir de una lista de diseños predefinidos.
5. Biblioteca de secciones : cree plantillas reutilizables para una o varias secciones.
6. Adición directa de Layout Builder : reemplaza el enlace "Agregar bloque" con un botón desplegable que enumera los tipos de bloques personalizados.
7. Enlace de operación de Layout Builder : agrega un enlace de operación de 'Diseño' al contenido habilitado para Layout Builder en las páginas administrativas de Drupal.
8. Restricciones del Creador de diseños: establezca qué bloques y diseños deben estar disponibles para su colocación en el Creador de diseños.
9. Permisos avanzados de Layout Builder : permite controlar en detalle el acceso a la página de Layout Builder al proporcionar un conjunto de permisos más granulares.
10. Bloqueo del generador de diseños : permite a los administradores bloquear secciones de un diseño predeterminado para que los usuarios no puedan realizar ciertas acciones al anular el diseño de una entidad individual.