Taller de Gutenberg, Congreso Web

1. Taller introducción a
Gutenberg
Congreso web
@chicho_zar

2. Introducción a Gutenberg (fases 1 y 2)
Cosas chulas que podemos hacer a día de hoy
Práctica, desarrollando una landing page
Futuro de Gutenberg (fases 3 y 4)
@chicho_zar

3. Congreso web
Israel Escuer
Desarrollador WordPress y WooCommerce
Freelance
Organizador de meetup de WordPress y
WordCamp Zaragoza
@chicho_zar
israelescuer.com

4. Introducción a Gutenberg
Congreso web
@chicho_zar

5. Es el nuevo editor de
contenido que viene con
WordPress a partir de la
actualización de WordPress 5.0
¿Qué es Gutenberg?
El objetivo principal es mejorar la
experiencia del usuario y
conseguir que la edición sea igual
al resultado final.
WYSIWYG
Congreso web
@chicho_zar

6. Congreso web
Experiencia de Usuario
editor antiguo
• Difícil de construir páginas
complejas
• Anticuado y Lento
• Lo que se ve no necesariamente
es lo que obtienes, dependerá
de diferentes factores...
@chicho_zar

7. Congreso web
• [Shortcodes]
• Page Builders
• Plugins
• Custom Fields
• HTML / CSS / PHP
?
@chicho_zar

8. Congreso web
Nueva filosofía en la creación de
contenido
@chicho_zar

9. Congreso web
-Diseñadores
-Editores de contenido
-Copywritters
-Desarrolladores
-Clientes
-…
WordPress tenia que
evolucionar
Mejorar la experiencia
de cualquier usuario

10. Congreso web
A tener en cuenta sobre el
proyecto de Gutenberg
@chicho_zar

11. Gutenberg sigue
evolucionando, la
mejor manera de
seguir las fases del
proyecto es instalando
el plugin.
Congreso web
@chicho_zar

12. Congreso web
PHP 5.6
obligado desde
Abril y PHP 7.0
a partir de
finales de 2019.
@chicho_zar

13. Congreso web
Todos los temas son compatibles de forma
predeterminada
@chicho_zar

14. Congreso web
Todos los temas son compatibles de forma
predeterminada
Puedes desactivar Gutenberg con un plugin

15. Congreso web
Soporte para meta-box
@chicho_zar

16. Congreso web
Soporte para meta-box
Gutenberg es compatible con ACF
@chicho_zar

17. Congreso web
Soporte para meta-box
Gutenberg es compatible con ACF
Gutenberg será el editor predeterminado
para todos los tipos de publicaciones
personalizadas
@chicho_zar

18. Congreso web
Soporte para meta-box
Gutenberg es compatible con ACF
Gutenberg será el editor predeterminado
para todos los tipos de publicaciones
personalizadas (productos, eventos…)
Soporta Shortcodes
@chicho_zar

19. Congreso web
La accesibilidad es realmente importante
para Gutenberg
@chicho_zar

20. Congreso web
@chicho_zar
¿Y por qué Gutenberg y no un
constructor visual?

21. Congreso web
@chicho_zar
¿Y por qué Gutenberg y no un
constructor visual?
WPO
Lock-in

22. Congreso web
Interface de Gutenberg
@chicho_zar

23. Congreso web
@chicho_zar

24. Barra de herramientas superior
Modo de enfoque y modo a pantalla completa
Experiencia de
edición limpia y
cómoda
Congreso web
@chicho_zar

25. Congreso web
Editor de código Gestor de
Bloques
Gestionar todos los
bloques reutilizares
Atajos de teclado
Opciones
Accesibilidad
@chicho_zar

26. Enlaces Permanentes
Version 3.1.1 Congreso web

27. Congreso web
BLOQUES COMUNES
@chicho_zar

28. Párrafo
Congreso web
@chicho_zar

29. Encabezados
Congreso web
@chicho_zar

30. Lista ordenada y Lista
desordenada
Congreso web
@chicho_zar

31. Cita
Congreso web
@chicho_zar

32. Imagen
Align Full
Align Wide
Congreso web
@chicho_zar

33. Galeria de Imagens
Congreso web
@chicho_zar

34. Congreso web
Fondo (Imagen cover)
Punto focal
Parallax
Capa superpuesta
@chicho_zar

35. Congreso web
Audio
@chicho_zar

36. Congreso web
Video
@chicho_zar

37. Congreso web
Archivo
@chicho_zar

