{"id":87,"date":"2026-08-26T08:06:20","date_gmt":"2026-08-26T08:06:20","guid":{"rendered":"https:\/\/usestackpulse.com\/bloc-gutenberg-spectra\/"},"modified":"2026-08-30T19:13:11","modified_gmt":"2026-08-30T19:13:11","slug":"bloc-gutenberg-spectra","status":"publish","type":"page","link":"https:\/\/usestackpulse.com\/en\/bloc-gutenberg-spectra\/","title":{"rendered":"Create a custom Gutenberg block with Spectra"},"content":{"rendered":"<div class=\"wp-block-group is-layout-flow wp-block-group-is-layout-flow\" style=\"padding-top:32px;padding-right:24px;padding-bottom:8px;padding-left:24px\">\n<p class=\"usp-eyebrow wp-block-paragraph\">Home \/ CMS &amp; DEV \/ Custom Gutenberg Block<\/p>\n\n\n\n<p class=\"usp-badge wp-block-paragraph\">CMS &amp; DEV<\/p>\n\n\n\n<h1 class=\"wp-block-heading usp-h1\">Create a custom Gutenberg block with Spectra<\/h1>\n\n\n\n<p class=\"usp-meta wp-block-paragraph\">by the team UseStackPulse Updated on August 26, 2026 7 min reading<\/p>\n\n\n\n<p class=\"usp-lede wp-block-paragraph\">Rather than starting from scratch with @wordpress\/create-block, Spectra provides an ideal extensible container base to quickly create a custom block.<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-group usp-ad-slot is-layout-flow wp-block-group-is-layout-flow\" style=\"margin-right:24px;margin-bottom:24px;margin-left:24px\">\n<p class=\"usp-ad-label wp-block-paragraph\">Advertising \/ AD Leaderboard 728\u00d790<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-group is-layout-flow wp-container-core-group-is-layout-ecfbd4fd wp-block-group-is-layout-flow\" style=\"margin-right:24px;margin-bottom:24px;margin-left:24px\">\n<h2 class=\"wp-block-heading usp-h2\">Basic block structure<\/h2>\n\n\n\n<p class=\"usp-card-excerpt wp-block-paragraph\">Each Gutenberg block requires a block.json file describing its attributes and mount point.<\/p>\n\n\n\n<pre class=\"wp-block-code usp-code\"><code>{\n  \"apiVersion\": 3,\n  \"name\": \"usp\/highlight-card\",\n  \"title\": \"USP Highlight Card\",\n  \"category\": \"design\",\n  \"attributes\": {\n    \"title\": { \"type\": \"string\" },\n    \"accentColor\": { \"type\": \"string\", \"default\": \"#D97706\" }\n  }\n}<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading usp-h3\">The Edit.js component<\/h3>\n\n\n\n<pre class=\"wp-block-code usp-code\"><code>import { useBlockProps, RichText } from '@wordpress\/block-editor';\n\nexport default function Edit({ attributes, setAttributes }) {\n  const blockProps = useBlockProps();\n  return (\n    <div {...blockprops}=\"\" style=\"{{\" borderleft:=\"\" solid=\"\" +=\"\" attributes.accentcolor=\"\" }}=\"\">\n      <richtext tagname=\"h3\" value=\"{attributes.title}\" onchange=\"{(title)\"> setAttributes({ title })}\n      \/&gt;\n    <\/richtext><\/div>\n  );\n}<\/code><\/pre>\n\n\n\n<p class=\"usp-tip wp-block-paragraph\">Tip: Inspect the Spectra\/Container source code through the code editor to inspire your attribute naming conventions.<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-group usp-ad-slot is-layout-flow wp-block-group-is-layout-flow\" style=\"margin-right:24px;margin-bottom:24px;margin-left:24px\">\n<p class=\"usp-ad-label wp-block-paragraph\">Advertising \/ AD In-article 336\u00d7280<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-group is-layout-flow wp-container-core-group-is-layout-b241125f wp-block-group-is-layout-flow\" style=\"margin-right:24px;margin-bottom:40px;margin-left:24px\">\n<h2 class=\"wp-block-heading usp-h2\">frequently asked questions<\/h2>\n\n\n\n<details class=\"wp-block-details usp-faq is-layout-flow wp-block-details-is-layout-flow\"><summary>Do you need node.js to create a block?<\/summary>\n<p class=\"wp-block-paragraph\" style=\"font-size:13px\">Yes, @wordpress\/scripts relies on WebPack and requires Node.js to compile JSX into native JavaScript.<\/p>\n<\/details>\n\n\n\n<details class=\"wp-block-details usp-faq is-layout-flow wp-block-details-is-layout-flow\"><summary>Does the block work without Spectra installed?<\/summary>\n<p class=\"wp-block-paragraph\" style=\"font-size:13px\">Yes, a custom block created so is totally independent; Spectra serves only as a structural inspiration.<\/p>\n<\/details>\n<\/div>","protected":false},"excerpt":{"rendered":"<p>Accueil \/ CMS &amp; Dev \/ Bloc Gutenberg personnalis\u00e9 CMS &amp; DEV Cr\u00e9er un bloc Gutenberg personnalis\u00e9 avec Spectra Par [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"_zipai_imported":false,"_zipai_import_id":"","footnotes":""},"class_list":["post-87","page","type-page","status-publish","hentry"],"spectra_blocks_featured_image_url":null,"spectra_blocks_author_info":{"display_name":"usestackpulse","avatar_url":"https:\/\/secure.gravatar.com\/avatar\/f2c693076eefeb6a1ac9f8299c6623627456d026be6ffbbb32fd62bd98781cc5?s=96&d=mm&r=g","author_link":"https:\/\/usestackpulse.com\/en\/author\/usestackpulse\/","description":""},"_links":{"self":[{"href":"https:\/\/usestackpulse.com\/en\/wp-json\/wp\/v2\/pages\/87","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/usestackpulse.com\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/usestackpulse.com\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/usestackpulse.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/usestackpulse.com\/en\/wp-json\/wp\/v2\/comments?post=87"}],"version-history":[{"count":0,"href":"https:\/\/usestackpulse.com\/en\/wp-json\/wp\/v2\/pages\/87\/revisions"}],"wp:attachment":[{"href":"https:\/\/usestackpulse.com\/en\/wp-json\/wp\/v2\/media?parent=87"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}