Gutenberg es el nuevo editor de contenidos por defecto en WordPress a partir de la versión 5. Se basa en bloques de contenido que permiten añadir distintos elementos de forma visual. Entre sus ventajas se encuentran que es fácil de usar, permite la edición colaborativa y reutiliza bloques. Sin embargo, puede generar problemas de compatibilidad con temas y plugins existentes que habrá que solucionar.

1. @SiteGround_ES#CW18
Gutenberg revoluciona
WordPress

2. @SiteGround_ES#CW18
Fernando Puente
@fpuenteonline
Informático de vocación y de profesión, formador ocasional y beginner de comer
y beber
Llevo 21 años trabajando en TI, los últimos 12 en medios de comunicación online
Especializado en performance para medios y comercio online.
Consultor Enterprise en SiteGround
CTO de Exprime Viajes y Dormir de Chollo
Formador en Fundación COPE
Consultor freelance

3. @SiteGround_ES#CW18
Disclaimer
Durante la realización de esta presentación no he
minado ninguna criptomoneda, no posicioné nuevas
keywords, no he aceptado más cookies de las
necesarias, ningún dominio fue atacado y ningún
servidor fue sobrecargado
Soy responsable de lo que digo, no de lo que interpretes

4. @SiteGround_ES#CW18
Historia

5. @SiteGround_ES#CW18
Gutenberg
Johannes Gutenberg fue un
orfebre alemán, inventor de la
prensa de imprenta con tipos
móviles moderna
Su trabajo más reconocido es la
Biblia de 42 líneas

6. @SiteGround_ES#CW18
¿Qué es Gutenberg?

7. @SiteGround_ES#CW18
¿Qué es Gutenberg?
● Es el nuevo editor de contenidos de WordPress por
defecto a partir de la versión 5
● Editor para acercarse al máximo al WYSIWYG
● Ahora mismo, un plugin en el repositorio, todavía en
desarrollo

8. @SiteGround_ES#CW18

9. @SiteGround_ES#CW18
¿Qué es Gutenberg?
“El editor creará una nueva experiencia de creación de
páginas y entradas que hará que escribir publicaciones
enriquecidas no conlleve esfuerzo alguno, y que tendrá
“bloques” para hacer fácil lo que actualmente requiere
shortcodes, HTML personalizado, o los imprevisibles
incrustados automáticos.” — Matt Mullenweg

10. @SiteGround_ES#CW18
Características de Gutenberg
● Concepto basado en bloques de contenido
● Todo lo que quieras agregar a una publicación o página
se hace a través de distintos bloques
● Single Page Application, desarrollado sobre React
(librería Javascript)

11. @SiteGround_ES#CW18
Tipos de bloques
1. Estático: no se puede editar el contenido del bloque.
2. Editable: se puede editar el contenido del bloque.
3. Dinámico: guarda ajustes, no contenido. El contenido
dentro del bloque es dinámico

12. @SiteGround_ES#CW18
Fases de Gutenberg
1. Foco en el contenido y diseño visual mediante el uso
de bloques en el editor. Reemplazar el editor de
contenidos en la versión 5 de WordPress. Actual.
2. Integración en el personalizador. Diseños y layouts.
Próximo año.
3. Personalización completa del sitio. Constructor.
Próximo año.

13. @SiteGround_ES#CW18
Cómo instalar Gutenberg
1. Esperar a la versión 5 de WordPress (previstas todavía
y sin fecha las versiones 4.9.7 y 4.9.8)
2. Instalando y activando el plugin Gutenberg
(versión 2.9.2 ahora mismo)
3. La versión 4.9.7 de WordPress nos invitará a probarlo
(próxima versión)

14. @SiteGround_ES#CW18
El nuevo editor de
WordPress

15. @SiteGround_ES#CW18
Ventajas de Gutenberg
● Fácil de aprender
● Colaborativo: varios usuarios, mismo contenido
● Sin lock-in de contenidos
● Edición de contenido en columnas
● Reutilización de bloques (bloques compartidos)
● Manejo de imágenes y galerías
● Anidar bloques
● Más opciones de configuración visual a cada bloque
● Más trabajo debido a las adaptaciones de temas