38. Congreso web
Bloques de Formato
@chicho_zar

39. Congreso web
Código
@chicho_zar

40. Congreso web
HTML
Vista Previa
@chicho_zar

41. Congreso web
Bloque Clásico
Es el comodín para cuando algo no va bien
@chicho_zar

42. Congreso web
Convertir a Bloques
@chicho_zar

43. Congreso web
Bloque Preformateado
@chicho_zar

44. Congreso web
Cita
Estilos
@chicho_zar

45. Congreso web
Tabla
Antes teníamos que
usar un plugin
@chicho_zar

46. Congreso web
Verso
@chicho_zar

47. Congreso web
Elementos de Diseños
@chicho_zar

48. Congreso web
Columnas
@chicho_zar

49. Congreso web
Medios + Textos
Invertir Posición
Responsive
@chicho_zar

50. Congreso web
Botón
Antes se necesitaba
un plugin o hacerlo
por código
@chicho_zar

51. Congreso web
Separador
@chicho_zar

52. Congreso web
Espaciador
Drag & drog
Nos sirve para dar aire en nuestros diseños
@chicho_zar

53. Congreso web
Grupo
@chicho_zar

54. Congreso web
Leer mas
Salto de Página
@chicho_zar

55. Congreso web
Incrustrados
@chicho_zar

56. Congreso web
Twitter
@chicho_zar

57. Congreso web
Facebook
Instagram
@chicho_zar

58. Congreso web
Y muchos mas…
@chicho_zar

59. Congreso web
Bloque de incrustado
@chicho_zar

60. Congreso web
Widgets y Shortcodes
@chicho_zar

61. Congreso web
Archivos
@chicho_zar

62. Congreso web
Categorias
@chicho_zar

63. Congreso web
Comentarios
@chicho_zar

64. Congreso web
Últimas Entradas
@chicho_zar

65. Congreso web
Shortcodes
[login_form]
[restrict]
[gallery ids = "1, 2, 3"]
[su_column size="1/2"] Contenido [/su_column]
@chicho_zar

66. Congreso web
Widget Heredado
@chicho_zar

67. Congreso web
Calendario
@chicho_zar

68. Congreso web
RSS
https://wplift.com/feed
@chicho_zar

69. Congreso web
Buscador
@chicho_zar

70. Congreso web
Cosas chulas que podemos hacer
con Gutenberg
@chicho_zar

71. Congreso web
Bloques Reutilizables
@chicho_zar

72. Congreso web
Eventos
Informar de Cursos, seminarios, webinars…
@chicho_zar

73. Congreso web
Yoast Seo
@chicho_zar
Bloque de datos estructurados
How to / Faq
Otros bloques por llegar de anuncios de trabajo, eventos, y recetas

74. Congreso web
Recipe Card Blocks by WPZOOM
@chicho_zar

75. Congreso web
Galeria de Imagenes
Masonry
Block Gallery
@chicho_zar

76. Congreso web
Formulario
(Ninja Forms, Gravity Forms)
@chicho_zar

77. Congreso web
Leads, Suscriptores…
Call to Action
Landing Pages
@chicho_zar

78. Congreso web
Hero
Leadmagnet
@chicho_zar

79. Congreso web
WooCommerce
@chicho_zar

80. Congreso web
Afiliados
(Amazon Kindle)
@chicho_zar

81. Congreso web
Google Fonts
@chicho_zar

82. Congreso web
Animaciones
@chicho_zar

83. Congreso web
Textos dinámicos
@chicho_zar
Plugin Ghostwriter

84. Congreso web
Scratchpad
@chicho_zar

85. Congreso web
Editorskit
- Opciones de visibilidad de dispositivos
- Logica condicional
@chicho_zar

86. Congreso web
Enable Gutenberg Theme Support
Añade todo lo
necesario para que un
tema este preparado
para Gutenberg
@chicho_zar

87. Congreso web
Grid Layout Builder
(Estilo magazine)
@chicho_zar

88. Congreso web
Block Background
@chicho_zar

89. Congreso web
Post Layout
@chicho_zar

90. Congreso web
Juxtapose Block
@chicho_zar

91. Congreso web
Block based Portfolio
@chicho_zar

92. Congreso web
Colecciones de Bloques
@chicho_zar

93. Congreso web
- Table of content
- Post Masonry
- Post Grid
- Post Carrusel
- Section
- Social Share
- Content timeline
- Post timeline
- Call to action
- Advanced columns
- Integración de estilos con
Gravity Forms y Contact
Form 7
Ultimate Addons
For Gutenberg (22 Bloques)
@chicho_zar

