Adapta tu tema a Gutenberg - WordCamp Sevilla 2018

¿Está tu tema preparado
para Gutenberg?
Bienvenido/a,
esta es tu ponencia

Adapta tu tema
a Gutenberg
Fernando Puente
@fpuenteonline

BIO
@fpuenteonline - Informático de vocación y de
profesión,
formador ocasional y beginner de comer y beber.
Desde 1996 trabajando en TI, los últimos 12 en medios
de comunicación online y comercio electrónico
•  Consultor Enterprise en SiteGround
•  Consultor Desarrollo de Negocio en YITH
•  CTO de Exprime Viajes y Dormir de Chollo
•  Formador en Fundación COPE
•  Consultor freelance especializado en performance
Adapta tu tema a Gutenberg – WordCamp Sevilla 2018 - @fpuenteonline

https://gutenbergtimes.com/update-77-new-user-tips-tips-testing-themes-more-blocks-a-roadmap-and/

TODOS LOS TEMAS
SON COMPATIBLES
CON GUTENBERG

No quiere decir que
Gutenberg no romperá
tu sitio, sino que, no está
asegurada al 100% la
compatibilidad en
cuanto a diseño

¿Solución?
Aplicar una hoja de ruta

Hoja de ruta
0. Previo
1. Entorno de pruebas
2. Instalar plugin Gutenberg
3. Test de Gutenberg con nuestro tema
4. Test de bloques con nuestro tema
5. Toma de decisiones
6. Adaptar tema
7. Paso a producción

0.- Previo
•  Page-builders: consultar estado del desarrollo
•  Github Gutenberg - “[Type] Plugin / Theme
interoperability”
https://tinyurl.com/wcsevillathemesproblem
•  Gutenberg Plugin Compatibility
https://plugincompat.danielbachhuber.com/

1.- Entorno de pruebas
Entorno de test, desarrollo, staging, local, clon, es decir,
un entorno seguro donde podamos realizar pruebas sin
“romper” el sitio en producción.
Lo más similar al entorno de producción en cuanto a
contenidos, versiones, tema y plugins activos.
Con tu tema actual.
Nota: verificar siempre que no tenemos opciones de
caché durante las pruebas que no modifiquen el
resultado

2.- Instalar y activar Gutenberg
A día de hoy, Gutenberg es un plugin en el repositorio
oficial, hasta su incorporación en el core
Versión actual 3.2.0 (utilizada en la charla)
Requiere WordPress 4.9.6 (última es 4.9.7)
Desde este momento, es posible editar Entradas
y Páginas con el editor clásico y el nuevo editor
Gutenberg (defecto)

A día de hoy, Gutenberg es un plugin en el repositorio
oficial, hasta su incorporación en el core
Versión actual 3.2.0 (utilizada en la charla)
Requiere WordPress 4.9.6 (última es 4.9.7)
Desde este momento, es posible editar Entradas
y Páginas con el editor clásico y el nuevo editor
Gutenberg (defecto)
También seguirán disponibles tus
page builders
2.- Instalar y activar Gutenberg

3.- Test de Gutenberg
Dispone de una página Demo
El plugin añade automáticamente
el siguiente código que incluye
un CSS con las clases que utiliza
el nuevo editor en el front-end:
<link rel='stylesheet' id='wp-core-blocks-css'
href='https://misitio.com/wp-content/plugins/
gutenberg/build/core-blocks/style.css?
ver=1530962659' type='text/css' media='all' />

Ahora deberíamos
familiarizarnos con las
posibilidades de
Gutenberg,
pero eso es otra charla

4.- Test de bloques (versión 1)
-  Añadir una nueva entrada
-  Insertar diferentes tipos de bloques
-  Guardar y publicar
-  ¿Funciona? ¿Diseño back igual o parecido al front?

-  Cambiar el modeo del Editor a Editor de código
-  Copiar y pegar el texto del siguiente enlace:
https://tinyurl.com/wcsevillagutenberg

<h2>Common Blocks / Formatting / Layout Elements / Widgets and Embeds</h2>



