A nova interface de edição do WordPress, o Gutenberg, será oficialmente lançada no WordPress 5.0 e nesta apresentação você poderá entender como isso mudará todo o mercado de desenvolvimento WordPress para melhor. Palestra ministrada no WordPress Meetup Rio de Janeiro em 24 de maio de 2018.

1. Gutenberg
5.0

2. Quem vos fala
Guga Alves
● Happiness Engineer na
● Fundador do TudoParaWP
● Organização do WordCamp RJ 2014 e 2015
● Organização WP RIO

4. Gutenberg
WordPress 5.0 é o começo de
uma nova era.
Gutenberg muda como o
WordPress será utilizado pelo
usuário final

5. É uma grande mudança

6. É uma grande mudança

7. Mudança
Existe uma razão válida?
Gutenberg pretende transformar o
WordPress com uma nova
experiência de utilização (UX),
idealmente para evitar inovações
competitivas e eliminar quinze
anos de "dívida técnica".

8. Disrupção
Tevya Washburn trouxe um grande ponto no
artigo Why Gutenberg and Why Now?
Inovação Disruptiva - Grandes pioneiros deixam
de inovar e correm o risco de ser surpreendidos
por novas startups
Tevya argumenta que estamos prontos para uma
ruptura de nossos concorrentes.
Gutenberg pretende perturbar o nosso próprio
mercado, esperamos que seja para melhor.

9. Uma das principais razões para adicionar um novo
editor é por causa da mudança nas tendências de
criação de sites, como em sites como Wix, Medium,
Squarespace e até mesmo aplicativos como o
Mailchimp.
A razão pela qual esses serviços estão obtendo
sucesso é porque os processos de criação de site /
produto são mais intuitivos para usuários não
técnicos.
Um fluxo de trabalho intuitivo é atraente para
iniciantes e especialistas.
Evoluir com o mercado

10. Uma das principais razões para adicionar um novo
editor é por causa da mudança nas tendências de
criação de sites, como em sites como Wix, Medium,
Squarespace e até mesmo aplicativos como o
Mailchimp.
A razão pela qual esses serviços estão obtendo
sucesso é porque os processos de criação de site /
produto são mais intuitivos para usuários não
técnicos.
Um fluxo de trabalho intuitivo é atraente para
iniciantes e especialistas.
Evoluir com o mercado

11. Uma das principais razões para adicionar um novo
editor é por causa da mudança nas tendências de
criação de sites, como em sites como Wix, Medium,
Squarespace e até mesmo aplicativos como o
Mailchimp.
A razão pela qual esses serviços estão obtendo
sucesso é porque os processos de criação de site /
produto são mais intuitivos para usuários não
técnicos.
Um fluxo de trabalho intuitivo é atraente para
iniciantes e especialistas.
Evoluir com o mercado

12. Uma das principais razões para adicionar um novo
editor é por causa da mudança nas tendências de
criação de sites, como em sites como Wix, Medium,
Squarespace e até mesmo aplicativos como o
Mailchimp.
A razão pela qual esses serviços estão obtendo
sucesso é porque os processos de criação de site /
produto são mais intuitivos para usuários não
técnicos.
Um fluxo de trabalho intuitivo é atraente para
iniciantes e especialistas.
Evoluir com o mercado

13. Uma das principais razões para adicionar um novo
editor é por causa da mudança nas tendências de
criação de sites, como em sites como Wix, Medium,
Squarespace e até mesmo aplicativos como o
Mailchimp.
A razão pela qual esses serviços estão obtendo
sucesso é porque os processos de criação de site /
produto são mais intuitivos para usuários não
técnicos.
Um fluxo de trabalho intuitivo é atraente para
iniciantes e especialistas.
Evoluir com o mercado

14. Uma das principais razões para adicionar um novo
editor é por causa da mudança nas tendências de
criação de sites, como em sites como Wix, Medium,
Squarespace e até mesmo aplicativos como o
Mailchimp.
A razão pela qual esses serviços estão obtendo
sucesso é porque os processos de criação de site /
produto são mais intuitivos para usuários não
técnicos.
Um fluxo de trabalho intuitivo é atraente para
iniciantes e especialistas.
Evoluir com o mercado

