Como um estúdio de jogos com sede em Munique está usando WordPress e Gutenberg para alimentar seu site

Mimimi, um estúdio de jogos premiado com sede em Munique, lançou um novo site WordPress que fornece um estudo de caso interessante de Gutenberg na natureza. Embora você não consiga saber a partir do frontend, nos bastidores o novo editor baseado em blocos está alimentando o layout com blocos personalizados, permitindo que a equipe Mimimi atualize facilmente várias seções de seu site.

Luehrsen Heinrich, uma agência de publicidade local, construiu o site com um tema personalizado e sete blocos adaptados para atender aos requisitos de edição da equipe Mimimi.

“A tarefa geral era criar um site elegante que fosse muito fácil e rápido de manter e que talvez mais tarde ganhasse uma seção de blog/notícias”, disse Hendrik Luehrsen, CEO da Luehrsen Heinrich. “Sabíamos que nosso cliente tinha pessoas incrivelmente criativas e com experiência em tecnologia que confiavam em nós. Isso nos deixou confiantes para entrar em Gutenberg.”

O site usa um bloco de fundo que permite aos editores criar diferentes padrões de fundo e separadores ondulados. Luehrsen disse que funciona com 'InnerBlocks', semelhante a colunas, para que possa hospedar qualquer outro bloco.

O site também possui um bloco Discord personalizado que busca dinamicamente algumas configurações para exibir um conjunto de usuários do Discord, que Mimimi usa para comunicação interna. O bloco exibe uma lista de equipe atualizada. As mídias sociais e os blocos de jogos permitem que os editores atualizem facilmente textos e imagens com o layout já definido.

“Tenho certeza de que poderíamos fazer o mesmo layout em cerca de 80% combinando colunas, parágrafos e imagens, mas não queríamos que nosso cliente mexesse como no MS Word quando você tenta colocar uma imagem”, disse Luehrsen . “Então, criar um bloco de layout simples era uma coisa lógica.”

O site da Mimimi também usa um bloco de inscrição personalizado do Mailchimp e um bloco espaçador personalizado que oferece mais flexibilidade e pontos de interrupção responsivos.

“No geral, nós (e nossos clientes) estamos muito felizes com o resultado”, disse Luehrsen. “Podemos ver o futuro do WordPress à frente com este editor baseado em blocos. Mas ainda há um longo caminho a percorrer até que realmente não tenhamos mais nada para suavizar. Há certas coisas que ainda exigem muito trabalho.”

De uma perspectiva de desenvolvimento, Luehrsen disse que sua equipe ainda luta com os estilos de back-end para o editor e que os estilos de front-end e back-end diferem muito por causa disso. Eles também ainda não encontraram uma maneira estável e sustentável de aplicar estilos globais ao editor Gutenberg. Além dessas questões pendentes, a agência gostou de construir para o novo editor e tem outro produto da página Gutenberg sendo lançado em breve para um conjunto diferente de clientes.

Experiência Gutenberg da Mimimi Games: Editores apreciam o conceito de bloco, mas ainda encontram problemas de usabilidade

Johannes Roth, CEO da Mimimi Games, disse que sua equipe já usou o WordPress no passado e vê o Gutenberg como uma grande melhoria na edição de conteúdo.

“Eu absolutamente amo isso, honestamente!” disse Roth. “É muito mais fácil entender a configuração da página e personalizá-la. Se o editor Gutenberg obtiver algumas melhorias na experiência do usuário, definitivamente o vejo como o novo estado da arte para a manutenção de páginas. Mas sabendo que ainda não foi lançado oficialmente, foi super robusto e fácil de entender do meu ponto de vista.”

Roth disse que sua equipe aprecia a configuração do bloco, a capacidade de reorganizar o conteúdo, ter pequenos pedaços de conteúdo para trabalhar e ter opções personalizadas por bloco.

