Cómo crear un bloque Gutenberg personalizado en WordPress (guía paso a paso)

WordPress / Por / 7 de febrero de 2026
How to create a custom Gutenberg block in WordPress step‑by‑step guide

El editor de bloques Gutenberg (introducido en WordPress 5.0) se ha convertido en la forma predeterminada de crear contenido en WordPress. Si bien hay miles de bloques prefabricados a partir de complementos y temas, crear su propio bloque Gutenberg personalizado le brinda control total, perfecto para elementos de marca, componentes reutilizables o funcionalidades únicas que ningún bloque existente ofrece. En 2026, con la edición completa del sitio y los temas de bloques ahora estándar, los bloques personalizados son más importantes que nunca para las agencias, desarrolladores y empresas que desean un diseño coherente en todas las páginas.

En Cope Business, construimos bloques Gutenberg personalizados para clientes durante nuestra servicios de auditoría técnica SEO para mejorar la coherencia del contenido, la velocidad de la página y la experiencia del usuario sin depender de complementos pesados ​​de terceros.
Esta guía para principiantes a intermedios le muestra dos formas prácticas de crear un bloque Gutenberg personalizado en WordPress: usando un complemento (la más fácil) y desde cero con código (la más flexible).

¿Por qué crear un bloque Gutenberg personalizado?

  • Consistencia de marca — Cree elementos reutilizables que coincidan con su sistema de diseño
  • Funcionalidad única — Agregar funciones que ningún bloque existente tiene (por ejemplo, tablas de precios personalizadas, testimonios con calificaciones)
  • Actuación — Evite los complementos inflados; solo carga lo que necesitas
  • Reutilizabilidad — Utilice el mismo bloque en publicaciones, páginas y plantillas.
  • A prueba de futuro — Los temas de bloques y la edición completa del sitio hacen que los bloques personalizados sean más potentes

Método 1: Usar un complemento: la forma más fácil (no se requiere código)

Si desea crear bloques sin escribir JavaScript/PHP, utilice un complemento de creación de bloques.

Complemento recomendado: Block Lab o Kadence Blocks (Gratis/Pro)

La mejor opción gratuita: Bloques de cadencia (núcleo gratuito + Pro)

Pasos

  1. Instalar Bloques de cadencia de Complementos > Agregar nuevo.
  2. Ir a Bloques Kadence > Biblioteca de bloques → Habilite los bloques de inicio que desee.
  3. Para bloques verdaderamente personalizados:
    • Usar Bloques Kadence Pro (~$79/año) → Función avanzada de bloques personalizados
    • O usar Laboratorio de bloques (gratis) + Campos personalizados avanzados (ACF) (gratis/profesional)
  4. En ACF → Crear un nuevo grupo de campos → Agregar campos (texto, imagen, repetidor, etc.)
  5. En Block Lab → Crear nuevo bloque → Vincular a campos ACF → Plantilla de diseño en PHP/HTML
  6. Guardar → Aparece un nuevo bloque en el insertador de Gutenberg.

Alternativa: Generador de bloques Gutenberg (herramienta en línea) → Genera código → pegar en WPCode.

Ventajas: Código bajo o sin código, configuración visual, rápido.
Contras: Menos flexibilidad que el código puro; puede agregar hinchazón.

Método 2: crear un bloque personalizado desde cero (método de código: el más potente)

Este método brinda control total y está preparado para el futuro para temas de bloques.

Requisitos previos

  • Sitio local/de prueba (LocalWP o DevKinsta)
  • Node.js y npm instalados
  • Conocimientos básicos de JavaScript y PHP.
  • Editor de código (código VS)

Paso a paso: cree un bloque simple de "llamado a la acción"

  • Crear carpeta de complementos
    • /wp-content/plugins/cope-custom-blocks/Crear: cope-custom-blocks.php
PHP/** * Nombre del complemento: Cope Bloques Gutenberg personalizados * Descripción: Bloques personalizados para sitios Cope Business * Versión: 1.0 * Autor: Cope Negocios */  función cope_register_custom_blocks() { if (! function_exists( 'register_block_type' ) ) { retorno; } registrar_bloque_tipo( __DIR__ . '/bloques/llamada a la acción' ); } add_action('init', 'cope_register_custom_blocks'); function cope_enqueue_block_assets() { wp_enqueue_script( 'cope-blocks-editor', plugins_url( '/blocks/call-to-action/index.js', __FILE__ ), array( 'wp-blocks', 'wp-i18n', 'wp-element', 'wp-editor' ), filemtime( plugin_dir_path( __FILE__ ) 'bloques/llamado a la acción/index.js' ) ); wp_enqueue_style( 'estilo-bloques-de-cope', plugins_url( '/blocks/call-to-action/style.css', __FILE__ ), array(), filemtime( plugin_dir_path( __FILE__ ) . 'blocks/call-to-action/style.css' ) ); } add_action('enqueue_block_editor_assets', 'cope_enqueue_block_assets');
  • Crear carpetas y archivos de bloques
    • Crear carpeta: /bloques/llamado a la acción/Agregar archivos:
      • bloque.jsonindex.jseditor.cssstyle.css
    bloque.json (define metadatos del bloque)
