manifest / editor / wp-social-link-block-extensions

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.

by Itamar Silva · github.com/silvaitamar/wp-social-link-block-extensions

★ 0stars

Install

Download source zip No release zip yet

This is the repository archive. It installs, but the folder name will carry the branch suffix and updates will not flow.

Install straight from GitHub with WP-CLI:

wp plugin install https://github.com/silvaitamar/wp-social-link-block-extensions/archive/refs/heads/main.zip

No built-in updater. New versions won't appear under Dashboard → Updates. Install new releases yourself, or let Git Updater track the repository.

Readme github.com/silvaitamar/wp-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:

Lado	Mecanismo	O que faz
PHP	`block_core_social_link_get_services`	Injeta nome + SVG no registro do servidor → ícone resolve no frontend
JS	`registerBlockVariation`	Registra a variação no editor → ícone aparece no inseridor do Social Links

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

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="...">

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
);

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