{"id":7595,"date":"2024-05-22T05:53:40","date_gmt":"2024-05-22T05:53:40","guid":{"rendered":"https:\/\/aguaps.com\/blog\/marketing-es\/como-anadir-css-clases-e-id-al-editor-de-bloques-en-wordpress-gutenberg\/"},"modified":"2025-08-11T23:02:47","modified_gmt":"2025-08-11T23:02:47","slug":"como-anadir-css-clases-e-id-al-editor-de-bloques-en-wordpress-gutenberg","status":"publish","type":"post","link":"https:\/\/aguaps.com\/es\/blog\/wp-es\/como-anadir-css-clases-e-id-al-editor-de-bloques-en-wordpress-gutenberg\/","title":{"rendered":"C\u00f3mo a\u00f1adir CSS clases e id al editor de bloques en WordPress Gutenberg."},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">Hace un tiempo cambi\u00e9 mi editor de WordPress por un editor de bloques (Gutenberg), pero me cost\u00f3 averiguar c\u00f3mo a\u00f1adir clases CSS a los bloques, as\u00ed que aqu\u00ed tienes una explicaci\u00f3n.<\/p>\n\n\n\n<!--more-->\n\n\n\n<h2 class=\"wp-block-heading titleStyle\" id=\"titleID\">Quiero poner clases CSS e ids en los bloques.<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">Forma incorrecta de ponerlo<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Por ejemplo, si quisiera a\u00f1adir un nombre de clase CSS al bloque de encabezamiento H2 anterior, \u00bfpodr\u00eda a\u00f1adirlo simplemente desde el men\u00fa \u00abEditar HTML\u00bb del men\u00fa del bloque? Pens\u00e9 que s\u00ed e intent\u00e9 modificarlo, pero&#8230;<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;h2 class=\"wp-block-heading titleStyle\">Quiero poner una clase CSS o id en un bloque&lt;\/h2><\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">&#8216;Este bloque contiene contenido inesperado o inv\u00e1lido&#8217;. y error.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"119\" src=\"https:\/\/aguaps.com\/wp-content\/uploads\/2024\/05\/sc_es-error_html_class-1024x119.jpg\" alt=\"\" class=\"wp-image-7599\" srcset=\"https:\/\/aguaps.com\/wp-content\/uploads\/2024\/05\/sc_es-error_html_class-1024x119.jpg 1024w, https:\/\/aguaps.com\/wp-content\/uploads\/2024\/05\/sc_es-error_html_class-300x35.jpg 300w, https:\/\/aguaps.com\/wp-content\/uploads\/2024\/05\/sc_es-error_html_class-768x89.jpg 768w, https:\/\/aguaps.com\/wp-content\/uploads\/2024\/05\/sc_es-error_html_class-1536x178.jpg 1536w, https:\/\/aguaps.com\/wp-content\/uploads\/2024\/05\/sc_es-error_html_class-518x60.jpg 518w, https:\/\/aguaps.com\/wp-content\/uploads\/2024\/05\/sc_es-error_html_class.jpg 1708w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Pulse el bot\u00f3n \u00abIntentar la recuperaci\u00f3n de bloque\u00bb para volver al estado anterior a la modificaci\u00f3n.<\/p>\n\n\n\n<div style=\"height:80px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading\">C\u00f3mo a\u00f1adir selectores de clase Parte 1<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">La forma correcta de establecer la clase es seleccionar el bloque al que se va a a\u00f1adir la clase, y en el men\u00fa de configuraci\u00f3n del bloque, a la derecha, hay un campo de entrada llamado \u00abClase CSS adicional\u00bb en la secci\u00f3n Configuraci\u00f3n \u00abAvanzado\u00bb, donde puede establecer el nombre de la clase.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/aguaps.com\/wp-content\/uploads\/2024\/05\/sc_es-error_html_class02-scaled.jpg\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"571\" src=\"https:\/\/aguaps.com\/wp-content\/uploads\/2024\/05\/sc_es-error_html_class02-1024x571.jpg\" alt=\"\" class=\"wp-image-7603\" srcset=\"https:\/\/aguaps.com\/wp-content\/uploads\/2024\/05\/sc_es-error_html_class02-1024x571.jpg 1024w, https:\/\/aguaps.com\/wp-content\/uploads\/2024\/05\/sc_es-error_html_class02-300x167.jpg 300w, https:\/\/aguaps.com\/wp-content\/uploads\/2024\/05\/sc_es-error_html_class02-768x428.jpg 768w, https:\/\/aguaps.com\/wp-content\/uploads\/2024\/05\/sc_es-error_html_class02-1536x856.jpg 1536w, https:\/\/aguaps.com\/wp-content\/uploads\/2024\/05\/sc_es-error_html_class02-2048x1142.jpg 2048w, https:\/\/aguaps.com\/wp-content\/uploads\/2024\/05\/sc_es-error_html_class02-108x60.jpg 108w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n\n\n\n<div style=\"height:50px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"572\" height=\"928\" src=\"https:\/\/aguaps.com\/wp-content\/uploads\/2024\/05\/sc_es-error_html_class02-1.jpg\" alt=\"\" class=\"wp-image-7606\" style=\"width:311px;height:auto\" srcset=\"https:\/\/aguaps.com\/wp-content\/uploads\/2024\/05\/sc_es-error_html_class02-1.jpg 572w, https:\/\/aguaps.com\/wp-content\/uploads\/2024\/05\/sc_es-error_html_class02-1-185x300.jpg 185w, https:\/\/aguaps.com\/wp-content\/uploads\/2024\/05\/sc_es-error_html_class02-1-37x60.jpg 37w\" sizes=\"auto, (max-width: 572px) 100vw, 572px\" \/><\/figure>\n<\/div>\n\n\n<div style=\"height:50px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<div style=\"height:50px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/aguaps.com\/wp-content\/uploads\/2024\/05\/sc_es-error_html_class02-2-scaled.jpg\" target=\"_blank\" rel=\"noreferrer noopener\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"261\" src=\"https:\/\/aguaps.com\/wp-content\/uploads\/2024\/05\/sc_es-error_html_class02-2-1024x261.jpg\" alt=\"\" class=\"wp-image-7609\" srcset=\"https:\/\/aguaps.com\/wp-content\/uploads\/2024\/05\/sc_es-error_html_class02-2-1024x261.jpg 1024w, https:\/\/aguaps.com\/wp-content\/uploads\/2024\/05\/sc_es-error_html_class02-2-300x76.jpg 300w, https:\/\/aguaps.com\/wp-content\/uploads\/2024\/05\/sc_es-error_html_class02-2-768x196.jpg 768w, https:\/\/aguaps.com\/wp-content\/uploads\/2024\/05\/sc_es-error_html_class02-2-1536x391.jpg 1536w, https:\/\/aguaps.com\/wp-content\/uploads\/2024\/05\/sc_es-error_html_class02-2-2048x521.jpg 2048w, https:\/\/aguaps.com\/wp-content\/uploads\/2024\/05\/sc_es-error_html_class02-2-236x60.jpg 236w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><figcaption class=\"wp-element-caption\">Reflejado en source.<\/figcaption><\/figure>\n\n\n\n<div style=\"height:80px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading\">C\u00f3mo a\u00f1adir selectores de clase Parte 2<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Si selecciona \u00abHTML personalizado\u00bb para el bloque y escribe la clase en l\u00ednea, puede configurarlo del mismo modo que Parte 1.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"674\" height=\"616\" src=\"https:\/\/aguaps.com\/wp-content\/uploads\/2024\/05\/sc_es-error_html_class03.jpg\" alt=\"\" class=\"wp-image-7612\" style=\"width:290px;height:auto\" srcset=\"https:\/\/aguaps.com\/wp-content\/uploads\/2024\/05\/sc_es-error_html_class03.jpg 674w, https:\/\/aguaps.com\/wp-content\/uploads\/2024\/05\/sc_es-error_html_class03-300x274.jpg 300w, https:\/\/aguaps.com\/wp-content\/uploads\/2024\/05\/sc_es-error_html_class03-66x60.jpg 66w\" sizes=\"auto, (max-width: 674px) 100vw, 674px\" \/><\/figure>\n<\/div>\n\n\n<div style=\"height:50px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"153\" src=\"https:\/\/aguaps.com\/wp-content\/uploads\/2024\/05\/sc_es-error_html_class04-1024x153.jpg\" alt=\"\" class=\"wp-image-7615\" srcset=\"https:\/\/aguaps.com\/wp-content\/uploads\/2024\/05\/sc_es-error_html_class04-1024x153.jpg 1024w, https:\/\/aguaps.com\/wp-content\/uploads\/2024\/05\/sc_es-error_html_class04-300x45.jpg 300w, https:\/\/aguaps.com\/wp-content\/uploads\/2024\/05\/sc_es-error_html_class04-768x115.jpg 768w, https:\/\/aguaps.com\/wp-content\/uploads\/2024\/05\/sc_es-error_html_class04-1536x230.jpg 1536w, https:\/\/aguaps.com\/wp-content\/uploads\/2024\/05\/sc_es-error_html_class04-402x60.jpg 402w, https:\/\/aguaps.com\/wp-content\/uploads\/2024\/05\/sc_es-error_html_class04.jpg 1740w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<div style=\"height:80px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading\">C\u00f3mo a\u00f1adir un selector id<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Del mismo modo, seleccione el bloque al que desea a\u00f1adir el identificador e introd\u00fazcalo en el campo \u00abAnclaje HTML\u00bb, en \u00abAvanzado\u00bb, en el men\u00fa de configuraci\u00f3n de bloques situado a la derecha. Puede utilizarse para establecer enlaces dentro de la p\u00e1gina.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"572\" height=\"928\" src=\"https:\/\/aguaps.com\/wp-content\/uploads\/2024\/05\/sc_es-error_html_id.jpg\" alt=\"\" class=\"wp-image-7618\" style=\"width:266px;height:auto\" srcset=\"https:\/\/aguaps.com\/wp-content\/uploads\/2024\/05\/sc_es-error_html_id.jpg 572w, https:\/\/aguaps.com\/wp-content\/uploads\/2024\/05\/sc_es-error_html_id-185x300.jpg 185w, https:\/\/aguaps.com\/wp-content\/uploads\/2024\/05\/sc_es-error_html_id-37x60.jpg 37w\" sizes=\"auto, (max-width: 572px) 100vw, 572px\" \/><\/figure>\n<\/div>\n\n\n<div style=\"height:80px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Hace un tiempo cambi\u00e9 mi editor de WordPress por un editor de bloques (Gutenberg), pero me cost\u00f3 averiguar c\u00f3mo a\u00f1adir clases CSS a los bloques, as\u00ed que aqu\u00ed tienes una explicaci\u00f3n.<\/p>\n","protected":false},"author":2,"featured_media":7586,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_feature_clip_id":0,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_post_was_ever_published":false},"categories":[63],"tags":[74,52],"class_list":["post-7595","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-wp-es","tag-tips-es","tag-wordpress-es"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.8 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>C\u00f3mo a\u00f1adir CSS clases e id al editor de bloques en WordPress Gutenberg. |<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/aguaps.com\/es\/blog\/wp-es\/como-anadir-css-clases-e-id-al-editor-de-bloques-en-wordpress-gutenberg\/\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"C\u00f3mo a\u00f1adir CSS clases e id al editor de bloques en WordPress Gutenberg. |\" \/>\n<meta property=\"og:description\" content=\"Hace un tiempo cambi\u00e9 mi editor de WordPress por un editor de bloques (Gutenberg), pero me cost\u00f3 averiguar c\u00f3mo a\u00f1adir clases CSS a los bloques, as\u00ed que aqu\u00ed tienes una explicaci\u00f3n.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/aguaps.com\/es\/blog\/wp-es\/como-anadir-css-clases-e-id-al-editor-de-bloques-en-wordpress-gutenberg\/\" \/>\n<meta property=\"article:published_time\" content=\"2024-05-22T05:53:40+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-08-11T23:02:47+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/aguaps.com\/wp-content\/uploads\/2024\/05\/thum-gutenberg_css_thum-scaled.webp\" \/>\n\t<meta property=\"og:image:width\" content=\"2560\" \/>\n\t<meta property=\"og:image:height\" content=\"1340\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/webp\" \/>\n<meta name=\"author\" content=\"AGUA Staff\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"AGUA Staff\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/aguaps.com\\\/es\\\/blog\\\/wp-es\\\/como-anadir-css-clases-e-id-al-editor-de-bloques-en-wordpress-gutenberg\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/aguaps.com\\\/es\\\/blog\\\/wp-es\\\/como-anadir-css-clases-e-id-al-editor-de-bloques-en-wordpress-gutenberg\\\/\"},\"author\":{\"name\":\"AGUA Staff\",\"@id\":\"https:\\\/\\\/aguaps.com\\\/es\\\/#\\\/schema\\\/person\\\/bba221d1b5c870234053610e94d0e2d9\"},\"headline\":\"C\u00f3mo a\u00f1adir CSS clases e id al editor de bloques en WordPress Gutenberg.\",\"datePublished\":\"2024-05-22T05:53:40+00:00\",\"dateModified\":\"2025-08-11T23:02:47+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/aguaps.com\\\/es\\\/blog\\\/wp-es\\\/como-anadir-css-clases-e-id-al-editor-de-bloques-en-wordpress-gutenberg\\\/\"},\"wordCount\":277,\"publisher\":{\"@id\":\"https:\\\/\\\/aguaps.com\\\/es\\\/#\\\/schema\\\/person\\\/bba221d1b5c870234053610e94d0e2d9\"},\"image\":{\"@id\":\"https:\\\/\\\/aguaps.com\\\/es\\\/blog\\\/wp-es\\\/como-anadir-css-clases-e-id-al-editor-de-bloques-en-wordpress-gutenberg\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/aguaps.com\\\/wp-content\\\/uploads\\\/2024\\\/05\\\/thum-gutenberg_css_thum-scaled.webp\",\"keywords\":[\"#tips\",\"#wordpress\"],\"articleSection\":[\"WordPress\"],\"inLanguage\":\"es\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/aguaps.com\\\/es\\\/blog\\\/wp-es\\\/como-anadir-css-clases-e-id-al-editor-de-bloques-en-wordpress-gutenberg\\\/\",\"url\":\"https:\\\/\\\/aguaps.com\\\/es\\\/blog\\\/wp-es\\\/como-anadir-css-clases-e-id-al-editor-de-bloques-en-wordpress-gutenberg\\\/\",\"name\":\"C\u00f3mo a\u00f1adir CSS clases e id al editor de bloques en WordPress Gutenberg. |\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/aguaps.com\\\/es\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/aguaps.com\\\/es\\\/blog\\\/wp-es\\\/como-anadir-css-clases-e-id-al-editor-de-bloques-en-wordpress-gutenberg\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/aguaps.com\\\/es\\\/blog\\\/wp-es\\\/como-anadir-css-clases-e-id-al-editor-de-bloques-en-wordpress-gutenberg\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/aguaps.com\\\/wp-content\\\/uploads\\\/2024\\\/05\\\/thum-gutenberg_css_thum-scaled.webp\",\"datePublished\":\"2024-05-22T05:53:40+00:00\",\"dateModified\":\"2025-08-11T23:02:47+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/aguaps.com\\\/es\\\/blog\\\/wp-es\\\/como-anadir-css-clases-e-id-al-editor-de-bloques-en-wordpress-gutenberg\\\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/aguaps.com\\\/es\\\/blog\\\/wp-es\\\/como-anadir-css-clases-e-id-al-editor-de-bloques-en-wordpress-gutenberg\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\\\/\\\/aguaps.com\\\/es\\\/blog\\\/wp-es\\\/como-anadir-css-clases-e-id-al-editor-de-bloques-en-wordpress-gutenberg\\\/#primaryimage\",\"url\":\"https:\\\/\\\/aguaps.com\\\/wp-content\\\/uploads\\\/2024\\\/05\\\/thum-gutenberg_css_thum-scaled.webp\",\"contentUrl\":\"https:\\\/\\\/aguaps.com\\\/wp-content\\\/uploads\\\/2024\\\/05\\\/thum-gutenberg_css_thum-scaled.webp\",\"width\":2560,\"height\":1340},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/aguaps.com\\\/es\\\/blog\\\/wp-es\\\/como-anadir-css-clases-e-id-al-editor-de-bloques-en-wordpress-gutenberg\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/aguaps.com\\\/es\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"C\u00f3mo a\u00f1adir CSS clases e id al editor de bloques en WordPress Gutenberg.\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/aguaps.com\\\/es\\\/#website\",\"url\":\"https:\\\/\\\/aguaps.com\\\/es\\\/\",\"name\":\"AGUA | Web Planning & Creative , WordPress , Web Marketing\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\\\/\\\/aguaps.com\\\/es\\\/#\\\/schema\\\/person\\\/bba221d1b5c870234053610e94d0e2d9\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/aguaps.com\\\/es\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"es\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\\\/\\\/aguaps.com\\\/es\\\/#\\\/schema\\\/person\\\/bba221d1b5c870234053610e94d0e2d9\",\"name\":\"AGUA Staff\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\\\/\\\/i0.wp.com\\\/aguaps.com\\\/wp-content\\\/uploads\\\/2023\\\/12\\\/agua-logo-circle_512x512.png?fit=512%2C512&ssl=1\",\"url\":\"https:\\\/\\\/i0.wp.com\\\/aguaps.com\\\/wp-content\\\/uploads\\\/2023\\\/12\\\/agua-logo-circle_512x512.png?fit=512%2C512&ssl=1\",\"contentUrl\":\"https:\\\/\\\/i0.wp.com\\\/aguaps.com\\\/wp-content\\\/uploads\\\/2023\\\/12\\\/agua-logo-circle_512x512.png?fit=512%2C512&ssl=1\",\"width\":512,\"height\":512,\"caption\":\"AGUA Staff\"},\"logo\":{\"@id\":\"https:\\\/\\\/i0.wp.com\\\/aguaps.com\\\/wp-content\\\/uploads\\\/2023\\\/12\\\/agua-logo-circle_512x512.png?fit=512%2C512&ssl=1\"},\"url\":\"https:\\\/\\\/aguaps.com\\\/es\\\/blog\\\/author\\\/staff\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"C\u00f3mo a\u00f1adir CSS clases e id al editor de bloques en WordPress Gutenberg. |","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/aguaps.com\/es\/blog\/wp-es\/como-anadir-css-clases-e-id-al-editor-de-bloques-en-wordpress-gutenberg\/","og_locale":"es_ES","og_type":"article","og_title":"C\u00f3mo a\u00f1adir CSS clases e id al editor de bloques en WordPress Gutenberg. |","og_description":"Hace un tiempo cambi\u00e9 mi editor de WordPress por un editor de bloques (Gutenberg), pero me cost\u00f3 averiguar c\u00f3mo a\u00f1adir clases CSS a los bloques, as\u00ed que aqu\u00ed tienes una explicaci\u00f3n.","og_url":"https:\/\/aguaps.com\/es\/blog\/wp-es\/como-anadir-css-clases-e-id-al-editor-de-bloques-en-wordpress-gutenberg\/","article_published_time":"2024-05-22T05:53:40+00:00","article_modified_time":"2025-08-11T23:02:47+00:00","og_image":[{"width":2560,"height":1340,"url":"https:\/\/aguaps.com\/wp-content\/uploads\/2024\/05\/thum-gutenberg_css_thum-scaled.webp","type":"image\/webp"}],"author":"AGUA Staff","twitter_card":"summary_large_image","twitter_misc":{"Escrito por":"AGUA Staff","Tiempo de lectura":"6 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/aguaps.com\/es\/blog\/wp-es\/como-anadir-css-clases-e-id-al-editor-de-bloques-en-wordpress-gutenberg\/#article","isPartOf":{"@id":"https:\/\/aguaps.com\/es\/blog\/wp-es\/como-anadir-css-clases-e-id-al-editor-de-bloques-en-wordpress-gutenberg\/"},"author":{"name":"AGUA Staff","@id":"https:\/\/aguaps.com\/es\/#\/schema\/person\/bba221d1b5c870234053610e94d0e2d9"},"headline":"C\u00f3mo a\u00f1adir CSS clases e id al editor de bloques en WordPress Gutenberg.","datePublished":"2024-05-22T05:53:40+00:00","dateModified":"2025-08-11T23:02:47+00:00","mainEntityOfPage":{"@id":"https:\/\/aguaps.com\/es\/blog\/wp-es\/como-anadir-css-clases-e-id-al-editor-de-bloques-en-wordpress-gutenberg\/"},"wordCount":277,"publisher":{"@id":"https:\/\/aguaps.com\/es\/#\/schema\/person\/bba221d1b5c870234053610e94d0e2d9"},"image":{"@id":"https:\/\/aguaps.com\/es\/blog\/wp-es\/como-anadir-css-clases-e-id-al-editor-de-bloques-en-wordpress-gutenberg\/#primaryimage"},"thumbnailUrl":"https:\/\/aguaps.com\/wp-content\/uploads\/2024\/05\/thum-gutenberg_css_thum-scaled.webp","keywords":["#tips","#wordpress"],"articleSection":["WordPress"],"inLanguage":"es"},{"@type":"WebPage","@id":"https:\/\/aguaps.com\/es\/blog\/wp-es\/como-anadir-css-clases-e-id-al-editor-de-bloques-en-wordpress-gutenberg\/","url":"https:\/\/aguaps.com\/es\/blog\/wp-es\/como-anadir-css-clases-e-id-al-editor-de-bloques-en-wordpress-gutenberg\/","name":"C\u00f3mo a\u00f1adir CSS clases e id al editor de bloques en WordPress Gutenberg. |","isPartOf":{"@id":"https:\/\/aguaps.com\/es\/#website"},"primaryImageOfPage":{"@id":"https:\/\/aguaps.com\/es\/blog\/wp-es\/como-anadir-css-clases-e-id-al-editor-de-bloques-en-wordpress-gutenberg\/#primaryimage"},"image":{"@id":"https:\/\/aguaps.com\/es\/blog\/wp-es\/como-anadir-css-clases-e-id-al-editor-de-bloques-en-wordpress-gutenberg\/#primaryimage"},"thumbnailUrl":"https:\/\/aguaps.com\/wp-content\/uploads\/2024\/05\/thum-gutenberg_css_thum-scaled.webp","datePublished":"2024-05-22T05:53:40+00:00","dateModified":"2025-08-11T23:02:47+00:00","breadcrumb":{"@id":"https:\/\/aguaps.com\/es\/blog\/wp-es\/como-anadir-css-clases-e-id-al-editor-de-bloques-en-wordpress-gutenberg\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/aguaps.com\/es\/blog\/wp-es\/como-anadir-css-clases-e-id-al-editor-de-bloques-en-wordpress-gutenberg\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/aguaps.com\/es\/blog\/wp-es\/como-anadir-css-clases-e-id-al-editor-de-bloques-en-wordpress-gutenberg\/#primaryimage","url":"https:\/\/aguaps.com\/wp-content\/uploads\/2024\/05\/thum-gutenberg_css_thum-scaled.webp","contentUrl":"https:\/\/aguaps.com\/wp-content\/uploads\/2024\/05\/thum-gutenberg_css_thum-scaled.webp","width":2560,"height":1340},{"@type":"BreadcrumbList","@id":"https:\/\/aguaps.com\/es\/blog\/wp-es\/como-anadir-css-clases-e-id-al-editor-de-bloques-en-wordpress-gutenberg\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/aguaps.com\/es\/"},{"@type":"ListItem","position":2,"name":"C\u00f3mo a\u00f1adir CSS clases e id al editor de bloques en WordPress Gutenberg."}]},{"@type":"WebSite","@id":"https:\/\/aguaps.com\/es\/#website","url":"https:\/\/aguaps.com\/es\/","name":"AGUA | Web Planning & Creative , WordPress , Web Marketing","description":"","publisher":{"@id":"https:\/\/aguaps.com\/es\/#\/schema\/person\/bba221d1b5c870234053610e94d0e2d9"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/aguaps.com\/es\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es"},{"@type":["Person","Organization"],"@id":"https:\/\/aguaps.com\/es\/#\/schema\/person\/bba221d1b5c870234053610e94d0e2d9","name":"AGUA Staff","image":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/i0.wp.com\/aguaps.com\/wp-content\/uploads\/2023\/12\/agua-logo-circle_512x512.png?fit=512%2C512&ssl=1","url":"https:\/\/i0.wp.com\/aguaps.com\/wp-content\/uploads\/2023\/12\/agua-logo-circle_512x512.png?fit=512%2C512&ssl=1","contentUrl":"https:\/\/i0.wp.com\/aguaps.com\/wp-content\/uploads\/2023\/12\/agua-logo-circle_512x512.png?fit=512%2C512&ssl=1","width":512,"height":512,"caption":"AGUA Staff"},"logo":{"@id":"https:\/\/i0.wp.com\/aguaps.com\/wp-content\/uploads\/2023\/12\/agua-logo-circle_512x512.png?fit=512%2C512&ssl=1"},"url":"https:\/\/aguaps.com\/es\/blog\/author\/staff\/"}]}},"jetpack_featured_media_url":"https:\/\/aguaps.com\/wp-content\/uploads\/2024\/05\/thum-gutenberg_css_thum-scaled.webp","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/aguaps.com\/es\/wp-json\/wp\/v2\/posts\/7595","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/aguaps.com\/es\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/aguaps.com\/es\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/aguaps.com\/es\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/aguaps.com\/es\/wp-json\/wp\/v2\/comments?post=7595"}],"version-history":[{"count":12,"href":"https:\/\/aguaps.com\/es\/wp-json\/wp\/v2\/posts\/7595\/revisions"}],"predecessor-version":[{"id":7630,"href":"https:\/\/aguaps.com\/es\/wp-json\/wp\/v2\/posts\/7595\/revisions\/7630"}],"wp:attachment":[{"href":"https:\/\/aguaps.com\/es\/wp-json\/wp\/v2\/media?parent=7595"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/aguaps.com\/es\/wp-json\/wp\/v2\/categories?post=7595"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/aguaps.com\/es\/wp-json\/wp\/v2\/tags?post=7595"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}