{"id":124585,"date":"2023-09-01T10:40:00","date_gmt":"2023-09-01T10:40:00","guid":{"rendered":"https:\/\/www.bluehost.com\/blog\/uso-de-bloques-personalizados-de-gutenberg-para-la-creacion-de-contenido-de-wordpress-una-guia-facil-de-usar\/"},"modified":"2025-02-24T04:23:41","modified_gmt":"2025-02-24T04:23:41","slug":"uso-de-bloques-personalizados-de-gutenberg-para-la-creacion-de-contenido-de-wordpress-una-guia-facil-de-usar","status":"publish","type":"post","link":"https:\/\/www.bluehost.com\/blog\/es\/uso-de-bloques-personalizados-de-gutenberg-para-la-creacion-de-contenido-de-wordpress-una-guia-facil-de-usar\/","title":{"rendered":"Uso de bloques personalizados de Gutenberg para la creaci\u00f3n de contenido de WordPress: una gu\u00eda f\u00e1cil de usar"},"content":{"rendered":"\n<p>El <a href=\"https:\/\/wordpress.org\/gutenberg\/\" target=\"_blank\" rel=\"noreferrer noopener\">editor de bloques<\/a> <a href=\"https:\/\/wordpress.org\/gutenberg\/\">Gutenberg<\/a>, el editor de contenido de WordPress, tiene m\u00e1s <a href=\"https:\/\/gutenstats.blog\/\" target=\"_blank\" rel=\"noreferrer noopener\">de 81 millones de instalaciones activas<\/a>. Debido a la naturaleza dominante del mercado de WordPress y la naturaleza intuitiva del dise\u00f1o de este editor, no es de extra\u00f1ar que este sistema sea tan popular. <\/p>\n\n<p>Gutenberg es un creador de p\u00e1ginas y editor de contenido accesible de arrastrar y soltar. Ofrece muchas funcionalidades, junto con diversos enfoques que puedes utilizar para crear el sitio web de tus sue\u00f1os. <\/p>\n\n<p>Este editor se basa en <a href=\"https:\/\/wordpress.com\/support\/wordpress-editor\/blocks\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>bloques de Gutenberg<\/strong><\/a>, diversas unidades de contenido que componen las p\u00e1ginas y el dise\u00f1o de un sitio web.<\/p>\n\n<p>Puedes obtener estos bloques de la <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/packages\/packages-block-library\/\" target=\"_blank\" rel=\"noreferrer noopener\">biblioteca de bloques de WordPress<\/a>. Esta biblioteca es extensa, pero no <em>siempre<\/em> tiene el bloque exacto que necesitas para tu sitio web. <\/p>\n\n<p>Por lo tanto, si eres un emprendedor que desea una funcionalidad avanzada del sitio web o elementos especializados que a\u00fan no ofrece Gutenberg, es posible que te interese utilizar bloques personalizados de Gutenberg en tu sitio web de WordPress.<\/p>\n\n<h2 class=\"wp-block-heading\" id=\"h-gutenberg-wordpress-core-content-editor\">Gutenberg: el editor de contenido principal de WordPress<\/h2>\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1999\" height=\"1094\" src=\"https:\/\/www.bluehost.com\/es-es\/blog\/wp-content\/uploads\/2018\/11\/Gutenberg-content-editor.png\" alt=\"Editor de contenido de WordPress Gutenberg.\" class=\"wp-image-46218\" srcset=\"https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Gutenberg-content-editor.png 1999w, https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Gutenberg-content-editor-300x164.png 300w, https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Gutenberg-content-editor-1024x560.png 1024w, https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Gutenberg-content-editor-768x420.png 768w, https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Gutenberg-content-editor-1536x841.png 1536w, https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Gutenberg-content-editor-24x13.png 24w, https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Gutenberg-content-editor-36x20.png 36w, https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Gutenberg-content-editor-48x26.png 48w\" sizes=\"100vw\" \/><figcaption class=\"wp-element-caption\"><em>Captura de pantalla<\/em><\/figcaption><\/figure>\n\n<p>El editor Gutenberg es el n\u00facleo del marco de edici\u00f3n de contenido de WordPress. Su estructura basada en bloques facilita la <a href=\"https:\/\/www.bluehost.com\/es-es\/blog\/como-crear-un-sitio-web-en-wordpress-una-guia-practica\/\">creaci\u00f3n de un <\/a><a href=\"https:\/\/www.bluehost.com\/es-es\/blog\/como-crear-un-sitio-web-en-wordpress-una-guia-practica\/\"> sitio web<\/a> de <a href=\"https:\/\/www.bluehost.com\/es-es\/blog\/como-crear-un-sitio-web-en-wordpress-una-guia-practica\/\">WordPress<\/a> y todas sus p\u00e1ginas, incluso para los principiantes. <\/p>\n\n<p>Con este editor, puedes crear contenido rico en medios en WordPress eligiendo los nuevos bloques que necesitas. A continuaci\u00f3n, puedes dimensionarlos como desees y a\u00f1adir los elementos espec\u00edficos que quieras que aparezcan en cada p\u00e1gina. <\/p>\n\n<h3 class=\"wp-block-heading\">\u00bfQu\u00e9 son los bloques de Gutenberg?<\/h3>\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"689\" height=\"575\" src=\"https:\/\/www.bluehost.com\/es-es\/blog\/wp-content\/uploads\/2018\/11\/Gutenberg-blocks.png\" alt=\"Los bloques de Gutenberg son los elementos que componen una p&#xE1;gina o publicaci&#xF3;n.\" class=\"wp-image-46219\" srcset=\"https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Gutenberg-blocks.png 689w, https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Gutenberg-blocks-300x250.png 300w, https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Gutenberg-blocks-24x20.png 24w, https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Gutenberg-blocks-36x30.png 36w, https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Gutenberg-blocks-48x40.png 48w\" sizes=\"100vw\" \/><figcaption class=\"wp-element-caption\"><em>Captura de pantalla<\/em><\/figcaption><\/figure>\n\n<figure class=\"wp-block-pullquote\"><blockquote><p>En Gutenberg, cada p\u00e1gina o entrada se compone de una colecci\u00f3n de elementos aut\u00f3nomos.<\/p><\/blockquote><\/figure>\n\n<p>Utilizas estos elementos, o bloques, para construir p\u00e1ginas, entradas y todo lo dem\u00e1s en tu sitio web de WordPress.<\/p>\n\n<p>El <a href=\"https:\/\/gutenstats.blog\/\" target=\"_blank\" rel=\"noreferrer noopener\">bloque m\u00e1s popular<\/a> es el bloque de p\u00e1rrafo, seguido de los bloques de imagen y encabezado. Otros ejemplos de tipos de bloques son los t\u00edtulos, el texto, los divisores, los widgets y los v\u00eddeos. <\/p>\n\n<p>Como mencionamos anteriormente, puede acceder a los bloques de WP a trav\u00e9s de la Biblioteca de bloques. Puedes encontrarlo haciendo clic en el <strong>+ <\/strong>en la parte superior izquierda de la barra de herramientas de WordPress mientras editas una p\u00e1gina o publicaci\u00f3n. <\/p>\n\n<p>Pero, \u00bfqu\u00e9 pasa si la biblioteca de WordPress no ofrece el tipo de bloque que est\u00e1s buscando? \u00bfO alg\u00fan marcador de posici\u00f3n que pueda actualizar para adaptarlo a sus necesidades? <\/p>\n\n<p>Ah\u00ed es donde entran en juego los bloques personalizados.<\/p>\n\n<h3 class=\"wp-block-heading\"><a><\/a>\u00bfQu\u00e9 son los bloques personalizados de Gutenberg?<\/h3>\n\n<p>Gutenberg permite a cualquiera crear activos gratuitos. Entonces, si tiene experiencia en codificaci\u00f3n y desarrollo web, puede crear bloques <em>personalizados<\/em> mientras crea su sitio web. <\/p>\n\n<figure class=\"wp-block-pullquote\"><blockquote><p>Los bloques personalizados ofrecen a\u00fan m\u00e1s flexibilidad y funcionalidad espec\u00edfica de nicho que los bloques predeterminados.<\/p><\/blockquote><\/figure>\n\n<p>Los usuarios crean bloques personalizados para crear elementos de p\u00e1gina \u00fanicos.<\/p>\n\n<p>Los bloques personalizados de Gutenberg ofrecen muchas ventajas, entre ellas:<\/p>\n\n<ul class=\"wp-block-list\">\n<li>Puedes dise\u00f1ar elementos de WordPress visualmente atractivos y ricos en medios seleccionados para las necesidades de <em>tu<\/em> negocio.<\/li>\n\n\n\n<li>A\u00f1aden funcionalidades \u00fanicas y avanzadas a tu sitio web.<\/li>\n\n\n\n<li>Mejoran el aspecto est\u00e9tico de sus p\u00e1ginas y ayudan a que su negocio se destaque entre la multitud.<\/li>\n\n\n\n<li>Solo necesita codificar bloques una vez. Despu\u00e9s de eso, puede usarlos en todos sus sitios web y p\u00e1ginas. <\/li>\n<\/ul>\n\n<p>Sin embargo, los bloques personalizados vienen con algunos desaf\u00edos. Por un lado, fabricarlos requiere un conocimiento t\u00e9cnico profundo. Adem\u00e1s, necesitar\u00e1s algunos conocimientos espec\u00edficos de codificaci\u00f3n y herramientas de desarrollo.  <\/p>\n\n<h2 class=\"wp-block-heading\"><a><\/a>C\u00f3mo conseguir bloques personalizados de Gutenberg para WordPress<\/h2>\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1920\" height=\"1080\" src=\"https:\/\/www.bluehost.com\/es-es\/blog\/wp-content\/uploads\/2018\/11\/Custom-gutenberg-blocks.png\" alt=\"C&#xF3;mo conseguir bloques personalizados de Gutenberg para WordPress.\" class=\"wp-image-46220\" srcset=\"https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Custom-gutenberg-blocks.png 1920w, https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Custom-gutenberg-blocks-300x169.png 300w, https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Custom-gutenberg-blocks-1024x576.png 1024w, https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Custom-gutenberg-blocks-768x432.png 768w, https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Custom-gutenberg-blocks-1536x864.png 1536w, https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Custom-gutenberg-blocks-24x14.png 24w, https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Custom-gutenberg-blocks-36x20.png 36w, https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Custom-gutenberg-blocks-48x27.png 48w\" sizes=\"100vw\" \/><\/figure>\n\n<p>Para conseguir bloques personalizados de Gutenberg, tienes que construirlos t\u00fa mismo o comprarlos.<\/p>\n\n<p>La creaci\u00f3n de bloques personalizados no est\u00e1 en el conjunto de habilidades de todos, pero eso no es un problema. Puedes comprar bloques personalizados de Gutenberg en lugar de construirlos t\u00fa mismo. Para ello, busca un <a href=\"https:\/\/www.bluehost.com\/about\">desarrollador de primera categor\u00eda<\/a> en el que conf\u00edes y luego trabaja con \u00e9l para crear tus bloques ideales.  <\/p>\n\n<p>Si planeas crear estos bloques t\u00fa mismo, hay algunas cosas que debes considerar antes de comenzar.<\/p>\n\n<h2 class=\"wp-block-heading\"><a><\/a>Qu\u00e9 hay que tener en cuenta antes de crear bloques personalizados<\/h2>\n\n<p>Crear un bloque personalizado de Gutenberg requiere tiempo y energ\u00eda. Antes de comenzar el proceso, debe asegurarse de haber agotado todas sus otras opciones. <\/p>\n\n<p>Puede verificar que no hay otros enfoques adecuados mirando cuidadosamente a trav\u00e9s de la biblioteca de bloques predeterminados de Gutenberg. Aseg\u00farate de que no haya ning\u00fan bloque existente que proporcione las funciones b\u00e1sicas o las especificaciones de estilo que necesitas. <\/p>\n\n<p>Y si has determinado que <em>necesitas<\/em> un bloque personalizado, describe las especificaciones vitales de tu bloque<em> antes <\/em>de empezar a construirlo. Piensa en los elementos est\u00e9ticos, la configuraci\u00f3n predeterminada y las caracter\u00edsticas principales. Adem\u00e1s, tenga en cuenta las especificaciones de la barra de herramientas y otras caracter\u00edsticas estil\u00edsticas y funcionales clave.  <\/p>\n\n<h2 class=\"wp-block-heading\"><a><\/a>Lo que necesitas para construir bloques personalizados de Gutenberg<\/h2>\n\n<p>Una vez que determine los aspectos m\u00e1s esenciales de su bloque, hay algunos requisitos clave m\u00e1s que deber\u00e1 cumplir antes de comenzar el proceso.<\/p>\n\n<p>Un sitio web activo de WordPress es esencial. Y necesitar\u00e1 al menos algo de experiencia con JavaScript y herramientas de compilaci\u00f3n de JavaScript, como <a href=\"https:\/\/nodejs.org\/en\" target=\"_blank\" rel=\"noreferrer noopener\">Node.js<\/a>. <\/p>\n\n<p>Tambi\u00e9n necesitar\u00e1s conocimientos intermedios de HTML, CSS y PHP para crear tus propios bloques personalizados.<\/p>\n\n<p>Si no est\u00e1s muy versado en esta \u00e1rea, no te preocupes. Puedes ahorrar tiempo y estr\u00e9s contratando a <a href=\"https:\/\/www.bluehost.com\/solutions\/full-service\">expertos en dise\u00f1o web<\/a> para que te ayuden a construir bloques. <\/p>\n\n<h2 class=\"wp-block-heading\"><a><\/a>C\u00f3mo crear bloques personalizados de Gutenberg en WordPress<\/h2>\n\n<p>Hay dos enfoques accesibles para construir bloques personalizados de Gutenberg. Puedes instalar un plugin f\u00e1cil de usar que simplifique el proceso o construirlos desde cero utilizando c\u00f3digo HTML\/CSS o PHP. <\/p>\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"576\" src=\"https:\/\/www.bluehost.com\/es-es\/blog\/wp-content\/uploads\/2018\/11\/Create-gutenberg-blocks-1024x576.png\" alt=\"C&#xF3;mo crear bloques personalizados de Gutenberg en WordPress\" class=\"wp-image-46221\" srcset=\"https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Create-gutenberg-blocks-1024x576.png 1024w, https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Create-gutenberg-blocks-300x169.png 300w, https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Create-gutenberg-blocks-768x432.png 768w, https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Create-gutenberg-blocks-24x14.png 24w, https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Create-gutenberg-blocks-36x20.png 36w, https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Create-gutenberg-blocks-48x27.png 48w\" sizes=\"100vw\" \/><\/figure>\n\n<h3 class=\"wp-block-heading\">Creaci\u00f3n de bloques personalizados con un plugin<\/h3>\n\n<p>Hay una serie de <a href=\"https:\/\/wordpress.org\/plugins\/genesis-custom-blocks\/\" target=\"_blank\" rel=\"noreferrer noopener\">plugins de WordPress<\/a> para la creaci\u00f3n de bloques disponibles que agilizan el proceso de creaci\u00f3n de bloques personalizados de Gutenberg para tu sitio de WordPress. Recomendamos usar <a href=\"https:\/\/wordpress.org\/plugins\/genesis-custom-blocks\/\" target=\"_blank\" rel=\"noreferrer noopener\">Genesis Custom Blocks<\/a>. <\/p>\n\n<p>Para crear tu primer bloque con este plugin:<\/p>\n\n<p><strong>1. Instalar bloques personalizados de Genesis<\/strong><\/p>\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1999\" height=\"988\" src=\"https:\/\/www.bluehost.com\/es-es\/blog\/wp-content\/uploads\/2018\/11\/Genesis-custom-blocks.png\" alt=\"Instala el plugin de WordPress Genesis Custom Blocks.\" class=\"wp-image-46222\" srcset=\"https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Genesis-custom-blocks.png 1999w, https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Genesis-custom-blocks-300x148.png 300w, https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Genesis-custom-blocks-1024x506.png 1024w, https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Genesis-custom-blocks-768x380.png 768w, https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Genesis-custom-blocks-1536x759.png 1536w, https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Genesis-custom-blocks-24x12.png 24w, https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Genesis-custom-blocks-36x18.png 36w, https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Genesis-custom-blocks-48x24.png 48w\" sizes=\"100vw\" \/><figcaption class=\"wp-element-caption\"><em>Captura de pantalla<\/em><\/figcaption><\/figure>\n\n<p>Primero, navega a <strong>Plugins &gt; Add New <\/strong>en la barra lateral izquierda de tu panel de administraci\u00f3n y busca Genesis en el <a href=\"https:\/\/wordpress.org\/plugins\/\" target=\"_blank\" rel=\"noreferrer noopener\">Directorio de Plugins de WordPress<\/a>. Inst\u00e1lalo y haz clic en el bot\u00f3n <strong>Activar <\/strong>. <\/p>\n\n<p><strong>2. Crea un nuevo bloque<\/strong><\/p>\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"646\" height=\"312\" src=\"https:\/\/www.bluehost.com\/es-es\/blog\/wp-content\/uploads\/2018\/11\/Add-new-block.png\" alt=\"Ve a Bloques personalizados &amp;gt; Agregar nuevo en tu panel de control de WordPress.\" class=\"wp-image-46223\" srcset=\"https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Add-new-block.png 646w, https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Add-new-block-300x145.png 300w, https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Add-new-block-24x12.png 24w, https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Add-new-block-36x17.png 36w, https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Add-new-block-48x23.png 48w\" sizes=\"100vw\" \/><figcaption class=\"wp-element-caption\"><em>Captura de pantalla<\/em><\/figcaption><\/figure>\n\n<p>A continuaci\u00f3n, vaya a <strong>Bloques &gt; personalizados Agregar nuevo <\/strong>para crear un bloque.<\/p>\n\n<p><strong>3. Configurar las especificaciones del bloque<\/strong><\/p>\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"995\" height=\"467\" src=\"https:\/\/www.bluehost.com\/es-es\/blog\/wp-content\/uploads\/2018\/11\/Block-configuring.jpg\" alt=\"Configuraci&#xF3;n del bloque.\" class=\"wp-image-46224\" srcset=\"https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Block-configuring.jpg 995w, https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Block-configuring-300x141.jpg 300w, https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Block-configuring-768x360.jpg 768w, https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Block-configuring-24x11.jpg 24w, https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Block-configuring-36x17.jpg 36w, https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Block-configuring-48x23.jpg 48w\" sizes=\"100vw\" \/><figcaption class=\"wp-element-caption\"><em>Captura de pantalla<\/em><\/figcaption><\/figure>\n\n<p>Ahora, puede seleccionar un nombre de bloque y, a continuaci\u00f3n, configurar y personalizar sus propiedades. <a href=\"https:\/\/www.bluehost.com\/es-es\/blog\/como-optimizar-el-contenido-para-seo-en-wordpress\/\">Para ayudar con la optimizaci\u00f3n de motores de b\u00fasqueda<\/a> (SEO), agregue <a href=\"https:\/\/www.bluehost.com\/es-es\/blog\/como-encontrar-las-mejores-palabras-clave-guia-paso-a-paso\/\">palabras clave relevantes<\/a>.<\/p>\n\n<p>A continuaci\u00f3n, a\u00f1ade campos, como n\u00fameros, im\u00e1genes y casillas de verificaci\u00f3n, pulsando el bot\u00f3n <strong>+ <\/strong>. Deber\u00e1 ingresar m\u00e1s especificaciones, como <strong>Etiqueta de campo<\/strong>, <strong>Ubicaci\u00f3n del campo<\/strong> y Texto de <strong>ayuda<\/strong>. Tambi\u00e9n puede reordenar, editar y eliminar campos.  <\/p>\n\n<p><strong>4. Construye tu plantilla.<\/strong><\/p>\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1076\" height=\"470\" src=\"https:\/\/www.bluehost.com\/es-es\/blog\/wp-content\/uploads\/2018\/11\/Template-building.jpg\" alt=\"Creaci&#xF3;n de una plantilla.\" class=\"wp-image-46225\" srcset=\"https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Template-building.jpg 1076w, https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Template-building-300x131.jpg 300w, https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Template-building-1024x447.jpg 1024w, https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Template-building-768x335.jpg 768w, https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Template-building-24x10.jpg 24w, https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Template-building-36x16.jpg 36w, https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Template-building-48x21.jpg 48w\" sizes=\"100vw\" \/><figcaption class=\"wp-element-caption\"><em>Captura de pantalla<\/em><\/figcaption><\/figure>\n\n<p>A continuaci\u00f3n, puedes crear tu plantilla con HTML y CSS o PHP, dependiendo de la salida de tu bloque.<\/p>\n\n<p>Si tu bloque est\u00e1 configurado para HTML y CSS, puedes usar el <strong>Editor de plantillas<\/strong> del plugin, que se encuentra en la barra superior. All\u00ed, puedes personalizar tu bloque a trav\u00e9s <strong>de las pesta\u00f1as <\/strong><strong>Marcado (<\/strong>HTML) y CSS. <\/p>\n\n<p>Y si quieres a\u00f1adir PHP, tendr\u00e1s que utilizar un editor de texto plano para crear archivos de <strong>bloques<\/strong><strong>.php<\/strong> y <strong>block.css<\/strong> manualmente.<\/p>\n\n<p><strong>5. Guarda y confirma tu bloqueo<\/strong><\/p>\n\n<p>Aseg\u00farate de guardar tu bloque haciendo clic en <strong>Publicar<\/strong> en la parte superior derecha.<\/p>\n\n<p><strong>6. A\u00f1ade tu bloque a tu sitio web<\/strong><\/p>\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1404\" height=\"592\" src=\"https:\/\/www.bluehost.com\/es-es\/blog\/wp-content\/uploads\/2018\/11\/Add-block-page.jpg\" alt=\"Agregar el bloque a una p&#xE1;gina.\" class=\"wp-image-46226\" srcset=\"https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Add-block-page.jpg 1404w, https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Add-block-page-300x126.jpg 300w, https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Add-block-page-1024x432.jpg 1024w, https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Add-block-page-768x324.jpg 768w, https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Add-block-page-24x10.jpg 24w, https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Add-block-page-36x15.jpg 36w, https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Add-block-page-48x20.jpg 48w\" sizes=\"100vw\" \/><figcaption class=\"wp-element-caption\"><em>Captura de pantalla<\/em><\/figcaption><\/figure>\n\n<p>Finalmente, puede agregar el bloque a su sitio web. Abre o crea una publicaci\u00f3n o p\u00e1gina, luego presiona el <strong>+ <\/strong>en la barra lateral izquierda de tu panel para encontrar e insertar tu bloque. <\/p>\n\n<p>Luego, personaliza el contenido de la p\u00e1gina a tu gusto con otros bloques, <a href=\"https:\/\/www.bluehost.com\/blog\/what-is-wordpress-shortcode\/\">c\u00f3digos cortos<\/a> \u00fatiles de <a href=\"https:\/\/www.bluehost.com\/blog\/what-is-wordpress-shortcode\/\">WordPress<\/a><a href=\"https:\/\/www.bluehost.com\/blog\/what-is-wordpress-shortcode\/\"> <\/a> y otros enfoques accesibles que <a href=\"https:\/\/www.bluehost.com\/blog\/ux-matters-how-to-create-a-dynamic-user-experience-faqs\/\">optimizan la experiencia del usuario<\/a> (UX) y el <a href=\"https:\/\/www.bluehost.com\/blog\/10-wordpress-setting-changes-to-optimize-your-sites-performance\/\">rendimiento del sitio web<\/a>.<\/p>\n\n<h3 class=\"wp-block-heading\"><a><\/a>Creaci\u00f3n manual de bloques personalizados<\/h3>\n\n<p>Alternativamente, puedes codificar bloques personalizados de Gutenberg desde cero siguiendo este proceso paso a paso:<\/p>\n\n<p><strong>1. Configura tu entorno de desarrollador de WordPress<\/strong><\/p>\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1999\" height=\"1030\" src=\"https:\/\/www.bluehost.com\/es-es\/blog\/wp-content\/uploads\/2018\/11\/Wordpress-developer-environment.png\" alt=\"Tendr&#xE1;s que incluir Node.js en tu entorno de desarrollador de WordPress.\" class=\"wp-image-46227\" srcset=\"https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Wordpress-developer-environment.png 1999w, https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Wordpress-developer-environment-300x155.png 300w, https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Wordpress-developer-environment-1024x528.png 1024w, https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Wordpress-developer-environment-768x396.png 768w, https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Wordpress-developer-environment-1536x791.png 1536w, https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Wordpress-developer-environment-24x12.png 24w, https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Wordpress-developer-environment-36x19.png 36w, https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Wordpress-developer-environment-48x25.png 48w\" sizes=\"100vw\" \/><figcaption class=\"wp-element-caption\"><em>Captura de pantalla<\/em><\/figcaption><\/figure>\n\n<p>En primer lugar, instale <a href=\"https:\/\/nodejs.org\/en\/download\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>Node.js<\/strong><\/a> y el <a href=\"https:\/\/www.npmjs.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">administrador de paquetes de nodo<\/a> (npm). Estas son herramientas de compilaci\u00f3n de JavaScript que le permiten definir funciones b\u00e1sicas de bloque. Puede descargar <strong>Node.js<\/strong> a trav\u00e9s del instalador en l\u00ednea y luego asegurarse de que el <strong>npm<\/strong> est\u00e9 activado ingresando el comando <strong>npm-v <\/strong>en su editor de c\u00f3digo.  <\/p>\n\n<p>A continuaci\u00f3n, tendr\u00e1s que instalar <a href=\"https:\/\/www.docker.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">Docker<\/a>, un requisito para utilizar la herramienta de desarrollo de WordPress. El sitio web de Docker ofrece una instalaci\u00f3n sencilla con un solo clic. <\/p>\n\n<p>Despu\u00e9s de eso, <a href=\"https:\/\/developer.wordpress.org\/themes\/getting-started\/setting-up-a-development-environment\/\" target=\"_blank\" rel=\"noreferrer noopener\">configurar\u00e1 su entorno de desarrollador<\/a> y <a href=\"https:\/\/www.bluehost.com\/help\/article\/wordpress-how-to-create-a-staging-site\">activar\u00e1 su sitio de prueba<\/a>. Puedes configurar el entorno de desarrollo a trav\u00e9s de la herramienta predeterminada de WordPress. Inst\u00e1lelo globalmente ingresando el comando <strong>npm -g install @wordpress\/env<\/strong>.  <\/p>\n\n<p><strong>2. Configura tu archivo de plugin base (de inicio)<\/strong><\/p>\n\n<p>Antes de que puedas crear tu bloque personalizado de Gutenberg, tienes que crear un plugin de bloque base como referencia. Afortunadamente, hay algunos enfoques que te ayudan a evitar completar manualmente este paso. <\/p>\n\n<p>Ejecuta el comando <strong>\/wp-content\/plugins\/ <\/strong>para navegar a tu directorio de plugins.<\/p>\n\n<p>Luego, una opci\u00f3n es ejecutar el comando <strong>npx @wordpress\/create-block<\/strong>. Esto le brinda un f\u00e1cil acceso y capacidades de edici\u00f3n para sus archivos PHP y archivos JS.<\/p>\n\n<p>Aseg\u00farese de agregar el nombre que desea usar para su bloque de inicio al comando. Puedes usar algo simple, como <strong>mi-nuevo-bloque<\/strong>, o ser creativo. <\/p>\n\n<p>La otra opci\u00f3n es instalar la herramienta <a href=\"https:\/\/www.npmjs.com\/package\/create-guten-block\" target=\"_blank\" rel=\"noreferrer noopener\">create-guten-block<\/a> y ejecutar el comando <strong>npx create-guten-block<\/strong> con el nombre del bloque de inicio.<\/p>\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"888\" height=\"818\" src=\"https:\/\/www.bluehost.com\/es-es\/blog\/wp-content\/uploads\/2018\/11\/Create-guten-block.jpg\" alt=\"Puedes usar la herramienta create-guten-block para configurar el archivo de tu plugin de inicio.\" class=\"wp-image-46228\" srcset=\"https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Create-guten-block.jpg 888w, https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Create-guten-block-300x276.jpg 300w, https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Create-guten-block-768x707.jpg 768w, https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Create-guten-block-24x22.jpg 24w, https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Create-guten-block-36x33.jpg 36w, https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Create-guten-block-48x44.jpg 48w\" sizes=\"100vw\" \/><figcaption class=\"wp-element-caption\"><em>Captura de pantalla<\/em><\/figcaption><\/figure>\n\n<p>Estos procesos crear\u00e1n un punto de partida.<\/p>\n\n<p><strong>3. Configurar block.json<\/strong><\/p>\n\n<p>Debe agregar un <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/block-api\/block-metadata\/\" target=\"_blank\" rel=\"noreferrer noopener\">archivo block.json<\/a> al nuevo directorio y, a continuaci\u00f3n, configurarlo introduciendo metadatos y selecciones para varias configuraciones. Algunos ejemplos de configuraci\u00f3n son los atributos de bloque y otras especificaciones ajustables, como la versi\u00f3n, el <strong>t\u00edtulo<\/strong> y la <strong>categor\u00eda<\/strong> de la interfaz de planificaci\u00f3n de aplicaciones (<strong>API).<\/strong> <\/p>\n\n<p>A continuaci\u00f3n, se muestra un ejemplo de c\u00f3mo podr\u00eda verse parte del c\u00f3digo block.json:<\/p>\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"583\" height=\"655\" src=\"https:\/\/www.bluehost.com\/es-es\/blog\/wp-content\/uploads\/2018\/11\/Blockjson-file.jpg\" alt=\"Debe configurar los ajustes de su archivo block.json, incluida la versi&#xF3;n de la API.\" class=\"wp-image-46229\" srcset=\"https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Blockjson-file.jpg 583w, https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Blockjson-file-267x300.jpg 267w, https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Blockjson-file-21x24.jpg 21w, https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Blockjson-file-32x36.jpg 32w, https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Blockjson-file-43x48.jpg 43w\" sizes=\"100vw\" \/><figcaption class=\"wp-element-caption\"><em>Captura de pantalla<\/em><\/figcaption><\/figure>\n\n<p>El archivo <strong>block.json<\/strong> permite que tu plugin de bloque b\u00e1sico aparezca en el directorio de plugins, facilita el registro de tu bloque m\u00e1s adelante y ayuda con el rendimiento de tu sitio web.<\/p>\n\n<p><strong>4. Configurar m\u00e1s especificaciones<\/strong><\/p>\n\n<p>A continuaci\u00f3n, determinar\u00e1 y pondr\u00e1 en cola los detalles relacionados con:<\/p>\n\n<ul class=\"wp-block-list\">\n<li>Estilos.<\/li>\n\n\n\n<li>Dependencias y archivos de activos.<\/li>\n\n\n\n<li>Atributos.<\/li>\n\n\n\n<li>Scripts.<\/li>\n\n\n\n<li>Etiquetas y palabras clave.<\/li>\n<\/ul>\n\n<p>Puede navegar hasta el <a href=\"https:\/\/docs.npmjs.com\/cli\/v7\/configuring-npm\/package-json\" target=\"_blank\" rel=\"noreferrer noopener\">archivo <strong>package.json<\/strong><\/a> para configurar las propiedades, los estilos y los scripts de JavaScript. A trav\u00e9s <strong>de block.json<\/strong>, puede definir atributos con la funci\u00f3n <strong>setAttributes<\/strong>. Tambi\u00e9n puede modificar la configuraci\u00f3n de bloques con etiquetas y palabras clave.  <\/p>\n\n<p>Puede agregar otras especificaciones de frontend y backend y editar varias funciones. Por ejemplo, debe crear un archivo de activos para agregar <a href=\"https:\/\/www.sonatype.com\/launchpad\/what-are-software-dependencies\" target=\"_blank\" rel=\"noreferrer noopener\">dependencias<\/a>. Para ello, introduzca el comando <strong>npm run build <\/strong>para el archivo XML de JavaScript (JSX) o el siguiente c\u00f3digo PHP:  <\/p>\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"266\" height=\"229\" src=\"https:\/\/www.bluehost.com\/es-es\/blog\/wp-content\/uploads\/2018\/11\/Php-code.jpg\" alt=\"C&#xF3;digo PHP para crear un archivo de activos para sus dependencias.\" class=\"wp-image-46230\" srcset=\"https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Php-code.jpg 266w, https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Php-code-24x21.jpg 24w, https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Php-code-36x31.jpg 36w, https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Php-code-48x41.jpg 48w\" sizes=\"100vw\" \/><figcaption class=\"wp-element-caption\"><em>Captura de pantalla<\/em><\/figcaption><\/figure>\n\n<p><strong>5. Registra tu bloque<\/strong><\/p>\n\n<p>Una vez que hayas creado tu plugin de bloques, utiliza la funci\u00f3n <strong>register_block_type<\/strong>. Esta t\u00e9cnica de registro de bloques extrae autom\u00e1ticamente los metadatos previamente determinados del archivo <strong>block.json<\/strong> . <\/p>\n\n<p><strong>6. Guarde y confirme que su bloque funciona<\/strong><\/p>\n\n<p>El paso final es guardar todos los archivos y probar su nuevo bloque.<\/p>\n\n<p>Puedes confirmar su funcionalidad a\u00f1adiendo tu nuevo bloque personalizado de Gutenberg a tu sitio web. Si lo insertas y muestra el mensaje \u00abHola Mundo\u00bb, es una se\u00f1al de que completaste el proceso correctamente. <\/p>\n\n<p>Si desea usar el mismo bloque en varios dise\u00f1os o sitios web en el futuro, intente usarlo en un patr\u00f3n de <a href=\"https:\/\/www.bluehost.com\/blog\/what-are-gutenberg-block-patterns-in-wordpress-and-how-to-use-them\/\">bloques de Gutenberg<\/a>.<\/p>\n\n<p>Navega por la <a href=\"https:\/\/learn.wordpress.org\/\" target=\"_blank\" rel=\"noreferrer noopener\">p\u00e1gina \u00abAprender\u00bb de WordPress<\/a> para obtener m\u00e1s detalles y <a href=\"https:\/\/learn.wordpress.org\/tutorials\/\" target=\"_blank\" rel=\"noreferrer noopener\">tutoriales<\/a> sobre c\u00f3mo configurar tu sitio web.<\/p>\n\n<h2 class=\"wp-block-heading\"><a><\/a>Reflexiones finales: C\u00f3mo crear bloques personalizados de Gutenberg \u2014 una gu\u00eda de Bluehost<\/h2>\n\n<p>Hacer bloques personalizados de Gutenberg para WordPress es una soluci\u00f3n \u00fatil si necesita elementos del sitio web que no ofrecen los bloques predeterminados.<\/p>\n\n<p>Creas tus propios bloques de Gutenberg con un plugin o mediante codificaci\u00f3n manual. Sin embargo, cualquiera de los dos procesos requiere cierta experiencia t\u00e9cnica. <\/p>\n\n<p>Si no desea hacer bloques personalizados usted mismo, pruebe <a href=\"https:\/\/www.bluehost.com\/solutions\/website-design\">los servicios de dise\u00f1o de sitios web de Bluehost<\/a>. Nuestro equipo de expertos comprometidos est\u00e1 aqu\u00ed para ayudarte a personalizar y cultivar el sitio web perfecto. <\/p>\n\n<p>Si desea dise\u00f1ar su sitio web usted mismo, pero desea recibir orientaci\u00f3n experta en edici\u00f3n de sitios en el camino, tambi\u00e9n ofrecemos <a href=\"https:\/\/www.bluehost.com\/pro-design-live\">Pro Design con soporte en vivo<\/a>. Nuestros expertos pueden ayudarte a elegir y personalizar los temas y plugins perfectos y optimizar tu sitio web. <\/p>\n\n<p>Luego, una vez que su sitio web est\u00e9 listo para ponerse en marcha, <a href=\"https:\/\/www.bluehost.com\/contact\">cont\u00e1ctenos en Bluehost<\/a> para obtener <a href=\"https:\/\/www.bluehost.com\/wordpress\/wordpress-hosting\"> servicios de alojamiento<\/a> de <a href=\"https:\/\/www.bluehost.com\/wordpress\/wordpress-hosting\">WordPress<\/a> de alta velocidad, alta calidad y alto rendimiento.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>El editor de bloques Gutenberg, el editor de contenido de WordPress, tiene m\u00e1s de 81 millones de instalaciones activas. Debido a la naturaleza dominante del mercado de WordPress y la naturaleza intuitiva del dise\u00f1o de este editor, no es de extra\u00f1ar que este sistema sea tan popular. Gutenberg es un creador de p\u00e1ginas y editor [&hellip;]<\/p>\n","protected":false},"author":74,"featured_media":124587,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_yoast_wpseo_title":"C\u00f3mo crear bloques personalizados de Gutenberg | Una gu\u00eda de Bluehost","_yoast_wpseo_metadesc":"\u00bfEst\u00e1 interesado en crear bloques personalizados de Gutenberg para su sitio web de WordPress? Descubre varios enfoques para crear y obtener bloques personalizados en esta gu\u00eda.","inline_featured_image":false,"footnotes":""},"categories":[3073,1365],"tags":[3672],"ppma_author":[599],"class_list":["post-124585","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-desarrollo","category-wordpress-en-ingles","tag-guias-practicas"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v27.1 (Yoast SEO v27.1.1) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>C\u00f3mo crear bloques personalizados de Gutenberg | Una gu\u00eda de Bluehost<\/title>\n<meta name=\"description\" content=\"\u00bfEst\u00e1 interesado en crear bloques personalizados de Gutenberg para su sitio web de WordPress? Descubre varios enfoques para crear y obtener bloques personalizados en esta gu\u00eda.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.bluehost.com\/blog\/es\/wp-json\/wp\/v2\/posts\/124585\/\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Uso de bloques personalizados de Gutenberg para la creaci\u00f3n de contenido de WordPress: una gu\u00eda f\u00e1cil de usar\" \/>\n<meta property=\"og:description\" content=\"\u00bfEst\u00e1 interesado en crear bloques personalizados de Gutenberg para su sitio web de WordPress? Descubre varios enfoques para crear y obtener bloques personalizados en esta gu\u00eda.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.bluehost.com\/blog\/es\/uso-de-bloques-personalizados-de-gutenberg-para-la-creacion-de-contenido-de-wordpress-una-guia-facil-de-usar\/\" \/>\n<meta property=\"og:site_name\" content=\"Bluehost Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/bluehost\/\" \/>\n<meta property=\"article:published_time\" content=\"2023-09-01T10:40:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-02-24T04:23:41+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Gutenberg-Custom-blocks.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1920\" \/>\n\t<meta property=\"og:image:height\" content=\"1080\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Minal Agarwal\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@https:\/\/twitter.com\/minalagarwal\" \/>\n<meta name=\"twitter:site\" content=\"@bluehost\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Minal Agarwal\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data2\" content=\"11 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.bluehost.com\/blog\/es\/uso-de-bloques-personalizados-de-gutenberg-para-la-creacion-de-contenido-de-wordpress-una-guia-facil-de-usar\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.bluehost.com\/blog\/es\/uso-de-bloques-personalizados-de-gutenberg-para-la-creacion-de-contenido-de-wordpress-una-guia-facil-de-usar\/\"},\"author\":{\"name\":\"Minal Agarwal\",\"@id\":\"https:\/\/www.bluehost.com\/blog\/es\/#\/schema\/person\/e9ccb012781e05c929d20c7b89f8bbe3\"},\"headline\":\"Uso de bloques personalizados de Gutenberg para la creaci\u00f3n de contenido de WordPress: una gu\u00eda f\u00e1cil de usar\",\"datePublished\":\"2023-09-01T10:40:00+00:00\",\"dateModified\":\"2025-02-24T04:23:41+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.bluehost.com\/blog\/es\/uso-de-bloques-personalizados-de-gutenberg-para-la-creacion-de-contenido-de-wordpress-una-guia-facil-de-usar\/\"},\"wordCount\":2287,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.bluehost.com\/blog\/es\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.bluehost.com\/blog\/es\/uso-de-bloques-personalizados-de-gutenberg-para-la-creacion-de-contenido-de-wordpress-una-guia-facil-de-usar\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Gutenberg-Custom-blocks.png\",\"keywords\":[\"Gu\u00edas pr\u00e1cticas\"],\"articleSection\":[\"Desarrollo\",\"WordPress (en ingl\u00e9s)\"],\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.bluehost.com\/blog\/es\/uso-de-bloques-personalizados-de-gutenberg-para-la-creacion-de-contenido-de-wordpress-una-guia-facil-de-usar\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.bluehost.com\/blog\/es\/uso-de-bloques-personalizados-de-gutenberg-para-la-creacion-de-contenido-de-wordpress-una-guia-facil-de-usar\/\",\"url\":\"https:\/\/www.bluehost.com\/blog\/es\/uso-de-bloques-personalizados-de-gutenberg-para-la-creacion-de-contenido-de-wordpress-una-guia-facil-de-usar\/\",\"name\":\"C\u00f3mo crear bloques personalizados de Gutenberg | Una gu\u00eda de Bluehost\",\"isPartOf\":{\"@id\":\"https:\/\/www.bluehost.com\/blog\/es\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.bluehost.com\/blog\/es\/uso-de-bloques-personalizados-de-gutenberg-para-la-creacion-de-contenido-de-wordpress-una-guia-facil-de-usar\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.bluehost.com\/blog\/es\/uso-de-bloques-personalizados-de-gutenberg-para-la-creacion-de-contenido-de-wordpress-una-guia-facil-de-usar\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Gutenberg-Custom-blocks.png\",\"datePublished\":\"2023-09-01T10:40:00+00:00\",\"dateModified\":\"2025-02-24T04:23:41+00:00\",\"description\":\"\u00bfEst\u00e1 interesado en crear bloques personalizados de Gutenberg para su sitio web de WordPress? Descubre varios enfoques para crear y obtener bloques personalizados en esta gu\u00eda.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.bluehost.com\/blog\/es\/uso-de-bloques-personalizados-de-gutenberg-para-la-creacion-de-contenido-de-wordpress-una-guia-facil-de-usar\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.bluehost.com\/blog\/es\/uso-de-bloques-personalizados-de-gutenberg-para-la-creacion-de-contenido-de-wordpress-una-guia-facil-de-usar\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/www.bluehost.com\/blog\/es\/uso-de-bloques-personalizados-de-gutenberg-para-la-creacion-de-contenido-de-wordpress-una-guia-facil-de-usar\/#primaryimage\",\"url\":\"https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Gutenberg-Custom-blocks.png\",\"contentUrl\":\"https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Gutenberg-Custom-blocks.png\",\"width\":1920,\"height\":1080},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.bluehost.com\/blog\/es\/uso-de-bloques-personalizados-de-gutenberg-para-la-creacion-de-contenido-de-wordpress-una-guia-facil-de-usar\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Blog\",\"item\":\"https:\/\/www.bluehost.com\/es-es\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Sitios web\",\"item\":\"https:\/\/www.bluehost.com\/blog\/es\/category\/sitios-web\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Uso de bloques personalizados de Gutenberg para la creaci\u00f3n de contenido de WordPress: una gu\u00eda f\u00e1cil de usar\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.bluehost.com\/blog\/es\/#website\",\"url\":\"https:\/\/www.bluehost.com\/blog\/es\/\",\"name\":\"Bluehost\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/www.bluehost.com\/blog\/es\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.bluehost.com\/blog\/es\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"es\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.bluehost.com\/blog\/es\/#organization\",\"name\":\"Bluehost\",\"url\":\"https:\/\/www.bluehost.com\/blog\/es\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/www.bluehost.com\/blog\/es\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2023\/08\/bluehost-logo.svg\",\"contentUrl\":\"https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2023\/08\/bluehost-logo.svg\",\"width\":136,\"height\":24,\"caption\":\"Bluehost\"},\"image\":{\"@id\":\"https:\/\/www.bluehost.com\/blog\/es\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/bluehost\/\",\"https:\/\/x.com\/bluehost\",\"https:\/\/www.linkedin.com\/company\/bluehost-com\/\",\"https:\/\/www.youtube.com\/user\/bluehost\",\"https:\/\/en.wikipedia.org\/wiki\/Bluehost\"],\"description\":\"Bluehost is a leading web hosting provider empowering millions of websites worldwide. \\u2028Discover how Bluehost's expertise, reliability, and innovation can help you achieve your online goals.\",\"telephone\":\"+1-888-401-4678\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.bluehost.com\/blog\/es\/#\/schema\/person\/e9ccb012781e05c929d20c7b89f8bbe3\",\"name\":\"Minal Agarwal\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/www.bluehost.com\/blog\/es\/#\/schema\/person\/image\/c8d40b28171fda3585c635bc9672f478\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/042b2a6396c1ee0366c5c9560120123c4f0235ad09355e28ecc11f17cf341b97?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/042b2a6396c1ee0366c5c9560120123c4f0235ad09355e28ecc11f17cf341b97?s=96&d=mm&r=g\",\"caption\":\"Minal Agarwal\"},\"description\":\"Minal is the Director of Brand Marketing at Bluehost. With over 15 years of business experience in the technology industry, she strives to create solutions and content that fulfill a customer's needs. She is a dog mom and a stickler for calendaring.\",\"sameAs\":[\"https:\/\/x.com\/https:\/\/twitter.com\/minalagarwal\"],\"knowsAbout\":[\"WordPress\"],\"url\":\"https:\/\/www.bluehost.com\/blog\/es\/author\/minal-agarwal\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"C\u00f3mo crear bloques personalizados de Gutenberg | Una gu\u00eda de Bluehost","description":"\u00bfEst\u00e1 interesado en crear bloques personalizados de Gutenberg para su sitio web de WordPress? Descubre varios enfoques para crear y obtener bloques personalizados en esta gu\u00eda.","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:\/\/www.bluehost.com\/blog\/es\/wp-json\/wp\/v2\/posts\/124585\/","og_locale":"es_ES","og_type":"article","og_title":"Uso de bloques personalizados de Gutenberg para la creaci\u00f3n de contenido de WordPress: una gu\u00eda f\u00e1cil de usar","og_description":"\u00bfEst\u00e1 interesado en crear bloques personalizados de Gutenberg para su sitio web de WordPress? Descubre varios enfoques para crear y obtener bloques personalizados en esta gu\u00eda.","og_url":"https:\/\/www.bluehost.com\/blog\/es\/uso-de-bloques-personalizados-de-gutenberg-para-la-creacion-de-contenido-de-wordpress-una-guia-facil-de-usar\/","og_site_name":"Bluehost Blog","article_publisher":"https:\/\/www.facebook.com\/bluehost\/","article_published_time":"2023-09-01T10:40:00+00:00","article_modified_time":"2025-02-24T04:23:41+00:00","og_image":[{"width":1920,"height":1080,"url":"https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Gutenberg-Custom-blocks.png","type":"image\/png"}],"author":"Minal Agarwal","twitter_card":"summary_large_image","twitter_creator":"@https:\/\/twitter.com\/minalagarwal","twitter_site":"@bluehost","twitter_misc":{"Escrito por":"Minal Agarwal","Tiempo de lectura":"11 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.bluehost.com\/blog\/es\/uso-de-bloques-personalizados-de-gutenberg-para-la-creacion-de-contenido-de-wordpress-una-guia-facil-de-usar\/#article","isPartOf":{"@id":"https:\/\/www.bluehost.com\/blog\/es\/uso-de-bloques-personalizados-de-gutenberg-para-la-creacion-de-contenido-de-wordpress-una-guia-facil-de-usar\/"},"author":{"name":"Minal Agarwal","@id":"https:\/\/www.bluehost.com\/blog\/es\/#\/schema\/person\/e9ccb012781e05c929d20c7b89f8bbe3"},"headline":"Uso de bloques personalizados de Gutenberg para la creaci\u00f3n de contenido de WordPress: una gu\u00eda f\u00e1cil de usar","datePublished":"2023-09-01T10:40:00+00:00","dateModified":"2025-02-24T04:23:41+00:00","mainEntityOfPage":{"@id":"https:\/\/www.bluehost.com\/blog\/es\/uso-de-bloques-personalizados-de-gutenberg-para-la-creacion-de-contenido-de-wordpress-una-guia-facil-de-usar\/"},"wordCount":2287,"commentCount":0,"publisher":{"@id":"https:\/\/www.bluehost.com\/blog\/es\/#organization"},"image":{"@id":"https:\/\/www.bluehost.com\/blog\/es\/uso-de-bloques-personalizados-de-gutenberg-para-la-creacion-de-contenido-de-wordpress-una-guia-facil-de-usar\/#primaryimage"},"thumbnailUrl":"https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Gutenberg-Custom-blocks.png","keywords":["Gu\u00edas pr\u00e1cticas"],"articleSection":["Desarrollo","WordPress (en ingl\u00e9s)"],"inLanguage":"es","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.bluehost.com\/blog\/es\/uso-de-bloques-personalizados-de-gutenberg-para-la-creacion-de-contenido-de-wordpress-una-guia-facil-de-usar\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.bluehost.com\/blog\/es\/uso-de-bloques-personalizados-de-gutenberg-para-la-creacion-de-contenido-de-wordpress-una-guia-facil-de-usar\/","url":"https:\/\/www.bluehost.com\/blog\/es\/uso-de-bloques-personalizados-de-gutenberg-para-la-creacion-de-contenido-de-wordpress-una-guia-facil-de-usar\/","name":"C\u00f3mo crear bloques personalizados de Gutenberg | Una gu\u00eda de Bluehost","isPartOf":{"@id":"https:\/\/www.bluehost.com\/blog\/es\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.bluehost.com\/blog\/es\/uso-de-bloques-personalizados-de-gutenberg-para-la-creacion-de-contenido-de-wordpress-una-guia-facil-de-usar\/#primaryimage"},"image":{"@id":"https:\/\/www.bluehost.com\/blog\/es\/uso-de-bloques-personalizados-de-gutenberg-para-la-creacion-de-contenido-de-wordpress-una-guia-facil-de-usar\/#primaryimage"},"thumbnailUrl":"https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Gutenberg-Custom-blocks.png","datePublished":"2023-09-01T10:40:00+00:00","dateModified":"2025-02-24T04:23:41+00:00","description":"\u00bfEst\u00e1 interesado en crear bloques personalizados de Gutenberg para su sitio web de WordPress? Descubre varios enfoques para crear y obtener bloques personalizados en esta gu\u00eda.","breadcrumb":{"@id":"https:\/\/www.bluehost.com\/blog\/es\/uso-de-bloques-personalizados-de-gutenberg-para-la-creacion-de-contenido-de-wordpress-una-guia-facil-de-usar\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.bluehost.com\/blog\/es\/uso-de-bloques-personalizados-de-gutenberg-para-la-creacion-de-contenido-de-wordpress-una-guia-facil-de-usar\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.bluehost.com\/blog\/es\/uso-de-bloques-personalizados-de-gutenberg-para-la-creacion-de-contenido-de-wordpress-una-guia-facil-de-usar\/#primaryimage","url":"https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Gutenberg-Custom-blocks.png","contentUrl":"https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Gutenberg-Custom-blocks.png","width":1920,"height":1080},{"@type":"BreadcrumbList","@id":"https:\/\/www.bluehost.com\/blog\/es\/uso-de-bloques-personalizados-de-gutenberg-para-la-creacion-de-contenido-de-wordpress-una-guia-facil-de-usar\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Blog","item":"https:\/\/www.bluehost.com\/es-es\/blog\/"},{"@type":"ListItem","position":2,"name":"Sitios web","item":"https:\/\/www.bluehost.com\/blog\/es\/category\/sitios-web\/"},{"@type":"ListItem","position":3,"name":"Uso de bloques personalizados de Gutenberg para la creaci\u00f3n de contenido de WordPress: una gu\u00eda f\u00e1cil de usar"}]},{"@type":"WebSite","@id":"https:\/\/www.bluehost.com\/blog\/es\/#website","url":"https:\/\/www.bluehost.com\/blog\/es\/","name":"Bluehost","description":"","publisher":{"@id":"https:\/\/www.bluehost.com\/blog\/es\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.bluehost.com\/blog\/es\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es"},{"@type":"Organization","@id":"https:\/\/www.bluehost.com\/blog\/es\/#organization","name":"Bluehost","url":"https:\/\/www.bluehost.com\/blog\/es\/","logo":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.bluehost.com\/blog\/es\/#\/schema\/logo\/image\/","url":"https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2023\/08\/bluehost-logo.svg","contentUrl":"https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2023\/08\/bluehost-logo.svg","width":136,"height":24,"caption":"Bluehost"},"image":{"@id":"https:\/\/www.bluehost.com\/blog\/es\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/bluehost\/","https:\/\/x.com\/bluehost","https:\/\/www.linkedin.com\/company\/bluehost-com\/","https:\/\/www.youtube.com\/user\/bluehost","https:\/\/en.wikipedia.org\/wiki\/Bluehost"],"description":"Bluehost is a leading web hosting provider empowering millions of websites worldwide. \u2028Discover how Bluehost's expertise, reliability, and innovation can help you achieve your online goals.","telephone":"+1-888-401-4678"},{"@type":"Person","@id":"https:\/\/www.bluehost.com\/blog\/es\/#\/schema\/person\/e9ccb012781e05c929d20c7b89f8bbe3","name":"Minal Agarwal","image":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.bluehost.com\/blog\/es\/#\/schema\/person\/image\/c8d40b28171fda3585c635bc9672f478","url":"https:\/\/secure.gravatar.com\/avatar\/042b2a6396c1ee0366c5c9560120123c4f0235ad09355e28ecc11f17cf341b97?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/042b2a6396c1ee0366c5c9560120123c4f0235ad09355e28ecc11f17cf341b97?s=96&d=mm&r=g","caption":"Minal Agarwal"},"description":"Minal is the Director of Brand Marketing at Bluehost. With over 15 years of business experience in the technology industry, she strives to create solutions and content that fulfill a customer's needs. She is a dog mom and a stickler for calendaring.","sameAs":["https:\/\/x.com\/https:\/\/twitter.com\/minalagarwal"],"knowsAbout":["WordPress"],"url":"https:\/\/www.bluehost.com\/blog\/es\/author\/minal-agarwal\/"}]}},"authors":[{"term_id":599,"user_id":74,"is_guest":0,"slug":"minal-agarwal","display_name":"Minal Agarwal","avatar_url":"https:\/\/secure.gravatar.com\/avatar\/042b2a6396c1ee0366c5c9560120123c4f0235ad09355e28ecc11f17cf341b97?s=96&d=mm&r=g","0":null,"1":"","2":"","3":"","4":"","5":"","6":"","7":"","8":"","9":"","10":"","11":"","12":"","13":"","14":"","15":""}],"_links":{"self":[{"href":"https:\/\/www.bluehost.com\/blog\/es\/wp-json\/wp\/v2\/posts\/124585","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.bluehost.com\/blog\/es\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.bluehost.com\/blog\/es\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.bluehost.com\/blog\/es\/wp-json\/wp\/v2\/users\/74"}],"replies":[{"embeddable":true,"href":"https:\/\/www.bluehost.com\/blog\/es\/wp-json\/wp\/v2\/comments?post=124585"}],"version-history":[{"count":0,"href":"https:\/\/www.bluehost.com\/blog\/es\/wp-json\/wp\/v2\/posts\/124585\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.bluehost.com\/blog\/es\/wp-json\/wp\/v2\/media\/124587"}],"wp:attachment":[{"href":"https:\/\/www.bluehost.com\/blog\/es\/wp-json\/wp\/v2\/media?parent=124585"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.bluehost.com\/blog\/es\/wp-json\/wp\/v2\/categories?post=124585"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.bluehost.com\/blog\/es\/wp-json\/wp\/v2\/tags?post=124585"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/www.bluehost.com\/blog\/es\/wp-json\/wp\/v2\/ppma_author?post=124585"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}