O tutorial definitivo para o módulo de parágrafos do Drupal

Nos últimos meses, trabalhamos com mais e mais sites Drupal 8. Todos esses projetos tinham uma coisa em comum... eles usavam o módulo Drupal Paragraphs.

Parágrafos é um módulo muito popular para lidar com conteúdo no Drupal 8.

Parágrafos funciona de forma semelhante aos campos de conteúdo, mas também oferece uma ampla gama de opções para o design, layout e agrupamento do seu conteúdo.

Se você quiser aprender parágrafos, este é o guia definitivo! Leia, assista e acompanhe todas as 10 partes deste tutorial. No final, você também estará usando Parágrafos para todos os seus sites!

Parte 1. Por que usar o módulo Drupal Parágrafos?

Os Tipos de Parágrafo podem ser desde um simples bloco de texto ou imagem até uma apresentação de slides complexa e configurável.

Em vez de colocar todo o conteúdo em um campo de corpo WYSIWYG, os usuários finais podem escolher rapidamente entre os Tipos de parágrafo predefinidos. Você pode criar vários recursos avançados e os usuários finais podem escolher qual deles desejam usar.

Isso torna muito mais fácil para os usuários adicionar conteúdo avançado. Por exemplo, os usuários podem entender como adicionar uma citação pull em um corpo de conteúdo, mas pode não acabar centralizado ou formatado corretamente. Eles também podem querer fazer algo mais complexo, como incluir uma caixa de texto explicativa dentro de um artigo, mas não têm ideia de como adicionar os estilos necessários.

O módulo Drupal Paragraphs pode tornar processos como esses muito mais gerenciáveis ​​para usuários não técnicos, ao mesmo tempo em que oferece aos desenvolvedores a capacidade de controlar a formatação e a aparência de tais elementos especialmente formatados no nível do tema.

Na prática, Parágrafos nos permite inserir elementos como campos de conteúdo, mas em vez de adicioná-los ao redor do corpo de qualquer conteúdo, eles são efetivamente inseridos em todo o corpo.

Para este guia, vamos imaginar que estamos criando um site chamado “Life Advice for Free”, que oferece conteúdo informativo na forma de artigos. Você pode acompanhar em qualquer outro site de desenvolvimento, se desejar, fazendo pequenos ajustes conforme necessário.

Parte 2. Instalando o Módulo de Parágrafos Drupal

Recomendamos usar um site de teste Drupal 8 em branco para este projeto.

• Clique aqui para baixar o módulo Paragaphs.
• Parágrafos também requer o módulo Entity Reference Revisions.
• Depois de baixar esses dois módulos e colocá-los no diretório /modules, instale-os para o seu site.

Parte #3. Criando seus primeiros parágrafos

Parágrafos funciona permitindo-nos criar o que chamamos de “tipos de parágrafos” que em nosso caso substituirão coletivamente o campo Corpo de qualquer tipo de conteúdo com o qual queremos usar esses tipos de parágrafos.

Para começar a tirar proveito dos Parágrafos, você deve primeiro criar pelo menos um tipo de Parágrafos e, em seguida, adicionar esse tipo de Parágrafos a um tipo de conteúdo. Esse processo pode parecer confuso no início, mas é fácil se familiarizar com ele depois de configurar um ou dois tipos de parágrafos.

Em nossa demonstração, substituiremos o campo Corpo do tipo de conteúdo de artigo padrão por alguns tipos de parágrafos.

Importante: Se você estiver testando isso em um site que já possui conteúdo do tipo Artigo, não exclua o campo Corpo do tipo de conteúdo do artigo como faremos nesta demonstração. Se fizer isso, você perderá o corpo de todos os artigos em seu site. Se estiver trabalhando em um site no qual o tipo de conteúdo Artigo já foi usado, você deve criar um novo tipo de conteúdo para testar o módulo Parágrafos.

Em nosso site "Conselhos de Vida Gratuitos", começaremos a configurar os Parágrafos editando o tipo de conteúdo do Artigo.

• Vá para Estrutura > Tipos de conteúdo.
• Clique no botão “Gerenciar campos” na linha Artigo.
• Agora você estará na página "Gerenciar campos" para o tipo de conteúdo do artigo. Nesta página, clique na seta suspensa ao lado do botão "Editar" na linha Corpo e clique em Excluir.
• Confirme a exclusão na próxima página.

Agora vamos criar nosso primeiro tipo de Parágrafos.

• Navegue até Estrutura > Tipos de parágrafos.
• Clique em “Adicionar tipo de parágrafo”.
• Na próxima página, precisamos fornecer um rótulo para esse tipo de parágrafo. Para nossa demonstração, chamaremos isso de “Texto do corpo”, pois vamos usá-lo como o corpo do nosso conteúdo.
• Clique em “Salvar e gerenciar campos”.
• Nesta página "Gerenciar campos", clique em "Adicionar campo".
• Na lista suspensa "Adicionar um novo campo" a seguir, role para baixo e, em "Texto", selecione "Texto (formatado, longo, com resumo)". Isso é semelhante ao campo Corpo padrão que o tipo de conteúdo do artigo geralmente usa — uma área de texto de formato longo com um editor WYSIWYG.
• Na página "Adicionar campo" a seguir, rotularemos esse campo específico como "Texto do corpo" também.
• Clique em “Salvar e continuar”.
• Em seguida, somos levados à guia “Configurações de campo” deste campo. Para qualquer um desses campos, podemos especificar um número permitido de valores. Pode ser útil permitir mais de 1 valor para alguns campos, particularmente aqueles que aceitam informações individuais discretas, como datas, arquivos de imagem ou campos de texto de formato curto para informações como nomes, mas para áreas de texto de formato longo , muitas vezes é desnecessário fornecer valores adicionais, pois os parágrafos podem simplesmente ser colocados um após o outro em uma única área de texto. Neste exemplo, vamos deixar as configurações padrão em “Limitado” e 1.
• Clique em “Salvar configurações de campo”.
• Na página "Configurações de texto do corpo para texto do corpo" a seguir, podemos manter todos os padrões. Observe que os usuários ainda terão todas as opções de formatação que normalmente teriam com o editor WYSIWYG da área de texto. Não estamos tirando nada deles. O que faremos em vez disso é fornecer a eles um método adicional e aprimorado de adicionar certos tipos de elementos ao conteúdo.
• Clique em “Salvar configurações”.
• Agora você verá seus novos campos dentro do seu novo tipo de parágrafo:

