Control Block Design através do Plugin EditorPlus WordPress

Na semana passada, enquanto eu estava fazendo as edições finais de uma revisão de seu projeto Gutenberg Forms, Munir Kamal estava se preparando para o lançamento de outro tipo de plugin WordPress para o editor de blocos. Este se chamava EditorPlus e criaria um sistema de design para blocos. Kamal e sua equipe discretamente deram os toques finais na versão 1.0 e lançaram o plugin no repositório de plugins do WordPress alguns dias depois.

Ao contrário de muitos outros plugins que criam blocos personalizados para obter resultados de design específicos, o EditorPlus oferece aos usuários a flexibilidade de personalizar suas páginas com o que eles têm à mão. Ele adiciona uma série de opções de design a cada um dos blocos existentes do WordPress. No front-end, ele deixa uma pegada leve, produzindo apenas o CSS necessário para essa página em tempo real.

Talvez a melhor coisa sobre este plugin agora seja que ele estabelece as bases para muitos recursos relacionados ao design que provavelmente encontrarão um lar permanente no Gutenberg e, eventualmente, no WordPress principal. A equipe do Gutenberg pode emprestar ideias, iterar e melhorá-las. Já vimos o controle de preenchimento experimental em Gutenberg 8.3. Faria sentido que a equipe de desenvolvimento seguisse com controles de design adicionais no futuro. A coisa boa sobre esses controles sendo implementados em plugins de terceiros primeiro é que a equipe pode ver como os usuários reagem a eles e ter uma noção se eles trabalhariam diretamente no Gutenberg antes de se comprometerem com qualquer coisa.

O EditorPlus não tem falta de brindes para quem gosta de ter muita liberdade de design sem mexer no código. Essencialmente, o plugin é um editor de CSS sem a necessidade de conhecer CSS. Ele fornece aos usuários finais opções para os recursos CSS mais necessários por meio de opções de bloco. É um playground para quem gosta de mexer com design e poderoso o suficiente para criar layouts exclusivos sem sobrecarregar o site no front-end.

Como funciona o EditorPlus

Depois de ativar o plugin EditorPlus, os usuários finais podem começar a usar suas opções imediatamente, indo para o editor de postagem ou página. Depois de inserir um bloco, o plug-in disponibiliza as oito guias a seguir no painel de opções do bloco (cada uma é precedida por um símbolo + ):

• Fronteira
• Sombra da caixa
• Dimensionamento
• Fundo
• Margem
• Preenchimento
• Raio da borda
• Extras

Essas guias aparecerão apenas para os blocos principais do WordPress e não para os blocos de plugins de terceiros neste momento. Além da guia Extras, cada guia corresponde às suas contrapartes CSS. A guia Extras fornece uma opção "Exibir" mais avançada, que permite que os usuários alterem o valor de display do elemento de quebra de bloco em CSS. Esta opção é melhor deixar para usuários mais avançados. Ele também fornece uma opção de transição que funcionaria bem com estilos de foco.

Cada uma das guias de opções de bloco também possui botões misteriosos “R” e “H”. O botão “R” permite que os usuários ativem opções responsivas, o que significa que eles podem alterar os estilos de bloco com base nas telas de desktop, tablet e celular. O botão “H” permite que os usuários alterem o design com base no estado de foco do mouse.

O plugin oferece muitas opções em pouco espaço. Todas as novas guias de design podem parecer um pouco esmagadoras no início. No entanto, com pouco uso, é fácil ganhar alguma memória muscular e rapidamente criar layouts personalizados.

Cada uma das opções do plugin é bastante simples. E, quando não estão, você obtém o benefício de feedback instantâneo por meio do editor de blocos.

Existem algumas áreas que podem ser problemáticas para alguns usuários, dependendo de como seu tema estiliza determinados blocos. Por exemplo, as configurações de largura na guia Dimensionamento nem sempre funcionam. Alguns temas adicionarão uma largura máxima aos blocos, o que restringirá a largura geral, independentemente do tamanho. É possível anular isso através do plugin, mas Kamal optou por não fazer isso na versão 1.0.

Cuidado com as margens. Dependendo do design do tema, ele pode usar as margens esquerda e direita para colocar o conteúdo. Mesmo ao definir apenas uma margem superior ou inferior, o plug-in produzirá automaticamente 0 para as margens esquerda e direita. Isso pode quebrar o layout do conteúdo de alguns temas.

Um problema que encontrei com o plugin foram os estilos do meu tema ativo anulando os estilos do plugin em geral. Por exemplo, o tema padrão Twenty Twenty tem como alvo p.has-background em seu CSS para adicionar preenchimento personalizado. Portanto, ele anula o CSS do plugin EditorPlus com maior especificidade. Esse problema era esperado, e o desenvolvedor do plugin adicionou uma solução para ele na forma de uma caixa de seleção “importante” para cada opção de design. Se um usuário marcar esta caixa, ele adiciona !important à regra de estilo na saída, o que permitirá anular os estilos de tema. Não é uma solução 100% infalível. Sua milhagem pode variar, dependendo do tema, mas deve funcionar para a maioria dos casos de uso.

Não gosto da ideia de uma caixa de seleção importante na interface do usuário. Não é algo que um usuário deve se preocupar. No entanto, é a realidade de um mundo onde temas e plugins não têm uma maneira real de comunicar quais regras de design são mais importantes que outras. Apesar de não querer isso na interface do usuário, foi uma decisão inteligente incluí-lo. Caso contrário, muitas regras de estilo de temas teriam substituído o CSS do plugin.

Pensamentos finais

Para uma versão 1.0, o EditorPlus tem um começo sólido. Em meus testes, encontrei poucas falhas. Quaisquer problemas para o usuário médio provavelmente virão na forma de conflitos de tema, e esses conflitos provavelmente serão em torno de temas usando alta especificidade ou !important em seu CSS.

Kamal deixa claro na página do plugin que há mais por vir deste plugin. Não tenho certeza de quais recursos ele tem em mente, mas estou ansioso para vê-los. Eu gostaria de ver uma opção de sombra de texto para blocos relacionados a texto, como Título e Parágrafo. Também seria bom ver algumas opções de design para as imagens no bloco Galeria, em vez de apenas o elemento de embrulho.

Se você deve usar o EditorPlus dependerá se você precisa de controles de design adicionais. O EditorPlus é voltado para pessoas que precisam de algo mais parecido com um construtor de páginas leve, mas querem manter o WordPress nativo. Este plugin é uma boa vitrine do que é possível e é um bom indicador de possíveis opções de design que podem um dia chegar ao WordPress.