15. WordPress é mesmo fácil para o usuário final?
Atualmente o WordPress tem muitas interfaces
administrativas diferentes para chegar a um
resultado final.

16. WordPress é mesmo fácil para o usuário final?
Atualmente o WordPress tem muitas interfaces
administrativas diferentes para chegar a um
resultado final.

17. WordPress é mesmo fácil para o usuário final?
Atualmente o WordPress tem muitas interfaces
administrativas diferentes para chegar a um
resultado final.

18. WordPress é mesmo fácil para o usuário final?
Atualmente o WordPress tem muitas interfaces
administrativas diferentes para chegar a um
resultado final.

19. WordPress é mesmo fácil para o usuário final?
Atualmente o WordPress tem muitas interfaces
administrativas diferentes para chegar a um
resultado final.

20. WordPress é mesmo fácil para o usuário final?
Atualmente o WordPress tem muitas interfaces
administrativas diferentes para chegar a um
resultado final.

21. WordPress é mesmo fácil para o usuário final?
Atualmente o WordPress tem muitas interfaces
administrativas diferentes para chegar a um
resultado final.

22. WordPress é mesmo fácil para o usuário final?
Atualmente o WordPress tem muitas interfaces
administrativas diferentes para chegar a um
resultado final.

23. WordPress é mesmo fácil para o usuário final?
Atualmente o WordPress tem muitas interfaces
administrativas diferentes para chegar a um
resultado final.

24. WordPress é mesmo fácil para o usuário final?
Atualmente o WordPress tem muitas interfaces
administrativas diferentes para chegar a um
resultado final.

25. WordPress é mesmo fácil para o usuário final?
Atualmente o WordPress tem muitas interfaces
administrativas diferentes para chegar a um
resultado final.
Embora não seja um editor ‘frontend’,
Gutenberg busca trazer a mesma interface para
gerenciar temas e conteúdo, reduzindo a
interface para menos telas diferentes.

26. WordPress é mesmo fácil para o usuário final?
Atualmente o WordPress tem muitas interfaces
administrativas diferentes para chegar a um
resultado final.
Embora não seja um editor ‘frontend’,
Gutenberg busca trazer a mesma interface para
gerenciar temas e conteúdo, reduzindo a
interface para menos telas diferentes.
O benefício aqui é o usuário ter mais controle
do conteúdo sem necessidade de áreas de
widget externas, shortcodes pouco claros e
diferenças do editor para o resultado final

27. Fases
Os 3 focos do Gutenberg
I want to announce as the three
focuses for the coming year, there
will be Gutenberg editing,
Gutenberg customization, and a
Gutenberg theme.
Matt, State of the Word 2017

28. Três partes de um site

29. Três partes de um site
Conteúdo
O filé do site, a razão pelo qual seu
público vai até seu site.
Compreende parágrafos, listas,
recursos de mídia e ideias originais.

30. Três partes de um site
Conteúdo
O filé do site, a razão pelo qual seu
público vai até seu site.
Compreende parágrafos, listas,
recursos de mídia e ideias originais.
Design
O estilo que transforma seu conteúdo.
Cores, fontes, formas de seus blocos
de conteúdo.

31. Três partes de um site
Conteúdo
O filé do site, a razão pelo qual seu
público vai até seu site.
Compreende parágrafos, listas,
recursos de mídia e ideias originais.
Layout
Como o conteúdo é organizado em
cada página e no site como um todp?
Utilizamos colunas? Onde aparecem
as imagens em destaque? Qual é o
fluxo de informação? Como os
anúncios aparecem?
Design
O estilo que transforma seu conteúdo.
Cores, fontes, formas de seus blocos
de conteúdo.

