{"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\/es\/bloc-gutenberg-spectra\/","title":{"rendered":"Crea un bloque Gutenberg personalizado con 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\">Inicio \/ CMS &amp; DEV \/ Bloque Gutenberg personalizado<\/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\">Crea un bloque Gutenberg personalizado con Spectra<\/h1>\n\n\n\n<p class=\"usp-meta wp-block-paragraph\">Por el equipo UseStackPulse Actualizado el 26 de agosto de 2026 7 min Reading<\/p>\n\n\n\n<p class=\"usp-lede wp-block-paragraph\">En lugar de comenzar desde cero con @WordPress\/Create-Block, Spectra proporciona una base de contenedor extensible ideal para crear r\u00e1pidamente un bloque personalizado.<\/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\">Publicidad \/ Tabla de clasificaci\u00f3n publicitaria 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\">Estructura b\u00e1sica de bloques<\/h2>\n\n\n\n<p class=\"usp-card-excerpt wp-block-paragraph\">Cada bloque de Gutenberg requiere un archivo block.json que describa sus atributos y el punto de montaje.<\/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\">El componente edit.js<\/h3>\n\n\n\n<pre class=\"wp-block-code usp-code\"><code>importar { useblockprops, richtext } desde '@wordpress\/block-editor'; exportar funci\u00f3n predeterminada edit({ atributos, setAttributes }) { const blockprops = useBlockProps(); devolver (\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\">Sugerencia: Inspeccione el c\u00f3digo fuente de Spectra\/Container a trav\u00e9s del editor de c\u00f3digo para inspirar sus convenciones de nombres de atributos.<\/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\">Publicidad \/ Anuncio en el art\u00edculo 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\">Preguntas frecuentes<\/h2>\n\n\n\n<details class=\"wp-block-details usp-faq is-layout-flow wp-block-details-is-layout-flow\"><summary>\u00bfNecesitas Node.js para crear un bloque?<\/summary>\n<p class=\"wp-block-paragraph\" style=\"font-size:13px\">S\u00ed, @WordPress\/Scripts se basa en Webpack y requiere Node.js para compilar jsx en JavaScript nativo.<\/p>\n<\/details>\n\n\n\n<details class=\"wp-block-details usp-faq is-layout-flow wp-block-details-is-layout-flow\"><summary>\u00bfEl bloque funciona sin espectros instalados?<\/summary>\n<p class=\"wp-block-paragraph\" style=\"font-size:13px\">S\u00ed, un bloque personalizado creado por lo que es totalmente independiente; Spectra sirve solo como inspiraci\u00f3n estructural.<\/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\/es\/author\/usestackpulse\/","description":""},"_links":{"self":[{"href":"https:\/\/usestackpulse.com\/es\/wp-json\/wp\/v2\/pages\/87","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/usestackpulse.com\/es\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/usestackpulse.com\/es\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/usestackpulse.com\/es\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/usestackpulse.com\/es\/wp-json\/wp\/v2\/comments?post=87"}],"version-history":[{"count":2,"href":"https:\/\/usestackpulse.com\/es\/wp-json\/wp\/v2\/pages\/87\/revisions"}],"predecessor-version":[{"id":184,"href":"https:\/\/usestackpulse.com\/es\/wp-json\/wp\/v2\/pages\/87\/revisions\/184"}],"wp:attachment":[{"href":"https:\/\/usestackpulse.com\/es\/wp-json\/wp\/v2\/media?parent=87"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}