• Nesta próxima página, clique na guia “Gerenciar exibição”.
• Atualmente este tipo de Parágrafos tem apenas um campo—o campo de texto Corpo. Não queremos que um rótulo apareça junto com o texto deste campo, então selecione “Oculto” na coluna Rótulo deste campo. O formato deve permanecer como padrão.
• Clique em “Salvar”.

Agora precisamos adicionar esse tipo de parágrafos ao tipo de conteúdo do artigo para que esse tipo de conteúdo possa usá-lo. Veja como fazemos isso:

• Navegue até Estrutura > Tipos de conteúdo.
• Clique em “Gerenciar campos” para o tipo de conteúdo do artigo.
• Clique em “Adicionar campo”.
• Para usar nosso novo tipo de parágrafos com este campo, abra a lista suspensa "Selecione um tipo de campo" e selecione "Parágrafo" em "Revisões de referência".
• Após selecionar “Parágrafo”, forneça o rótulo “Corpo”, pois é isso que estamos usando como corpo do nosso conteúdo.
• Clique em “Salvar e continuar”.
• Na próxima página, “Tipo de item para referência” deve ser definido como “Parágrafo”.
• “O número permitido de valores deve ser “Ilimitado”. Ao selecionar “Ilimitado”, podemos inserir este campo especial fornecido por nossos tipos de Parágrafos configurados quantas vezes quisermos. Isso será útil quando começarmos a inserir outras coisas além do texto no corpo do conteúdo.
• Clique em “Salvar configurações de campo”.
• Na página "Configurações de texto do corpo para o artigo" a seguir, precisamos disponibilizar nosso tipo de parágrafos criado anteriormente para este campo. Para fazer isso, marque a caixa ao lado de “Texto do corpo” em “Tipo”, próximo à parte inferior da página. É assim que disponibilizamos esse tipo de parágrafo específico neste campo. À medida que adicionamos mais tipos de parágrafos ao nosso site, podemos voltar e disponibilizá-los para este campo também.

• Clique em “Salvar configurações” e o site deve levá-lo de volta à página “Gerenciar campos” para o tipo de conteúdo.

Agora terminamos de substituir o campo Body anterior (padrão) pelo nosso novo campo Body, que utiliza Parágrafos e, especificamente, o tipo Parágrafos “Texto do corpo” que criamos. Agora vamos definir mais algumas configurações para que fique do jeito que queremos.

• Para começar, clicaremos na guia “Gerenciar exibição de formulário” para que possamos colocar o novo campo Corpo em um local de destaque na página de criação de conteúdo para Artigos.
• Nesta página, role para baixo para encontrar nosso novo campo Corpo e arraste-o para perto do topo da lista, logo abaixo do Título.
• Clique em “Salvar”.

Agora precisamos garantir que o novo Tipo de Parágrafo esteja disponível no local adequado para os visitantes do site.

• Clique em "Gerenciar exibição".
• Novamente você encontrará Body na parte inferior. Arraste isso perto do topo, logo abaixo de Image. Trataremos esse campo de imagem como um tipo grande de imagem introdutória ou de introdução para nossos artigos e não como parte do conteúdo em si.
• Clique em “Salvar”.

Neste ponto, concluímos a configuração do nosso tipo de conteúdo de Artigo usando este novo campo Parágrafos. Agora é hora de criar algum conteúdo para testá-lo.

• Vá para a página de conteúdo do seu site e clique em "Adicionar conteúdo".
• Clique em "Artigo".
• Você pode inserir qualquer título para o seu artigo. Para este exemplo, vamos chamar nosso artigo “Como fazer 100 amigos”.
• Agora, no campo Corpo, você deve ter notado que ele parece um pouco diferente, embora ainda use o mesmo campo de formato longo com um editor WYSIWYG, como antes. A diferença agora é que temos um campo Corpo abrangente que atualmente contém um campo de texto Corpo. Logo abaixo do campo de texto do corpo, você deve ver um botão "Adicionar texto do corpo", que nos permite adicionar vários campos. Neste ponto, isso seria desnecessário porque o campo de texto longo atualmente em uso é perfeitamente adequado para inserir texto longo e com vários parágrafos, portanto, não precisaríamos adicionar um campo adicional quando pudéssemos adicionar mais texto no mesmo campo . Mais tarde, porém, veremos que é muito útil poder adicionar campos de parágrafos adicionais quando você implementa vários tipos de parágrafos em seu site. Por enquanto, basta inserir um ou dois parágrafos de texto no campo de texto Corpo.

Salve seu artigo e visualize a página como qualquer visitante a veria.

Neste ponto, o novo corpo usando parágrafos não é diferente de um artigo usando o campo corpo padrão. Com os parágrafos em vigor, no entanto, em breve poderemos permitir que nossos criadores de conteúdo adicionem elementos adicionais ao conteúdo sem precisar saber como estilizá-lo corretamente.

Parte #4. Adicionando seu CSS aos parágrafos

Uma grande parte do que torna os parágrafos tão úteis é que podemos escrever CSS para elementos de conteúdo específicos para que os criadores de conteúdo não precisem tentar estilizar manualmente tantos desses elementos usando o editor WYSIWYG ou CSS embutido. Isso significa que personalizaremos o tema do nosso site para que esses elementos apareçam exatamente como queremos.

Em muitos casos do mundo real, você provavelmente trabalhará com um tema personalizado ou subtema próprio, caso em que poderá editá-lo livremente. Para este tutorial, vamos criar um subtema rápido e fácil do tema Bartik padrão para que possamos seguir as melhores práticas e adicionar nosso próprio CSS sem editar o próprio Bartik. (Evitamos editar o Bartik—ou qualquer outro tema principal ou contribuído—diretamente porque se fizermos isso e depois aplicarmos uma atualização lançada a esse tema, nossas próprias modificações serão perdidas.) Se você não estiver familiarizado com a criação de subtemas, tudo bem. Não estamos investigando o processo extensivamente, mas criando uma cópia direta do tema, ao qual aplicaremos algumas pequenas alterações. Este é um processo fácil.

