No ano passado, o WordPress.com lançou novos editores de código para o editor de blocos e para o campo de CSS adicional no painel de administração. Esse foi o primeiro passo de um projeto maior: tornar a edição de código muito mais prática, confortável e intuitiva.

Hoje, temos o prazer de anunciar a segunda etapa dessa evolução: o bloco de Código aprimorado.

Não se trata de um bloco novo, mas de uma versão melhorada do bloco de Código que você provavelmente já usa no dia a dia. Ele mantém tudo o que funcionava bem e adiciona uma série de melhorias importantes:

  • Destaque de sintaxe: suporte a realce de sintaxe com cores para mais de 100 linguagens populares.
  • Opções de exibição: escolha se deseja mostrar o nome do arquivo, a linguagem usada, números de linha e até um botão para copiar o código.
  • Arrastar e soltar: basta arrastar um arquivo de código do seu computador para o editor, e ele será automaticamente convertido em um bloco de Código com a linguagem correta.
  • Transformações: transforme outros blocos compatíveis com código no WordPress.com, como o bloco de Realce de Sintaxe, no novo bloco de Código.
  • Estilos personalizados: ajuste as cores do destaque de sintaxe diretamente no editor ou via theme.json, se você for desenvolvedor.

Como usar o bloco de Código aprimorado

Não é preciso ativar nada para começar a usar o novo bloco de Código. Ele já está disponível por padrão.
Basta inserir o bloco em qualquer parte do editor e colar ou digitar seu código.

Por padrão, ao adicionar um bloco de Código e inserir o conteúdo, ele será exibido como Texto simples.

Exemplo de código exibido em um post do blog usando formatação de texto simples.

Como o Texto simples não representa uma linguagem específica, ele não inclui destaque de sintaxe. Para ativar o realce, é só escolher a linguagem desejada em Configurações → Linguagem, na barra lateral do editor.

Exemplo do bloco de Código exibindo código usando um preset de linguagem.

Assim que você selecionar a linguagem, o destaque de sintaxe será aplicado automaticamente, deixando o código muito mais fácil de ler — tanto para você quanto para quem visita o seu site.

