Atualmente, o plugin CoBlocks tem 26 blocos para Gutenberg (o editor de páginas e posts do WordPress). É um dos maiores plugins de blocos – provavelmente porque foi construído por uma empresa gigante, a GoDaddy. Ela oferece hospedagem, mas o carro-chefe é o registro de domínios. Já havia lançado um construtor de sites próprio, mas reformularam tudo depois de três anos e uma nova versão saiu em outubro de 2019. A reclamação que mais escutaram era a de que o processo de fazer site demorava demais, então simplificaram ao máximo – claro que, aí, as críticas foram que ficou engessado e permitia pouca personalização.
Quero esclarecer que esse artigo não é patrocinado pela GoDaddy, já que o WordPress sem Código defende o uso da plataforma WordPress em vez de construtores de sites atados a um serviço de hospedagem. Valorizo a independência acima de tudo, e ela é (para mim) a principal vantagem desse sistema de código aberto.
Felizmente, a GoDaddy trouxe para o WordPress o que aprendeu criando mais de 50 blocos para o próprio construtor de site. Assim como a mentalidade de tornar a construção de sites mais rápida, com blocos específicos. Por exemplo, há cinco galerias diferentes, já prontas, em vez de um bloco cheio de opções. Vamos dividir os blocos entre as três categorias que temos usado ao longo dessa série:
- versões diferentes do que já encontramos no Gutenberg: galeria, separador, galeria de logos, mídia e texto, galeria de posts e ícones sociais.
- blocos que são apenas combinações de outros: alerta, autor, eventos, cardápio, tabela de preços e serviços.
- blocos especiais, do tipo que pediam o próprio plugin antes do Gutenberg entrar em cena: acordeão, clique para tuitar, recursos, formulário, destaque, ícone, mapa, carrossel de posts, compartilhar, gif, github.
Versões diferentes de blocos do Gutenberg
Linha (Resizable Row/Columns Blocks)
Uma seção para inserir blocos dentro, em colunas. Era bastante útil até as colunas do próprio Gutenberg terem flexibilidade na quantidade e larguras. Enquanto o bloco do Gutenberg tem fundo com gradiente a seu favor, assim como configuração de cor para todos os parágrafos que estiverem dentro, a linha do Coblocks tem mais facilidade para definir margens e medianiz (ou margem interna, em inglês, “padding”).
Galerias: Carrossel, Colagem, Empilhada (Stacked), layout de alvenaria (Masonry), Compensação (Offset)
Cada uma tem suas opções de tamanho da imagem, mas em todas você pode ativar um lightbox na opção “claro”; adicionar uma legenda que fica sobre um degradê na base da imagem; na barra acima do bloco, você pode adicionar filtros, como sépia.
RH dinâmico (Dynamic Separator Block)
Assim como o bloco “separador”, tem uma linha ou pontos, mas você pode escolher a altura dele.
Divisor de formas (Shape Divider)
Tem várias formas, como ondas ou triângulos, que vão de um lado ao outro da página. Você pode espelhar horizontalmente e, para não ficar com um formato interessante de um lado e nada do outro, pode colocar de cabeça para baixo – e até colocar o que quiser no meio, como fazem no vídeo da própria equipe do Coblocks.
Logos & Badges Block
Se você esperava por um slider de logos, sinto muito. É apenas uma galeria de imagens. O único recurso diferente é que, além de um filtro para escala de cinza, ele tem a opção de cobrir os logos de preto – o que só funciona com logos de fundo transparente. De qualquer forma, vale o aviso: marcas que têm identidades visuais completas normalmente têm manuais com regras para aplicação do logo, incluindo em casos monocromáticos. Sempre consulte a marca antes de tomar licenças poéticas com os logos.
Posts Block
Perde para o bloco “Posts mais recentes” do Gutenberg porque não deixa colocar imagens. De resto, faz o mesmo: exibe posts em grade, deixa escolher se data e resumo ou início do texto aparecem, permite filtrar por categorias e decidir se aparecem por ordem cronológica ou alfabética (ambas podem ser reversas).
Blocos de combinação feitos pelo CoBlocks
Alerta (Alert Block)
Caixa colorida com título e texto. Muitas opções de formatação para ambos.
Autor (Author Profile)
A clássica combinação para adicionar ao pé de cada post com o nome, uma foto, biografia curta e um botão para o site ou perfil do autor. Pessoalmente, acho que faltaram ícones para redes sociais, e o bloco não permite adicioná-las dentro da caixa.
Destaque (Highlight)
Título, parágrafo e botões com chamado à ação.
Eventos (Events)
Uma lista com espaço para data, horário, localização, nome e descrição do evento. Muito prática de preencher e um dos meus blocos preferidos nessa coleção. Caso você queira colocar uma imagem por evento, no entanto, terá que abrir um bloco por evento e alterná-los com imagens.
Food & Drink
Esse é um dos blocos feito para acelerar a vida dos pequenos empreendedores: você abre uma seção de menu, com título, onde ficam os itens de menu. Cada item pode ter uma foto, o nome, preço e uma descrição. O diferencial, para mim, está nos ícones que podem ser adicionados com um clique: Populares, Sem glúten, Pescetariano, Apimentado, Mais apimentado, Vegano e Vegetariano. Quando a pessoa passa o mouse por cima ou clica, aparece a explicação. Ter um menu legível é essencial para a acessibilidade do seu site. Você pode subir uma imagem do seu cardápio, mas ela não seria lida pelos softwares leitores de tela que pessoas com baixa visão usam.
Tabela de preços (Pricing Table)
Um dos clássicos das coleções de blocos, temos aqui colunas com nome, preço, um espaço para descrição ou recursos e um botão com chamado à ação. Não encontrei com facilidade a opção de adicionar novos itens.
Serviços (Services)
Os desenvolvedores do CoBlocks realmente tentaram criar muitas opções para a mesma função. Aceita até quatro colunas de imagem com título, descrição e botões opcionais.
Blocos de page builder
Acordeão (Accordion)
Também vemos esse bloco em muitas coleções: caixas com títulos e conteúdo (normalmente, perguntas e respostas) que podem ser expandidas, mas ficam recolhidas para otimizar o espaço na página. O do CoBlocks permite adicionar com facilidade novos itens e escolher as cores de fundo e texto, tanto no título quanto no conteúdo. É a primeira vez que vejo a opção de colocar os itens abertos por padrão (uma decisão de item a item). Não encontrei uma maneira de trocar a cor da moldura, que imagino que esteja atrelada às cores do tema. Falaremos delas no fim do artigo.
Clique para tuitar (Click to Tweet)
Outro bloco muito popular, na configuração mais simples que encontrei até agora. Criado para as pessoas compartilharem artigos, permite que seu visitante clique no botão “tweet” para abrir o próprio twitter e publicar um comentário com o link do artigo. Você pode adicionar um nome de usuário para o tweet mencionar, mas não é obrigatório. Embora ele venha com a cor padrão do Twitter no botão, você pode colocar a do seu site.
Recursos (Features) e Ícone (Icon Block)
Em outras coleções, esse bloco é chamado de “ícones”: tem um ícone em cima, um título e uma descrição. Aceita até quatro colunas e a cor do texto também é aplicada ao ícone; o título tem opções separadas. Vejo como diferencial a facilidade para definir margens internas e externas. Os ícones podem ser vazados (apenas contorno) ou preenchidos. Para ter apenas os ícones, use o “Ícone”
Formulário (Form)
Embora eu ainda não confie 100% em formulários que não são feitos com um plugin específico (tenho medo que as entradas não cheguem ao e-mail), tenho que admitir que esse vem com bons recursos. Fiquei impressionada com o fato desse bloco incluir nas configurações de bloco a opção de adicionar o reCaptcha (“prove que você não é um robô”). Além disso, ele vem com três modelos diferentes: o clássico de contato, um para confirmar presença e um para agendar horário. Quanto à integração dessas respostas a sistemas úteis… aí já não é mais com esse bloco.
Mapa (Map)
Adiciona uma localização do Google Maps à sua página. Se você não tiver uma chave de API do Google, o mapa funciona mesmo assim. Se tiver, pode atualizar todos os mapas do site de uma vez só. Terei que falar isso em toda coleção de bloco que tiver esse: o Google Maps disponibiliza chaves de API (que muitas coleções e plugins pedem) com um crédito mensal de US$200. O crédito é gasto à medida que pessoas acessam e clicam no seu mapa, pelo que entendi. Para chegar a esse valor, é preciso ser uma empresa muito grande. Mesmo sem sua empresa ter perspectiva de passar de US$200, o Google só deixa abrir a conta para pegar a chave de API se você der alguma forma de cobrança – como um cartão de crédito.
Carrossel de posts (Post Carousel)
É muito esquisito um carrossel de posts que não usa a imagem de destaque deles. Fora esse detalhe, tem as opções padrão: exibir ou não a data e o resumo ou começo do post, quantas palavras desse começo entram, se os posts são ordenados alfabeticamente ou cronologicamente (incluindo de trás para frente), filtrar por categorias, quantos posts entram. Os diferenciais são exibir mais de um post ao mesmo tempo (colunas) e exibir posts de um feed externo, ou seja, outro blog.
Compartilhar (Social Sharing)
Maneira super simples de adicionar ícones para seu público compartilhar nas próprias redes sociais. Clique na rede social que quiser que apareça – se estiver “apagadinha”, não vai aparecer no post. Você pode escolher se quer que só o ícone apareça, ou o ícone com o nome da rede, e se quer que fiquem nas cores respectivas ou em uma cor só, que você pode escolher.
Gif Block
Busca gifs no site Giphy para você inserir no post. Quando alinhado à esquerda, direita ou centro, o gif fica no tamanho original. Com largura ampla ou total, ele cresce mantendo a escala. Tome cuidado para não deixar a imagem com qualidade muito baixa e sempre confira se precisa preencher o texto alternativo !
GitHub Gist Block
Bloco para desenvolvedores incorporarem conteúdo do GitHub.
Temas para usar com o CoBlocks
Se compararmos com outras coleções de blocos, as opções da Coblocks parecem um tanto quanto engessadas. É porque os blocos foram feitos seguindo a filosofia de acelerar o processo da criação de sites. Assim como os temas Go e Coblocks, que facilitam de várias maneiras a vida de quem está criando o primeiro site, enquanto limitam opções.
Tema Go
Mais tradicional em relação aos temas do mercado. Oferece cinco “estilos de design” com tipografia, cada uma com esquemas de cores pré-definidos. Quem quiser criar os próprios pode adicionar cores como primária, secundária e terciária; cores de cabeçalho e de rodapé. Dá as opções de cabeçalho e rodapé bem ilustradas e deixa escolher a cor de fundo e do texto, sem mais firulas. Até o aviso de rodapé é simples.
Tema CoBlocks
Profundamente minimalista. As opções do tema incluem uma barra de busca no cabeçalho, modo noturno (escuro) no site, adicionar metadados do autor (aqueles da configuração de usuário) em cada post, e que você esconda a categoria e as tags que aparecem no pé de cada post. Tem opções de cor bastante detalhadas, e de selecionar uma imagem de fundo. De resto, vem com as configurações padrão de tema.
Conclusão
Vejo o plugin CoBlocks como uma solução muito interessante para os iniciantes. Embora não tenha todos os blocos que eu gostaria, ou da forma como eu gostaria, dá para fazer (e atualizar) sites muito interessantes. Eu só gostaria que, assim como outras coleções, ela desse a opção de desativar blocos, tanto os próprios quanto os do Gutenberg. Mas acredito que fugiria do público-alvo.
Se você gostou desse artigo, compartilhe! Ou compartilhe o vídeo sobre essa coleção no canal de YouTube do WordPress sem Código:
E não se esqueça de seguir o WordPress sem Código nas redes sociais!