Como adicionar SVGs personalizados usando o plugin Icon Block WordPress

Blair Jersyer Plugins WordPress Oct 2, 2021

O plugin Icon Block foi disponibilizado na semana passada por Nick Diego. Ele não depende de uma biblioteca de terceiros como outros blocos comparáveis. Os desenvolvedores e os que gostam de fazer você mesmo vão gostar do fato de que qualquer arquivo SVG pode ser simplesmente adicionado ao editor.

Com pouco mais de um ano sob seu currículo, Diego criou o plugin Block Visibility , que está rapidamente se tornando um dos mais populares em seu campo. Durante o verão, ele adicionou uma versão profissional com recursos mais especializados. Quando se trata do editor de blocos, ele demonstrou disposição para apresentar ideias inovadoras, ao mesmo tempo que fica de olho na satisfação geral do usuário final até o momento. Parece que seu plugin mais recente não é diferente.

Ele se inspirou para criar o Icon Block depois de montar a página de preços para o Block Visibility. Ele tinha uma longa lista de recursos e estava codificando manualmente os ícones no bloco HTML para acompanhá-los.

Uma captura de tela da tabela de preços da página de preços Block Visibility. Uma lista de recursos pode ser encontrada no lado esquerdo da tela. Marcas de seleção e ícones "x" podem ser encontrados no lado direito da tela.

Create Amazing Websites

Com o melhor criador de páginas gratuito Elementor

Comece agora

Usar blocos HTML para ícones SVG (e não desejar usar uma biblioteca de blocos) tornou-se uma fonte de irritação para Diego, então ele apresentou esta solução rápida. "Meu objetivo era usar apenas componentes nativos do WordPress para criar um bloco de ícone SVG simples. E conforme novos recursos são adicionados ao núcleo (como margens e controles responsivos), atualizarei este bloco de acordo.

O resultado foi positivo. Para uma solução de ícone que depende do sistema de blocos WordPress, este verifica todos os critérios corretos.

O código SVG em um campo de texto será renderizado no editor e também no front end como resultado desse recurso.

Mas não termina aí. Para completar a solução, ele usa componentes principais e recursos com suporte de bloco. Possui recursos indispensáveis, como suporte para cores e alinhamento. Para vincular a qualquer URL, os usuários podem alterar o tamanho, o preenchimento e o raio da borda do ícone.

Uma coisa que gostaria de ver incluída é a capacidade de personalizar o estilo, a largura e a cor da borda. Um extra legal, mas não uma prioridade para a maioria das pessoas.

Com um fundo azul e um símbolo branco, o logotipo do WordPress pode ser visto como um ícone.

Alterar as cores, tamanho, espaçamento e raio da borda do ícone é um processo simples.

Teria sido suficiente para um lançamento incluir suporte para componentes-chave, mas Diego foi além ao incluir funcionalidade sob medida. O botão "girar" no bloco do ícone permite que os usuários girem o ícone em 90 graus. O ícone pode ser invertido horizontal ou verticalmente usando os botões da barra de ferramentas.

Plug-ins de ícones como este têm uma ampla variedade de aplicativos no editor do WordPress. Uma grade simples de caixas com um gráfico no topo é um design típico.

Usando o bloco de colunas no Bloco de ícones, os ícones personalizados podem ser inseridos e personalizados. No entanto, as possibilidades são virtualmente infinitas.

WordPress é onde faltam componentes. Não existem muitas opções boas por aí para criar layouts horizontais no momento. É difícil alinhar ícones com texto quando esse for o caso.

A variação de linha do bloco de grupo, que foi adicionada recentemente, tem um grande potencial. Os ícones podem ser colocados adjacentes aos parágrafos no editor, conforme demonstrado na captura de tela que acompanha. A tabela de preços que criei era simples e incluía ícones de verificação.

O uso do Bloco de ícones como marcas de verificação em uma lista é demonstrado nesta tabela de preços de duas colunas.

No momento, não há controle de interface para ajustar a distância entre os objetos. Idealmente, os ícones devem estar o mais próximos possível do texto.

Além disso, deve ser uma lista em vez de uma declaração. A construção do arranjo não requer o uso de outros blocos. No entanto, os usuários não podem aninhar blocos no bloco List.

Não há nada de errado com o plugin Icon Block; tudo está como deveria ser. Ele meramente ilustra um cenário no qual o WordPress seria útil. Isso aumentaria muito a funcionalidade de plug-ins desse tipo.

O plugin Gutenberg, que será integrado ao WordPress em um futuro próximo, tem suporte para um bloco de ícones. Tem havido alguma discussão sobre permitir que os usuários insiram arquivos SVG diretamente no editor desde que o líder do projeto Gutenberg, Matas Ventura, criou um tíquete sobre isso em 2019. É mais provável que esta seja uma escolha visual que evita que os usuários finais adicionem código personalizado. Como método alternativo com maior flexibilidade, o bloqueio de Diego ainda pode existir.

Embora o formato atual do plugin possa ser maravilhoso para muitos na comunidade WordPress, Diego tem ambições de torná-lo ainda melhor. Os usuários que não desejam adicionar código SVG podem utilizar um seletor de ícones, diz ele. Os ícones embutidos do WordPress seriam exibidos por padrão. No entanto, ele pretende permitir que desenvolvedores terceirizados criem "pacotes de ícones" personalizados para estender a funcionalidade do aplicativo.

Divi WordPress Theme