Em resposta à recente controvérsia sobre quanto tempo a nova página inicial do WordPress.org e os designs da página de download devem levar para serem implementados, o YouTuber de Gutenberg, Jamie Marsland, decidiu tentar recriá-lo com o editor de blocos.
Matt Mullenweg comentou sobre os planos para os novos projetos entrarem em desenvolvimento, dizendo que deveria levar “horas, não semanas para implementar”. Seus comentários mais incendiários, que desencadearam conversas subsequentes sobre as realidades de trabalhar com o editor de blocos, fizeram referência aos concorrentes do WordPress.
“É um layout tão básico que é difícil imaginar que uma única pessoa leve mais de um dia no Squarespace, Wix, Webflow ou em um dos construtores de páginas WP”, disse Mullenweg.
Marsland decidiu aceitar o desafio usando Gutenberg. Para este exercício, ele usou o tema padrão mais recente do WordPress, Twenty Twenty-Two. Seus resultados não são idênticos aos novos designs do WordPress, mas são muito próximos, e ele conseguiu criar a página inicial em aproximadamente 20 minutos.
No vídeo (incorporado abaixo), Marsland percorre a criação de cada seção da página inicial. Ele é o que se poderia descrever como um usuário avançado com o editor de blocos. Ele pode embaralhar rapidamente linhas, colunas e grupos, ajustando o preenchimento e as margens conforme necessário, e atribuir a cada seção a cor correspondente ao design. Neste ponto, isso não é algo que a maioria dos usuários comuns do WordPress poderia fazer, e é por isso que o vídeo teve uma resposta tão forte dos espectadores. O canal do YouTube da Marsland está centrado em ajudar os usuários a construir páginas usando Gutenberg e lojas com WooCommerce.
“Minha conclusão foi que é muito fácil concluir rapidamente 95% do projeto, mas são os 5% finais que sempre levam mais tempo na minha experiência”, disse Marsland. “Meu palpite é que foi mais sobre o processo interno que causou os atrasos, mas sem estar envolvido é difícil dizer com certeza. Eu realmente queria mostrar que não era um problema de Gutenberg com a construção do design (como Matt Mullenweg mencionou Wix e Squarespace e outros construtores de páginas WP.)”
Alex Shiels, um colaborador do projeto patrocinado pela Automattic, citou alguns itens não relacionados ao editor de blocos, que causaram os atrasos, incluindo trabalhar para “padrões razoáveis para a11y, capacidade de resposta, compatibilidade do navegador, SEO e desempenho”, bem como colaborando com contribuidores em diferentes continentes.
Em resposta à tentativa de Marsland, o desenvolvedor do WordPress Patrick Boehner comentou sobre como os pequenos detalhes continuam sendo extremamente importantes. “Você pode definitivamente dizer o que foi projetado primeiro versus projetado no editor”, Boehner disse.
Cinco anos após a estreia de Gutenberg no WordPress, os desenvolvedores de temas ainda são desafiados a dar vida a designs que não foram criados com uma abordagem de primeiro bloco em mente.
“Ainda hoje é fundamentalmente difícil ou impossível pegar um design de página tradicionalmente simulado e executar esse design usando blocos”, disse o desenvolvedor do WordPress Jon Brown. “Isto é um problema.
“Claro, os blocos são bons para ‘projetar uma página no navegador’ e aceitar o que você obtém dos blocos, mas os blocos continuam sem a flexibilidade e os controles necessários para produzir um layout responsivo, acessível e perfeito em pixels com base em uma maquete .
“O que costumava levar um dia e uma dúzia de linhas de php e uma dúzia de linhas de css, agora leva semanas para construir blocos personalizados porque os blocos principais não podem ser facilmente ajustados por meio de ganchos e não possuem os controles básicos necessários.”
Os colaboradores do Gutenberg estão avançando ao introduzir a tipografia fluida e estão rastreando uma série de problemas relacionados à melhoria da consistência das ferramentas de design. Enquanto isso, os desenvolvedores de temas estão enfrentando as dores de crescimento necessárias à medida que o editor de blocos amadurece para acomodar aqueles que esperam tornar seus designs instantaneamente responsivos.
“Estou construindo um tema FSE completo do zero e fiquei surpreso com o quanto do meu design consegui replicar com sucesso com o editor, theme.json e CSS personalizado mínimo ou nenhum”, disse o veterano desenvolvedor de temas Mike McAlister . “Claro, foram necessários muitos ajustes, mas fiquei impressionado mesmo assim.
“No entanto, como Jon menciona, no segundo em que você precisa ajustar algo para uma tela menor (ou tela maior, se você se atrever a experimentar o design mobile-first no editor), você atinge uma parede. É particularmente aparente com margin, padding e block gap, que ainda não possuem controles responsivos. Você pode ver isso ajustado via CSS no novo tema em .org.”
A capacidade de resposta é um dos problemas citados por Shiels no motivo pelo qual a implementação dos designs levou mais tempo do que simplesmente recriar o design no editor de blocos.
“No entanto, há indícios de melhorias para a capacidade de resposta”, comentou McAlister. “Tipografia fluida e clamp() certamente ajudaram a controlar a tipografia, mas sempre haverá circunstâncias em que você precisa de um controle ainda mais preciso. Todos os outros construtores de sites resolveram isso, não há razão para pensar que o WordPress não pode ou não quer. (Eu certamente espero que sim, já que cerca de 50-60% do tráfego vem de dispositivos móveis atualmente!)
“Uma das melhores maneiras de superar essas dores de crescimento é ter o máximo possível de comida de cachorro – usando o editor e o FSE para criar o maior número possível de cenários da vida real para descobrir esses pontos cegos”.
O pequeno exercício de Marsland mostra o quão perto você pode chegar de recriar o design do WordPress.org em um curto espaço de tempo se você souber como usar o editor de blocos. Ele foi bem-sucedido em provar que a interface do usuário de criação de páginas do Gutenberg não é o atraso na reprodução de designs criados em outros aplicativos. Em vez disso, são todos os outros itens de lista de verificação relacionados que os desenvolvedores geralmente precisam resolver fora do editor – incluindo acessibilidade, capacidade de resposta e considerações de SEO. Quanto mais perto Gutenberg chegar de reduzir o trabalho extra relacionado à capacidade de resposta e acessibilidade, mais acessível será para usuários regulares que tentam produzir os designs que sonham por conta própria.
