Cómo crear un bloque Gutenberg personalizado en WordPress (Guía de Paso a Paso)

WordPress / Por / febrero 7, 2026
Cómo crear un bloque Gutenberg personalizado en WordPress guía paso a paso

El editor de bloques Gutenberg (introducido en WordPress 5.0) se ha convertido en la forma predeterminada de construir contenido en WordPress. Mientras que hay miles de bloques pre-hecho de plugins y temas, crear su propio bloque Gutenberg personalizado le da control completo — perfecto para elementos de marca, componentes reutilizables, o funcionalidad única que no ofrece bloque existente. En 2026, con temas de edición y bloques completos, los bloques personalizados son más importantes que nunca para agencias, desarrolladores y empresas que quieren un diseño consistente a través de páginas.

En Cope Business, construimos bloques Gutenberg personalizados para clientes durante nuestro servicios técnicos de auditoría de la SEO mejorar la consistencia del contenido, la velocidad de página y la experiencia del usuario sin depender de plugins de terceros pesados.
Esta guía principiante-a-intermedio le muestra dos maneras prácticas de crear un bloque Gutenberg personalizado en WordPress — usando un plugin (más fácil) y desde cero con código (más flexible).

¿Por qué crear un bloque Gutenberg personalizado?

  • Brand Consistency — Crear elementos reutilizables que coincidan con su sistema de diseño
  • Función única — Añada características que ningún bloque existente tiene (por ejemplo, tablas de precios personalizadas, testimonios con calificaciones)
  • Ejecución — Evite los plugins hinchados; sólo cargue lo que necesita
  • Reutilización — Use el mismo bloque entre publicaciones, páginas y plantillas
  • Future-Proof — Los temas bloque y la edición de sitio completo hacen que los bloques personalizados más poderosos

Método 1: Usando un plugin – la manera más fácil (No se requiere código)

Si desea crear bloques sin escribir JavaScript/PHP, utilice un plugin de constructor de bloques.

Plugin recomendado: Bloques de laboratorio o bloques de cadencia (libre/pro)

Mejor opción gratuita: Bloqueos de Kadence (free core + Pro)

Pasos

  1. Instala Bloqueos de Kadence desde Plugins Añadir nuevo.
  2. Ve Bloques de Kadence Biblioteca del bloque → Permite cualquier bloque de arranque que desee.
  3. Para bloques verdaderamente personalizados:
    • Uso Kadence Blocks Pro (~$79/year) → Características de los bloques personalizados avanzados
    • O uso Laboratorio de bloques (gratuito) + Advanced Custom Fields (ACF) (free/pro)
  4. En ACF → Crear un nuevo grupo de campo → Agregar campos (texto, imagen, repetidor, etc.)
  5. En Block Lab → Crear nuevo bloque → Enlace a campos ACF → Plantilla de diseño en PHP/HTML
  6. Guardar → Nuevo bloque aparece en Gutenberg inserter.

Alternativa: Gutenberg Block Generator (herramienta online) → Genera código → pegar en WPCode.

Pros: Código no/bajo, configuración visual, rápido.
Cons: Menos flexibilidad que código puro; puede añadir hinchazón.

Método 2: Creación de un bloque aduanero de Scratch (método del código – más poderoso)

Este método da pleno control y es a prueba de futuro para temas bloque.

Prerrequisitos

  • Local/estación (LocalWP o DevKinsta)
  • Node.js & npm instalado
  • Conocimiento básico de PHP
  • Code editor (VS Code)

Paso a paso: Crear un bloque de “llamada a la acción”

  • Crear carpeta de plugin
    • /wp-content/plugins/cope-custom-blocks/Crear: cope-custom-blocks.php
PHP<?php /** * Plugin Name: Cope Custom Gutenberg Blocks * Description: Custom blocks for Cope Business sites * Version: 1.0 * Author: Cope Business */ function cope_register_custom_blocks() { if ( ! function_exists( 'register_block_type' ) ) { return; } register_block_type( __DIR__ . '/blocks/call-to-action' ); } 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__ ) . 'blocks/call-to-action/index.js' ) ); wp_enqueue_style( 'cope-blocks-style', 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 carpeta bloque " archivos
    • Crear carpeta: /blocks/call-to-action/Add ficheros:
      • block.jsonindex.jseditor.cssstyle.css
    block.json (defines block metadata)
JSON{ "apiVersion": 3, "name": "cope/call-to-action", "title": "Call to Action", "category": "text", "icon": "megaphone", "description": "A custom call to action block", "supports": { "html": false }, "textdomain": "cope-blocks", "editorScript": "file:./index.js", "style": "file:./style.css", "editorStyle": "file:./editor.css", "attributes": { "title": { "type": "string", "default": "Ready to Get Started?" }, "content": { "type": "string", "default": "Contact us today for a free consultation." }, "buttonText": { "type": "string", "default": "Get in Touch" }, "buttonUrl": { "type": "string", "default": "" } } }
  • index.js (editor & save logic)
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 ( <div { ...blockProps }> <TextControl label="Title" value={ attributes.title } onChange={ ( val ) => setAttributes( { title: val } ) } /> <TextControl label="Content" value={ attributes.content } onChange={ ( val ) => setAttributes( { content: val } ) } /> <URLInputButton label="Button URL" url={ attributes.buttonUrl } onChange={ ( url ) => setAttributes( { buttonUrl: url } ) } /> <TextControl label="Button Text" value={ attributes.buttonText } onChange={ ( val ) => setAttributes( { buttonText: val } ) } /> </div> ); }, save: ( { attributes } ) => { const blockProps = useBlockProps.save(); return ( <div { ...blockProps }> <h3>{ attributes.title }</h3> <p>{ attributes.content }</p> { attributes.buttonUrl && ( <a href={ attributes.buttonUrl } className="button"> { attributes.buttonText } </a> ) } </div> ); }, } );
  • estilo.css & editor.cs - Añadir estilo básico.
  • Activar Plugin → Ir a Plugins → Activar “Cope Custom Gutenberg Bloques”.
  • Prueba: Add block in editor → “Cope / Call to Action” aparece → Personalizar & guardar.

Pros: Control completo, reutilizable, sin plugins adicionales. Cons: Requiere el conocimiento de JavaScript/PHP; prueba a fondo.

Mejores prácticas para bloques de Gutenberg personalizados

  • Utilice siempre un plugin o tema infantil — nunca editar archivos básicos.
  • Utilice @wordpress/scripts para el desarrollo de bloques modernos (npm start/build).
  • Prueba en temas móviles, diferentes navegadores y bloques.
  • Mantener bloques ligeros — evitar dependencias pesadas.
  • Añadir estilos de bloque " variaciones para la flexibilidad.
  • Utilice @wordpress/block-editor ganchos para la mejor compatibilidad.

Los bloques personalizados le dan elementos de marca, reutilizables — gran para la consistencia.

Pensamientos finales

Crear un bloque Gutenberg personalizado en WordPress le permite añadir exactamente la funcionalidad y diseñar sus necesidades del sitio. Comience con un plugin como Kadence Blocks o Block Lab si desea código bajo, o construya desde cero para el máximo control.

A medida bloquea su sitio para temas de bloque y edición de sitio completo.

¿Necesita ayuda para crear bloques personalizados, optimizar su editor o mejorar el rendimiento general del sitio? Contacto Cope Business para una consulta técnica SEO libre — vamos a construir bloques y soluciones a medida para elevar su experiencia de WordPress.

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

Puestos relacionados