• Para criar um subtema, primeiro você precisa acessar o servidor no qual seu site está hospedado e navegar até o diretório raiz do site.
• Uma vez lá, abra o diretório “temas”. É aqui que todos os temas e subtemas personalizados e contribuídos são colocados. Nesse diretório “themes”, crie uma nova pasta chamada “custombartik” e navegue até esse novo diretório.

Agora precisamos adicionar alguns arquivos a este novo diretório. O primeiro será o arquivo de informações do tema. Abra qualquer software de edição de código que você usa para desenvolvimento web. Esses arquivos info requerem várias informações: o nome do projeto (o nome do nosso tema), o tipo de projeto (“tema” neste caso), o nome da máquina do tema base se este for um subtema (como o nosso is), uma breve descrição e a versão principal do Drupal (7.x, 8.x, etc.) para a qual o tema foi criado. Vamos inserir essas informações no seguinte formulário (digite tudo exatamente como você vê):

 name: Custom Bartik type: theme base theme: bartik description: A custom theme based on the core Bartik theme core: 8.x

Certifique-se de que o nome do tema base “bartik” permaneça sem maiúsculas – é o nome legível por máquina que diferencia maiúsculas de minúsculas que precisamos. Com essas informações inseridas, salve o arquivo como “custombartik.info.yml”. É importante salvá-lo exatamente com o mesmo nome da pasta que você criou seguido de “.info.yml”.

Agora precisamos criar o arquivo de bibliotecas do nosso tema, onde informaremos ao Drupal onde encontrar o CSS do tema e qual é a versão do tema. Mais informações podem ser fornecidas, mas isso é tudo o que precisamos para nossos propósitos.

• Abra um novo arquivo. Neste arquivo, preste muita atenção aos recuos aqui. Cada recuo deve ser uma tabulação de dois espaços.
• Insira as seguintes informações exatamente como aparecem:

 global-css:  version: 0.1  css:    theme:      css/style.css: {}

• Salve este arquivo como “custombartik.libraries.yml”. Esse arquivo basicamente informa ao site que esta é a versão 0.1 do tema (podemos ter dado qualquer número de versão) e que haverá uma folha de estilo localizada dentro do nosso diretório de temas (“custombartik”) em css/style.css.

Agora precisamos voltar ao nosso arquivo de informações para dizer ao Drupal para usar as informações no contêiner “global-css” para encontrar nossa folha de estilo.

• Abra seu arquivo custombartik.info.yml, adicione uma linha em branco sob sua linha “core: 8.x” e, em seguida, adicione a seguinte linha de informações, novamente mantendo o recuo exatamente como aparece abaixo:

 libraries:  - custombartik/global-css

O arquivo inteiro agora deve ficar assim:

 name: Custom Bartik type: theme base theme: bartik description: A custom theme based on the core Bartik theme. core: 8.x libraries:  - custombartik/global-css

Neste ponto, estamos prontos para adicionar esses dois arquivos ao nosso tema.

• Carregue ou copie seus arquivos custombartik.info.yml e custombartik.libraries.yml em sua pasta custombartik.
• Agora adicione uma pasta chamada “css” dentro da sua pasta custombartik.
• Vá em frente e crie um arquivo em branco chamado “style.css” e faça o upload para este diretório. Esta será a nossa folha de estilo.
• Antes de criarmos nossa folha de estilo, no entanto, navegue até a página "Aparência" do seu site.
• Role até a parte inferior da página e, na seção "Tema desinstalado", você verá seu tema Bartik personalizado. Se você não o vir, certifique-se de que sua pasta custombartik e todos os seus arquivos estejam presentes na pasta de temas do sistema de arquivos do seu site.
• Clique em “Instalar e definir como padrão” em seu tema personalizado para que seu site comece a usar seu tema.
• Feito isso, navegue até sua página inicial e ela deve se parecer quase exatamente com o tema Bartik padrão do Drupal, com a exceção de que você provavelmente verá um ícone de imagem quebrado no lugar do logotipo do Drupal. O tema se parece com o Bartik porque o que criamos é um subtema do Bartik sem personalização ainda em vigor. Se o seu site não se parece com o Bartik, e especialmente se parece com HTML simples sem estilo CSS, volte para seus dois arquivos .yml e certifique-se de que eles estejam exatamente como impressos acima.

Por fim, para corrigir a imagem quebrada do logotipo, copiaremos o logotipo diretamente do Bartik para o nosso subtema. Tudo bem porque não estamos mudando nada no Bartik.

• Navegue até o diretório raiz do seu site e vá para core/themes/bartik. Aqui, você verá um arquivo chamado “logo.svg”.
• Copie este arquivo em seu subtema (o diretório “custombartik”).
• No seu site, navegue até Configuração > Desempenho e clique em “Limpar todos os caches”. Agora o logotipo deve aparecer em seu site.

Parte #5. Estilizando seus campos de paragaphs

Agora que temos um subtema que podemos editar com segurança, podemos começar a definir regras de estilo para os elementos de nosso conteúdo controlados por Parágrafos. Antes de fazermos isso, devemos criar um novo tipo Parágrafos que exija regras de estilo especiais. Seguiremos nosso exemplo de ter um campo que insere uma imagem centralizada no meio de um artigo.

• Navegue até Estrutura > Tipos de parágrafos.
• Clique em “Adicionar tipo de parágrafo”.
• Definiremos o rótulo para este como "Imagem centralizada".
• Clique em “Salvar e gerenciar campos”.
• Na próxima página, clique em “Adicionar campo” e selecione “Imagem” em “Adicionar um novo campo”.
• Também rotularemos este campo como “Imagem centralizada”.
• Clique em “Salvar e continuar”.
• Na próxima página, podemos manter todos os valores padrão, então clique em “Salvar configurações de campo”.
• Em seguida, na página “Configurações de imagem centralizada para imagem centralizada”, adicionaremos algumas restrições simples. Defina a resolução máxima da imagem para 650x450 e a resolução mínima para 50x50. Defina o tamanho máximo de upload para 1 MB e clique em "Salvar configurações". Essas configurações específicas não são necessárias para que o tipo Parágrafos funcione corretamente; estamos incluindo-os simplesmente para imitar um cenário do mundo real.

• Agora clique na guia "Gerenciar exibição", defina o rótulo da imagem centralizada como "Oculto" e clique em "Salvar".

Neste ponto, precisamos adicionar este tipo de Parágrafos ao campo Parágrafos que temos em nosso tipo de conteúdo Artigo.

