O editor de blocos de Gutenberg para WordPress mudou a maneira como criamos conteúdo no CMS. Mas também abriu novas possibilidades no front-end.
Um dos desenvolvimentos mais interessantes nessa área é a capacidade de adicionar blocos "completos" ou "largos" a uma página ou postagem. Esse recurso adiciona a capacidade de um bloco de Gutenberg se desviar da largura padrão do conteúdo de um tema, algo que era quase impossível no antigo Editor clássico.
Existem vários usos possíveis para um bloco alinhado completo ou com largura. Você pode, por exemplo, introduzir novas seções de página com um bloco de capa de largura total que sobreponha o texto em um plano de fundo da imagem. Ou você pode aproveitar o recurso para criar uma área de apelo à ação que não pode ser desperdiçada. Quase qualquer tipo de conteúdo pode ser adicionado aqui, o que faz parte do apelo.
No entanto, há uma pequena ressalva: seu tema deve ar blocos completos e alinhados. Felizmente, é bastante fácil de fazer. A seguir, é apresentado um tutorial rápido para adicionar amplo e ao alinhamento ao seu tema WordPress e projetar os blocos via CSS.
Adicionar e ao tema
O primeiro o é adicionar uma única linha de código ao arquivo functions.php do seu tema ativo. Baixe esse arquivo do seu site, se ainda não o tiver (ele pode ser encontrado na pasta / wp-content / themes / yourtheme /, substituindo "yourtheme" pelo nome da pasta). Em seguida, copie e cole o seguinte trecho de código PHP:
add_theme_ ('wide-align');
Depois de adicionar o código, carregue o arquivo Functions.php modificado novamente na pasta do seu tema.
Esse código significa que você deseja ativar os blocos alinhados por largura e largura. Agora, quando você faz no WordPress e a o editor de página / postagem, observe que alguns blocos (nem todos) têm as novas opções de alinhamento "Completo" e "Largo".
Você usa um tema comercial ou padrão?
Se você estiver usando um tema padrão ou comercial do WordPress, verifique se está usando um tema filho. Isso permitirá que você faça alterações no tema sem potencialmente perdê-las após uma atualização.
Estilo de bloco básico
Projetar um bloco largo ou totalmente alinhado pode ser um pouco complicado. E existem várias técnicas diferentes por aí. O que usaremos aqui vem deste exemplo no CodePen.
@media screen e (largura mínima: 960 px) {
.alignwide, .alignfull {
largura: 100vw;
largura máxima: 100vw;
margem esquerda: calc (50% – 50 vw);
}
}
Observe que estamos usando uma consulta de mídia CSS para incorporar apenas esse estilo quando o tamanho da tela for 960 pixels ou mais. Isso ocorre porque não queremos necessariamente esse efeito em telas menores.
Nesse caso, usamos os mesmos estilos para os dois alinhamentos de blocos. Obviamente, é perfeitamente possível projetá-los separadamente, para que cada um ofereça uma aparência única na frente.
Também vale a pena notar uma possível desvantagem: uma barra de rolagem horizontal pode aparecer em alguns modelos ao usar esta técnica. Isso pode ser corrigido via CSS com o seguinte adicionado ao elemento body:
corpo {
estouro-x: oculto;
}
Os resultados
Agora que ativamos o recurso de bloco completo e alinhado, é hora de testar as coisas. Aqui, criamos uma página com um bloco de capa, com um amplo alinhamento.
Ao olhar para o front end do site, o bloco de capa funciona conforme o esperado. O elemento abrange toda a largura da página, enquanto o conteúdo abaixo permanece dentro da largura padrão de 960 pixels do tema.
Usando apenas os estilos padrão, esse elemento realmente se destaca. Ainda assim, existem muitas oportunidades para fazer mais com o design.
Ao adicionar classes CSS adicionais ou direcionar blocos específicos, temos um arsenal completo de possibilidades de design à nossa disposição. Coisas como fundos, bordas ou traçados de recorte podem adicionar um toque único.
Expandindo com temas do WordPress
Em uma instalação padrão, o Gutenberg não fornece todos os recursos de um plug-in do construtor de páginas. Mas os alinhamentos de blocos nos permitem aventurar nesse território.
Isso é bom, porque o design da web evoluiu desde os dias em que o Editor clássico apareceu pela primeira vez. Naquela época, os sites tendiam a usar largura uniforme de conteúdo o tempo todo.
Atualmente, as seções de largura total estão entre as opções de design mais populares e úteis. A capacidade de tirar proveito disso sem a necessidade de plug-ins ou hacks temáticos torna o WordPress ainda melhor para designers.
