Post on 17-Oct-2020
Pasa tus shortcodes a bloques
(no te quedes atrás)
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.
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
La práctica hace al desarrolladorhttps://developer.wordpress.org/block-editor/
¿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.
¿Qué le queda mejor?
¿Qué le queda mejor?
¿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”
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]
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';
}
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';
}
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
});
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
});
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
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
});
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 :)
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
});
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.
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' },
},
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
});
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
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
});
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;
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';
}
El EJEMPLO en código
https://github.com/adriacobo/shortcode-to-block/
¿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/
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
¡Muchas gracias!(y ahora a aprender “Javascript deeply”)