94. Congreso web
- Icon
- Accordion
- Tabs
- Row/Layout
- Info Box
Kadence Blocks
(10 Bloques)
@chicho_zar

95. Congreso web
- Formulario
- Hero
- Click to tweet
- Gist
- Shape divider
- Gifs animados
- Media Card
- Features
coblocks
(18 Bloques)
@chicho_zar

96. Congreso web
- Newsletter Block
- Pricing table
- Post Grid Block
- Author Profile
Atomic Blocks
(18 Bloques)
@chicho_zar

97. Congreso web
- Plugin Card
- Google Maps
- Font Awesome icons
- Css y Animaciones
Otter Blocks
(24 Bloques)
@chicho_zar

98. Congreso web
Stackable
(23 Bloques)
@chicho_zar
- Separador
- Posts
- Video popup
- Header
- Team members
- Card
- …

99. Congreso web
Gutenberg Block Template
(50 templates)
@chicho_zar

100. Congreso web
Gutenlook
(Posible efecto Bootstrap)
1. Dar estilo a los bloques para evitarlo
2. Poner mas funcionalidades de diseño integradas en
cada bloque.
3. Diseño limpio y profesional.
+ Tiempo == +Creativiada e innovación
@chicho_zar

101. Congreso web
Para desarrolladores
- Adapta tu Plugin a Gutenberg
- Adaptar los themes con las nuevas funcionalidades
- Crear Bloques con nuevas funcionalidades
- Convertir shortcodes en Bloques
- Create guten block (boilerplate para crear bloques)
- Lazy blocks - Gutenberg block constructor
- ACF PRO
- Block Lab
- Guten-block-fields
- Desarrollar estilos únicos para cada theme, o cada bloque.
@chicho_zar

102. Congreso web
@chicho_zar
+ + +
Entorno de Landing
Pages en WordPress

103. Congreso web
Práctica
Landing Page
@chicho_zar

104. Congreso web
¿Qué buscamos cuando hacemos
una landing pages?
- Carga rápida = Porcentaje de
rebote bajo
- Facil de navegar
- Título y encabezados
- Parrafos cortos (la gente no lee)
- Imágenes y gráficos
- Contenido coherente
- Exponer argumentos
- Formulario (captar leads)
- Recompensa inmediata (comprar en
un click)
- Testimonios de clientes
- No incluir demasiados enlaces
- Ser Original
- Textos typed
- Animaciones
- Degradados, colores…
@chicho_zar

105. https://localbyflywheel.com/
https://wordpress.org/plugins/gutenberg/
https://wordpress.org/plugins/block-unit-test/
https://demoswp.com/
Herramientas para Tests
Congreso web
https://es.wordpress.org/plugins/dropit/
https://es.wordpress.org/plugins/svg-support/
@chicho_zar

106. Congreso web
El Futuro de Gutenberg
@chicho_zar

107. Proyectos
prioritarios para
WordPress en
2019
- Crear un bloque para los menús de navegación.
- Convertir todos los widgets existentes a bloques.
- Actualizar el área de edición de widgets y
personalizador para que sean compatibles con los
bloques.
- Integrar el plugin de comprobación de salud del sitio
en el núcleo, para ayudar con la depuración y fomentar una
buena higiene del software.
- Ofrecer un modo de que los usuarios acepten las
actualizaciones automáticas de temas y plugins.
- Proporcionar un modo para que los usuarios acepten
actualizaciones automáticas de las principales versiones
del núcleo.
- Crear un directorio de WordPress.org para descubrir
bloques y un modo de instalarlos sin problemas.
- Solucionar los +6.500 problemas abiertos en el Trac.
Congreso web
@chicho_zar

108. Fase 1
- Contenido en
Bloques
Congreso web
@chicho_zar

109. Congreso web
Fase 2
- Implementar todos los Widgets en
bloques
- Bloque de Menú
- Fusionar el personalizador con
editor
- Wysiwyg
@chicho_zar

110. Congreso web
Fase 3
- Colaboración
- Edición de Gutenberg multi-
usuario
- Workflows
@chicho_zar

111. Congreso web
Fase 4
- Soporte para sitios
multilingües
@chicho_zar

112. Congreso web
Zona Experimental
de Widgets
@chicho_zar

113. Congreso web
@chicho_zar
Fin…
¡ Muchas Gracias !