Melhorando a Experiência do Construtor de Layout do Drupal

Quando o Layout Builder foi introduzido no Drupal 8.6 e estabilizado no Drupal 8.7, ele criou um desvio no mecanismo de construção de página sendo usado no ecosspace do Drupal. O criador de layout deu uma dura competição com outras ferramentas, como Parágrafos, Tijolos, Painéis e Display Suite. Sua capacidade única de arrastar e soltar componentes e visualizá-los em tempo real foi uma concessão real para uma ferramenta de criação de páginas e para os autores.

No entanto, apesar de ser uma ferramenta prodigiosa para construir páginas, ela tem suas deficiências quando usada para aplicativos corporativos que requerem uma melhor capacidade de autoria, seleções restritas, acesso rápido e, mais importante, permissões granulares para diferentes funções de usuário.

Neste artigo, estarei cobrindo 10 módulos de contribuição do Drupal que podem ser usados ​​em conjunto com o módulo Layout Builder brilhante que tornará a ferramenta mais fascinante e confiável. Para adicionar a essa grandiosidade, todos esses módulos são compatíveis com Drupal 9 também!

Os módulos são divididos em certas categorias:

• Estilo - capacidade de fornecer acesso ao editor para escolher em uma biblioteca de estilos que pode ser aplicada a seções e blocos.
• Experiência de autoria - aprimore a experiência de autoria dos editores que eles irão adorar.
• Reutilização - Provisão para reutilizar componentes ou seções em páginas diferentes para reduzir o tempo de construção da página.
• Acesso rápido - Fornece acesso rápido aos editores para executar certas ações, economizando tempo.
• Permissões - Conceda acesso restrito a editores ou outras funções de usuário com base em seu acesso.

Estilos de Construtor de Layout

O Layout Builder Styles é um módulo Drupal poderoso que permite adicionar estilos aos blocos e seções diretamente da IU. Ele pode ser usado para fornecer aos autores a capacidade de escolher em uma lista de estilos predefinidos definidos no backend.

Um "estilo" é apenas uma representação de uma ou mais classes CSS que serão aplicadas. Além disso, para blocos, uma sugestão de modelo de bloco é adicionada para o estilo selecionado.

Os estilos são basicamente entidades de configuração que contêm as classes CSS. As classes que estão sendo adicionadas na configuração devem ser definidas na folha de estilo do tema do frontend para que reflitam no frontend quando aplicadas a uma seção particular ou a um bloco. Há uma disposição disponível para ter vários estilos que podem ser aplicados a um único bloco ou seção.

Uma vez que os estilos são armazenados como configuração, eles podem ser facilmente exportados para arquivos de configuração usando o gerenciamento de configuração Drupal.

No entanto, você deve ser responsável ao adicionar estilos, pois está dando aos autores uma capacidade poderosa de alterar os estilos dos componentes que estão sendo colocados em uma página. Se não for planejado corretamente, as coisas podem ir para o sul com estilos conflitantes.

Atributos do componente Layout Builder

O módulo Layout Builder Component Attributes fornece disposições semelhantes aos autores, mas com mais opções e é apenas para os blocos sendo colocados em um Layout.

Freqüentemente, os autores precisam adicionar certos atributos de dados ou certas Classes / IDs CSS a um bloco para renderizar os dados de uma certa maneira. Existem módulos disponíveis para tais casos, como atributos de bloco e classe de bloco, mas eles não têm o suporte do Layout Builder ou precisam de patch para funcionar. O módulo Layout Builder Component Attributes oferece as opções para adicionar esses detalhes como atributos aos blocos diretamente na IU do Layout Builder pronto para uso.

Os módulos fornecem opções de ID, Classe (s), Estilos [estilos embutidos para o bloco], Atributos de Dados- *. Esses atributos podem ser adicionados a 1) o elemento do bloco (externo), 2) o título do bloco e 3) o elemento do conteúdo do bloco (interno). As opções são configuráveis ​​para cada tipo de elemento, ou seja, se você não quiser que o campo ID esteja disponível para os títulos dos blocos, eles podem ser desmarcados no formulário de configuração dos módulos em

“/ Admin / config / content / layout-builder-component-attribute”

Layout Builder Modal

