Social Link Block Extensions

Estende o bloco nativo core/social-link do WordPress com ícones de serviços personalizados — totalmente integrado no editor de blocos e no frontend, sem substituir ou envolver o bloco.

O problema

O WordPress inclui ~30 serviços nativos no core/social-link (LinkedIn, GitHub, X, Bluesky…). Serviços fora dessa lista — plataformas regionais de freelancers, redes de nicho, canais de marca própria — não têm ponto de extensão oficial.

As alternativas comuns são frágeis:

• core/html com SVG fixo — quebra a editabilidade do bloco
• Truques com CSS content: — invisível no editor
• Plugins de terceiros de ícones sociais — substituem o bloco nativo inteiro, perdendo a UX do inseridor e a integração com o tema

A solução

O WordPress 6.9 introduziu o filtro block_core_social_link_get_services, a primeira API oficial do servidor para registrar serviços personalizados. Combinado com registerBlockVariation no lado do JS, agora é possível adicionar um serviço personalizado que se comporta de forma idêntica aos nativos.

Este plugin implementa esse padrão de forma limpa:

Sem build step. O script do editor (assets/editor.js) é ES5 puro contra as APIs públicas wp.blocks / wp.element.

Correção do shape do ícone

O componente <Icon> do @wordpress/components tem múltiplos branches de renderização conforme o tipo da prop icon. Apenas icon.type === 'svg' dispara a atribuição de width=size height=size que torna o botão quadrado (o border-radius: 9999px no .wp-block-social-link produz círculo num quadrado, e pill num retângulo).

Este plugin constrói o ícone com wp.element.createElement('svg', ...) — sem wrapper <span>, sem dangerouslySetInnerHTML — para entrar no branch correto e renderizar de forma idêntica aos ícones nativos em qualquer tamanho.

Requisitos

• WordPress 6.9 ou superior (o filtro block_core_social_link_get_services foi introduzido no 6.9)
• PHP 8.0 ou superior

Adicionando um novo serviço

1. Adicione o arquivo SVG em includes/icons/<slug>.svg
   • viewBox="0 0 24 24", sem atributos width/height
   • Um ou mais elementos <path fill="currentColor" d="...">
2. Adicione uma entrada em Social_Link_Block_Extensions::SERVICES em social-link-block-extensions.php:

   private const SERVICES = array(
       'workana'    => 'Workana',
       'meu-servico' => 'Meu Serviço', // ← adicionar aqui
   );

3. Pronto. O filtro PHP e a variação JS são gerados a partir da mesma constante — sem duplicação.

Estrutura de arquivos

social-link-block-extensions/
├── social-link-block-extensions.php   ← bootstrap do plugin + registros PHP
├── assets/
│   └── editor.js                      ← registerBlockVariation (sem build step)
└── includes/
    └── icons/
        └── workana.svg                ← apenas viewBox, fill="currentColor"

Licença

GPL-2.0-or-later