32. Três partes de um site
Conteúdo
O filé do site, a razão pelo qual seu
público vai até seu site.
Compreende parágrafos, listas,
recursos de mídia e ideias originais.
Layout
Como o conteúdo é organizado em
cada página e no site como um todp?
Utilizamos colunas? Onde aparecem
as imagens em destaque? Qual é o
fluxo de informação? Como os
anúncios aparecem?
Design
O estilo que transforma seu conteúdo.
Cores, fontes, formas de seus blocos
de conteúdo.
Editor

33. Três partes de um site
Conteúdo
O filé do site, a razão pelo qual seu
público vai até seu site.
Compreende parágrafos, listas,
recursos de mídia e ideias originais.
Layout
Como o conteúdo é organizado em
cada página e no site como um todp?
Utilizamos colunas? Onde aparecem
as imagens em destaque? Qual é o
fluxo de informação? Como os
anúncios aparecem?
Design
O estilo que transforma seu conteúdo.
Cores, fontes, formas de seus blocos
de conteúdo.
Editor Personalização

34. Parte 1 - Editor

35. Editor do Gutenberg
A primeira mudança no Gutenberg é o editor de
blocos.
Tudo no WordPress vira um ‘bloco’ com uma
interface baseada em JavaScript que reune
todas as edições possíveis.
Tchau para shortcodes, códigos de embed ou
campos misteriosos para os usuários.
Feito com React framework.

36. Editor do Gutenberg
Uma nova oportunidade para desenvolvedores de
plugins é a criação de blocos personalizados.
Array Themes criou um conjunto de blocos em
um plugin com estilo e funcionalidades criadas
por eles.
No Gutenberg, você poderá instalar novos blocos
com plugins para estender suas opções de
edição.
Ou criar o seu próprio!

37. Controle de estilos

38. WooCommerce Product Blocks
Fonte: https://woocommerce.com/2017/11/woocommerce-gutenberg/

39. https://woocommerce.com/2017/11/woocommerce-gutenberg/
WooCommerce Product Blocks

40. https://woocommerce.com/2017/11/woocommerce-gutenberg/
WooCommerce Product Blocks

41. https://matiasventura.com/post/gutenberg-or-the-ship-of-theseus/
Posts Colaborativos

42. https://matiasventura.com/post/gutenberg-or-the-ship-of-theseus/
Posts Colaborativos

43. Quick Demo Break
Vamos testar?
testgutenberg.com

44. Parte 2 - Personalização

45. Templates
Como visto na palestra da Mel Choyce
na LoopConf, desenvolvedores de
temas poderão focar em criar
templates para seus usuários e definir
como os blocos aparecerão para eles.
Essa abordagem permite o usuário
apenas “preencher as lacunas " no
editor sem precisar navegar por telas
diferentes.

46. Templates
Como visto na palestra da Mel Choyce
na LoopConf, desenvolvedores de
temas poderão focar em criar
templates para seus usuários e definir
como os blocos aparecerão para eles.
Essa abordagem permite o usuário
apenas “preencher as lacunas " no
editor sem precisar navegar por telas
diferentes.

47. Sugestões
Plugins não instalados mas que já tem
funcionalidades que gostariam poderão ser
sugeridos durante a busca de novos blocos.

48. Evolução do Personalizador
Personalização poderá ser feita diretamente no editor
Um problema atual com o editor clássico é que os
modelos de página (Page Templates) não podem ser
visualizados, a página precisa ser atualizada para ver
as alterações.
Com o Gutenberg, ao invés de uma importação de
xml, como é o caso na maioria dos temas
profissionais, imagine que o tema vem com modelos
de bloco que um usuário pode simplesmente
preencher.
https://humanmade.com/2018/01/22/gutenberg-on-humanmade-com/

49. Evolução do Personalizador
Personalização poderá ser feita diretamente no editor
Um problema atual com o editor clássico é que os
modelos de página (Page Templates) não podem ser
visualizados, a página precisa ser atualizada para ver
as alterações.
Com o Gutenberg, ao invés de uma importação de
xml, como é o caso na maioria dos temas
profissionais, imagine que o tema vem com modelos
de bloco que um usuário pode simplesmente
preencher.
https://humanmade.com/2018/01/22/gutenberg-on-humanmade-com/

