O documento discute a experiência de um desenvolvedor com a ferramenta Gutenberg do WordPress, destacando suas qualidades como a centralização do fluxo de trabalho e blocos básicos, bem como desafios como problemas de interface. O desenvolvedor teve sucesso ao replicar protótipos comerciais usando o editor padrão e suítes de blocos gratuitas, embora tenha encontrado problemas de alinhamento entre containers. Ele pretende continuar usando Gutenberg caso a caso.

1. GUTENBERG
EM PRODUÇÃO: QUALIDADES, DESAFIOS
JAMES MOTA

2. JAMES MOTA
● Usuário final WordPress desde 2009
● Participação e autoria em cerca de
duzentos projetos WP e WooCommerce
desde 2014
● Designer Industrial pela Universidade do
Estado de Santa Catarina

3. Por que Gutenberg?

4. ● Analisar em relação a ferramentas
e projetos anteriores
● Testar evolução da plataforma WP
● Verificar performance
● Desafio de replicar duas
prototipagens comerciais para
WordPress
Testando Gutenberg

5. Referências iniciais
Newsletters Core WP

6. Referências iniciais
Efeito pandemia =)

7. ● Projetos executados durante
primeiro semestre de 2020
● Temas, plugins e blocos do
repositório wordpress.org
(gratuitos)
● Escolhido tema com suíte de
blocos própria, visando maior
compatibilidade possível
Pontos de partida

8. Impressões durante uso

9. O editor padrão
● Centraliza mais o fluxo de trabalho
do que o editor antigo. Menos “vai e
vem” de outras telas (ex: shortcodes,
construtor de página, etc.).
● Oferece os blocos básicos. Controles
e opções simples. Poderia ter mais
controles para responsividade
● Problemas pontuais de interface e
usabilidade
● Ritmo das atualizações aumentou
muito nos últimos meses
● Foi usado com frequência

10. Expandindo o editor
padrão com suítes de
blocos
Esses conjuntos de blocos adicionam
funcionalidades ao Gutenberg
Imagem ilustrativa. Seu projeto pode
precisar somente de uma ou outras
suítes de blocos gratuitas.
Repositório do wordpress.org em
constante atualização!

11. Destaques

12. Impressões
● Suítes de blocos acrescentam mais
funcionalidades, opções e controles
de responsividade
● Ajustes finos e precisos

13. Impressões
● Editor padrão e suítes de blocos
podem se complementar
● Blocos reaproveitáveis em diferentes
partes do website

14. Impressões
● Bibliotecas de seções e páginas, é
possível aproveitar como ponto de
partida

15. Impressões
● Colunas

16. Impressões
● Texto avançado

17. Em um projeto, duas suítes de blocos foram suficientes
Em outro, três, para atingir fidelidade ao protótipo recebido
PROTÓTIPO EM ADOBE XD EDITOR PADRÃO DO WORDPRESS

18. Blocos que mais usei
● Cabeçalhos de página, h1, h2,
parágrafo, colunas, depoimentos,
accordions, postagens recentes
● Outros disponíveis: formulários,
animações, html
● Lançamentos recentes: slider, grids e
outros...

19. Impressões
● Alinhamentos/espaçamentos entre
os containers dos temas e dos blocos
das suítes requer atenção (header,
body, sections, divs, columns, footer).
● Problemas pontuais de interface e
usabilidade
● Prévia de página em tempo real: boa
em alguns blocos, regular em outros

20. Revisando a
responsividade
durante o projeto

21. Revisando a
responsividade
durante o projeto

22. Comparando instalações
Construtores de página: a partir de 16000 kb descompactado

23. Links interessantes
https://wordpress.org/gutenberg/
https://wordpress.org/plugins/gutenberg/
https://wordpress.org/themes/tags/block-styles
https://gutenberghub.com/
https://gutenberghub.com/blocks/
https://templates.gutenberghub.com/
https://athemes.com/collections/best-blocks-plugins-for-wordpress/
https://roadtoblogging.com/best-wordpress-block-editor-plugins/
https://gutenberghub.com
https://shareablock.com
https://www.wpdownloadmanager.com/download/gutenberg-blocks/
https://www.aprendegutenberg.com/
https://github.com/Automattic/block-experiments
https://ayudawp.com/como-crear-patrones-de-bloques/
https://lp634305.livejournal.com/561506.html

24. Pretende usar Gutenberg novamente?
➔ Sim, é mais uma opção. Atingido 90-95% de fidelidade aos protótipos.
Analisar caso a caso, de acordo com briefing, protótipo recebido ou
funcionalidades desejadas. Universo de ferramentas em WP está
cada vez maior: headless, soluções static, APIs, etc.
Sobre performance
➔ Boa em relação a outras ferramentas que avaliei. Principalmente no
protótipo replicado que usou duas suítes de blocos e menos
animações. Mais testes previstos: Replicar webdesign de outra
ferramenta para Gutenberg, WP só com uma suíte de blocos, WP só
com editor padrão, etc.
Sugestões
➔ Opção de instalar somente um bloco, e não a suíte inteira: sugerindo
em fóruns da comunidade.

25. Perguntas?

26. jamesmota76@gmail.com
linktr.ee/jamesmota
Obrigado!