• Vá para Estrutura > Tipos de conteúdo.
• Clique em “Gerenciar campos” ao lado de “Artigo”.

Você pode ficar tentado a clicar em “Adicionar campo” aqui para o nosso novo tipo de parágrafo “Imagem centralizada”, mas lembre-se, isso será misturado com nosso campo Corpo personalizado. Então, em vez disso, adicionaremos a imagem Centralizada ao campo Corpo que criamos.

• Clique em "Editar" ao lado de "Corpo" e role até a parte inferior da página.
• Aqui você verá “Imagem centralizada” disponível abaixo do nosso tipo de parágrafos “Texto do corpo”.
• Marque a caixa ao lado de “Imagem centralizada” para disponibilizá-la neste campo e salve suas configurações.

Agora vamos adicionar uma imagem usando este campo.

• Navegue até sua página de conteúdo e edite seu artigo “Como fazer 100 amigos”.
• Vamos imaginar que queremos adicionar uma imagem centralizada em algum lugar no meio do nosso artigo. Abaixo do campo de texto do corpo, você verá novamente o botão "Adicionar texto do corpo" para adicionar outro campo de texto do corpo dentro desse campo do corpo. No entanto, se você clicar na seta suspensa ao lado desse botão, verá que "Imagem centralizada" agora também está disponível. Clique neste botão e escolha algum arquivo de imagem para carregar aqui. Em seguida, forneça algum texto alternativo, pois isso é necessário.

Agora adicionamos a imagem ao nosso conteúdo, mas atualmente ela está colocada abaixo de todo o texto. É aqui que faremos uso de um campo de texto Body adicional.

• Clique em “Adicionar texto do corpo”. Agora temos, de cima para baixo, um campo de corpo de texto, uma imagem centralizada e outro campo de corpo de texto. Observe que, embora você não precise fazer isso neste momento, você pode movê-los livremente por meio das setas de arrastar e soltar no canto superior esquerdo dos campos de parágrafos individuais. Para que a imagem centralizada apareça entre o texto do artigo, basta ir ao primeiro campo de texto do corpo, selecionar o texto que deseja que apareça após a imagem e recortar esse texto do campo. Em seguida, role para baixo e cole o texto recortado no segundo campo de texto do corpo (após sua imagem).
• Clique em “Salvar”.

Quando você visualizar seu artigo agora, ele ainda não parecerá correto. Como ainda não adicionamos nenhuma regra de estilo ao nosso tema, é provável que a imagem flutue para a esquerda (como é por padrão), em vez de centralizada. No entanto, ele deve aparecer após o texto do primeiro campo de texto do corpo e antes do texto do segundo campo de texto do corpo. Agora temos um artigo no qual podemos testar algumas regras de estilo personalizadas.

Parte #6. Controlando parágrafos com CSS

Iremos para o nosso subtema personalizado agora para começar a estilizar a saída dos campos Parágrafos que criamos. Por enquanto, segmentaremos especificamente o campo "Imagem centralizada", em vez do campo Parágrafos abrangente do tipo de conteúdo. Estamos fazendo isso porque queremos que esse campo seja centralizado a qualquer momento, independentemente de onde ele esteja. Assim, ao definir regras diretamente para “Imagem centralizada”, evitamos definir várias regras desnecessárias para vários contextos.

No entanto, precisamos direcionar a classe “node”, porque haverá, por padrão, algum estilo para esse campo direcionado sob a classe “node”. Assim, temos que substituir essas regras.

• Abra a folha de estilo do seu subtema “custombartik” em custombartik/css/style.css.
• O arquivo ainda deve estar vazio, mas agora começaremos a adicionar regras a ele. Vamos manter as coisas simples por enquanto. Adicione as seguintes linhas de código à sua folha de estilo:

 .node .field--name-field-centered-image {  float: none;  text-align: center; } .node .field--name-field-centered-image img {  max-width: 100%;  max-height: 450px; }

Com o primeiro conjunto de regras, estamos simplesmente centralizando a imagem horizontalmente dentro de sua classe de campo e garantindo que nenhum texto ou qualquer outra coisa flutue ao lado dela. O segundo conjunto de regras não é estritamente necessário, mas é um código comum para garantir que as imagens não fiquem maiores do que deveriam em relação à área de conteúdo.

• Depois de adicionar isso ao seu arquivo style.css, salve suas alterações (daqui em diante, qualquer referência a salvar alterações em seu subtema também pressupõe o upload ou a cópia dos arquivos para seu servidor se você não estiver editando diretamente no servidor em em que seu site de teste está localizado).
• Em seu site, navegue até Configuração > Desempenho e clique em “Limpar todos os caches” para carregar as alterações de tema em seu site.
• Navegue de volta ao artigo no qual você adicionou a imagem a ser centralizada (ou atualize a página se já a tiver aberto).

A imagem colocada através do tipo de parágrafos “Imagem centralizada” agora deve ser centralizada sem nenhum texto flutuando em ambos os lados. Pode haver outros estilos que gostaríamos de adicionar, mas para os propósitos deste tutorial, fizemos o que queremos neste momento—certifique-se de que a saída deste campo seja estritamente controlada por CSS para que os usuários que adicionam conteúdo não precisam estilizar nada usando o editor WYSIWYG ou outros métodos de estilo embutido.

Parte #7. Parágrafos com vários campos

Também podemos criar tipos de parágrafos que consistem em vários campos.

Por exemplo, em vez de um tipo “Imagem centralizada”, podemos criar um tipo “Imagem centralizada com legenda”, que consistiria em um campo de upload de imagem e um campo de texto de acompanhamento para qualquer elemento desse tipo. Isso também nos ajuda a remover o fardo do layout daqueles que adicionam conteúdo ao site para que possamos controlar a exibição do conteúdo no nível do tema.

Vamos criar este tipo de “imagem centralizada com legenda” para praticar o processo de criação de um tipo de parágrafos com vários campos. Como você pode esperar, esse processo será semelhante ao da criação de um tipo de campo único.

• Navegue até Estrutura > Tipos de parágrafos e clique em "Adicionar tipo de parágrafos".
• Rotule esse tipo como “Imagem centralizada com legenda” e clique em “Salvar e gerenciar campos”.
• Clique em “Adicionar campo”.