16. @SiteGround_ES#CW18
El editor clásico
● Difícil de construir páginas de diseño complejo
● Anticuado, evolución necesaria frente a la
competencia: Medium, Wix, Squarespace….
● Lento
● No es 100% WYSIWYG, lo que se ve no
necesariamente es lo que obtienes, dependerá de
distintos factores de cada instalación

17. @SiteGround_ES#CW18
Posibles problemas
● Rechazo inicial al cambio desde TinyMCE
● Mayor control del editor sobre el aspecto visual
● Compatibilidad de temas y plugins que modifican el
editor de contenido o que añaden Custom Post Types
● Adaptación del tema propio
● Para un constructor visual, investiga su plan de
actualización para Gutenberg, sino existe ¡huye o
vuelve al editor clásico! (también hay un plugin)

18. @SiteGround_ES#CW18

19. @SiteGround_ES#CW18
Compatibilidad de
Gutenberg

20. @SiteGround_ES#CW18
https://plugincompat.danielbachhuber.com/

21. @SiteGround_ES#CW18
https://plugincompat.danielbachhuber.com/

22. @SiteGround_ES#CW18
¿Cómo es Gutenberg?

23. @SiteGround_ES#CW18

24. @SiteGround_ES#CW18
¿Lo vemos en directo?

25. @SiteGround_ES#CW18
Gutenberg es el futuro

26. @SiteGround_ES#CW18
Gutenberg revoluciona
WordPress

27. @SiteGround_ES#CW18
Gracias

28. @SiteGround_ES#CW18
Referencias
Gutenberg - https://wordpress.org/gutenberg/
Gutenberg plugin - https://es.wordpress.org/plugins/gutenberg/
Gutenberg Handbook - https://wordpress.org/gutenberg/handbook/
Test - https://make.wordpress.org/test/handbook/call-for-testing/gutenberg-testing/
Gutenberg Plugin Compatibility - https://plugincompat.danielbachhuber.com/
The Language of Gutenberg - https://lamda.blog/2018/04/22/the-language-of-gutenberg/
Customizing the future - https://loopconf.com/talk/customizing-the-future/
Create Guten Block - https://github.com/ahmadawais/create-guten-block
Gutenberg Examples - https://github.com/WordPress/gutenberg-examples
Frontenberg - https://frontenberg.tomjn.com/
Gutenberg Hub - http://gutenberghub.com/
The Beginner’s Guide to Building Gutenberg Blocks - https://gutenkit.com/
Aprende Gutenberg - https://www.aprendegutenberg.com/
Blocks and REST API - https://wpscholar.com/blog/add-gutenberg-blocks-to-wp-rest-api/

29. @SiteGround_ES#CW18
Plugins (I)
Gutenberg Manager - https://wordpress.org/plugins/manager-for-gutenberg/
Unregister Gutenberg Blocks -
https://wordpress.org/plugins/unregister-gutenberg-blocks/
Stackable - https://wordpress.org/plugins/stackable-ultimate-gutenberg-blocks/
Caxton - https://wordpress.org/plugins/caxton/
Advanced Gutenberg Blocks - https://wordpress.org/plugins/advanced-gutenberg-blocks/
Ultimate Blocks - https://wordpress.org/plugins/ultimate-blocks/
Custom Fields for Gutenberg - https://wordpress.org/plugins/custom-fields-gutenberg/
CD2 Gutenberg Shortcode Block Preview -
https://wordpress.org/plugins/cd2-gutenberg-shortcode-preview-block/

30. @SiteGround_ES#CW18
Plugins (II)
WooCommerce Gutenberg Products Block -
https://wordpress.org/plugins/woo-gutenberg-products-block/
Dummynator - https://wordpress.org/plugins/dummynator/
Drop it - https://wordpress.org/plugins/dropit/
Advanced Gutenberg - Fast Content Building -
https://www.joomunited.com/wordpress-products/advanced-gutenberg
Disable Gutenberg - https://wordpress.org/plugins/disable-gutenberg/