Gutenberg el futuro de WordPress

G U T E N B E R G
E L F U T U R O D E W O R D P R E S S
@JAVIDANIA.COM #WCIRUN

J O S É Á N G E L V I D A N I A
V D E V I D A N I A . C O M
@ J A V I D A N I A
# W C I R U N
A P R E N D E G U T E N B E R G . C O M

¿ Q U É E S G U T E N B E R G ?
El nuevo editor de bloques de WordPress que se
implementará en la versión 5.0

¿ E L F I N D E W O R D P R E S S ?

Gutenberg ha venido para quedarse.

¿A QUIÉN AFECTARÁ GUTENBERG?
Diseñadores Desarrolladores Usuarios
Gutenberg nos afectará a tod@s.

D I S E Ñ A D O R E S

E S T I L O S C S S
En Gutenberg podemos definir dos tres hojas de estilo.
Style.scss Edit.scss Themes.scss

C L A S E C S S A D I C I O N A L
En el Inspector de controles se puede incluir una
clase CSS adicional para dar estilo al bloque.

A D D T H E M E S U P P O R T
add_theme_support( ‘editor-color-palette’)

add_theme_support( ‘disable-custom-color’)

add_theme_support( ‘align-wide’ );

E N C O L A R E S T I L O S A L E D I T O R
wp_enqueue_style( 'vdv-block-editor-styles', get_theme_file_uri( '/style-editor.css' ), false, '1.0', 'all' );

P E R S O N A L I Z A D O R
Customizing The Future - Mel Choyce https://youtu.be/k_ESRtMksLQ

T E M A S P A R A G U T E N B E R G
https://github.com/WordPress/gutenberg-starter-theme

T E M A S C O M P A T I B L E S
Todos los temas son compatibles con Gutenberg, pero…

D E S A R R O L L A D O R E S

R E A C T
React es la librería de JS sobre la que está desarrollado Gutenberg.
Si sabes JavaScript, sabes desarrollar bloques de Gutenberg.

R E G I S T E R B L O C K T Y P E
// Registering my block with a unique name
registerBlockType( 'my-plugin/book', {} );
registerBlockType() es la función para crear bloques.

R E G I S T E R B L O C K T Y P E
La función registerBlockType() tiene varios ajustes.
Title *
Description
Category *
Icon
Keywords
Attributes
Transforms
useOnce
Parent ???
Supports
Edit *
Save *

T I P O S D E B L O Q U E
En Gutenberg podemos crear tres tipos de bloque.
Bloque Estático Bloque Editable Bloque Dinámico

B L O Q U E E S T Á T I C O
No se puede editar el contenido del bloque.

B L O Q U E E D I T A B L E
Se puede editar el contenido del bloque.

B L O Q U E D I N Á M I C O
Guarda ajustes, no contenido. El contenido es dinámico.

T O O L B A R S & I N S P E C T O R
En el ajuste de editar podemos añadir Toolbars, Tooltips e Inspector de Controles.

B L O C K T E M P L A T E S
Son plantillas reutilizables creadas con bloques predefinidos.

P L U G I N S C O M P A T I B L E S
https://plugincompat.danielbachhuber.com/
Desconocido - 80.8%
No Compatible - 1.6%
Compatibles - 16.3%
En Pruebas - 1.3%
Datos: 21 Mayo de 2018

U S U A R I O S

¡ P R U E B A G U T E N B E R G !
En la versión 4.9.6 4.9.7 estaremos a dos clicks de probar Gutenberg.

¡ N O A C T U A L I C E S S I N P R O B A R !

¡ Y O Q U I E R O A C T U A L I Z A R !

¡ L A L I A M O S !

P L U G I N C L A S S I C E D I T O R
https://wordpress.org/plugins/classic-editor/

G U T E N B E R G V S T I N Y M C E
El nuevo editor de bloques tiene una interfaz diferente a la
que estamos habituados con Tiny MCE.

I N T E R F A Z D E G U T E N B E R G
Será muy fácil crear contenido en el nuevo editor, pero nos
llevará un tiempo acostumbrarnos a donde está cada cosa.

B A R R A S D E H E R R A M I E N T A S
Nos ayudarán a la hora de trabajar con los bloques.

I N S P E C T O R D E C O N T R O L E S
Nos muestra los ajustes que se pueden configurar de los bloques.

O P C I O N E S E X T R A
Con estas opciones podremos eliminar, duplicar o reutilizar un bloque.

T A B L A D E C O N T E N I D O S
Gutenberg nos facilita un esquema del documento de nuestro contenido.

B L O Q U E S
Existen cinco categorías predeterminadas de bloque.
Common - Comunes
Formatting - Formato
Layout - Diseño
Widgets
Embed - Incrustados