O módulo Modal Layout Builder do Drupal moderniza a IU e a experiência de autoria para os formulários de configuração de bloco ou formulários de criação (no caso de blocos embutidos). O formulário exibido na barra lateral da caixa de diálogo fora da tela pode ser muito complicado porque é muito estreito. Especialmente se você estiver lidando com campos complexos, campos de rich text, referências de mídia, etc. A caixa de diálogo fora da tela reduz muito a usabilidade e não é ideal para tais situações.

O módulo abre os formulários em uma janela pop-up onde há bastante espaço para respirar e maior usabilidade. Existem configurações disponíveis onde você pode definir a largura e a altura da janela pop-up modal. Você também pode selecionar qual tema usar para o conteúdo modal onde você pode escolher os temas habilitados padrão (Olivero no caso da imagem acima) e o bom e velho tema de administração Seven. Atualmente, o Claro não é suportado, mas há um trabalho em andamento nessa frente para disponibilizar o Claro como alternativa.

No geral, o módulo aprimora muito a experiência de autoria para editores e a usabilidade do Layout Builder.

Biblioteca do Layout Builder

Vamos considerar uma situação em que os editores precisam configurar rapidamente uma página em que precisam mostrar certos componentes do bloco de conteúdo com base em certos critérios, por exemplo, seleção de termos de taxonomia específicos. Agora, isso pode ser feito da maneira mais difícil para que os editores criem uma página de destino e, em seguida, criem o mesmo layout repetidamente para várias páginas com o mesmo conteúdo, mas em condições diferentes. Ou então, use o módulo de biblioteca Layout Builder.

Os módulos de biblioteca do criador de layout fornecem ao administrador do site a capacidade de criar layouts predefinidos para cada tipo de entidade e combinação de pacote. Agora, esses layouts estarão disponíveis para os editores do site durante a criação do conteúdo da página de destino. Isso tornará a tarefa muito mais fácil e rápida, onde os editores não terão que refazer a mesma tarefa repetidamente. O módulo também fornece permissões granulares para restringir os editores a criar seus próprios layouts sob medida, mas dá a eles a capacidade de personalizar layouts por item de conteúdo.

Biblioteca de Seção

Semelhante à situação mencionada acima, em que os editores podem precisar escolher um layout existente de uma biblioteca, pode haver uma circunstância em que os editores terão que reutilizar certas seções do Layout Builder em várias páginas. É aqui que a Biblioteca de Seção entra em jogo. Com o módulo, os editores podem criar seus próprios mini layouts que podem ser reutilizados em outras páginas. Isso permite que eles criem páginas mais rapidamente sem repetir a tarefa de fazer as mesmas coisas.

A principal diferença entre este módulo e o módulo Layout Builder Library é que o último cria um modelo de página inteira e é baseado em configuração. A biblioteca de seções é baseada em conteúdo, de modo que o editor de conteúdo pode criar modelos em tempo real, sem importar / exportar configurações, além de criar modelos para a seção ou vários modelos de seções combinadas (página).

Não há sobreposição entre os dois módulos e você pode usar os dois ao mesmo tempo.

Layout Builder Direct Add

Um dos principais recursos do Layout Builder é a capacidade de adicionar blocos embutidos que são blocos não reutilizáveis ​​específicos de uma página. Agora, se as páginas em seu sistema dependem principalmente desses blocos embutidos como componentes, o Layout Builder Direct Add pode economizar algum tempo do editor, economizando alguns cliques.

O módulo simples substitui o botão “Adicionar bloco” por um botão suspenso rápido para os tipos de bloco disponíveis no sistema com uma opção “Mais” que abre a barra lateral de diálogo fora da tela. Quando um editor seleciona qualquer um dos tipos de bloco da lista, ele abre diretamente o formulário de bloco para criar aquele componente.

Link de operação do Layout Builder

Este pequeno módulo é um bom recurso para um site. Para acessar a IU do Layout Builder para uma entidade, um editor precisa visitar a página e clicar na guia Layout na barra de tarefas. O link de operação do Criador de layout adiciona uma opção de layout, o botão suspenso, ao conteúdo da página de visão geral do conteúdo.

