Rodada de divulgação da FSE #2: Construindo uma página inicial personalizada com o editor do site de Gutenberg

Anne McCarthy anunciou a segunda rodada de testes para o programa Full Site Editing (FSE) Outreach. A chamada para testes pede que os usuários construam uma página inicial a partir do editor do site do plugin Gutenberg. O feedback está aberto até 5 de março.

A primeira rodada de testes começou em dezembro de 2020 e terminou no mês passado. Os testadores conseguiram identificar vários pontos problemáticos com o modo de edição de modelos do editor de blocos. O programa criou itens acionáveis ​​que os desenvolvedores do Gutenberg poderiam trabalhar para melhorar.

Esta segunda rodada é semelhante. No entanto, os testes abrangem uma área muito maior e mais complexa. Os usuários deixarão o conhecido editor de blocos e passarão para o editor do site, que ainda está a meses de ser um produto viável.

McCarthy listou um processo de 22 etapas para construir uma homepage. Enquanto eu seguia a maior parte do tempo, fiquei entediado antes de terminar. Esta é uma das razões que eu faço para um sujeito de teste pobre. Eu gosto de explorar e ver o que é possível por conta própria. Se tenho uma ideia, quero tentar executá-la. Eu principalmente me agarrei ao roteiro geral, mesmo que estivesse um pouco fora de ordem.

Eventualmente, criei uma página inicial personalizada para um restaurante chamado The Grilled Cheese – eu definitivamente abriria este restaurante no mundo real se eu deixasse a comunidade WordPress.

É razoavelmente simples. Ao todo, levei cerca de duas horas brincando com vários conceitos antes de chegar a esse estágio. Para construir algo com o qual eu ficaria feliz, levaria mais algumas horas.

No geral, senti-me limitado em definir minha página inicial ideal. Cada passo era uma batalha árdua contra as ferramentas. Eu poderia ter construído isso em menos da metade do tempo com HTML e CSS. Eu poderia fazer o mesmo e muito mais com outros plugins modernos de construtor de páginas para WordPress.

Antes de mergulhar nos resultados do meu teste, tenho uma honestidade brutal. Blocos TT1, que é o tema usado para o teste FSE Outreach, não é bom. O tema não lida de forma confiável com a infinidade de possibilidades que o editor do site coloca nas mãos dos usuários finais. Toda essa experiência poderia ser mais suave com um tema melhor. No entanto, as opções são limitadas e não tenho certeza se há um tema baseado em bloco melhor para trabalhar neste momento.

Havia tantas inconsistências entre o editor do site e o front-end que não faz sentido listar todas elas. O espaçamento foi grosseiramente fora. Eu geralmente vejo isso como uma questão temática. Passei grande parte do meu tempo no modo de tentativa e erro, fazendo um ajuste no editor e atualizando para ver o resultado do front-end. Limpar. Repita.

Identificando pontos de dor

Embora esta postagem seja crítica ao editor do site, isso não significa que a experiência foi totalmente ruim. Ver a melhoria a cada semana me dá esperança de que o WordPress terá um editor de site que rivalize com qualquer coisa no mercado. Eventualmente. No entanto, meu objetivo aqui é fornecer feedback real que a equipe possa usar.

Fora os problemas gerais de espaçamento mencionados anteriormente, identifiquei vários obstáculos ao criar uma página inicial personalizada.

Larguras máximas

Ao projetar uma página completa do site por meio do editor do site, um problema se destacou mais do que a maioria. O WordPress não possui um sistema completo de “largura máxima”. Como usuário, fiquei com poucas opções para definir a largura da área de conteúdo da minha página inicial. Atualmente, os autores de temas podem definir conteúdo personalizado, largura e largura total. No entanto, este sistema é terrivelmente limitante. Não há muito que os autores de temas possam fazer com isso, e esse problema limita diretamente o que os usuários podem fazer nos editores de bloco e de site.

Já escrevi anteriormente sobre a necessidade de uma estrutura de design, que seja personalizável pelos autores do tema. O Tailwind CSS tem um sistema de largura máxima que oferece muita flexibilidade. O WordPress precisa começar a emprestar ideias desses frameworks de design modernos.

Adicionar ícone de bloco

Fazer com que o ícone “Adicionar bloco” aparecesse ao passar o mouse entre os elementos na área de conteúdo padrão foi difícil. Eu tive que posicionar meu mouse em uma posição perfeita para que ele aparecesse. Foi um exercício de frustração onde até o menor movimento fez com que o ícone desaparecesse mais uma vez.

Mudar para o modo Top Toolbar tornou isso muito mais fácil. Estou assumindo que a barra de ferramentas de bloco padrão estava escondendo-a até certo ponto. O problema de mudar para este modo é que minha escolha da barra de ferramentas não foi salva. Cada vez que voltava ao editor do site, tinha que habilitá-lo novamente.

Bloco de consulta

O aspecto mais frustrante de listar postagens em uma página inicial personalizada foi definir um limite. Eu queria definir o número para três. No entanto, o bloco Query não tem opção para fazer isso. Eventualmente, criei um limite falso usando o filtro de categorias, escolhendo um que tivesse apenas alguns posts.

Atualização: É possível definir um limite conforme observado por Nick nos comentários. Há um ícone de “configurações” na barra de ferramentas para definir o número de postagens por página, um deslocamento e o número máximo de páginas. Não tenho certeza por que essas configurações de consulta específicas são separadas das outras na barra lateral. Faz mais sentido que eles sejam agrupados.

Outro aspecto confuso do bloco Query é o filtro de palavras-chave. Tanto quanto sei, o WordPress nunca usou a terminologia “palavra-chave”. Fora dos plugins de SEO, não parece haver nenhum contexto para o que esse filtro faz. Eu estou supondo que funciona como uma palavra-chave de pesquisa.

Estilos globais para todos os blocos

Ao mudar para o painel Global Styles, notei que alguns blocos estavam faltando ao aplicar estilos no nível do bloco. Em particular, eu queria ajustar estilos para o bloco Últimos comentários.

Suponho que apenas blocos com tipografia, cores e outras opções relacionadas ao design apareçam na lista. Isso provavelmente confundirá os usuários finais quando o editor do site chegar ao WordPress. Todos os blocos devem ter opções de estilo que os usuários podem personalizar.

Sem colunas de largura total

Para o conteúdo da minha página inicial, tentei criar um bloco de colunas de largura total. No entanto, as duas colunas individuais eram limitadas em tamanho, apesar de ocuparem 66,67% e 33,33%, respectivamente.

Parece que é uma questão temática. Eu também argumentaria que este é um daqueles momentos em que ter um controle mais direto sobre a largura máxima teria ajudado. Eu realmente queria algo que estivesse entre as larguras total e ampla do tema.

Imagens em destaque

Não há como definir o tamanho da saída da imagem pelo bloco Post Featured Image. A única maneira de obter um tamanho uniforme no momento é pré-cortar as imagens antes de enviá-las para o WordPress.

Não há razão para isso não ser essencialmente uma variação do bloco Image. A única coisa que as imagens em destaque precisam que é diferente é a opção de link para a postagem.