B L O Q U E S C O M U N E S
Los bloques más habituales en la creación de contenido.

B L O Q U E S D E F O R M A T O
Si quieres editar con el formato clásico de TINY MCE o usar HTML.

B L O Q U E S D E D I S E Ñ O
El futuro de Gutenberg como editor visual reside en las columnas.

B L O Q U E S D E W I D G E T S
Los widgets y shortcodes son los bloques dinámicos de Gutenberg.

B L O Q U E S I N C R U S T A D O S
Nos ayudarán a mostrar de forma rápida contenidos de terceros.

B L O Q U E S C O M P A R T I D O S
Se pueden reutilizar una y otra vez.

R E C U R S O S
Gutenberg Repo - https://github.com/WordPress/gutenberg
Gutenberg Handbook - https://wordpress.org/gutenberg/handbook/
Gutenberg Sketch - https://github.com/Automattic/gutenberg-themes-sketch
Create Guten Block - https://github.com/ahmadawais/create-guten-block
Gutenberg Examples - https://github.com/WordPress/gutenberg-examples
Frontenberg - https://frontenberg.tomjn.com/
Aprende Gutenberg - https://www.aprendegutenberg.com/
Human Made - https://hmn.md/white-papers/gutenberg-the-new-wordpress-editor/

P L U G I N S
Gutenberg Manager - https://wordpress.org/plugins/manager-for-gutenberg/
Unregister Gutenberg Blocks - https://wordpress.org/plugins/unregister-gutenberg-blocks/
Atomic Blocks - https://atomicblocks.com/
Caxton - https://wordpress.org/plugins/caxton/
Advanced Gutenberg Blocks - https://wordpress.org/plugins/advanced-gutenberg-blocks/
Wootenberg - https://wordpress.org/plugins/woo-gutenberg-products-block/
Disable Gutenberg - https://wordpress.org/plugins/disable-gutenberg/
Custom Fields for Gutenberg - https://wordpress.org/plugins/custom-fields-gutenberg/

Al final tod@s acabaremos amando Gutenberg.

F E R N A N D O T E L L A D O
@ F E R N A N D O T
# W C I R U N
A Y U D A W P . C O M

G U T E N B E R G
P R O S Y C O N T R A S
@JAVIDANIA.COM #WCIRUN@FERNANDOT

E D I C I Ó N V I S U A L
El editor visual es una necesidad en los tiempos que corren
@FERNANDOT

¿ M A Q U E T A C I Ó N D E E N T R A D A S ?
AYUDAWP.COM #WCIRUN
¿No hablamos quedado en que la maquetación es diseño?
@FERNANDOT

N O R O M P E R Á T U C O N T E N I D O
Al instalar Gutenberg mantendrás todo tu antiguo contenido intacto.
@FERNANDOT

¿ D Ó N D E Q U E D Ó E L E S C R I T O R ?
#WCIRUN
Cada acción de edición conlleva más clicks.
@FERNANDOTAYUDAWP.COM

A D I Ó S E F E C T O L O C K - I N
Si desinstalas Gutenberg o usas el plugin Classic Editor no habrá efecto Lock-In.
@FERNANDOT

S E P U E D E D E S A C T I VA R : )
#WCIRUN
es.wordpress.org/plugins/no-gutenberg

H T M L 5
Gutenberg utiliza comentarios HTML5, una forma limpia y semántica
@FERNANDOT

C O P I A R C O N T E N I D O
La rutina de copiado y pegado de contenidos se ha mejorado
@FERNANDOT

¿ Y L A A C C E S I B I L I D A D ?
#WCIRUN
Ningún lector de pantalla puede leer bloques.

J A VA S C R I P T
Gutenberg al utilizar JavaScript abre un nuevo mundo a los desarrolladores.
@FERNANDOT

P L U G I N S N O C O M P A T I B L E S
#WCIRUN
La decisión improvisada generará una brecha digital.

U N P R O Y E C T O D E T O D @ S
Si eres diseñador o desarrollador puedes colaborar en el proyecto en github.com
@FERNANDOT

U N P R O Y E C T O M A T T D R I V E N
#WCIRUN
¿WordPress no era community driven?

#WCIRUN
Al final tod@s acabaremos amando Gutenberg.
@JAVIDANIA.COM @FERNANDOT
… o no

¡ G R A C I A S A T O D @ S !
V D E V I D A N I A . C O M
@ J A V I D A N I A
# W C I R U N
¡ E S K E R R I K A S K O !
#WCIRUN
A Y U D A W P . C O M
@ F E R N A N D O T

Gutenberg el futuro de WordPress

Más contenido relacionado

La actualidad más candente (16)

Similar a Gutenberg el futuro de WordPress (20)

Último (17)

Gutenberg el futuro de WordPress