Revolución Gutenberg:

Del “Post” al “Block”

Álvaro Gómez Velasco
@MrFoxTalbot

Agradecimientos a todo el mundo. Primera WC? Sois lo más importante! Nadie solo!

MrFoxTalbot

Álvaro Gómez Velasco
@mrfoxtalbot
www.giga4.es
www.mrfoxtalbot.com

WordCamp Madrid
Madrid WordPress Meetup

gutenberg.mrfoxtalbot.com
testgutenberg.com

Perfil mixto: Redactor / Diseñador / Fotógrafo / Frontender. Por eso me interesa tanto este tema.

Difusión de ideas. Ilustración. Democracia.

Impacto de la imprenta moderna: MOVABLE TYPE. La Xilografía ya existía.
Alfabetización, difusión de ideas, estandarización de idiomas, nacimiento del estado nacional.

Metalurgia. Papel. Capitalismo.

Catalizador de tecnologías previas. Economías de escala, contratos, capital.

¿

?

Hablemos de ELLO. ¿Quién no ha oido hablar de ello?. ¿Quién lo ha usado?. ¿Quién le tiene miedo?.

¿Qué es Gutenberg?

Simplemente un nuevo editor

Para los próximos 10 años

  • Simplificar la edición
  • Unificar interfaces
  • “Mystery Meat”

Llevamos con TinyMCE desde las versión 2.0, en 2005

¿Por qué necesitamos
este cambio?

Llevamos con TinyMCE desde 2005!

post_content

Uso y abuso

  • Custom HTML
  • Shortcodes
  • Embeds

Se muestra HTML en el front, pero se almacena con otro formato. Estamos atados.

"We want to make the simple things EASY and the complex things POSSIBLE".

- Matt Mullenweg

¿Cómo?

El barco de Teseo

  • Modelo de datos
  • Portabilidad (HTML Puro)
  • Retrocompatibilidad

El barco en el cual volvieron (desde Creta) Teseo y los jóvenes de Atenas tenía treinta remos, y los atenienses lo conservaban desde la época de Demetrio de Falero, ya que retiraban las tablas estropeadas y las reemplazaban por unas nuevas y más resistentes, de modo que este barco se había convertido en un ejemplo entre los filósofos sobre la identidad de las cosas que crecen; un grupo defendía que el barco continuaba siendo el mismo, mientras el otro aseguraba que no lo era."

<!-- more-->

La etiqueta META es neutra pero es leída por los temas para saber dónde cortar el contenido en los listados

Se almacena como HTML plano con comentarios pero Gutenberg lo parsea cuando lo carga en el editor y lo separa en bloques.

Debates, mitos y miedos.

Keep calm

And carry on posting

  • Temas
  • Contenido antiguo
  • Shortcodes
  • Custom Fields
  • Metaboxes
  • Widgets
  • Editor clásico (bloque)
  • Editor clásico (plugin)

Vendrá en el núcleo con la versión 5 pero se puede desactivar.

Vendrá en el núcleo con la versión 5 pero se puede desactivar.

Vendrá en el núcleo con la versión 5 pero se puede desactivar. Cuando peguéis contenido os lo meterá como bloques.

Críticas

& Technical Debt

  • the_content() es complejo
  • Almacenar IDs de imágenes (Fix 2.9)
  • Almacenar IDs de posts
  • Usar JSON
  • Crear tablas nuevas
  • Integración REST API

¿Se queda corto?
¿Interesa solo a Automattic?

El miedo no debería ser Gutenberg,

sino a quedarnos como estamos.

Habéis probado Medium o Square Space? Nos están adelantando en muchas cosas. Y por qué esto es grave? Porque nos gusta WordPress y muchos nos ganamos la vida con él? NO! Porque WordPress es Software Libre mientras que lo otro son plataformas cerradas.

Habéis probado Medium o Square Space? Nos están adelantando en muchas cosas. Y por qué esto es grave? Porque nos gusta WordPress y muchos nos ganamos la vida con él? NO! Porque WordPress es Software Libre mientras que lo otro son plataformas cerradas.

Bloques, bloques, bloques.

Estilos de texto

más fáciles y limpios

Imágenes y galerías

Convertir y reordenar

bloques

Legibilidad y otros avisos

Control granulado de la información

Potencial enorme, estamos aún viendo ejemplos.

CPTs & Postmeta

