Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Gutenberg e o futuro do WordPress

261 views

Published on

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.

Published in: Internet
  • Essa mudanças com fazer com que muita gente olhe para WordPress com outros olhos, e se rendam a maneira simples e descomplicadas de trabalhar..Parabens pelo material.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • @pahad te confesso que já esperava isso faz tempo também mas entendendo que grandes mudanças demorariam para vir mesmo, em um sistema tão grande e tão preocupado com retrocompatibilidade pra não prejudicar os sites que já existem no modelo atual qualquer mudança maior pode demorar mais mesmo, mas acaba sempre vindo se a comunidade mundial mostrar que realmente precisa disso!
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • S E N S A C I O N A L ! já estava esperando algo assim pro WP! Veio em boa hora!
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

Gutenberg e o futuro do WordPress

  1. 1. Gutenberg 5.0
  2. 2. Quem vos fala Guga Alves ● Happiness Engineer na ● Fundador do TudoParaWP ● Organização do WordCamp RJ 2014 e 2015 ● Organização WP RIO
  3. 3. Gutenberg WordPress 5.0 é o começo de uma nova era. Gutenberg muda como o WordPress será utilizado pelo usuário final
  4. 4. É uma grande mudança
  5. 5. É uma grande mudança
  6. 6. 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".
  7. 7. 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.
  8. 8. 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
  9. 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. 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. 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. 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. 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. 14. WordPress é mesmo fácil para o usuário final? Atualmente o WordPress tem muitas interfaces administrativas diferentes para chegar a um resultado final.
  15. 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. 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. 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. 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. 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. 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. 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. 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. 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. 24. 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.
  25. 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. 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
  26. 26. 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
  27. 27. Três partes de um site
  28. 28. 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.
  29. 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. Design O estilo que transforma seu conteúdo. Cores, fontes, formas de seus blocos de conteúdo.
  30. 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. 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.
  31. 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. Editor
  32. 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 Personalização
  33. 33. Parte 1 - Editor
  34. 34. 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.
  35. 35. 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!
  36. 36. Controle de estilos
  37. 37. WooCommerce Product Blocks Fonte: https://woocommerce.com/2017/11/woocommerce-gutenberg/
  38. 38. https://woocommerce.com/2017/11/woocommerce-gutenberg/ WooCommerce Product Blocks
  39. 39. https://woocommerce.com/2017/11/woocommerce-gutenberg/ WooCommerce Product Blocks
  40. 40. https://matiasventura.com/post/gutenberg-or-the-ship-of-theseus/ Posts Colaborativos
  41. 41. https://matiasventura.com/post/gutenberg-or-the-ship-of-theseus/ Posts Colaborativos
  42. 42. Quick Demo Break Vamos testar? testgutenberg.com
  43. 43. Parte 2 - Personalização
  44. 44. 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.
  45. 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. 46. Sugestões Plugins não instalados mas que já tem funcionalidades que gostariam poderão ser sugeridos durante a busca de novos blocos.
  47. 47. 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/
  48. 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. 49. Estilos no Editor What you see is (really) what you get
  50. 50. Parte 3 - Temas
  51. 51. 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
  52. 52. Fashion Blog Handicraft Ohana Temas para Gutenberg
  53. 53. 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.
  54. 54. Prepare-se!
  55. 55. 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.
  56. 56. 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)
  57. 57. 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.
  58. 58. RAMP em ação Page/Post IDPost Type
  59. 59. If you don't like change, you're going to like irrelevance even less. General Eric Shinseki “
  60. 60. 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/
  61. 61. Créditos Slides originais feitos por Chris Diehl - Happiness Engineer do WordPress.com - e apresentado no Philadelphia WordPress Meetup
  62. 62. Perguntas? Slides disponíveis em slideshare.net/gugaalves

×