Gutenberg_El_nuevo_editor_de_WordPress_5.pdf

6c68edbaa40e50a0420ee1c125d17189?s=47 Imanol Terán
October 12, 2018
80

 Gutenberg_El_nuevo_editor_de_WordPress_5.pdf

6c68edbaa40e50a0420ee1c125d17189?s=128

Imanol Terán

October 12, 2018
Tweet

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

  6. None
  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?

  10. None
  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/

  58. None
  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