A opção de layout aparecerá para todos os pacotes de tipo de entidade onde o Layout Builder está habilitado. Este link salva aos editores de conteúdo um clique / carregamento de página quando eles desejam acessar a página de layout de uma entidade diretamente, sem carregar sua página de edição primeiro.

Restrições do Construtor de Layout

Por padrão, o Layout Builder listará todos os blocos disponíveis no sistema fornecidos por vários plug-ins e módulos, os campos estão disponíveis como blocos e há opções de blocos embutidos para criar blocos únicos. Além disso, todos os layouts fornecidos por outros módulos e o tema também listam quando uma seção está sendo colocada. Isso pode ser um pouco confuso e opressor para os editores e representa um problema de usabilidade, pois o número de blocos pode crescer rapidamente em um aplicativo corporativo.

O Layout Builder Restrictions resolve esse problema fornecendo um layout configurável com as opções necessárias. Essas opções estarão presentes sempre que o Layout Builder estiver habilitado para a exibição de qualquer entidade. A interface do usuário configurável do módulo para blocos e layouts de listagem de permissão / negação. Os sites podem permitir todas as opções de um determinado provedor ou restringir todas as opções por provedor ou especificar blocos e layouts permitidos individuais. Os administradores do site podem permitir / negar os blocos que são úteis para os editores construírem as páginas e apenas esses blocos e layouts estarão disponíveis para os editores escolherem.

Permissões avançadas do Layout Builder

Embora o Drupal forneça um sistema de permissão poderoso para funções de usuário, pode haver possibilidades de permissões mais granulares com base nas funções. A situação pode surgir quando há várias funções de usuário interagindo com o sistema e as páginas.

O módulo de Permissões avançadas do Layout Builder oferece aos administradores do site essa capacidade de fornecer permissões restritas para uso com base em sua função. Essas permissões são globais e são aplicadas a todos os tipos de entidade onde o Layout Builder está habilitado. Para levar as coisas adiante e restringir o acesso em um nível mais básico, o bloqueio do construtor de layout será útil, o que será abordado na próxima seção.

Bloqueio do Construtor de Layout

Como mencionado acima, o Layout Builder Lock fornecerá um acesso mais básico para os usuários. Ele permite que os administradores bloqueiem seções de um layout padrão para que os usuários não possam executar certas ações ao substituir o layout de uma entidade individual.

Essas configurações de bloqueio estarão disponíveis quando o módulo for instalado e estarão disponíveis para todas as seções. Existem permissões globais disponíveis para gerenciar o acesso aos recursos de bloqueio. Esses são recursos editoriais avançados que devem ser adicionados e usados ​​com muita responsabilidade. Bloquear uma seção ou qualquer componente dentro de uma seção significa que a seção terá acesso muito limitado para possibilidade de modificação.

Recapitulação rápida

1. Estilos do Construtor de Layout - permite que os construtores de sites selecionem em uma lista de estilos para aplicar aos blocos do construtor de layout e seções do construtor de layout.
2. Atributos do componente Layout Builder - permite que os editores adicionem atributos HTML aos componentes (blocos) do Layout Builder.
3. Layout Builder Modal - permite adicionar e configurar blocos existentes em um modal na UI do Layout Builder.
4. Biblioteca de construtor de layout - fornece uma biblioteca de layout que permite aos editores de conteúdo escolher a partir de uma lista de layouts predefinidos.
5. Biblioteca de seções - crie modelos reutilizáveis ​​para seções únicas ou múltiplas.
6. Layout Builder Direct Add - substitui o link "Adicionar bloco" por um botão suspenso que lista os tipos de bloco personalizados.
7. Layout Builder Operation Link - adiciona um link de operação 'Layout' ao conteúdo habilitado para Layout Builder nas páginas administrativas do Drupal.
8. Restrições do Layout Builder - defina quais blocos e layouts devem estar disponíveis para colocação no Layout Builder.
9. Permissões avançadas do Criador de layout - permite controlar em detalhes o acesso à página do criador de layout, fornecendo um conjunto de permissões mais granular.
10. Bloqueio do Criador de Layout - permite que os administradores bloqueiem seções de um layout padrão para que os usuários não possam realizar certas ações ao substituir o layout de uma entidade individual.