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