Podemos predefinir incluso la maquetación y bloquear o no ciertos campos. Los contenidos pueden asignarse o no a postmeta, taxonomías y demás. Más intuitivo para el usuario.

Placeholders.

Ya ha de hecho un plugin en el repositorio para Custom Fields sobre Gutenberg

Bloques compartidos:

los nuevos Widgets

Edición simultánea (beta)

Comentarios por bloques (idea)

Nuevos bloques via plugins

No importa el interface actual concreto, importa el cambio de organización de la información.

¿Quién está trabajando

en Gutenberg?

Matt Mullenweg

We called it Gutenberg for a reason:
https://ma.tt/2017/08/we-called-it-gutenberg-for-a-reason/

Co-fundador de WordPress. Lead de la versión 5, al igual que de la 3.0 y otras anteriores.

Matías

Ventura

Techincal lead de Gutenberg Autor de MP6 y de Calypso.

Tammie
Lister

Techincal lead de Gutenberg Autor de MP6 y de Calypso.

Riad Benguella

Techincal lead de Gutenberg Autor de MP6 y de Calypso.

Techincal lead de Gutenberg Autor de MP6 y de Calypso.

Y tú también

Pruébalo y abre issues

frontenberg.tomjn.com

testgutenberg.com

poopy.life

El Futuro: Gutenberg Themes

& el Personalizador

Morten Rand-Hendriksen: Gutenberg and the WordPress of Tomorrow: https://wordpress.tv/2017/12/10/morten-rand-hendriksen-gutenberg-and-the-wordpress-of-tomorrow/

React.js

Framework javascript frontend, básico para parsear los bloques e interactuar con ellos.

+

Problema muy serio con la licencia (no me pidáis detalles). La licencia previa impedía a los desarrolladores atacar a Facebook si hacían uso de React en sus desarrollos con lo que daba demasiado poder a FB para hacer lo que quisiera

Entre WordPress y la fundación Apache se ha conseguido que cambien la licencia a un MIT.

Learn JavaScript. Deeply.

https://github.com/WordPress/gutenberg-examples

index.php

block.js

Crear un bloque: básicamente definir un JSON. Capa de abstracción y/o API para desarrolladores no expertos en JS.

Documentación general de Gutenberg
https://wordpress.org/gutenberg/handbook/

Gutenberg Migration Guide - Daniel Bachhuber

https://github.com/danielbachhuber/gutenberg-migration-guide

Customizing The Future - Mel Choyce:

https://www.youtube.com/watch?v=k_ESRtMksLQ

Live Demo at WordCamp US’17 Matías Ventura
https://youtu.be/XOY3ZUO6P0k?t=35m

AWP Gutenberg Interview - Matt Mullenweg
https://youtu.be/4vS_jR5-nIo?t=27m20s

WP RADIO - Entrevista a Matías Ventura
https://wpradio.es/podcast/44-gutenberg-entrevistando-matias-ventura/

THE LANGUAGE OF GUTENBERG - Miguel Fonseca

https://lamda.blog/2018/04/22/the-language-of-gutenberg/

Andrew Roberts: The What and Why of Gutenberg
https://wordpress.tv/2018/02/09/andrew-roberts-the-what-and-why-of-gutenberg/

Matías Ventura & Tammie Lister at Shop Talk.

http://shoptalkshow.com/episodes/298-gutenberg-tammie-lister-matias-ventura/

We called it Gutenberg for a reason - Matt Mullenweg
https://ma.tt/2017/08/we-called-it-gutenberg-for-a-reason/

Gutenberg, or the Ship of Theseus:
https://matiasventura.com/post/gutenberg-or-the-ship-of-theseus/

Morten Rand-Hendriksen: Gutenberg and the WordPress of Tomorrow
https://wordpress.tv/2017/12/10/morten-rand-hendriksen-gutenberg-and-the-wordpress-of-tomorrow/

Tammie Lister: Getting to know Gutenberg

https://wordpress.tv/2017/11/11/tammie-lister-getting-to-know-gutenberg/

The Future of WordPress Plugins with Gutenberg - NELIO

https://neliosoftware.com/blog/the-future-of-wordpress-plugins-with-gutenberg/

Gutenberg Custom Fields - Riad Benguella

https://riad.blog/2017/12/11/with-gutenberg-what-happens-to-my-custom-fields/

The Gutenberg that could have been

https://gschoppe.com/wordpress/the-gutenberg-that-could-have-been/

¡Gracias!
¿Preguntas?