Como nosso campo “Imagem centralizada” criado anteriormente é exatamente o que queremos para a parte da imagem do nosso novo tipo de Parágrafos, em vez de criar um novo campo, podemos reutilizar o anterior. Portanto, não selecione nada em “Adicionar um novo campo” na página “Adicionar campo”.

• Em “Reutilizar um campo existente”, selecione “Imagem: field_centered_image”.
• Mantenha o rótulo “Imagem centralizada” e clique em “Salvar e continuar”.
• Precisamos definir nossas configurações para os limites de tamanho da imagem na próxima página. Vamos mais uma vez inserir uma resolução máxima de imagem de 650x450 pixels e um mínimo de 50x50 pixels. Defina o tamanho máximo de upload para 1 MB.
• Clique em “Salvar configurações”.

Agora vamos adicionar outro campo. Lembre-se de que ainda estamos dentro das configurações do nosso novo tipo de parágrafos, portanto, quando adicionarmos esse segundo campo, “Imagem centralizada com legenda” será um tipo com dois campos.

• Clique em “Adicionar campo” e adicione um novo campo do tipo “Texto (simples)”.
• Rotule este campo como "Legenda".
• Clique em “Salvar e continuar”.
• Algumas legendas mais longas podem precisar exceder o limite padrão de 255 caracteres, portanto, altere o comprimento máximo desse campo para 500. Mantenha o número permitido de valores em “Limitado” e 1 e salve as configurações.
• Os padrões de configurações de legenda a seguir estão corretos, então salve as configurações nessa página também.

Agora nosso novo tipo de Parágrafos tem todos os campos necessários, então vamos controlar a exibição.

• Clique na aba “Gerenciar display” para que possamos remover os rótulos dos campos, que são desnecessários neste caso.
• Selecione “Oculto” na coluna “Rótulo” para ambos os campos e clique em “Salvar”.
• Se os dois campos estivessem fora de ordem, nós os reorganizaríamos para que o campo de legenda viesse depois do campo de imagem, mas como adicionamos o campo de legenda por último, ele já deveria estar posicionado após o campo de imagem, exatamente como queremos que fique .

Agora vamos adicionar o novo tipo ao nosso tipo de conteúdo Article.

• Navegue até Estrutura > Tipos de conteúdo e clique em "Gerenciar campos" para o artigo. Como foi o caso quando adicionamos nosso primeiro tipo de Parágrafos “Imagem centralizada” ao tipo de conteúdo, adicionaremos esse novo tipo de Parágrafos em nosso campo Corpo personalizado em vez de adicionar um novo campo por completo.
• Na página “Gerenciar campos” para Artigo, clique em “Editar” para Corpo.
• Role até a parte inferior da página e marque a caixa ao lado de "Imagem centralizada com legenda" para disponibilizar esse tipo nesse campo Corpo.
• Clique em “Salvar configurações”.
• Agora este novo tipo de Parágrafos estará disponível para quem estiver adicionando Artigos ao site.

Vamos em frente e criar um novo artigo usando este campo e, em seguida, adicionaremos nosso estilo para controlar sua exibição.

• Navegue até a página Conteúdo, clique em “Adicionar conteúdo” e clique em “Artigo”.
• Vamos chamar este artigo de “Aprender a tocar um instrumento pode melhorar sua vida”.
• Clique em “Add Body text” para começar a adicionar algum texto ao artigo. Insira um ou dois parágrafos de texto neste campo.
• Em seguida, abaixo do campo de texto do corpo, clique na seta suspensa ao lado de "Adicionar texto do corpo" e selecione a opção recém-disponível "Adicionar imagem centralizada com legenda". Observe que agora são apresentados dois campos para entrada de dados, como deveríamos esperar - os campos "Imagem centralizada" e "Legenda" que pertencem a esse tipo de Parágrafos.
• Carregue qualquer imagem no campo de imagem e forneça algum texto alternativo.
• Em seguida, digite: “A Les Paul é uma das guitarras mais lendárias do rock and roll”.

Agora adicionaremos parte do restante do texto do artigo após a imagem e a legenda.

• Abaixo do tipo de parágrafos de imagem e legenda, clique em “Adicionar corpo de texto” mais uma vez.
• Adicione outro parágrafo ou dois de texto.
• Por fim, clique em “Salvar e publicar”.

Atualmente, a exibição de nossa “imagem e legenda centralizada” deve estar meio correta. Como reaproveitamos o campo anterior “Imagem centralizada”, a própria imagem já deveria estar centralizada assim como estava para o campo anterior que consistia apenas em uma imagem a ser centralizada. O texto da legenda, é claro, ainda não tem nenhuma regra CSS, então aparecerá alinhado à esquerda e se parecerá com o texto do resto do artigo. Então, precisamos adicionar algumas regras ao nosso tema para estilizar este texto de legenda.

Desta vez, ao escrever nosso CSS, vamos direcionar todo o tipo de parágrafos “Imagem centralizada com legenda” e, em seguida, detalhar o campo de legenda dentro dessa classe, em vez de direcionar o texto da legenda independente de seu contêiner, como fizemos anteriormente com o imagem centralizada. Usaremos essa abordagem porque podemos querer reutilizar esse campo de texto de legenda em outro lugar e é provável que, em alguns casos, queiramos que ele tenha um estilo diferente (como alinhado à esquerda ou à direita em vez de centralizado) de como está neste determinado tipo de parágrafos.

Vamos centralizar nosso texto de legenda porque sua imagem correspondente está centralizada e, para fornecer uma diferenciação visual entre este texto e o texto do artigo, vamos colocá-lo em negrito (o itálico também forneceria esse efeito).

• Adicione as seguintes linhas de código à sua folha de estilo e salve suas alterações:

{codecitation}.paragraph--type--centered-image-with-caption .field--name-field-caption { font-weight: bold; alinhamento de texto: centro; }{codecitação}

• Em seguida, para ver nossas alterações no site, navegue até Configuração > Desempenho e limpe todos os caches.
• Volte e atualize o artigo criado recentemente e você verá as novas regras de estilo em vigor. O texto da legenda agora deve estar em negrito e centralizado abaixo da imagem.

É claro que podemos aplicar alguns estilos a esse tipo de Parágrafos como um todo. Uma razão para fazer isso seria separar o elemento imagem/legenda do texto ao redor e deixar visualmente claro que ele deve ser visto como uma única unidade.

