¿Qué es Gutenberg? • Instalación • Qué son los bloques • Opciones de expansión • Rendimiento • Compatibilidad • Ventajas e inconvenientes • Estado actual del proyecto • Conclusiones
visuales, page builders, WYSIWYG… ◦ Divi ◦ Visual Composer ◦ Elementor • El editor de WordPress se había quedado un poco “limitado” ◦ Editor tipo “Microsoft Word”
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/
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
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
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”
• 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
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
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
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)
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
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…)
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 ◦ ...
en el propio core de WordPress • Bloques incluidos “de serie” ◦ Bloques comunes ◦ Bloque de formatos ◦ Elementos de diseño ◦ Widgets - Shortcodes ◦ Bloques incrustados
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
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
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)
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
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
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
◦ Ocultar sidebar de preferencias ◦ Activar modo “pantalla completa” ◦ Fijar barra de herramientas arriba ◦ Utilizar bloque clásico ***Problema si queremos intercalar con otros bloques
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
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
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)
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
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?
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
hojas de estilo ◦ Editor.css ◦ Style.css ◦ Theme.css • Añadir soporte para las distintas capacidades del editor ◦ add_theme_support(‘editor-color-palette’);
Se pueden abrir incidencias para que los desarrolladores hagan cambios • Se puede exportar a otras plataformas ◦ Drupal puede que lo incorpore más adelante
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
◦ Posibilidad de crear bloques propios • Incorporar JavaScript en fase de desarrollo en WordPress ◦ Crear bloques propios con JavaScript ▪ Vue.js ▪ React
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
◦ 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
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
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
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
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
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
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
imanolteran
uxyall
akihiro_kokubo
codingconduct
mfonobong
signer
baasie
greggifford
skipperchong
mkilby
akademiya2063
jonoalderson
![Eskerrik asko Imanol Terán Maruri [email protected] @itermar https://itermar.io/podcast](https://files.speakerdeck.com/presentations/6fbe281be85148b48f2f8f3eb1c734ba/slide_115.jpg){kind=link}