Gutenberg_El_nuevo_editor_de_WordPress_5.pdf

Transcript

1. Gutenberg El nuevo editor de WordPress 5 Imanol Terán Maruri
2. Imanol Terán Maruri Desarrollador frontend / Consultor y formador IT imanol@itermar.io @itermar
3. Si dudas, hazlo Podcast diario #emprendimiento #desarrolloweb #productividad #marketingonline https://itermar.io/podcast
4. Gutenberg, el nuevo editor de WordPress 5 • Introducción • ¿Qué es Gutenberg? • Instalación • Qué son los bloques • Opciones de expansión • Rendimiento • Compatibilidad • Ventajas e inconvenientes • Estado actual del proyecto • Conclusiones
5. Introducción
7. Introducción • Johannes Gutenberg inventó la prensa de imprenta de tipos móviles alrededor del año 1440 • Su trabajo más reconocido es la Biblia de 32 líneas, considerado primer libro impreso con tipografía móvil
8. Introducción • Los últimos años, gran auge de los editores visuales, page builders, WYSIWYG… ◦ Divi ◦ Visual Composer ◦ Elementor • El editor de WordPress se había quedado un poco “limitado” ◦ Editor tipo “Microsoft Word”
9. ¿Qué es Gutenberg?
11. ¿Qué es Gutenberg? • El proyecto Gutenberg se trata del nombre del nuevo editor de contenidos en WordPress • Es el editor por defecto desde WordPress 5 (actualmente 5.03) • Aún está en desarrollo • Existe como plugin, si no estás aún en WordPress 5 ◦ Repositorio oficial: https://es.wordpress.org/plugins/gutenberg/
12. ¿Qué es Gutenberg?
13. ¿Qué es Gutenberg? • Probablemente, uno de los mayores cambios en la historia de WordPress • Se ha cambiado el editor de un CMS • Por tanto, se ha cambiado su funcionalidad principal, el centro de la experiencia • Además, más adelante, no se limitará al editor
14. “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
15. Key Features • Basado en BLOQUES de contenido • Editor de bloques visual • Todo el contenido que quieras añadir a una página o un post, sea del tipo que sea, tiene que ser mediante un bloque • Single Page Application, desarrollado sobre React (JavaScript) • Con WordPress 5, ha pasado a ser “EL EDITOR”
16. ¿A quién afecta? • A TODOS los usuarios de WordPress • Llegará un momento (* muy cercano, ahora mismo es decisión tuya) en que sea el editor por defecto • No queda otra que conocerlo y adaptarse al cambio
17. ¿Por qué Gutenberg era necesario? • Editor anterior limitado • Dificultad para crear layouts complejos • Pocas opciones frente a competencia ◦ Wix, Medium, Squarespace... • Gran popularidad de editores visuales ◦ Visual Composer, Elementor, Divi… • Persigue ser un verdadero editor WYSIGYG • El anterior editor TinyMCE se quedaba corto
18. ¿Por qué Gutenberg era necesario? • Muchos años sin modificar el editor, se había quedado atrás en muchos aspectos • Page builders comprometen la integridad del contenido • El crear nuestro contenido dentro del propio WordPress garantiza el no perder el control de nuestro contenido en el futuro
19. Objetivos de Gutenberg • Aportar a la comunidad una nueva forma de publicar contenido de forma: ◦ Sencilla ◦ Intuitiva ◦ Con más opciones de maquetación
20. TinyMCE • Editor WYSIWYG • Open Source • Estilo “Microsoft Word” • Utilizado en muchos servicios de Internet • Más info: https://www.tiny.cloud
21. TinyMCE • Integraciones ◦ Angular ◦ Bootstrap ◦ Dojo ◦ jQuery ◦ Rails ◦ React ◦ Vue ◦ WordPress
22. TinyMCE
23. WYSIWYG
24. WhatYouSeeIs WhatYouGet * Lo que ves es lo que obtienes
25. EVOLUCIÓN DEL EDITOR
26. WordPress 0.71 Junio 2003
27. WordPress 1.0.1 2004
28. WordPress 1.5 Febrero 2005
29. WordPress 2.0 Diciembre 2005
30. WordPress 2.1 Enero 2007
31. WordPress 2.3 Septiembre 2007
32. WordPress 2.5 Marzo 2008
33. WordPress 3.8 2013
34. WordPress 5 2018
35. Funcionalidades nuevas • En muchos casos, eliminará la necesidad de utilizar editores visuales • De esta forma, se unificará el uso de editores de contenido, haciendo los proyectos más versátiles y escalables • Ahorro de dinero en licencias de visual editors, aunque está por ver si los themes suben de precio (bloques propios...etc)
36. Funcionalidades nuevas • Paletas de colores • Alineación de imágenes ◦ Ancho completo ◦ Full width • Seleccionar tamaños de fuentes ◦ Formato de tallas
37. Funcionalidades nuevas • Información de entrada/página ◦ Esquema de documento ◦ Ajustes de bloque ◦ Modo de enfoque ◦ Número de palabras / Encabezamientos / Párrafos / Bloques ◦ Método de escritura “Sin distracción” *Coming soon
38. Instalación
39. Instalación • Instalando un plugin (versión 4.9 ahora mismo) ◦ Repositorio oficial: https://es.wordpress.org/plugins/gutenberg/ • El propio WordPress, desde 4.9.7 “invita” a probarlo • Actualizar a WordPress 5 (versión 5.03 actualmente) ◦ Editor por defecto
40. Instalación • Si no nos gusta Gutenberg, no es para nosotros, no nos hacen falta muchas de sus características o simplemente no queremos usarlo, podremos volver al editor clásico. ◦ Instalado un plugin: Classic Editor ◦ Según los creadores de WordPress, el plugin estará continuado durante muchos años (***Veremos…)
41. Demo Instalación
42. ¿Qué son los bloques?
43. Bloques • Con la llegada del nuevo editor, pasan a ser el centro del contenido de nuestras páginas y posts • Todo nuestro contenido estará formado por bloques • Pequeños fragmentos con los que vamos construyendo nuestra web ◦ Párrafos ◦ Imágenes ◦ Encabezados ◦ Botones ◦ ...
44. Tipos de bloques • Estático ◦ No se puede editar el contenido del bloque • Editable ◦ Se puede editar el contenido del bloque • Dinámico ◦ Guarda ajustes, no contenido. Contenido dinámico.
45. Tipos de bloques • La idea es incluir esta facilidad en el propio core de WordPress • Bloques incluidos “de serie” ◦ Bloques comunes ◦ Bloque de formatos ◦ Elementos de diseño ◦ Widgets - Shortcodes ◦ Bloques incrustados
46. Tipos de bloques • Bloques comunes ◦ Párrafo ◦ Encabezado ◦ Imagen ◦ Galería ◦ Lista ◦ Cita ◦ Audio ◦ Video ◦ Archivo
47. Tipos de bloques • Bloques de formatos ◦ HTML personalizado ◦ Código ◦ Clásico ◦ Preformateado ◦ Cita ◦ Tabla ◦ Verso
48. Tipos de bloques • Elementos de diseño ◦ Columnas ◦ Botón ◦ Más ◦ Salto de página ◦ Separador ◦ Espaciador
49. Tipos de bloques • Widgets ◦ Shortcode ◦ Últimos comentarios ◦ Archivo ◦ Categorías ◦ Últimas entradas
50. Tipos de bloques • Incrustados ◦ Facebook ◦ Twitter ◦ Instagram ◦ Youtube ◦ ….
51. Otros tipos de bloques • Bloques reutilizables ◦ Creamos un bloque con contenido y aspecto determinado ◦ Lo podemos utilizar en la misma entrada o en cualquier página de la web ◦ Muy fácil dar aspecto propio a la página, sin mucho trabajo ◦ Haces una vez, utilizas todas las que quieras
52. Otros tipos de bloques • Bloques personalizados ◦ Aquí hay que meterse con código ◦ JavaScript ◦ Podemos crear bloques para lo que queramos
53. Opciones de expansión
54. Opciones de expansión • Editor clásico de WordPress, bastante limitado para crear interfaces complejas ◦ CSS + Clases personalizadas ◦ Plugins
55. https://visualcomposer.io
56. https://www.elegantthemes.com/plugins/divi-builder/
57. https://elementor.com/theme-builder/
59. Opciones de expansión • Alrededor de Gutenberg, ha nacido un nuevo ecosistema de plugins • Plugins específicos para trabajar con el nuevo editor • Añaden nuevas colecciones de bloques • Buena oportunidad de mercado para desarrolladores
60. Opciones de expansión • Colección de bloques ◦ Bloques que no están incluídos en el editor ◦ Testimonios ◦ Slider ◦ Tablas de precios ◦ ...
61. Opciones de expansión • Plugins ◦ https://wordpress.org/plugins/manager-for-gutenberg/ ◦ https://wordpress.org/plugins/woo-gutenberg-products-block/ ◦ https://es.wordpress.org/plugins/custom-fields-gutenberg/
62. Opciones de expansión • Bloques ◦ https://wordpress.org/plugins/atomic-blocks/ ◦ https://wordpress.org/plugins/advanced-gutenberg-blocks/ ◦ https://wordpress.org/plugins/stackable-ultimate-gutenberg-blocks/ ◦ https://coblocks.com ◦ https://wordpress.org/themes/editor-blocks/
63. Opciones de expansión • Themes ◦ https://arraythemes.com/themes/atomic-blocks-wordpress-theme/ ◦ https://wordpress.org/themes/coblocks/ ◦ https://li.wordpress.org/themes/editor-blocks/ ◦ https://organicthemes.com/theme/block-lite/
64. Desarrollo de bloques propios • En primer lugar, hay que saber JavaScript • El primer paso es crear un plugin • Preparar archivos y estructura • Crear bloque • Dar estilos al bloque
65. Desarrollo de bloques propios • Puede ser complicado, sobre todo al principio • Ir paso a paso • Tres archivos principales ◦ Archivo js donde se definen el bloque, sus atributos y los métodos más importantes ◦ Estilo css para editor (editor.css) ◦ Estilo css para frontend (style.css)
66. Desarrollo de bloques propios • Recursos ◦ https://javascriptforwp.com ◦ https://www.cursogutenberg.com ◦ https://github.com/ahmadawais/Gutenberg-Boilerplate/ ◦ https://tam.blog/2018/01/gutenberg-design-basics/ ◦ https://organicthemes.com/create-custom-block-wordpress-gutenberg/ ◦ https://github.com/WordPress/gutenberg-examples/ ◦ m
67. Rendimiento
68. Rendimiento • En versiones anteriores, varios issues reportando que el editor Gutenberg era más lento que el clásico • A día de hoy, el comportamiento en términos de rendimiento es muy satisfactorio ◦ Rápido ◦ Ágil ◦ Potente
69. Rendimiento • WordPress 5.0.2 ◦ 45 mejoras de rendimiento con un aumento de velocidad del 330% para posts con 200 bloques ◦ Correción de compatibilidad con plugins ◦ Correción de bugs del editor • WordPress 5.0.3 ◦ Correción de bugs del editor ◦ Mensaje de error para usuarios con JavaScript deshabilitado ◦ Mejoras en rendimiento
70. Rendimiento • Como en todo, dependerá de cada usuario y del tipo de uso que se vaya a dar ◦ Quien solo quiere escribir → los bloques le parecen un engorro ◦ Quien quiere crear layouts complejos y añadir distintos tipos de información → encantado con los bloques • En general, los bloques son un “engorro” a nivel de UX • “Ensucian” la interfaz • Son un “mal necesario” • Se está trabajando en distintos modos de edición para futuras versiones
71. Rendimiento • Para tener la interfaz lo más limpia posible: ◦ Ocultar sidebar de preferencias ◦ Activar modo “pantalla completa” ◦ Fijar barra de herramientas arriba ◦ Utilizar bloque clásico ***Problema si queremos intercalar con otros bloques
72. Rendimiento • Personalmente, en mi uso con él en el día a día con algún proyecto: ◦ Trabajo con opciones poco fluído (Mejor barra arriba) ◦ Proceso de búsqueda de bloque poco ágil ◦ Más eficiente que mayoría de page builders ◦ Para alguien con pocos conocimientos, page builder puede que sea más cómodo “out-of-the-box” ◦ Page Builder compromete el contenido en el futuro ◦ Gutenberg asegura la integridad de nuestro contenido
73. Estadísticas https://gutenstats.blog * Post statistics only count posts made on WordPress.com and Jetpack sites, since late August 2018. The actual number is higher.
74. 9.5 M Instalaciones activas
75. 5.9 M Posts escritos
76. Compatibilidad
77. Compatibilidad • Todo nuestro contenido antiguo queda intacto • Lo que ocurre es que todas nuestras entradas antiguas se “encapsularán” dentro de un único bloque clásico • Podremos ir cogiendo fragmentos de ese bloque clásico y añadirlo en nuevos bloques
78. Compatibilidad • No hay que preocuparse por la seguridad de nuestra página • Gutenberg no va a “romper” nuestra web • Si pasa algo raro: ◦ Errores con plugins ◦ Incompatibilidad con algún otro constructor visual (en principio son compatibles Divi, Elementor, Siteorigin...) ◦ Versiones antiguas de PHP en servidor (mínimo 5.6 o 7.0)
79. Compatibilidad • Tampoco debería haber problemas de compatibilidad con el theme que estemos utilizando ◦ Siempre y cuando el theme no esté haciendo modificaciones sobre el propio editor (botones, shortcodes...)
80. Compatibilidad • Compatibilidad 100% con shortcodes • Si tienes plugins que implementan shortcodes, también son compatibles
81. Compatibilidad • Con los plugins grandes no tiene que haber problemas: ya están funcionado: ◦ WooCommerce ◦ YOAST ◦ ACF ◦ Ninja Forms
82. Compatibilidad • Cómo hacer nuestros themes compatibles con Gutenberg • En principio los themes, por sí mismos, son compatibles • Se está poniendo muy de moda en los “theme shops” el destacar los themes como “Gutenberg Compatible” • Sí hay una serie de acciones que podemos llevar a cabo para asegurar una compatibilidad de 100% al desarrollar nuestro themes • Garantizamos el aprovechar todas sus opciones
83. Compatibilidad
84. Compatibilidad • Este “Gutenberg Compatible” es más marketing que otra cosa • Sí es cierto, que en muchos de estos themes te aseguran que han probado determinados plugins, shortcodes...etc y que funcionan correctamente • Además, muchos de ellos incluyen plugins con bloques para Gutenberg • ¿Y si queremos crear nuestros propios themes?
85. Compatibilidad • Estilos de frontend ◦ Acepta imágenes “wide” ◦ Blockquotes ◦ Botones
86. Compatibilidad • Estilos de backend ◦ Modificar solo opciones de editor ◦ No tocar otras áreas de admin ◦ Utilizar las clase CSS .edit-post-visual-editor
87. Compatibilidad • Hay herramientas que nos pueden ayudar • Block Unit Test for Gutenberg ◦ https://wordpress.org/plugins/block-unit-test/ • Hay que tener Gutenberg instalado • El plugin crea una nueva página con cada uno de los bloques por defecto • Ir comprobando que todo se muestra como debería • Ajustes en CSS
88. Compatibilidad • Los bloques de Gutenberg se rigen por 3 hojas de estilo ◦ Editor.css ◦ Style.css ◦ Theme.css • Añadir soporte para las distintas capacidades del editor ◦ add_theme_support(‘editor-color-palette’);
89. Ventajas e inconvenientes
90. Ventajas • Proceso de aprendizaje sencillo • Reutilización de bloques • Anidación de bloques • Mayor simplicidad para construir páginas • Más rápido que editor clásico • No existe lock-in de contenidos
91. Ventajas • Código abierto, se puede contribuir al desarrollo • Se pueden abrir incidencias para que los desarrolladores hagan cambios • Se puede exportar a otras plataformas ◦ Drupal puede que lo incorpore más adelante
92. Inconvenientes • Posible rechazo inicial de la comunidad (Miedo a lo desconocido) • Más importancia de “lo visual” frente al contenido • Problemas de compatibilidad con plugins y themes ◦ Modifican aspecto editor WYSIWYG ◦ Añaden custom post types • Si utilizas constructor visual ◦ Infórmate de compatibilidad con Gutenberg ◦ Si no es compatible → Vuelve al editor clásico
93. Causa-efecto • Actualmente en la comunidad WordPress hay bastante controversia respecto al uso de Gutenberg • A raíz de ello, han surgido varias iniciativas ◦ A favor ◦ En contra
94. Causa-efecto • Iniciativas a favor de Gutenberg ◦ Frontenberg • Iniciativas en contra de Gutenberg ◦ ClassicPress ◦ Classic Editor Plugin
95. Ventajas para desarrolladores
96. Ventajas para desarrolladores • Fin de la dependencia sobre TinyMCE ◦ Posibilidad de crear bloques propios • Incorporar JavaScript en fase de desarrollo en WordPress ◦ Crear bloques propios con JavaScript ▪ Vue.js ▪ React
97. Ventajas para desarrolladores • Está por ver si esto deriva en una caída del uso de PHP para crear themes y plugins ◦ Ya se vio con el lanzamiento de la REST API • Claramente JavaScript va ganando terreno en el mundo dev para WordPress
98. Demo https://wordpress.org/gutenberg/
99. WordPress 5
100. WordPress 5 • Última versión de WordPress • Fecha de lanzamiento ◦ 6 Diciembre 2018 ◦ https://wordpress.org/news/2018/11/wordpress-5-0-release-candidate/ ◦ https://codex.wordpress.org/Current_events • Versión actual ◦ WordPress 5.0.3 - 9/1/19
101. WordPress 5
102. Novedades de WordPress 5 • Editor de bloques • Theme Twenty Nineteen • Temas anteriores adaptados • Mejoras en accesibilidad • Soporte para PHP 7.3
103. Novedades previstas en WordPress 5.1 • Nueva página en blanco para errores (permite login en admin) • Mejoras para desarrolladores • Prevista para el 21 de Febrero de 2019
104. Conclusiones
105. Conclusiones • Si desinstalas Gutenberg o usas plugin Classic Editor ◦ No hay problemas, el contenido permanece ahí ◦ No hay efecto “lock-in” ◦ Cuando volvamos a instalar Gutenberg, se volverá a mostrar como bloques • Si queremos irnos a otra plataforma ◦ El contenido exportado es HTML5
106. Conclusiones • Si no te convence el tema de los bloques, puedes utilizar el bloque de Editor Clásico • Si quieres añadir alguno adicional, podrías hacerlo • Con el uso, muchos de los problemas vienen del desconocimiento o la falta de uso
107. Conclusiones • Cuidado con cómo gestionar el cambio de editor si administramos un sitio y tenemos que gestionar al resto de usuarios • Gutenberg es un cambio necesario • En su primera versión salió con la base desde la que partir • A partir de ahí, irá evolucionando
108. Estado del proyecto • Reemplazar editor de contenidos en WordPress 5 - ACTUAL ◦ Uso de bloques para mejorar gestión de contenido y diseño visual • Integar Gutenberg en el Personalizador - 2019 ◦ Diseño y layouts ◦ Que se vea igual en el editor que en la web • Personalización completa del sitio - 2020 ◦ Constructor
109. Estado del proyecto • Gutenberg va a cambiar la forma en la que creamos y gestionamos contenido • Hay que estar preparados para el cambio ◦ Establecer estrategia ◦ Comprobar posibles incompatibilidades ◦ Hacer backup ◦ Probar plugin Gutenberg (versión 4.8) ◦ Probar WordPress 5 en entorno de pruebas
110. Estado del proyecto • Si trabajas con varios proyectos, establecer ESTRATEGIA ◦ Hacer los deberes, estar preparados para cuando llegue el momento ◦ Instalar CLASSIC EDITOR ◦ Entorno de pruebas con WordPress 5.0 ▪ Instalación en local ▪ Servidor propio ▪ Herramientas de terceros ◦ Activar y probar funcionamiento y compatibilidad de plugins ◦ Lista de plugins y themes, para anotar comportamientos y tenerlo en cuenta en otros proyectos
111. Estado del proyecto • En el futuro todo WordPress serán bloques • Sustituirán también a los widgets, menús… a todo.
112. Estado del proyecto • Fase 1 - COMPLETADO ◦ Sustituir el editor • Fase 2 - EN DESARROLLO ◦ Personalización del sitio ◦ Bloque menú de navegación ◦ Convertir widgets en bloques ◦ De momento sin centrarse en el layout de la página, quieren ver hacia donde tiran los devs ◦ Sería ideal en el futuro que los usuarios pudieran cambiar entre distintos editores visuales sin comprometer el contenido ◦ * Muchas de estas mejoras estarán en el plugin , por lo que puede reactivarse para probarlas
113. Estado del proyecto • Fases 3 y 4: EN PROYECTO (2020-2020+) ◦ Colaboración ◦ Edición multi-usuario ◦ Flujos de trabajo ◦ Soporte para sitios multiidioma incluído en WordPress
114. Referencias • Referencias para aprender más y estar al día ◦ https://wordpress.org/gutenberg/handbook ◦ https://editorblockswp.com/library/ ◦ https://gutenbergtimes.com ◦ https://wordpress.org/gutenberg/ ◦ https://www.billerickson.net/getting-your-theme-ready-for-gutenberg/
115. Gutenberg
116. Eskerrik asko Imanol Terán Maruri imanol@itermar.io @itermar https://itermar.io/podcast