septiembre 11, 2020

Cómo crear un bloque Gutenberg personalizado sin complemento

Presentamos cómo crear un bloque Gutenberg personalizado sin complemento, lo cual puede traer ahorro de tiempo y ayudar al estilo visual.

Un bloque gutenberg personalizado puede ser difícil de crear, especialmente si no conoce el camino para hacerlo con Javascript.

Este proceso no es complejo, además hay que pensar que los bloques de Gutenberg pueden ahorrar mucho tiempo y son buenos para ayudar al estilo visual.

La cantidad de bloques disponibles seguramente aumentará con el tiempo. Los desarrolladores principales de WordPress agregarán nuevos elementos y características, y se completarán los espacios en blanco como lo hacen habitualmente.

A continuación, presentamos los pasos:

Registrar el tipo de bloque y el activo

El formato del nombre del bloque debe ser igual al: espacio de nombres e ID de bloque.

functions.php

add_action( ‘init’, ‘my_register_block_type’ );

function my_register_block_type() {

// if Gutenberg is not active

if ( !function_exists( ‘register_block_type’ ) ) {

return;

}

// Register assets

$css_dir = get_stylesheet_directory_uri() . ‘/assets/css’;

$js_dir = get_stylesheet_directory_uri() . ‘/assets/js’;

wp_register_script( ‘my-block-admin’, $js_dir . ‘/my-block-admin.js’, [ ‘wp-blocks’, ‘wp-dom’ ] , null, true );

wp_register_style( ‘my-block-admin’, $css_dir . ‘/my-block-admin.css’, [ ‘wp-edit-blocks’ ] );

wp_register_style( ‘my-block’, $css_dir . ‘/my-block.css’ );

// Register block type and enqueue the assets.

register_block_type( ‘my/simple-text’, [

‘editor_style’ => ‘my-block-admin’, // admin only

‘editor_script’ => ‘my-block-admin’, // admin only

‘style’ => ‘my-block’, // admin & public

] );

}

Script básico para crear bloques personalizados

js/my-editor.js

( function( blocks, element, blockEditor ) {

var el = element.createElement;

var RichText = blockEditor.RichText;

blocks.registerBlockType( ‘my/simple-text’, {

title: ‘Simple Text (Custom)’,

icon: ‘universal-access-alt’,

category: ‘layout’,

attributes: {},

edit: myEdit,

save: mySave

} );

// what’s rendered in admin

function myEdit( _props ) {

}

// what’s saved and rendered in frontend

function mySave() {

}

}( window.wp.blocks, window.wp.element, window.wp.blockEditor ) );

Implementar, editar y guardar atributos

js/my-editor.js

( function( blocks, element, blockEditor ) {

var el = element.createElement;

var RichText = blockEditor.RichText;

blocks.registerBlockType( ‘my/simple-text’, {

title: ‘Simple Text (Custom)’,

icon: ‘universal-access-alt’,

category: ‘layout’,

example: {},

// All the children inside ‘p’ will be extracted as ‘text’ variable.

attributes: {

text: { type: ‘array’, source: ‘children’, selector: ‘p’ }

},

edit: myEdit,

save: mySave,

} );

// Render RichText (field with basic toolbar) wrapped with ‘p’

function myEdit( props ) {

return el( RichText, {

tagName: ‘p’,

onChange: _onChange,

value: props.attributes.text,

className: props.className,

} );

// when changed, update the attribute

function _onChange( newContent ) {

props.setAttributes( { text: newContent } );

}

}

// Save the content of RichText wrapped with ‘p’

function mySave( props ) {

return el( RichText.Content, {

tagName: ‘p’,

className: props.className,

value: props.attributes.text,

} );

}

}( window.wp.blocks, window.wp.element, window.wp.blockEditor ) );

Resultados de sus bloques personalizados

Bloque Gutenberg 1
Bloque Gutenberg

Finalmente hay que ver el resultado y probarlo.

Bloque Gutenberg 2
Bloque Gutenberg final

Leíste: Cómo crear un bloque Gutenberg personalizado sin complemento, te recomendamos: Software de traducción automática para WordPress

Te invitamos a que nos sigas en nuestras redes sociales: Facebook, Twitter, Instagram y Youtube con el perfil: @tortugacode