• Adicione o seguinte código à sua folha de estilo e salve suas alterações:

{codecitation}.paragraph--type--centered-image-with-caption { borda: sólido cinza de 2px; margem: 4px 0; preenchimento: 4px; }

Agora limpe o cache do seu site mais uma vez e atualize a página do artigo. A imagem e a legenda devem ter a mesma aparência; no entanto, agora toda a unidade de imagem/legenda é cercada por uma borda cinza e possui pequenas margens ao redor da parte superior e inferior. Poderíamos fazer mais para melhorar a estética aqui (e a borda provavelmente não é necessária), mas isso demonstra nossa capacidade de fornecer estilo para componentes individuais de tipos de parágrafos, bem como tipos de parágrafos como um todo.

Agora, se um usuário não técnico estiver adicionando conteúdo ao site e quiser incluir uma imagem grande e centralizada com uma legenda, basta selecionar este campo Parágrafos durante a edição do artigo, fazer upload de uma imagem e inserir o texto em o campo de legenda. A formatação será aplicada automaticamente.

Parte #8. Usando nós inteiros em parágrafos

Neste ponto, vimos alguns exemplos dos usos básicos de Parágrafos. Agora vamos abordar um exemplo um pouco mais avançado: usando Parágrafos para colocar um nó inteiro dentro do corpo de um conteúdo. Um caso de uso para isso seria colocar uma informação complementar relacionada, mas independente, dentro de um de seus artigos (semelhante a algo como uma seção “Você sabia?” que você pode ver acompanhando um artigo de revista).

Para o nosso exemplo, vamos imaginar que queremos ter a opção de adicionar o que chamaremos de “caixas de informações” aos nossos artigos, e faremos isso colocando um pequeno conteúdo intitulado “Uma breve história da harpa ” em nosso artigo criado anteriormente sobre aprender a tocar um instrumento.

Primeiro, precisamos criar um tipo de conteúdo para essas “caixas de informações”.

• Navegue até Estrutura > Tipos de conteúdo e clique em "Adicionar tipo de conteúdo".
• Daremos a esse tipo de conteúdo o nome "Caixa de informações".
• Para a descrição, escreva “Pequenos pedaços de informação usados ​​para complementar os artigos”.
• Click the “Display settings” tab, and uncheck “Display author and date information” because we don't want author and date information showing up within our Info box content.
• All of the rest of the default settings on this page should be fine. Click “Save and manage fields.”
• On the “Manage fields” page, we already have a basic long-form “Body” field, and this is all we want for this content type, since all pieces of content of this type should be short and simple. No changes are therefore necessary here. Click “Add field.”

Now that our content type has been created, we need to create the Paragraphs type that will reference it.

• Navigate to Structure > Paragraphs types, and click “Add paragraphs type.”
• Give this type the label “Info box.”
• On the “Manage fields” page, click “Add field".
• Beneath “Add a new field,” select “Content,” found under the “Reference” header.
• For the label, write “Info box,” and save.
• All defaults are fine on the next page, so click “Save field settings” there.
• On the next settings page, scroll down until you see the “Reference type” settings.
• Since we want to use this Paragraphs type to reference and display Info box nodes, check the box next to “Info box” beneath the “Content types” header. You can leave “Sort by” set to “None” because the field will autofill based on what we type and is not a list of all content of this type. Click “Save settings.”
• Back on the “Manage fields” page, click the “Manage display” tab.
• As we've been doing so far, we'll remove the label, so select “Hidden” under the label column for the Info box field.
• Then, because we want to display the entire Info box node whenever we choose to include an Info box in one of our articles, we need to select “Rendered entity” in the column labeled “Format.”
• Click “Save.”

It's time to make this Paragraphs type available to our Article content type.

• Navigate to Structure > Content types, and click the “Manage fields” button for the Article content type.
• As we've been doing, click “Edit” for the Body field.
• Scroll down and check the box next to “Info box” under the “Paragraph types” header.
• Save your settings.

With the structure side of this implementation complete, we'll now create some content to test it out. We'll start by adding our site's first “Info box.”

• Navigate to the “Content” page, and click “Add content.”
• Choose Info box.
• For the title, enter “A Short History of the Harp.”
• Enter two or three paragraphs of text into the Body field, and click “Save and publish.”

At this point we will divert briefly from Paragraphs. Currently the home page of our site lists all of our articles and info boxes, but we don't want the latter to appear on the homepage; we want them only placed within other articles. So, let's quickly edit the view for our homepage to exclude these pieces of content.

• You can either click the “Edit view” icon (which is displayed as a pencil icon) on the top right corner of the view area of the homepage.
• Navigate to Structure > Views, and edit the “Frontpage” view.
• On the view's settings page, next to the “Filter criteria” header, click “Add.”
• Select “Content type,” and then click “Apply (all displays).”
• For the filter criterion, select “Is not one of” under “Operator,” and under “Content types,” check “Info box.” Then click “Apply (all displays).” This, as you probably know, will exclude all content of type “Info box” from the Frontpage view.
• Back at the view's settings page, click “Save.”
• Now when you view the homepage of your site, you will no longer see the “A Short History of the Harp” info box.

Now we'll add our Info box to the “Learning to Play an Instrument” article.

• Scroll down to the bottom of the Body Paragraphs field (the larger field encompassing all individual Paragraphs fields).
• Click the dropdown arrow next to “Add Body text,” and select “Add Info box.” You can type in any piece of the title of your “A Short History of the Harp” Info box node into the autofill field, and that Info box should then be displayed as an option.
• Select it to include that Info box in the body of this article.

With the Info box now included in our Body, we need to place it where we want it.

• Drag and place it after the first Body text field and before the Centered image field.

With this new organization, we should probably have some text between the Info box and the Centered image. To simulate doing this in a real-world scenario, we'll cut some of our current text and paste it into a new Body text field, as opposed to arbitrarily adding text to the article.

• So that we have a field to paste our new text in, go ahead and click the “Add Body text” button beneath all of the Paragraphs fields.
• Then scroll to the first Body text field and select and cut one or two paragraphs of text from the field (making sure to leave at least some text in the field).
• Paste the cut text into the newly created (currently empty) Body text field.
• Once this is done, drag the new Body text field, and place it after the Info box field and before the Centered image field.
• Click “Save and keep published”.

