¿Cómo crear bloque de Gutenberg?
Hola, Hace poco tiempo que me aventuré en el desarrollo de bloques de Gutenberg y he conseguido hacer algunos bloques. Con este tutorial aprenderás la base de como crear un bloque de Gutenberg y a la vez el desarrollo de un pequeño bloque para una galería.
Para poder desarrollar el bloque lo primero que haremos será crear un plugin y dentro de él desarrollaremos el registro del bloque y su funcionalidad. Dado que vamos a desarrollar un plugin es importante que le informes a cerca de cómo se lleva a cabo el proceso de creacion de plugin para WordPress.
- Paso – Crear un plugin: Dentro de nuestro WordPress en la carpeta wp-content/plugins/ añadiremos una carpeta para contener el plugin.
- Fichero index.php de registro del plugin: Se trata del fichero donde se va a declarar el plugin, por lo tanto, añadiremos en él las cabeceras necesarias para la declaración al igual que el registro de ficheros necesarios para el plugin. Este fichero irá dentro de la carpeta que acabamos de crear. (wp-content/plugins/carpeta-para-el-bloque/index.php )A continuación mostremos un ejemplo.
/*
Plugin Name:gallerynprd
Description: Plugin para crear un bloque en Gutenberg para una galería
Author: nadiaprd
Author URI:
Version: 0.0.2
*/
function functionBack() {
wp_enqueue_script(
'gallerynprd',
// nombre del bloque
plugin_dir_url(__FILE__) . '/js/gallerynprd.js',
array('wp-blocks', 'wp-i18n', 'wp-editor'),
true
);
//Se encola el fichero donde se realizará la funcionalidad del bloque
wp_enqueue_style(
'editor',
plugins_url( 'css/editor.css', __FILE__ ), // css interno para el editor.
array(),
'4.7.0'
);
//Se encola el fichero donde se realizarán los estilos de la parte interna del bloque en el escritorio de WordPress
}
add_action('enqueue_block_editor_assets', 'functionBack');
//Se añade esta función en la edición de bloques de Gutenberg
function funtionsFront() {
wp_enqueue_style(
'front-css',
plugins_url( 'css/front.css', __FILE__ ), // iconos font-awesome
array(),
'1.0.0'
);
//Se encola el fichero donde se realizarán los estilos de la parte externa del WordPress, el resultado final y el que se mostrará al usuario.
}
add_action('init', 'funtionsFront');
//Se añade esta función en el inicio de WordPressEn los fichero de ejemplo os dejado unos comentarios explicando cada elemento del fichero. A continuación veremos un ejemplo de como se registra un bloque y de toda la funcionalidad necesaria que necesitamos para su desarrollo.
Si estás realizando este tutorial a la vez que lo desarrollas tendrás la siguiente estructura:
wp-content/plugins/carpeta-para-el-bloque/index.php
Para seguir con el desarrollo, dentro de esa carpeta crearemos un otra para el javascript y dentro del ella añadiremos el fichero de desarrollo del bloque index.js. Volvamos a dejar clara la nueva estructura de carpetas:
wp-content/plugins/carpeta-para-el-bloque/index.php
wp-content/plugins/carpeta-para-el-bloque/js/index.js
Os mostraré un ejemplo de este fichero con el código completo sobre el desarrollo del bloque de la galería, también pondré comentarios explicando cada sección o elemento.
3. Fichero index.js de registro del plugin: Se trata del fichero donde se va a desarrollar el bloque y toda su funcionalidad necesaria. A continuación mostremos un ejemplo.
( function( blocks, components, i18n, element ) {
var el = element.createElement; //nos ayuda a crear los elementos htmml
var MediaUpload = wp.editor.MediaUpload; // funcionalidad del media de WP
var InnerBlocks = wp.editor.InnerBlocks; // Funicionalidad para insertar bloques de Gutenberg
var IconButton = components.IconButton;
blocks.registerBlockType(
'common/newgallery', { // nombre para el bloque
title: i18n.__( 'A new gallery' ),
icon: 'book', //icono para el bloque
category: 'common', //categoría a la que va a pertenecer el bloque
attributes: { //variables con las cuales vamos a desarrollar
title: {type: 'string'},
date: {type: 'string'},
text: {type: 'string'},
mediaID: {
type: 'number',
},
mediaURL: {
type: 'string',
source: 'attribute',
selector: 'img',
attribute: 'src',
}
},
edit: function( props ) {
/*
función editar en ella desarrollaremos todo la parte interna del bloque
y es la que veremos dentro de la parte interna de nuestro WordPress
*/
var focus = props.focus;
var focusedEditable = props.focus ? props.focus.editable || 'name' : null;
var alignment = props.attributes.alignment;
var attributes = props.attributes;
var contactURL = props.attributes.contactURL;
function updateTitle(event) {
props.setAttributes({title: event.target.value})
// función para almacenar temporalmente el contenido de la variable title.
}
function updateText(event) {
props.setAttributes({text: event.target.value})
// función para almacenar temporalmente el contenido de la variable text.
}
var onSelectImage = function( media ) {
// Evento para almacenar la información en la varibles relativas a la información de la imagen.
return props.setAttributes( {
mediaURL: media.url,
mediaID: media.id,
} );
};
return [
/*
Desarrollo del HTML necesario para la recogida de información con la que se va a trabajar
en la parte interna del bloque.
*/
el( 'div', { className: "wp-block-prd"},
el( 'div', { className: "bloque-1 bloque"},
el("h4", {className: "paso-1 paso "},
el("span", {className:'num'},'1'),
'Escoja la portada para la galería'
),
el( 'div', {
id: 'contenedor-1',
className: attributes.mediaID ? 'cont box-img' : 'cont box-img',
style: attributes.mediaID ? { backgroundImage: 'url(' + attributes.mediaURL + ')' } : {}
},
el( MediaUpload, {
onSelect: onSelectImage,
type: 'image',
value: attributes.mediaID,
render: function( obj ) {
return el( IconButton, {
className: attributes.mediaID ? 'image-button' : 'button button-large',
onClick: obj.open
},
! attributes.mediaID ? i18n.__( 'Adjuntar una imagen' ) : el( 'img', { src: attributes.mediaURL } )
);
}
} )
)
),
el( 'div', { className: 'bloque-2 bloque' },
el("h4", {className: "paso-2 paso "},
el("span", {className:'num'},'2'),
'Rellene los siguientes datos'
),
el( "div", { id: "contenedor-2", class: "cont"},
el( "div", { class: "form-box col2"},
el("label", {},'Título de la galería'),
el("input", { type: "text", value: props.attributes.title, onChange: updateTitle }),
),
el("div",{ class: "form-box col1"},
el("label", {},'Añade un comentario'),
el("textarea", { rows: "4", value: props.attributes.text, onChange: updateText }),
)
)
),
el("div", {className: "bloque-3 bloque"},
el("h4", {className: "paso-3 paso "},
el("span", {className:'num'},'3'),
'Ahora añade el bloque de galería que ofrece Gutenberg'
),
el("div", {id: ""},
el(InnerBlocks, {
allowedBlocks: [
'common/gallery',
],
render: function( obj ) {
}}),
)
)
)
];
},
save: function( props ) {
/*
función save en ella desarrollaremos todo la parte externa del bloque
y es la que veremos expuesta en la web, la que verá el usuario final.
En ella desarrollaremos todos los elementos que consideremos necesarios para
mostrar esa información que hemos recogido.
*/
var attributes = props.attributes;
/*
haremos relación a los atributos utilizados en la función edit para poder
mostrar la información que hemos recogido anteriormente en los campos del
formulario.
*/
return (
el( 'div', { className: props.className },
el( "div",
{ class: "bloqueTimeline",
data_total: ""},
el( "div",
{ class: "content"},
el("div",
{ class: "infoR"},
el( 'img', { src: attributes.mediaURL } ),
el("div",{ class: "text"},
el( "h3",{ class: "title"}, props.attributes.title),
el('div', {numberOfLines: 10, class: "desc"}, props.attributes.text ),
el( InnerBlocks.Content, null ),
),
),
),
)
)
);
},
} );
} )(
window.wp.blocks,
window.wp.components,
window.wp.i18n,
window.wp.element,
);
En el return de la funcion edit mostramos la información necesaria para la parte interna. En este caso el bloque que vamos a desarrollar es un galería y por ello preparemos:
– El selector media de WordPress para poder coger la foto de portada de la galería.
-un input texto donde le daremos un título a nuestra galería.
-un textarea, para aportar un comentaario a la galería.
-Por último ofreceremos la posibilidad de añadir el bloque de galería de Gutenberg.
En el return de la función save mostraremos todo el resultado final que queremos que el usuario final vea. Con los ficheros de estilo CSS que encolamos anteriormente podemos dar estilos a esta sección.
Si habéis ido realizando el tutorial a la vez veréis que ya tenemos completo nuestro bloque de galería para Gutenberg. Espero que este post os haya servido de ayuda para entender el proceso de desarrollo de un bloque.