Desenvolvi recentemente um plugin para WordPress para solucionar de forma nativa um problema de manutenção ao usar SVG inline no editor Gutenberg, substituindo a inserção manual de códigos do gráfico por um bloco customizado acoplado a um gerenciador de mídia centralizado.
A motivação surgiu diretamente da manutenção do meu portfólio, que usava de uma gambiarra para exibir as logomarcas de tecnologias, ferramentas e certificações. Sempre que eu precisava usar destas imagens, acabava injetando o código do vetor em um bloco de HTML de cada página, gerando dificuldade de manutenção e visualização.
O código do plugin para o WordPress está disponível no meu GitHub.
O problema do SVG pulverizado
Utilizar SVG inline oferece excelente controle de estilização via CSS, mas repeti-los em múltiplos posts cria uma armadilha técnica. Como o WordPress armazena o conteúdo como HTML no banco de dados, replicar o mesmo vetor várias vezes invalida o princípio de reaproveitamento de componentes.
Para resolver isso, estruturei o plugin separando a persistência das definições visuais da renderização em si. O administrador realiza o upload do código bruto apenas uma vez e o manipula dinamicamente na interface de edição por meio de referências indexadas.
A arquitetura interna do plugin
O plugin foi desenvolvido a partir do @wordpress/create-block, a ferramenta oficial para iniciar o desenvolvimento de um bloco customizado. Além disso, utilizei de programação assistida por inteligência artificial para criar as funcionalidades necessárias para seu uso e manutenção.
O core do plugin usa PHP para registrar as telas administrativas, as rotas da API REST do WordPress e injetar os metadados em tempo de execução.
A estrutura básica de arquivos reflete o padrão moderno de blocos do ecossistema:
skill-logo/
├── skill-logo.php # Inicialização, rotas REST e runtime
├── uninstall.php # Desinstalação do plugin
├── src/ # Código-fonte do bloco (React / JS)
└── build/ # Assets compilados para produção
No back-end, configurei uma tela em Media > Manage Logos. Ali, o plugin salva os vetores sob uma chave única e os sanitiza antes de persisti-los na tabela de opções, mitigando riscos de segurança como ataques de XSS por vetores maliciosos.
Construindo a interface e otimizando o front-end
O WordPress utiliza React, JSX e seus pacotes oficiais de scripts para construir o componente gráfico dentro do Gutenberg. Desse modo, o bloco carrega a lista de imagens vetoriais cadastradas e fornece controles nativos no painel lateral para ajustar tamanho, ordenação e espaçamento. A customização da ordem de exibição acontece via controle de arrastar e soltar (drag and drop).
Outra vantagem do bloco customizado é a melhor exibição dos gráficos SVG no editor Gutenberg, de modo que as imagens apareçam com mais fidelidade ao resultado final.
A otimização definitiva acontece na entrega ao visitante do site. Em vez de repetir o nó do vetor para cada bloco inserido na página, o plugin analisa quais gráficos são utilizados nas diversas instâncias do bloco e gera uma folha de sprites única na página, usando a tag HTML <symbol>.
Assim, a renderização resume-se a uma chamada limpa no post:
<svg class="wp-block-skill-logo-icon" aria-hidden="true">
<use href="#skill-logo-java"></use>
</svg>
O fluxo de desenvolvimento fornecido pela solução de criação de blocos possibilita inclusive a exportação do código compilado em um arquivo ZIP pronto para instalação no sistema. Para os testes, o @wordpress/wp-env, cria e gerencia um ambiente de desenvolvimento utilizando Docker.
Por fim, o código também trata a desinstalação do bloco para não deixar resíduos de informações não utilizadas. Caso o plugin seja deletado do painel, o arquivo uninstall.php varre e elimina os registros gerados na tabela de configurações, eliminando os SVG cadastrados.
Deixe um comentário