Dica profissional: se você digitar três crases seguidas do nome da linguagem (por exemplo, ```php) e pressionar Enter, o editor cria automaticamente um novo bloco de Código já com a linguagem configurada.

Além de definir a linguagem, o bloco de Código oferece várias outras configurações que ajudam a deixar seus exemplos mais claros e profissionais:

  • Nome do arquivo: exibe um nome personalizado no canto superior esquerdo do bloco, ótimo para tutoriais e exemplos passo a passo.
  • Mostrar nome da linguagem: exibe a linguagem usada no canto superior direito.
  • Mostrar botão de copiar: adiciona um botão Copiar, facilitando para que os visitantes copiem todo o código com um clique.
  • Mostrar números das linhas: exibe a numeração das linhas à esquerda do código.
  • Iniciar numeração em: defina a partir de qual número a contagem de linhas deve começar.

Isso tornará os exemplos de código do seu site muito mais amigáveis para os leitores:

Exemplo do bloco de Código exibindo código usando as configurações adicionais de linguagem.

Personalizando as cores do bloco de Código

O bloco de Código aprimorado oferece várias formas de personalizar o destaque de sintaxe e as cores exibidas. Nesta seção, você vai conhecer todas elas, desde as opções mais rápidas e simples até as configurações mais avançadas.

Escolhendo um estilo de bloco

O bloco de Código já vem com quatro estilos prontos para uso:

  • Padrão: usa as cores e estilos definidos pelo seu tema.
  • Sem destaque: desativa completamente o destaque de sintaxe.
  • Solarized Light: um esquema de cores claro.
  • Solarized Dark: um esquema de cores escuro.

Além disso, os temas também podem registrar estilos adicionais. Selecionar um desses estilos é a forma mais rápida de mudar a aparência do seu bloco de Código.

Exemplo do bloco de Código exibindo código usando o novo preset Solarized Light.
Exemplo do bloco de Código exibindo código usando o novo preset Solarized Dark.

Personalizando cores direto no editor

Você também pode ajustar as cores diretamente no editor, usando o painel Estilos → Cor na barra lateral do bloco. O bloco de Código oferece várias opções para personalizar praticamente todos os elementos do destaque de sintaxe.

Selecionando cores personalizadas para a formatação de sintaxe do Bloco de Código.

E não é só sobre cores: você também pode ajustar outros estilos disponíveis, como tipografia, bordas e muito mais. Essas opções já existiam e continuam funcionando da mesma forma após a atualização.

Personalizando o Bloco de Código via theme.json

Se você é desenvolvedor ou cria temas, provavelmente vai querer definir cores de sintaxe padrão e outros estilos diretamente no tema. Esse conjunto de melhorias inclui suporte ao theme.json justamente para esse tipo de personalização.

Veja como ficam meus estilos personalizados do Bloco de Código depois de alguns ajustes no theme.json.

Exemplo do Bloco de Código usando cores personalizadas.

Como o WordPress em si ainda não oferece suporte nativo a cores de sintaxe via theme.json, a equipe do WordPress.com adicionou esse suporte de forma personalizada.

Você pode definir qualquer cor de sintaxe usando settings.custom.core/code no theme.json. Esse objeto aceita como chave o nome do elemento de sintaxe e, como valor, a cor desejada.

Aqui está um exemplo básico para personalizar suas próprias cores:

theme.json
{
	"$schema": "https://schemas.wp.org/trunk/theme.json",
	"version": 3,
	"settings": {
		"custom": {
			"core/code": {
				"comment": "#94a3b8",
				"keyword": "#8b5cf6",
				"boolean": "#f59e0b",
				"literal": "#10b981",
				"string": "#06b6d4",
				"specialString": "#ec4899",
				"macroName": "#8b5cf6",
				"variableDefinition": "#3b82f6",
				"typeName": "#14b8a6",
				"className": "#f97316",
				"invalid": "#ef4444"
			}
		}
	}
}

Qualquer valor de cor válido em CSS é aceito — você não fica restrito a códigos hexadecimais. Dá para usar variáveis CSS, RGBA e outras opções sem problema.

Se quiser usar minhas personalizações completas, é só copiar e colar o código abaixo. Ele inclui ajustes extras de estilo para deixar o bloco de Código ainda mais bonito e legível:

theme.json
{
	"$schema": "https://schemas.wp.org/trunk/theme.json",
	"version": 3,
	"settings": {
		"custom": {
			"core/code": {
				"comment": "#94a3b8",
				"keyword": "#8b5cf6",
				"boolean": "#f59e0b",
				"literal": "#10b981",
				"string": "#06b6d4",
				"specialString": "#ec4899",
				"macroName": "#8b5cf6",
				"variableDefinition": "#3b82f6",
				"typeName": "#14b8a6",
				"className": "#f97316",
				"invalid": "#ef4444"
			}
		}
	},
	"styles": {
		"blocks": {
			"core/code": {
				"border": {
					"color": "#e2e8f0",
					"style": "solid",
					"width": "1px",
					"radius": "8px"
				},
				"color": {
					"background": "#f1f5f9",
					"text": "#1e293b"
				},
				"typography": {
					"fontSize": "15px"
				}
			}
		}
	}
}

Comece a compartilhar código agora

Seja para publicar pequenos trechos ou tutoriais completos, o Bloco de Código aprimorado deixa o compartilhamento e a personalização de código no WordPress.com muito mais simples e flexíveis.

Com destaque de sintaxe, estilos de bloco e opções avançadas de cores, você tem controle total sobre a forma como seu código é exibido.

Assim, dá para se preocupar menos com formatação e focar no que realmente importa: criar conteúdo de qualidade que ajude seus leitores a aprender, testar e construir.