50. Estilos no Editor
What you see is (really) what you get

51. Parte 3 - Temas

52. Gutenberg vai mudar o cenário do WordPress.
Os temas passarão por uma mudança de papel até
certo ponto já que Gutenberg assumirá uma boa
parte da funcionalidade do layout.
Em vez de controlar explicitamente o layout, os temas
provavelmente sugeririam layouts com modelos.
No final, um usuário pode controlar o layout de
qualquer tema do editor.
Temas para Gutenberg

53. Fashion Blog Handicraft Ohana
Temas para Gutenberg

54. Temas para Gutenberg
Desenvolvedores de temas provavelmente se
concentrarão mais em tipografia, cores e estilos de
blocos.
Um tema pode usar layouts de blocos pré-construídos
para sugerir layouts que funcionam melhor com o estilo
do tema, o que coloca os temas em uma posição mais
opinativa, em vez de descrever explicitamente como o
site ficará.
A ideia é que o usuário não seja mais bloqueado no
layout e tenha um pouco mais de capacidade/liberdade
para personalizar o site.

55. Prepare-se!

56. WordPress é utilizado de formas diferentes
O WordPress é usado de várias formas:
1. Sites de Startups
2. Agências
3. Empresas tradicionais
4. Blogs
Cada parte tem diferentes maneiras de implementar um site
WordPress, e todas elas têm necessidades diferentes.
À medida que os projetos crescem e se tornam mais
personalizados, eles travados com a versão personalizada do
WordPress, o que dificulta a mudança para um novo editor.

57. E se eu não estiver pronto?
Se você não estiver pronto, você pode atrasar
um pouco o inevitável com estes plugins:
Classic Editor (já disponível)
VIP RAMP (será lançado ainda)

58. Classic Vs RAMP
O plugin Classic Editor * simplesmente
desabilitará o Gutenberg e mostrará o editor
clássico. Ative o plugin e o Gutenberg não
aparecerá
* Solução temporária para a migração, este
plugin poderá parar de ser atualizado depois de
muito tempo do lançamento do Gutenberg.
O plugin RAMP é como um editor clássico PRO.
Gutenberg será habilitado seletivamente por
Post ID ou Post Type.
● Você pode definir o Gutenberg para nunca
ou sempre carregar.
● Funciona tanto com o Gutenberg
enquanto plugin e quando ele for fundido
ao core.
● Ao ser habilitado, deve ser configurado,
tudo está desabilitado por padrão.

59. RAMP em ação
Page/Post IDPost Type

60. If you don't like change, you're going to like
irrelevance even less.
General Eric Shinseki
“

61. Leitura adicional
Gutenberg News - https://gutenberg.news
Is Gutenberg The End Or A New Beginning For WordPress? - https://deliciousbrains.com/wordpress-gutenberg/
Gutenberg on Github - https://github.com/WordPress/gutenberg
Why Gutenberg and Why Now? - https://wptavern.com/why-gutenberg-and-why-now
Customizing the Future - https://loopconf.com/talk/customizing-the-future/
Gutenberg on Humanmade.com - https://humanmade.com/2018/01/22/gutenberg-on-humanmade-com/
Developer courses by Zac Gordon - https://gutenberg.courses/development/
Merge Milestones on make.wordpress.org - https://make.wordpress.org/core/2018/04/17/gutenberg-component-organisation-update/
Gutenberg Plugin Compatibility Database https://make.wordpress.org/core/2018/03/01/introducing-the-gutenberg-plugin-compatibility-database/

62. Créditos
Slides originais feitos por Chris Diehl - Happiness Engineer do
WordPress.com - e apresentado no Philadelphia WordPress
Meetup

63. Perguntas?
Slides disponíveis em slideshare.net/gugaalves