<ul>
<li><a href="#images">Images</a> (Single image, cover image, gallery </li>
<li><a href="#quotes">Pull Quote / Quote</a></li>
<li><a href="#verse">Verse</a></li>
<li> <a href="#buttons">Button</a></li>
<li> <a href="#columns">Columns </a> Text (only) columns / Columns experimental</li>
<li><a href="#paragraphs">Paragraph</a> </li>
<li><a href="#audio">Audio</a> </li>
<li><a href="#video">Video</a></li>
<li><a href="#widgets">Widgets</a></li>
<li><a href="#lists">Lists</a></li>
<li><a href="#table">Table</a><br/></li>
<li><a href="#embeds">Embeds</a></li>
</ul>







<h2 id="images">Images</h2>


<h3>Cover Image</h3>


….
https://gist.github.com/bph

-  Cambiar al Editor de código
-  Copiar y pegar el texto del siguiente enlace:
https://tinyurl.com/wcsevillagutenberg
-  Volver al Editor visual (bloques generados)
-  Guardar y publicar
-  ¿Funciona? ¿Diseño back igual o parecido al front?

Ejemplo front-end de bloques de Gutenberg

5.- Toma de decisiones
Opción Adaptar tu tema
•  Pequeños ajustes visuales front-end: reescribir
clases Gutenberg, o eliminar el CSS de Gutenberg
y aplicar uno propio
•  Extender el tema para las nuevas funcionalidades
•  Añadir a Gutenberg diseños de nuestro tema
•  Mantener los contenidos anteriores con el editor
clásico o migrar aquellos contenidos de interés

Opción Borrón y nuevo tema
•  Elección de nuevo tema, compatible 100%
Gutenberg
•  Migración de contenidos

Opción Caerse de Gutenberg
•  Desactivar plugin/funcionalidad Gutenberg
cuando sea necesario (¿conoces “No Gutenberg”
de Fernando Tellado?)
•  Mantener tema actual
•  Verificar las actualizaciones de los plugins
utilizados en nuestro sitio

6.- Adaptar tema
Opción 1: adaptar Gutenberg a nuestro tema
•  Mejor control visual y buenas prácticas
•  Reescribir los estilos de Gutenberg a los bloques
para adaptarlos a nuestro tema (+ opción 2)
Opción 2: extender Gutenberg a nuestro tema
•  Fácil y rápido
•  Adaptar front y back

6.1.- Rediseñar Gutenberg
//Sustituir CSS de front-end de Gutenberg
function remove_gutenberg_styles() {
wp_dequeue_style( 'wp-core-blocks' );
wp_enqueue_style( 'my-core-blocks',
get_template_directory_uri() . '/blocks-style.css');
}
add_action( 'wp_print_styles',
'remove_gutenberg_styles', 100 );
Paso 1:
-  Eliminar el CSS que incluye Gutenberg en el front y
reemplazarlo por nuestros propios estilos de bloques
-  Archivo CSS base de Gutenberg:
/plugins/gutenberg/build/core-blocks/style.css

.wp-block-embed figcaption {
margin-top: .5em;
color: #6c7781;
text-align: center;
font-size: 13px
}

.editor-block-list__block[data-type="core/embed"][data-align=left] .editor-block-list__block-
edit,.editor-block-list__block[data-type="core/embed"][data-align=right] .editor-block-
list__block-edit,.wp-block-embed.alignleft,.wp-block-embed.alignright {
max-width: 305px;
width: 100%
}

.wp-block-image {
width: -webkit-fit-content;
width: -moz-fit-content;
width: fit-content
}

.wp-block-image figcaption {
margin-top: .5em;
color: #6c7781;
text-align: center;
font-size: 13px
}

.wp-block-image.aligncenter {
display: block;
margin-left: auto;
margin-right: auto;
text-align: center
}

.wp-block-image.is-resized {
width: -webkit-min-content;
width: -moz-min-content;
width: min-content;
display: -ms-inline-grid;
-ms-grid-columns: min-content Adapta tu tema a Gutenberg – WordCamp Sevilla 2018 - @fpuenteonline

//Estilos para Gutenberg Editor and Front end.
function add_new_gutenberg_css() {
wp_enqueue_style( 'extra-gutenberg',
get_template_directory_uri() . '/xtra-style.css');
}
add_action( 'enqueue_block_assets',
'add_new_gutenberg_css' );
Paso 2:
-  Incluir los estilos comunes en front y back, por
ejemplo, colores o fuentes o clases adicionales

/* Colores para bloques de texto */
.has-azulon-background-color {
background-color: #1767ef;
}
.has-azulon-color {
color: #1767ef;
}
.has-gris-clarito-background-color {
background-color: #eee;
}
.has-gris-clarito-color {
color: #eee;
}
.has-gris-oscuro-background-color {
background-color: #444;
}
.has-gris-oscuro-color {
color: #444;
}

/* Clases adicionales para bloques */
.mayusculas {
text-transform: uppercase;
}
.mayusculas-open-sans {
font-family: "Open Sans”;
font-weight: bold;
}
Ejemplo: xtra-style.css

Paso 3:
-  Eliminar el CSS que incluye Gutenberg en el back y
reemplazarlo por nuestros propios estilos de front y
back
-  Archivo CSS base de Gutenberg:
-  Añadir nuestro CSS para adaptar Gutenberg en el
back, sobreescribiendo los estilos del editor

//Eliminar CSS de bloques Gutenberg del editor
function add_new_gutenberg_backend_css() {
wp_dequeue_style( 'wp-core-blocks' );
wp_enqueue_style( 'my-core-blocks',
get_template_directory_uri() . '/blocks-style.css');
wp_enqueue_style( 'backend-gutenberg',
get_template_directory_uri() . '/backend-style.css');
wp_enqueue_style( 'open-sans-google-fonts', 'https://
fonts.googleapis.com/css?family=Open+Sans:300italic,
400italic,700italic,400,700,300');
}
add_action( 'enqueue_block_editor_assets',
‘add_new_gutenberg_backend_css’,);
Paso 3 (continuación):

body.gutenberg-editor-page {
background-color: #d3ebf3;
color: #00005d;
}

/* Main column width */
body.gutenberg-editor-page .editor-post-title__block,
body.gutenberg-editor-page .editor-default-block-appender,
body.gutenberg-editor-page .editor-block-list__block {
max-width: 720px;
}

/* Width of "wide" blocks */
body.gutenberg-editor-page .editor-block-list__block[data-align="wide"] {
max-width: 1080px;
}

/* Width of "full-wide" blocks */
body.gutenberg-editor-page .editor-block-list__block[data-align="full"] {
max-width: none;
}

….
Ejemplo: backend-style.css

6.- Adaptar tema
Opción 1: adaptar Gutenberg a nuestro tema
•  Mejor control del diseño y buenas prácticas
•  Reescribir los estilos de Gutenberg para
adaptarlos a nuestro tema (+ opción 2)
Opción 2: extender Gutenberg a nuestro tema
•  Fácil y rápido
•  Adaptar front y back

6.2.- Extender Gutenberg
Paso 1:
En nuestro functions.php, añadir dos opciones más de
alineación para ciertos bloques: ancho amplio y ancho
completo
function extend_gutenberg_for_me() {
// Theme supports wide images, galleries and videos.
add_theme_support( 'align-wide' );
}
add_action( 'after_setup_theme',
'extend_gutenberg_for_me' );

Añadir las nuevas clases (.alignwide y .alignfull) a
nuestro archivo CSS del tema
/* Gutenberg Ancho amplio */
.entry-content > .alignwide {
max-width: 1100px;
}

/* Gutenberg Ancho completo */
.entry-content > .alignfull {
max-width: 100%;
}

/*classes*/
.mayusculas {
}
.mayusculas-open-sans {
font-family: "Open Sans";
font-weight: bold;
}
Paso 2 (opcional):
Crear CSS adicionales para los
archivos front y del editor

Paso 3:
Eliminar la posibilidad de usar el “Selector de color
personalizado”
// Disables custom colors in block color palette.
add_theme_support( 'disable-custom-colors' );
}
add_action( 'after_setup_theme',
'extend_gutenberg_for_me' );

Crear colores personalizados de texto y fondo
(functions.php)
// Disables custom colors in block color palette.
add_theme_support( 'disable-custom-colors' );
// Make specific theme colors available in the editor.
add_theme_support( 'editor-color-palette',
array(
'name' => 'azulon',
'color' => '#1767ef',
),
array(
'name' => 'gris clarito',
'color' => '#eee',
),
array(
'name' => 'gris oscuro',
'color' => '#444',
));
}
add_action( 'after_setup_theme', 'extend_gutenberg_for_me' );

Crear colores personalizados de texto y fondo
(styles.css)
/* Colores */
.has-azulon-background-color {
background-color: #1767ef;
}
.has-azulon-color {
color: #1767ef;
}
.has-gris-clarito-background-color {
background-color: #eee;
}
.has-gris-clarito-color {
color: #eee;
}
.has-gris-oscuro-background-color {
background-color: #444;
}
.has-gris-oscuro-color {
color: #444;
}

7.- Paso a producción
-  Activar el plugin Gutenberg o esperar al nuevo core
-  Subir los cambios al entorno de producción
-  Mantener el editor clásico para los contenidos
antiguos
-  Editar los nuevos contenidos con Gutenberg
-  Adaptar contenidos antiguos a los
nuevos bloques, manualmente o
con la función “Convertir en
bloques”

Buscamos con
Gutenberg:
WYSIWYG
What You See Is What
You Get

Aceptaremos un:
WYSIPCETWYG
What You See Is Probably
Close Enough To What
You Get

“Let's be careful out there”
Fernando Puente
@fpuenteonline
Gracias

Referencias (I)
Gutenberg - https://wordpress.org/gutenberg/
Gutenberg plugin - https://es.wordpress.org/plugins/gutenberg/
Gutenberg Handbook - https://wordpress.org/gutenberg/handbook/
Test - https://make.wordpress.org/test/handbook/call-for-testing/gutenberg-testing/
Gutenberg Plugin Compatibility - https://plugincompat.danielbachhuber.com/
The Language of Gutenberg - https://lamda.blog/2018/04/22/the-language-of-gutenberg/
Customizing the future - https://loopconf.com/talk/customizing-the-future/
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/
The Beginner’s Guide to Building Gutenberg Blocks - https://gutenkit.com/
Aprende Gutenberg - https://www.aprendegutenberg.com/
Blocks and REST API - https://wpscholar.com/blog/add-gutenberg-blocks-to-wp-rest-api/
Gutenberg Manager - https://wordpress.org/plugins/manager-for-gutenberg/
How to Test Your Theme for Gutenberg -
https://wp4good.org/how-to-test-our-theme-for-gutenberg/
Things to consider when updating a WordPress theme for Gutenberg -
https://www.cssigniter.com/things-consider-updating-wordpress-theme-gutenberg/
Styling Themes for Gutenberg -
https://themeshaper.com/2018/02/15/styling-themes-for-gutenberg/

Referencias (II)
Make Your WordPress Theme Fully Compatible with Gutenberg -
https://weavertheme.com/make-your-wordpress-theme-fully-compatible-with-gutenberg/
Get Your WordPress Theme Gutenberg-ready -
http://gutenberghub.com/get-your-wordpress-theme-gutenberg-ready/
Known conflicts with Gutenberg -
https://gutenbergtimes.com/known-conflicts-with-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/
Ultimate Blocks - https://wordpress.org/plugins/ultimate-blocks/
Custom Fields for Gutenberg - https://wordpress.org/plugins/custom-fields-gutenberg/
CD2 Gutenberg Shortcode Block Preview -
https://wordpress.org/plugins/cd2-gutenberg-shortcode-preview-block/
WooCommerce Gutenberg Products Block -
https://wordpress.org/plugins/woo-gutenberg-products-block/
Dummynator - https://wordpress.org/plugins/dummynator/
Advanced Gutenberg - Fast Content Building -
https://www.joomunited.com/wordpress-products/advanced-gutenberg
No Gutenberg - https://es.wordpress.org/plugins/no-gutenberg/

Adapta tu tema a Gutenberg - WordCamp Sevilla 2018

Recomendados

Recomendados

Más contenido relacionado

Similar a Adapta tu tema a Gutenberg - WordCamp Sevilla 2018

Similar a Adapta tu tema a Gutenberg - WordCamp Sevilla 2018 (20)

Más de Fernando Puente

Más de Fernando Puente (20)

Último

Último (16)

Adapta tu tema a Gutenberg - WordCamp Sevilla 2018