Como personalizar texto no WordPress Gutenberg Editor (área back-end)

Publicados: 2024-12-09

O editor WordPress Gutenberg é uma ferramenta poderosa para criação de conteúdo, mas sua interface back-end padrão nem sempre atende às necessidades específicas de cada usuário.

Embora muitos usuários do WordPress se concentrem no design front-end, a área back-end – o próprio editor – também oferece oportunidades de personalização para agilizar o fluxo de trabalho e aprimorar a experiência de edição.

Este artigo explorará como personalizar o texto no back-end do editor Gutenberg adicionando trechos PHP personalizados e modificações CSS que você pode aplicar a qualquer tema WordPress que estiver usando.

Quer você seja um desenvolvedor ou um entusiasta do WordPress, este guia o ajudará a criar um ambiente de edição personalizado que funcione para você.

Etapas para personalizar o texto na área back-end do WordPress Gutenberg Editor

Etapa 1: adicione o código personalizado ao arquivo functions.php

Primeiro, você precisa adicionar código personalizado para modificar o editor de blocos do WordPress (Gutenberg) para melhor alinhamento visual entre o editor (backend) e o front end do site.

No painel do WordPress, vá para Aparência > Editor de arquivo de tema . Você pode encontrar o Theme File Editor no menu Ferramentas se estiver usando um tema de bloco.

Depois de entrar na página Theme File Editor, selecione o arquivo funções.php . Depois, cole o snippet PHP abaixo no final do conteúdo do arquivo function.php . Em seguida, atualize o arquivo do tema clicando no botão Atualizar arquivo .

 // Adicione CSS personalizado ao editor Gutenberg
função custom_gutenberg_editor_styles() {
    add_theme_support('estilos de editor'); //Habilita estilos de editor
    add_editor_style('estilo de editor personalizado.css'); // Enfileira o arquivo CSS personalizado
}
add_action('after_setup_theme', 'custom_gutenberg_editor_styles');

// Enfileira estilos de editor personalizado diretamente
função enqueue_custom_editor_css() {
    wp_enqueue_style(
        'estilos de editor personalizado', 
        get_template_directory_uri(). '/custom-editor-style.css',
        variedade(),
        '1,0'
    );
}
add_action('enqueue_block_editor_assets', 'enqueue_custom_editor_css');

Etapa 2: adicione o arquivo CSS em seu diretório de tema ( custom-editor-style.css )

Em seguida, você precisa criar um arquivo CSS chamado custom-editor-style.css no diretório do seu tema (por exemplo, wp-content/themes/your-theme/).

1: Instale um gerenciador de arquivos para WordPress

Para criar um nome de arquivo CSS no diretório do seu tema, você pode usar qualquer gerenciador de arquivos para WordPress disponível no diretório de plugins do WordPress.

Instale e ative-o e comece a criar um novo arquivo CSS chamado custom-editor-style.css no diretório do seu tema. Para este exemplo, usamos o plugin Advanced File Manager e nosso tema WordPress atual é Astra, então o caminho será assim: wp-content/themes/astra/custom-editor-style.css

2: Adicione o snippet CSS ao arquivo custom-editor-style.css

Em seguida, adicione os estilos personalizados a este arquivo para modificar o texto na área back-end do Gutenberg. Copie o snippet CSS abaixo e cole-o no campo de entrada.

Aqui está o snippet CSS que você pode usar:

 /* Personaliza o tamanho da fonte do parágrafo e a altura da linha */
.editor-styles-wrapper p {
    tamanho da fonte: 18px !importante;
    altura da linha: 1,6 !importante;
    cor: #000000 !importante;
    peso da fonte: 400 !importante;
}



/* Personalize o título da postagem do editor (H1) */
.editor-post-title__input {
    família de fontes: 'Arial', sem serifa! Importante;
    tamanho da fonte: 40px !importante;
    cor: #000000 !importante;
    peso da fonte: 700 !importante;
    altura da linha: 1,6 !importante;
}

/* Personaliza blocos de cabeçalho (H2, H3, H4, H5) */

.editor-styles-wrapper h2{
    família de fontes: 'Arial', sem serifa! Importante;
    tamanho da fonte: 36px !importante;
    cor: #000000 !importante;
    peso da fonte: 700 !importante;
    altura da linha: 1,6 !importante;
}

