Create a custom Gutenberg block with Spectra

by the team UseStackPulse Updated on August 26, 2026 7 min reading

Rather than starting from scratch with @wordpress/create-block, Spectra provides an ideal extensible container base to quickly create a custom block.

Basic block structure

Each Gutenberg block requires a block.json file describing its attributes and mount point.

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

The Edit.js component

import { useBlockProps, RichText } from '@wordpress/block-editor';

export default function Edit({ attributes, setAttributes }) {
  const blockProps = useBlockProps();
  return (
    
       setAttributes({ title })}
      />
    
  );
}

Tip: Inspect the Spectra/Container source code through the code editor to inspire your attribute naming conventions.

frequently asked questions

Do you need node.js to create a block?

Yes, @wordpress/scripts relies on WebPack and requires Node.js to compile JSX into native JavaScript.

Does the block work without Spectra installed?

Yes, a custom block created so is totally independent; Spectra serves only as a structural inspiration.