Crea un bloque Gutenberg personalizado con Spectra

Por el equipo UseStackPulse Actualizado el 26 de agosto de 2026 7 min Reading

En lugar de comenzar desde cero con @WordPress/Create-Block, Spectra proporciona una base de contenedor extensible ideal para crear rápidamente un bloque personalizado.

Estructura básica de bloques

Cada bloque de Gutenberg requiere un archivo block.json que describa sus atributos y el punto de montaje.

{
  "apiVersion": 3,
  "name": "usp/highlight-card",
  "title": "USP Highlight Card",
  "category": "design",
  "attributes": {
    "title": { "type": "string" },
    "accentColor": { "type": "string", "default": "#D97706" }
  }
}

El componente edit.js

importar { useblockprops, richtext } desde '@wordpress/block-editor'; exportar función predeterminada edit({ atributos, setAttributes }) { const blockprops = useBlockProps(); devolver (
    
       setAttributes({ title })}
      />
    
  );
}

Sugerencia: Inspeccione el código fuente de Spectra/Container a través del editor de código para inspirar sus convenciones de nombres de atributos.

Preguntas frecuentes

¿Necesitas Node.js para crear un bloque?

Sí, @WordPress/Scripts se basa en Webpack y requiere Node.js para compilar jsx en JavaScript nativo.

¿El bloque funciona sin espectros instalados?

Sí, un bloque personalizado creado por lo que es totalmente independiente; Spectra sirve solo como inspiración estructural.