Gutenberg desde tres puntos de vista

G U T E N B E R G
D E S D E T R E S P U N T O S D E V I S T A
@JAVIDANIA.COM #WCMADRID

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 M A D R I D

¿ 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 ?

E L F U T U R O 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 control 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( ‘align-wide’ );

add_theme_support( ‘align-full’ );

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
Icon
Category *
Keywords
useOnce
Support
Attributes
Transforms
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 Control personalizados.

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 - 83.3%
No Compatible - 1.2%
Compatibles - 14.4%
En Pruebas - 1.1%
Datos: 14 Abril 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 !

¡ 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 A R D A !

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.

T O O L B A R 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.

B L O Q U E S
Existen cinco categorías 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/
Gutenberg Hub - http://gutenberghub.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/
Stackable - https://wordpress.org/plugins/stackable-ultimate-gutenberg-blocks/
Caxton - https://wordpress.org/plugins/caxton/
Advanced Gutenberg Blocks - https://wordpress.org/plugins/advanced-gutenberg-blocks/
Gutenkit - https://profiles.wordpress.org/gutenkit#content-plugins
Ultimate Blocks - https://wordpress.org/plugins/ultimate-blocks/
Custom Fields for Gutenberg - https://wordpress.org/plugins/custom-fields-gutenberg/

E L F U T U R O D E W O R D P R E S S
Al final tod@s acabaremos amando Gutenberg.

¡ 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 M A D R I D

Gutenberg desde tres puntos de vista

Recomendados

Recomendados

Más contenido relacionado

Similar a Gutenberg desde tres puntos de vista

Similar a Gutenberg desde tres puntos de vista (20)

Último

Último (15)

Gutenberg desde tres puntos de vista