JSON{ 'apiVersion': 3, 'nombre': 'cope/llamado a la acción', 'título': 'Llamado a la acción', 'categoría': 'texto', 'icono': 'megáfono', 'descripción': 'Un bloque de llamado a la acción personalizado', 'soportes': { 'html': false }, 'textdomain': 'cope-blocks', 'editorScript': 'file:./index.js', 'style': 'file:./style.css', 'editorStyle': 'file:./editor.css', 'attributes': { 'title': { 'type': 'string', 'default': '¿Listo para comenzar?' }, 'content': { 'type': 'string', 'default': 'Contáctenos hoy para una consulta gratuita.' }, 'buttonText': { 'tipo': 'cadena', 'predeterminado': 'Póngase en contacto' }, 'buttonUrl': { 'tipo': 'cadena', 'predeterminado': '' } } }
  • index.js (editor y lógica de guardado)
javascriptimport { registerBlockType } from '@wordpress/blocks'; import { TextControl, URLInputButton } from '@wordpress/components'; import { useBlockProps } from '@wordpress/block-editor'; registerBlockType( 'cope/call-to-action', { edit: ( { attributes, setAttributes } ) => { const blockProps = useBlockProps(); return ( 
 etiqueta='Título'  valor={ atributos.título }  en cambio={ ( val ) => setAttributes( { título: val } ) } /> etiqueta='Contenido'  valor={ atributos.contenido }  en cambio={ ( val ) => setAttributes( { contenido: val } ) } /> etiqueta='URL del botón'  URL={ atributos.buttonUrl }  en cambio={ ( url ) => setAttributes( { buttonUrl: url } ) } /> etiqueta='Texto del botón'  valor={ atributos.buttonText }  en cambio={ ( val ) => setAttributes( { buttonText: val } ) } /> 
 ); }, save: ( { attributes } ) => { const blockProps = useBlockProps.save(); return ( 
 
{ attributes.title }
 
{ attributes.content }
 { attributes.buttonUrl && (   href={ atributos.buttonUrl }  nombre de clase='button'> { attributes.buttonText }  ) } 
 ); }, } );
  • estilo.css & editor.css — Añade un estilo básico.
  • Activar complemento → Ir a Complementos → Activar “Cope Custom Gutenberg Blocks”.
  • Prueba: Agregar bloque en el editor → aparece “Afrontar / Llamado a la acción” → Personalizar y guardar.

Ventajas: Control total, reutilizable, sin complementos adicionales. Contras: Requiere conocimientos de JavaScript/PHP; prueba a fondo.

Mejores prácticas para bloques Gutenberg personalizados

  • Utilice siempre un complemento o un tema secundario; nunca edite archivos principales.
  • Utilice @wordpress/scripts para el desarrollo de bloques modernos (npm start/build).
  • Pruebe en dispositivos móviles, diferentes navegadores y bloquee temas.
  • Mantenga los bloques livianos: evite dependencias pesadas.
  • Agregue estilos de bloques y variaciones para mayor flexibilidad.
  • Utilice enlaces @wordpress/block-editor para una mejor compatibilidad.

Los bloques personalizados le brindan elementos reutilizables con su marca, excelentes para lograr coherencia.

Pensamientos finales

Crear un bloque Gutenberg personalizado en WordPress le permite agregar exactamente la funcionalidad y el diseño que su sitio necesita. Comience con un complemento como Kadence Blocks o Block Lab si desea código bajo, o cree desde cero para obtener el máximo control.

Los bloques personalizados preparan su sitio para el futuro para temas de bloqueo y edición del sitio completo.

¿Necesita ayuda para crear bloques personalizados, optimizar su editor o mejorar el rendimiento general del sitio? Contacte a Cope Business para una consulta técnica gratuita de SEO: crearemos bloques y soluciones personalizados para mejorar su experiencia con WordPress.

¿Fue útil este artículo?
SíNo

Publicaciones relacionadas