Upon viewing the article, you'll see that the referenced Info box node is displayed in its entirety within the larger article. (If all you see is the title of the Info box node, that means you forgot to select “Rendered entity” in the Format column Paragraph type's “Manage Display” page.) As it currently is, the lack of styling on the referenced Info box is likely to be confusing to most viewers. We won't go through the task of applying additional CSS to these Info box references because we already now how to do that, but it is important to note that, in practice, these references should be styled to appear significantly different from the containing article. It should be made extremely clear—through the use of some combination of background color, borders, text size, and font family—that the information contained in the Info box is not part of containing article and is simply supplementary information.

Part #9. Using Field Layout with Paragraphs

Just as the Field Layout module can be used to control the layout of nodes, it can also be used to control the layout of individual Paragraphs types. In some cases, this can be a viable alternative to controlling the layout via CSS, depending on the situation and on the developer's (your) preference.

Important: As of this writing, Field Layout is an experimental module. As such, any implementation of Field Layout should be considered a risk. If you do decide to use the module during its experimental phase, it should be tested extremely thoroughly on a development site before being used on a production site. Otherwise, play it safe by considering this information useful for future situations after the module has graduated into non-experimental core.

Because Field Layout is a core module, it does not need to be downloaded.

• Begin by navigating to your site's Extend page.
• Select the Field Layout and Layout Discovery (a dependency) modules, and click “Install.”
• Then, if prompted, click “Continue.”

Let's use Field Layout to control the layout of a new Paragraphs type in which we create a two-column unit of “Pros and cons” information.

• Navigate to Structure > Paragraphs types, and add a new Paragraphs type.
• Give it the label “Pros and cons,” and add a field.
• For this field, select “Text (formatted, long),” and give this first field the label “Pros”.
• Save and continue, and keep all of the default settings through the next two pages.
• You are back at the “Manage fields” page. Add another field with a Text (formatted, long) input type, and label this one “Cons”.
• Save, and continue through the subsequent settings pages, once again keeping all default settings.
• Once you're back at the “Manage fields” page, click the “Manage display” tab. This time we will keep the label (positioned above, as is default) for each field so that when visitors are reading them, they know that we are listing pros and cons accordingly.

If we look below the listed fields, we will see a new group of settings called “Layout settings.” This is made available by the Field Layout module. Click to expand these settings.

• We have a handful of options here, and for our Pros and cons lists, we'll select “Two column.”
• Then click “Save,” and you'll be taken back to the “Manage display” page.
• Now we have additional layout areas to place our fields in for this Paragraphs type. In total, we have “Top” for the area spanning the width of the content space above our columns, “First” for the left column, “Second” for the right column, “Bottom” for the area spanning the width of our content space below the columns, and “Disabled” for fields we do not want to display.
• Drag-and-drop your Pros and Cons fields so that Pros is in the “First” column and Cons is in the “Second” column, and save.

Now, as usual, we need to add the new Paragraphs type to our Article content type.

• Navigate to Structure > Content types, and click “Manage fields” for Article.
• Edit the Body field, scroll to the bottom of that field's settings.
• Check the box next to “Pros and cons” to add that Paragraphs type to this custom Body field. Then save.

Now we're ready to begin using this “Pros and cons” Paragraphs type. Let's use it in a new article.

• Create a new article called “Swimming Is a Great Way to Stay in Shape.”
• Add two or so paragraphs of Body text to this article.
• Click the dropdown arrow next to the “Add Body text” button, and select “Add Pros and cons.” Notice that this Paragraphs type has two long-form text areas to fill in, one labeled “Pros” and the other labeled “Cons.”
• Enter text for five or so pros, each separated by a simple line break (in other words, separated by pressing the Enter key). If you'd like, you can alternatively make these 5 bullet points. Do the same in the Cons field.
• If you'd like to fill out this article a bit more, you can then add another field of Body text below the Pros and cons field.
• Click “Save and publish.”

Viewing the article, you'll see your comparison of pros and cons listed, with the pros listed in a left-hand column and the cons listed next to them in a right-hand column. You should also see your “Pros” and “Cons” labels above each list.

In most cases you would likely want to apply some CSS to these elements via your stylesheet. Again, we won't take the time do so here because you have seen how that works. Some styling suggestions might be to add a vertical border between the lists of pros and cons (and potentially borders surrounding the entire Paragraphs type) and to make the “Pros” and “Cons” labels more prominent. Additionally, you may consider going back and editing the Pros and cons Paragraphs type to add a title field which can be displayed in the “Top” area above both columns. In this case, such a field might read, “Some Pros and Cons of Swimming for Exercise.”

Part #10. Permissions for the Paragraphs Module

At this point, we've set up all of our Drupal Paragraphs types and integrated them the way we want, aside from some styling we would need to apply to the Info box and Pros and cons types. However, we have not yet configured any permissions pertaining to Paragraphs. This is an important step. Currently, if an anonymous visitor were to view our site, they would not be able to see any of the content entered via Paragraphs types (which is all of the content we have entered in this tutorial) because by default, only administrators have permission to view such content. You can see this for yourself by logging out of the site in its current state and trying to view the content. You will see the titles of articles but none of the body content.

Additionally, we want to have a “Content creator” (or similar) role on the site so that not everyone adding content has full access to all administrative configuration on the site. These users need permission not only to view Paragraphs content but to create, edit, and delete it.

We'll start by giving everyone permission to view Paragraphs content.

• Navegue até a página Pessoas do seu site e clique na guia “Permissões”.
• Role para baixo até ver a seção "Permissões de tipo de parágrafo". Abaixo desse cabeçalho, localize "Texto do corpo: Exibir conteúdo" e marque as caixas de Usuário anônimo e Usuário autenticado.
• Faça o mesmo para a permissão "Visualizar conteúdo" de todos os demais tipos de parágrafos que criamos: imagem centralizada, imagem centralizada com legenda, caixa de informações e prós e contras.
• Clique em “Salvar permissões”.

Neste ponto, todos os usuários podem visualizar todo o conteúdo de Parágrafos. Sinta-se à vontade para sair e ver o site como visitante anônimo para confirmar.

Agora para criar uma nova função para aqueles que irão adicionar e editar conteúdo em nosso site.

