![Page 1: Pasa tus shortcodes a bloques - WordCamp España Online...2020/05/08 · ¿Porqué es mejor un bloque? Mejora la interfaz (UX/UI) para añadir los contenidos. Permite conocer todas](https://reader036.vdocuments.co/reader036/viewer/2022071219/6055b4c12e80240cb0315b10/html5/thumbnails/1.jpg)
Pasa tus shortcodes a bloques
(no te quedes atrás)
![Page 2: Pasa tus shortcodes a bloques - WordCamp España Online...2020/05/08 · ¿Porqué es mejor un bloque? Mejora la interfaz (UX/UI) para añadir los contenidos. Permite conocer todas](https://reader036.vdocuments.co/reader036/viewer/2022071219/6055b4c12e80240cb0315b10/html5/thumbnails/2.jpg)
Cosas que SÍ se van a explicar
Metodología de hacer un bloque para alguien que no ha hecho nunca uno.
Manera estándar para que los shortcodes que tengas funcionen como un bloque.
Esta es una manera pero no es la mejor manera.
![Page 3: Pasa tus shortcodes a bloques - WordCamp España Online...2020/05/08 · ¿Porqué es mejor un bloque? Mejora la interfaz (UX/UI) para añadir los contenidos. Permite conocer todas](https://reader036.vdocuments.co/reader036/viewer/2022071219/6055b4c12e80240cb0315b10/html5/thumbnails/3.jpg)
Cosas que NO se van a explicar(pero se admiten preguntas)
Métodos de desarrollo moderno:Babel, WebPack, Grunt, npm, yarn, ...
Javascript “nuevo”:React, JSX, EsNext
Best Practices && i18n
![Page 4: Pasa tus shortcodes a bloques - WordCamp España Online...2020/05/08 · ¿Porqué es mejor un bloque? Mejora la interfaz (UX/UI) para añadir los contenidos. Permite conocer todas](https://reader036.vdocuments.co/reader036/viewer/2022071219/6055b4c12e80240cb0315b10/html5/thumbnails/4.jpg)
La práctica hace al desarrolladorhttps://developer.wordpress.org/block-editor/
![Page 5: Pasa tus shortcodes a bloques - WordCamp España Online...2020/05/08 · ¿Porqué es mejor un bloque? Mejora la interfaz (UX/UI) para añadir los contenidos. Permite conocer todas](https://reader036.vdocuments.co/reader036/viewer/2022071219/6055b4c12e80240cb0315b10/html5/thumbnails/5.jpg)
¿Qué tienen en común un shortcode y un bloque?
Interfaz para que el usuario de contenidos añada “funcionalidades” que le da el desarrollador.
Tienen atributos que los añade el usuario y en definitiva el desarrollador los puede utilizar.
![Page 6: Pasa tus shortcodes a bloques - WordCamp España Online...2020/05/08 · ¿Porqué es mejor un bloque? Mejora la interfaz (UX/UI) para añadir los contenidos. Permite conocer todas](https://reader036.vdocuments.co/reader036/viewer/2022071219/6055b4c12e80240cb0315b10/html5/thumbnails/6.jpg)
¿Qué le queda mejor?
![Page 7: Pasa tus shortcodes a bloques - WordCamp España Online...2020/05/08 · ¿Porqué es mejor un bloque? Mejora la interfaz (UX/UI) para añadir los contenidos. Permite conocer todas](https://reader036.vdocuments.co/reader036/viewer/2022071219/6055b4c12e80240cb0315b10/html5/thumbnails/7.jpg)
¿Qué le queda mejor?
![Page 8: Pasa tus shortcodes a bloques - WordCamp España Online...2020/05/08 · ¿Porqué es mejor un bloque? Mejora la interfaz (UX/UI) para añadir los contenidos. Permite conocer todas](https://reader036.vdocuments.co/reader036/viewer/2022071219/6055b4c12e80240cb0315b10/html5/thumbnails/8.jpg)
¿Porqué es mejor un bloque?
Mejora la interfaz (UX/UI) para añadir los contenidos.
Permite conocer todas las opciones disponibles de los atributos y no “fallar”
![Page 9: Pasa tus shortcodes a bloques - WordCamp España Online...2020/05/08 · ¿Porqué es mejor un bloque? Mejora la interfaz (UX/UI) para añadir los contenidos. Permite conocer todas](https://reader036.vdocuments.co/reader036/viewer/2022071219/6055b4c12e80240cb0315b10/html5/thumbnails/9.jpg)
A grandes rasgos un shortcode
//Solo PHP
add_shortcode( 'mi_querido_shortcode', 'mi_querido_shortcode' );
function mi_querido_shortcode( $atts, $content ) {
$atts = shortcode_atts( … );
//Cosas del PHP
return 'algo';
}
//En el editor
[mi_querido_shortcode atts='']contenido[/mi_querido_shortcode]
![Page 10: Pasa tus shortcodes a bloques - WordCamp España Online...2020/05/08 · ¿Porqué es mejor un bloque? Mejora la interfaz (UX/UI) para añadir los contenidos. Permite conocer todas](https://reader036.vdocuments.co/reader036/viewer/2022071219/6055b4c12e80240cb0315b10/html5/thumbnails/10.jpg)
A grandes rasgos un bloque
//La parte del PHP
wp_register_script( 'miqueridobloquejs', 'mi_querido_bloque.js',
array( 'wp-blocks', 'wp-element', 'wp-components', 'wp-editor' ));
register_block_type( 'gfk/miqueridobloque', array(
'editor_script' => 'miqueridobloquejs',
'render_callback' => 'miqueridobloquephp',
'attributes' => array(...) )
}
function miqueridobloquephp( $atts ) {
//Cosas del PHP
return 'algo';
}
![Page 11: Pasa tus shortcodes a bloques - WordCamp España Online...2020/05/08 · ¿Porqué es mejor un bloque? Mejora la interfaz (UX/UI) para añadir los contenidos. Permite conocer todas](https://reader036.vdocuments.co/reader036/viewer/2022071219/6055b4c12e80240cb0315b10/html5/thumbnails/11.jpg)
A grandes rasgos un bloque
//La parte del PHP
wp_register_script( 'miqueridobloquejs', 'mi_querido_bloque.js',
array( 'wp-blocks', 'wp-element', 'wp-components', 'wp-editor' ));
register_block_type( 'gfk/miqueridobloque', array(
'editor_script' => 'miqueridobloquejs',
'render_callback' => 'miqueridobloquephp',
'attributes' => array(...) )
}
function miqueridobloquephp( $atts ) {
//Cosas del PHP
return 'algo';
}
![Page 12: Pasa tus shortcodes a bloques - WordCamp España Online...2020/05/08 · ¿Porqué es mejor un bloque? Mejora la interfaz (UX/UI) para añadir los contenidos. Permite conocer todas](https://reader036.vdocuments.co/reader036/viewer/2022071219/6055b4c12e80240cb0315b10/html5/thumbnails/12.jpg)
A grandes rasgos un bloque
//La parte del JS (mi_querido_bloque.js)
const { registerBlockType } = wp.blocks;
const { InspectorControls } = wp.editor;
const { PanelBody, SelectControl } = wp.components;
registerBlockType( 'gfk/miqueridobloque', {
title: 'Mi Querido Bloque',
icon: 'smiley', //dashicons
category: 'common', //common|formatting|layout|widgets|embed]
attributes: {}, //atributos
edit: {}, //código cuando se edita
save: {} //código cuando se guarda
});
![Page 13: Pasa tus shortcodes a bloques - WordCamp España Online...2020/05/08 · ¿Porqué es mejor un bloque? Mejora la interfaz (UX/UI) para añadir los contenidos. Permite conocer todas](https://reader036.vdocuments.co/reader036/viewer/2022071219/6055b4c12e80240cb0315b10/html5/thumbnails/13.jpg)
A grandes rasgos un bloque
//La parte del JS (mi_querido_bloque.js)
const { registerBlockType } = wp.blocks;
const { InspectorControls } = wp.editor;
const { PanelBody, SelectControl } = wp.components;
registerBlockType( 'gfk/miqueridobloque', {
title: 'Mi Querido Bloque',
icon: 'smiley', //dashicons
category: 'common', //common|formatting|layout|widgets|embed]
attributes: {}, //atributos
edit: {}, //código cuando se edita
save: {} //código cuando se guarda
});
![Page 14: Pasa tus shortcodes a bloques - WordCamp España Online...2020/05/08 · ¿Porqué es mejor un bloque? Mejora la interfaz (UX/UI) para añadir los contenidos. Permite conocer todas](https://reader036.vdocuments.co/reader036/viewer/2022071219/6055b4c12e80240cb0315b10/html5/thumbnails/14.jpg)
A grandes rasgos un bloque
const { registerBlockType } = wp.blocks;
const { InspectorControls } = wp.editor;
const { PanelBody, SelectControl } = wp.components;
https://developer.wordpress.org/block-editor/components/
Tiene relación con las librerías dependientes que hemos llamado. wp contiene varios componentes y elementos que permiten utilizar código y partes de gutenberg
![Page 15: Pasa tus shortcodes a bloques - WordCamp España Online...2020/05/08 · ¿Porqué es mejor un bloque? Mejora la interfaz (UX/UI) para añadir los contenidos. Permite conocer todas](https://reader036.vdocuments.co/reader036/viewer/2022071219/6055b4c12e80240cb0315b10/html5/thumbnails/15.jpg)
A grandes rasgos un bloque
//La parte del JS (mi_querido_bloque.js)
const { registerBlockType } = wp.blocks;
const { InspectorControls } = wp.editor;
const { PanelBody, SelectControl } = wp.components;
registerBlockType( 'gfk/miqueridobloque', {
title: 'Mi Querido Bloque',
icon: 'smiley', //dashicons
category: 'common', //common|formatting|layout|widgets|embed]
attributes: {}, //atributos
edit: {}, //código cuando se edita
save: {} //código cuando se guarda
});
![Page 16: Pasa tus shortcodes a bloques - WordCamp España Online...2020/05/08 · ¿Porqué es mejor un bloque? Mejora la interfaz (UX/UI) para añadir los contenidos. Permite conocer todas](https://reader036.vdocuments.co/reader036/viewer/2022071219/6055b4c12e80240cb0315b10/html5/thumbnails/16.jpg)
A grandes rasgos un bloque
registerBlockType( 'gfk/miqueridobloque', {
title: 'Mi Querido Bloque',
icon: 'smiley', //dashicons
category: 'common', //common|formatting|layout|widgets|embed]
Esta es la parte fácil :)
![Page 17: Pasa tus shortcodes a bloques - WordCamp España Online...2020/05/08 · ¿Porqué es mejor un bloque? Mejora la interfaz (UX/UI) para añadir los contenidos. Permite conocer todas](https://reader036.vdocuments.co/reader036/viewer/2022071219/6055b4c12e80240cb0315b10/html5/thumbnails/17.jpg)
A grandes rasgos un bloque
//La parte del JS (mi_querido_bloque.js)
const { registerBlockType } = wp.blocks;
const { InspectorControls } = wp.editor;
const { PanelBody, SelectControl } = wp.components;
registerBlockType( 'gfk/miqueridobloque', {
title: 'Mi Querido Bloque',
icon: 'smiley', //dashicons
category: 'common', //common|formatting|layout|widgets|embed]
attributes: {}, //atributos
edit: {}, //código cuando se edita
save: {} //código cuando se guarda
});
![Page 18: Pasa tus shortcodes a bloques - WordCamp España Online...2020/05/08 · ¿Porqué es mejor un bloque? Mejora la interfaz (UX/UI) para añadir los contenidos. Permite conocer todas](https://reader036.vdocuments.co/reader036/viewer/2022071219/6055b4c12e80240cb0315b10/html5/thumbnails/18.jpg)
A grandes rasgos un bloque
attributes: {}, //atributos
https://developer.wordpress.org/block-editor/developers/block-api/block-attributes/
- A efectos prácticos los mismos atributos que el shortcode.- Pero con tipo/validación: null, boolean, object, array, number,
string, integer.- Permite default, src, meta, query, … pero lo que importa es lo
anterior.
![Page 19: Pasa tus shortcodes a bloques - WordCamp España Online...2020/05/08 · ¿Porqué es mejor un bloque? Mejora la interfaz (UX/UI) para añadir los contenidos. Permite conocer todas](https://reader036.vdocuments.co/reader036/viewer/2022071219/6055b4c12e80240cb0315b10/html5/thumbnails/19.jpg)
A grandes rasgos un bloque
attributes: {
align: { type: 'string', },
bgcolor: { type: 'string', },
title: { type: 'string', default: 'titulo' },
heading: { type: 'string', default: 'h2', },
content: { type: 'string' },
},
![Page 20: Pasa tus shortcodes a bloques - WordCamp España Online...2020/05/08 · ¿Porqué es mejor un bloque? Mejora la interfaz (UX/UI) para añadir los contenidos. Permite conocer todas](https://reader036.vdocuments.co/reader036/viewer/2022071219/6055b4c12e80240cb0315b10/html5/thumbnails/20.jpg)
A grandes rasgos un bloque
//La parte del JS (mi_querido_bloque.js)
const { registerBlockType } = wp.blocks;
const { InspectorControls } = wp.editor;
const { PanelBody, SelectControl } = wp.components;
registerBlockType( 'gfk/miqueridobloque', {
title: 'Mi Querido Bloque',
icon: 'smiley', //dashicons
category: 'common', //common|formatting|layout|widgets|embed]
attributes: {}, //atributos
edit: {}, //código cuando se edita
save: {} //código cuando se guarda
});
![Page 21: Pasa tus shortcodes a bloques - WordCamp España Online...2020/05/08 · ¿Porqué es mejor un bloque? Mejora la interfaz (UX/UI) para añadir los contenidos. Permite conocer todas](https://reader036.vdocuments.co/reader036/viewer/2022071219/6055b4c12e80240cb0315b10/html5/thumbnails/21.jpg)
A grandes rasgos un bloque
edit: {}, //código cuando se edita
https://developer.wordpress.org/block-editor/developers/block-api/block-edit-save/
- La parte que se verá en el editor- Lo mejor (y más cómodo) es trabajar con JSX y transpilar.- SelectControl, TextControl, ControlPalette- onChange = setAttributes- InspectorControls => PanelBody para la pantalla lateral
![Page 22: Pasa tus shortcodes a bloques - WordCamp España Online...2020/05/08 · ¿Porqué es mejor un bloque? Mejora la interfaz (UX/UI) para añadir los contenidos. Permite conocer todas](https://reader036.vdocuments.co/reader036/viewer/2022071219/6055b4c12e80240cb0315b10/html5/thumbnails/22.jpg)
A grandes rasgos un bloque
//La parte del JS (mi_querido_bloque.js)
const { registerBlockType } = wp.blocks;
const { InspectorControls } = wp.editor;
const { PanelBody, SelectControl } = wp.components;
registerBlockType( 'gfk/miqueridobloque', {
title: 'Mi Querido Bloque',
icon: 'smiley', //dashicons
category: 'common', //common|formatting|layout|widgets|embed]
attributes: {}, //atributos
edit: {}, //código cuando se edita
save: {} //código cuando se guarda
});
![Page 23: Pasa tus shortcodes a bloques - WordCamp España Online...2020/05/08 · ¿Porqué es mejor un bloque? Mejora la interfaz (UX/UI) para añadir los contenidos. Permite conocer todas](https://reader036.vdocuments.co/reader036/viewer/2022071219/6055b4c12e80240cb0315b10/html5/thumbnails/23.jpg)
A grandes rasgos un bloque
save: {} //código cuando se guarda
https://developer.wordpress.org/block-editor/developers/block-api/block-edit-save/
- Si fuera JS, sería un JSX que es lo que guarda en el content.- La parte que se guarda... pero como estamos simulando un
shortcode...
return null;
![Page 24: Pasa tus shortcodes a bloques - WordCamp España Online...2020/05/08 · ¿Porqué es mejor un bloque? Mejora la interfaz (UX/UI) para añadir los contenidos. Permite conocer todas](https://reader036.vdocuments.co/reader036/viewer/2022071219/6055b4c12e80240cb0315b10/html5/thumbnails/24.jpg)
A grandes rasgos un bloque
//La parte del PHP
wp_register_script( 'miqueridobloquejs', 'mi_querido_bloque.js',
array( 'wp-blocks', 'wp-element', 'wp-components', 'wp-editor' ));
register_block_type( 'gfk/miqueridobloque', array(
'editor_script' => 'miqueridobloquejs',
'render_callback' => 'miqueridobloquephp',
'attributes' => array(...) )
}
function miqueridobloquephp( $atts ) {
//Cosas del PHP
return 'algo';
}
![Page 25: Pasa tus shortcodes a bloques - WordCamp España Online...2020/05/08 · ¿Porqué es mejor un bloque? Mejora la interfaz (UX/UI) para añadir los contenidos. Permite conocer todas](https://reader036.vdocuments.co/reader036/viewer/2022071219/6055b4c12e80240cb0315b10/html5/thumbnails/25.jpg)
El EJEMPLO en código
https://github.com/adriacobo/shortcode-to-block/
![Page 26: Pasa tus shortcodes a bloques - WordCamp España Online...2020/05/08 · ¿Porqué es mejor un bloque? Mejora la interfaz (UX/UI) para añadir los contenidos. Permite conocer todas](https://reader036.vdocuments.co/reader036/viewer/2022071219/6055b4c12e80240cb0315b10/html5/thumbnails/26.jpg)
¿Como saber más?
WPCLIhttps://developer.wordpress.org/cli/commands/scaffold/block/wp scaffold block prueba --plugin=nombredelplugin
NPMhttps://developer.wordpress.org/block-editor/packages/packages-create-block/ npm init @wordpress/block --template es5 pruebapluginclinpm init @wordpress/block
Greg Ziolkowski: How to Speed Up Development with Block Scaffoldinghttps://wordpress.tv/2020/04/15/greg-ziolkowski-how-to-speed-up-development-with-block-scaffolding/
![Page 27: Pasa tus shortcodes a bloques - WordCamp España Online...2020/05/08 · ¿Porqué es mejor un bloque? Mejora la interfaz (UX/UI) para añadir los contenidos. Permite conocer todas](https://reader036.vdocuments.co/reader036/viewer/2022071219/6055b4c12e80240cb0315b10/html5/thumbnails/27.jpg)
Adrián CoboDesarrollador web especializado en
WordPress y PrestaShop
Socio en Grafreak Estudi Web
Contesto en los foros de soporte y organizador de WPGranollers
Afición: música y retrogamingPasión: comics y manga
Podcastinando en elarroyo.dev
@adria_cobo
![Page 28: Pasa tus shortcodes a bloques - WordCamp España Online...2020/05/08 · ¿Porqué es mejor un bloque? Mejora la interfaz (UX/UI) para añadir los contenidos. Permite conocer todas](https://reader036.vdocuments.co/reader036/viewer/2022071219/6055b4c12e80240cb0315b10/html5/thumbnails/28.jpg)
¡Muchas gracias!(y ahora a aprender “Javascript deeply”)