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
Finalmente hay que ver el resultado y probarlo.
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