• Navegue até Pessoas, clique na guia "Funções" e clique em "Adicionar função".
• Chame essa função de “Criador de conteúdo”.
• De volta à página Funções, clique na seta suspensa ao lado da função Criador de conteúdo e selecione “Editar permissões”.
• Existem algumas permissões que precisaremos fornecer aos usuários dessa função. Alguns deles não estão relacionados aos parágrafos, mas estamos incluindo-os de qualquer maneira para imitar um cenário do mundo real. Além disso, será difícil testar a nova função de forma confiável se ela não tiver todas as permissões que teria na prática. Observe também que estamos concedendo essas permissões assumindo que nossos criadores de conteúdo estão trabalhando internamente. Ou seja, não temos um grande número de usuários tecnicamente autenticados, mas ainda pseudo-anônimos criando conteúdo em nosso site, então acreditamos que podemos conceder com segurança permissão a esses usuários para fazer coisas como usar o formato de texto Full HTML, que em outros casos causaria algumas preocupações de segurança.

Aqui está a lista de permissões que a função de criador de conteúdo deve receber:

Comente

• Editar próprios comentários
• Postar comentários
• Ignorar aprovação de comentários
• Ver comentários

Contato

• Veja o formulário de contato em todo o site
• Use os formulários de contato pessoal dos usuários

Filtro

• Use o formato de texto HTML básico
• Use o formato de texto HTML completo
• Use o formato de texto HTML restrito

Nó

• Acesse a página de visão geral do conteúdo
• Administrar conteúdo
• Visualizar o próprio conteúdo não publicado
• Reverter todas as revisões
• Ver todas as revisões
• Visualizar o próprio conteúdo não publicado
• Artigo: Edite qualquer conteúdo
• Artigo: Editar o próprio conteúdo
• Artigo: Reverter revisões
• Artigo: Ver revisões
• Caixa de informações: Criar novo conteúdo
• Caixa de informações: edite qualquer conteúdo
• Caixa de informações: Editar o próprio conteúdo
• Caixa de informações: Reverter revisões
• Caixa de informações: ver revisões

Permissões de tipo de parágrafos

Conceda todas as permissões nesta seção, exceto "Ignorar o controle de acesso ao conteúdo do tipo de parágrafos".

Procurar

• Usar pesquisa avançada
• Usar pesquisa

Sistema

• Use as páginas de administração e ajuda
• Use o site em modo de manutenção
• Veja o tema de administração

Taxonomia

• Editar termos em Tags

Barra de ferramentas

• Use a barra de ferramentas de administração

Do utilizador

• Ver informações do usuário

Certifique-se de clicar em “Salvar permissões” quando terminar.

Algumas observações sobre algumas das permissões que concedemos e não concedemos aqui: Não concedemos permissão para administrar tipos de parágrafos porque não queremos que eles criem novos tipos de parágrafos ou alterem a maneira como os tipos de parágrafos existentes funcionam. Eles simplesmente inserirão informações usando os tipos de parágrafos que nós, como desenvolvedores, criamos para eles. Além disso, embora em alguns casos seja aconselhável evitar conceder a funções não administrativas a capacidade de excluir conteúdo (na maioria dos casos, é suficiente que eles possam cancelar a publicação de conteúdo, e a exclusão de conteúdo o torna irrecuperável), precisamos conceder permissão a eles para excluir o conteúdo de tipos de parágrafos em "Permissões de tipo de parágrafos". Isso é necessário porque se eles não conseguirem excluir esse tipo de conteúdo, e se clicarem acidentalmente para adicionar qualquer conteúdo via Parágrafos que realmente não precisem em um determinado artigo, não haverá como remover essa unidade de conteúdo do artigo. Seria semelhante a não permitir o uso da tecla Backspace.

Para testar nossas novas permissões, criaremos um novo usuário com a função Criador de conteúdo e passaremos pelo processo de adição de um novo artigo como esse usuário.

• Navegue até Pessoas e clique em “Adicionar usuário”.
• Crie um usuário chamado Mary (você pode pular o endereço de e-mail), com uma senha que você possa lembrar facilmente.
• Verifique se o status do usuário está marcado como "Ativo" e, o mais importante, verifique a função "Criador de conteúdo" desse usuário.
• Em seguida, clique em “Criar nova conta”.
• Saia e faça login novamente como Mary. Se as permissões foram atribuídas corretamente, você deve ter acesso à barra de ferramentas do administrador.
• Clique em “Gerenciar” na barra de ferramentas se você não vir os links administrativos (“Conteúdo”, “Estrutura” etc.).
• Em seguida, navegue até Conteúdo e adicione um novo conteúdo do tipo Artigo. S
• Você pode intitular este artigo “Brócolis é ótimo para você”.
• Adicione um campo de texto Corpo e insira algum texto.
• Você deve então tentar adicionar conteúdo de cada tipo de parágrafo que criamos: imagem centralizada, imagem centralizada com legenda, caixa de informações e prós e contras.
• Após fazer isso, salve o artigo e visualize-o. Esse processo completo deve ser o mesmo de quando o fizemos como administrador do site e você poderá visualizar todo o conteúdo sem problemas.

Se você não tiver a opção de adicionar uma ou mais dessas, ou se encontrar outros problemas ao tentar fazer isso, provavelmente perdeu uma ou mais das permissões necessárias ao concedê-las à função de Criador de conteúdo. Volte para as permissões do criador de conteúdo e certifique-se de dar a eles todas as permissões listadas acima, especialmente aquelas sob o cabeçalho “Permissões de tipo de parágrafo”.

Finalizando o Tutorial de Parágrafos

Depois de confirmar que você pode criar e exibir conteúdo usando o conteúdo de parágrafos como criador de conteúdo, você concluiu este tutorial. Neste ponto, você deve ter uma compreensão do porquê e como usar o módulo Parágrafos.

Para recapitular, a utilidade deste módulo está em sua capacidade de definir componentes especiais de conteúdo no artigo, como caixas de informações suplementares e imagens centralizadas com legendas, sem forçar os criadores de conteúdo a tentar estilizar as coisas por conta própria.

Com Parágrafos, eles são simplesmente solicitados a fornecer o conteúdo para essas partes de nossos artigos, e nós, como desenvolvedores, podemos escrever regras para todo o site (usando CSS) sobre como esse conteúdo deve ser exibido. Isso torna o processo de criação de conteúdo mais fácil para usuários não técnicos e torna a aparência desse conteúdo mais consistente para usuários técnicos e não técnicos.