.editor-styles-wrapper h3{
    família de fontes: 'Arial', sem serifa! Importante;
    tamanho da fonte: 32px !importante;
    cor: #000000 !importante;
    peso da fonte: 700 !importante;
    altura da linha: 1,6 !importante;
}

.editor-styles-wrapper h4{
    família de fontes: 'Arial', sem serifa! Importante;
    tamanho da fonte: 30px !importante;
    cor: #000000 !importante;
    peso da fonte: 700 !importante;
    altura da linha: 1,6 !importante;
}

.editor-styles-wrapper h5{
    família de fontes: 'Arial', sem serifa! Importante;
    tamanho da fonte: 28px !importante;
    cor: #000000 !importante;
    peso da fonte: 700 !importante;
    altura da linha: 1,6 !importante;
}


/* Estilo para listas não ordenadas */
.editor-styles-wrapper ul {
    margem esquerda: 20px;
    preenchimento à esquerda: 20px;
    tipo de estilo de lista: disco;
    tamanho da fonte: 18px !importante;
    altura da linha: 1,6 !importante;
    família de fontes: 'Arial', sem serifa! Importante;
    cor: #000000 !importante;
    peso da fonte: 400 !importante;
}

/* Estilo para itens da lista */
.editor-styles-wrapper ul li {
    margem inferior: 10px;
    tamanho da fonte: 18px !importante;
    cor: #000000 !importante;
    peso da fonte: 400 !importante;
}

/* Estilos de lista aninhados */
.editor-styles-wrapper ul ul {
    margem esquerda: 20px;
    tipo de estilo de lista: círculo;
}

/* Estilos adicionais para listas ordenadas, se necessário */
.editor-styles-wrapper ol {
    margem esquerda: 20px;
    preenchimento à esquerda: 20px;
    tipo de estilo de lista: decimal;
    tamanho da fonte: 18px !importante;
    altura da linha: 1,6 !importante;
    família de fontes: 'Arial', sem serifa! Importante;
    cor: #000000 !importante;
    peso da fonte: 400 !importante;
}

Depois de adicionar o snippet CSS ao arquivo custom-editor-style.css , você pode verificar se suas personalizações na área de back-end do editor Gutenberg foram aplicadas com sucesso.

Vá para o editor WordPress Gutenberg criando um novo tipo de postagem (página ou postagem) ou selecionando o existente.

O que o código fez?

1: Código personalizado no arquivo functions.php

Primeira função

 função custom_gutenberg_editor_styles() {
    add_theme_support('estilos de editor'); //Habilita estilos de editor
    add_editor_style('estilo de editor personalizado.css'); // Enfileira o arquivo CSS personalizado
}
add_action('after_setup_theme', 'custom_gutenberg_editor_styles');

Esta função diz ao WordPress para usar um arquivo CSS personalizado ( custom-editor-style.css ) no editor Gutenberg.

Segunda função

 função enqueue_custom_editor_css() {
    wp_enqueue_style(
        'custom-editor-styles', // Nome exclusivo para a folha de estilo.
        get_template_directory_uri(). '/custom-editor-style.css', // Caminho para seu arquivo CSS.
        array(), // Sem dependências.
        '1.0' // Versão do arquivo CSS.
    );
}
add_action('enqueue_block_editor_assets', 'enqueue_custom_editor_css');

Esta função carrega diretamente o arquivo custom-editor-style.css no editor.

Por que duas funções?

A primeira função adiciona suporte básico ao tema para estilizar o editor WordPress Gutenberg.
A segunda função controla como e quando o arquivo CSS é carregado.

2: Snippet CSS no arquivo custom-editor-style.css

Personalizar o texto do parágrafo (p)

 .editor-styles-wrapper p {
    tamanho da fonte: 18px !importante;
    altura da linha: 1,6 !importante;
    cor: #000000 !importante;
    peso da fonte: 400 !importante;
}

O que faz:

Altera o tamanho da fonte dos parágrafos para 18px.
Define a altura da linha como 1,6 para melhor legibilidade.
Aplica a cor de texto preto #000000.
Usa uma espessura de fonte normal (400).
!important : garante que esses estilos substituam quaisquer estilos conflitantes.

Personalizar o título da postagem (H1)

 .editor-post-title__input {
    família de fontes: 'Arial', sem serifa! Importante;
    tamanho da fonte: 40px !importante;
    cor: #000000 !importante;
    peso da fonte: 700;
    altura da linha: 1,6;
}

