Como Personalizar a Cor de Fundo do Editor de Blocos do WordPress

Você pode personalizar as cores que você quer usar no seu site no WordPress, mas essa personalização diz respeito principalmente às páginas do site ativo, ou seja, às páginas que as pessoas verão quando acessarem seu site.

Se você quiser personalizar o esquema de cores usado no editor de blocos, para usar o mesmo padrão das páginas públicas, por exemplo, não há, nos temas, essa opção de configuração.

O problema que tive foi outro. Uso o tema Astra com o esquema de cores Dark. Ocorre que no editor de blocos, embora a cor de fundo seja escura, com fontes brancas, o fundo de blocos como /code e /preformatted continua sendo branco, com a fonte também branca, o que impede a leitura do texto inserido a menos que você selecione o texto com o mouse.

Mas, com a ajuda de um plugin, é possível alterar isso.

WPCode

Você vai precisar instalar o plugin WPCode, que permite aos usuários inserir códigos personalizados diretamente no site sem a necessidade de editar arquivos de tema ou ter conhecimentos avançados em programação. Ele é amplamente utilizado para adicionar scripts como Google Analytics, Facebook Pixel, códigos de rastreamento, trechos de HTML, CSS, JavaScript e até PHP diretamente pelo painel administrativo do WordPress.

Instalação e ativação:

• Acesse Plugins > Adicionar Plugin no painel do WordPress.
• Pesquise por “WPCode” e instale o plugin oficial.
• Ative o plugin.

Adicionar um novo snippet:

• Vá para Snippets de código > Adicionar Snippet > Adicionar seu código personalizado (snippet novo) + Adicionar snippet personalizado.
• Escolha um nome que faça sentido para você.
• Confirme que o tipo de código é Snippet de PHP.
• Insira o código abaixo:

/**
 * Corrige contraste dos blocos Código e Pré-formatado
 * no editor de blocos (Gutenberg).
 */

/* EDITOR DE BLOCOS (backend) */
add_action('enqueue_block_editor_assets', function () {
    $css = '
    /* Editor (iframe do Gutenberg) */
    .editor-styles-wrapper .wp-block-code,
    .editor-styles-wrapper .wp-block-preformatted{
        background-color:#111827 !important;   /* cinza bem escuro (Dark) */
        color:#e5e7eb !important;               /* cinza claro para texto */
        border:1px solid #374151 !important;    /* borda sutil */
    }
    .editor-styles-wrapper .wp-block-code code,
    .editor-styles-wrapper .wp-block-preformatted code{
        color:inherit !important;
    }
    /* Áreas editáveis do bloco Código */
    .editor-styles-wrapper .wp-block-code textarea{
        background:transparent !important;
        color:inherit !important;
    }
    /* Seleção de texto dentro desses blocos */
    .editor-styles-wrapper .wp-block-code ::selection,
    .editor-styles-wrapper .wp-block-preformatted ::selection{
        background:#374151 !important;
        color:#ffffff !important;
    }';
    wp_add_inline_style('wp-edit-blocks', $css);
});

IMPORTANTE: Atente ao fato de que a janela para inserir o código já possui, antes da primeira linha, <?php, não sendo necessário incluir isso no seu código.

• Em Método de inserção deixe Inserção automática.
• Em Localização deixe Executar em qualquer lugar.

Ative e salve seu novo Snippet:

• No canto superior direito ative e salve seu Snippet.

A janela do snippet deve ficar como essa:

Verificação final

Após a ativação desse código o fundo dos blocos no editor do WordPress deve ficar como abaixo:

Espero que este artigo te ajude de alguma forma.