“Há menos distrações com barras de ferramentas estranhas e o foco está no conteúdo”, disse Roth. “Também se parece mais com a forma como devemos pensar em dividir a parte de formatação e decoração do conteúdo, bem como configurar páginas adequadas para facilitar o SEO”.

Roth identificou duas coisas que a equipe Mimimi sente falta do editor anterior:

• Pressionar tab para recuar listas de marcadores e shift tab para reverter
• Usando ctrl+a para selecionar rapidamente todo o texto dentro de um bloco (às vezes seleciona a página inteira, o que não ajuda).

“O maior problema com a usabilidade até agora tem sido a combinação de blocos e colunas, o que às vezes torna muito difícil acertar o ícone '…' porque as zonas de passagem do mouse ficam empilhadas”, disse Roth.

Habilitando contadores de histórias na web moderna: por que Luehrsen Heinrich deu o salto para o desenvolvimento de Gutenberg como uma agência

Luehrsen disse que sua agência decidiu embarcar no trem de Gutenberg no ano passado no WordCamp Europe, depois de abandonar suas próprias ideias para criar um novo construtor de páginas.

“Um ou dois meses antes do WCEU em Paris, estávamos sentados em um conceito e uma versão alfa do nosso próprio sistema de construção de páginas que era assustadoramente semelhante à abordagem baseada em blocos”, disse Luehrsen. “Aquela sessão de perguntas e respostas de Matt nos fez perceber rapidamente que nosso projeto já estava obsoleto. Tivemos a sorte de passar rapidamente pelos cinco estágios do luto (este post sobre dados estruturados deve ter sido uma “negociação”). Reordenamos nossas prioridades e começamos a trabalhar com e em Gutenberg no final de outubro ou novembro de 2017.”

A Luehrsen Heinrich é uma pequena agência de apenas quatro pessoas que estão envolvidas com Gutenberg de maneiras diferentes. Luehrsen é um colaborador ativo do projeto, enviando seu primeiro PR durante as férias de Natal. A equipe também tem um desenvolvedor que conhece a criação de blocos por dentro e por fora, um designer que projeta o UX e o estilo de seus blocos e um gerente de projeto que trabalha com os clientes em seus requisitos de edição do Gutenberg.

Luehrsen disse que ser um colaborador do Gutenberg ajudou imensamente na criação de blocos de aprendizado, apesar de não ter experiência anterior com React e ES6.

“Trabalhar com Gutenberg, contribuir para o projeto e obter feedback imediato da incrível equipe do Gutenberg, nos ajudou muito a iniciar nosso processo”, disse Luehrsen. “Nosso processo atual de criação de blocos se baseia fortemente no trabalho que Gary, Adam, Matias e todos os outros fizeram, talvez com a exceção de que estamos usando LESS internamente, e não SCSS. Mas, desde a estrutura de pastas, ao processo de compilação, à estruturação do arquivo, tentamos seguir o estilo de repositório do Gutenberg o mais próximo possível, pois isso facilita muito a depuração e a localização de problemas.”

Depois de dar o salto com sucesso para construir o novo site da Mimimi Games com Gutenberg, a equipe de Luehrsen está pronta para construir mais sites de clientes com o novo editor. Ele vê isso como uma maneira de oferecer uma melhor experiência ao usuário com um valor melhor para o cliente.

“Nossos clientes compartilham nossa crença de que contar histórias na web moderna é muito mais do que apenas escrever texto”, disse Luehrsen. “O TinyMCE como editor de 'Rich Text' fez um trabalho incrível, mas ainda assim, combinar diferentes tipos de mídia para uma história coerente era uma bagunça com metaboxes, shortcodes e, às vezes, para teasers, você tinha que sair da tela de edição. Gutenberg combina tudo isso de uma maneira agradável e discreta. E, como sempre: se você conseguir um bom resultado de forma mais rápida, esse tempo economizado é o que o cliente está comprando.”