O que faz:

Altera a fonte do título da postagem para Arial com um substituto sem serifa.
Define um tamanho de fonte grande de 40px.
Garante que o texto esteja em negrito (peso da fonte: 700) e use a cor preta.
Mantém uma altura de linha consistente.

Personalizar blocos de título (H2, H3, H4, H5)

 .editor-styles-wrapper h2 {
    família de fontes: 'Arial', sem serifa! Importante;
    tamanho da fonte: 36px !importante;
    cor: #000000 !importante;
    peso da fonte: 700;
    altura da linha: 1,6;
}

Estilos semelhantes são aplicados para H3, H4 e H5 com tamanhos de fonte decrescentes:

H2: 36px
H3: 32px
H4: 30 pixels
H5: 28 pixels

O que faz:

Padroniza a família da fonte, a cor, a espessura e a altura da linha em todos os níveis de título.
Garante uma hierarquia clara ajustando os tamanhos das fontes.

Estilo para listas não ordenadas (ul)

 .editor-styles-wrapper ul {
    margem esquerda: 20px;
    preenchimento à esquerda: 20px;
    tipo de estilo de lista: disco;
    tamanho da fonte: 18px !importante;
    altura da linha: 1,6 !importante;
    família de fontes: 'Arial', sem serifa! Importante;
    cor: #000000 !importante;
    peso da fonte: 400 !importante;
}

O que faz:

Adiciona espaçamento à esquerda de listas não ordenadas (recuo).
Garante que os itens da lista usem o estilo de marcador de disco.
Aplica tamanho de fonte, cor e altura de linha consistentes para corresponder ao texto do parágrafo.

Estilo para itens de lista (ul li)

 .editor-styles-wrapper ul li {
    margem inferior: 10px;
    tamanho da fonte: 18px !importante;
    cor: #000000 !importante;
    peso da fonte: 400 !importante;
}

O que faz:

Adiciona espaçamento entre os itens da lista para facilitar a leitura (margem inferior: 10px).
Garante que os estilos de texto correspondam ao design geral.

Estilos de lista aninhados

 .editor-styles-wrapper ul ul {
    margem esquerda: 20px;
    tipo de estilo de lista: círculo;
}

O que faz:

Ajusta o recuo para listas não ordenadas aninhadas.
Altera o estilo do marcador das listas aninhadas para circular.

Estilo para listas ordenadas (ol)

 .editor-styles-wrapper ol {
    margem esquerda: 20px;
    preenchimento à esquerda: 20px;
    tipo de estilo de lista: decimal;
    tamanho da fonte: 18px !importante;
    altura da linha: 1,6 !importante;
    família de fontes: 'Arial', sem serifa! Importante;
    cor: #000000 !importante;
    peso da fonte: 400 !importante;
}

O que faz:

Adiciona espaçamento e usa numeração decimal para listas ordenadas.
Garante que as listas ordenadas sigam a mesma tipografia dos parágrafos e das listas não ordenadas.

O resultado final

Este artigo mostra como você pode facilmente personalizar o texto na área de back-end do editor WordPress Gutenberg. Como mencionamos no início deste artigo, personalizar o texto na área back-end do Gutenberg irá aprimorar sua experiência de edição. Aprimorar a experiência de edição no WordPress é crucial porque impacta diretamente nossa eficiência, criatividade e satisfação como criadores de conteúdo.

Implementar o método neste artigo (adicionar o código personalizado ao arquivo functions.php e adicionar o arquivo CSS no diretório do tema) permite que você personalize o texto na área de back-end do Gutenberg, independentemente do tema WordPress que você usa. Essa abordagem garante que suas alterações permaneçam consistentes em diferentes temas e atualizações.

Sinta-se à vontade para ajustar os valores no snippet CSS para obter a melhor aparência do seu texto na área back-end do Gutenberg. Você pode modificar valores de propriedades como tamanho da fonte, altura da linha, cor e margens para garantir que o conteúdo seja legível e visualmente atraente. Por exemplo, alterar a família de fontes para um tipo de letra mais legível ou definir uma altura de linha que melhore a legibilidade pode aprimorar a experiência de edição. Além disso, ajustar as propriedades de preenchimento e margem pode ajudar a espaçar os elementos de maneira mais eficaz, evitando que o layout pareça superlotado.