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”)