{"id":274,"date":"2023-07-10T14:45:51","date_gmt":"2023-07-10T14:45:51","guid":{"rendered":"https:\/\/pruebasweb.argenispaz.com\/?p=274"},"modified":"2023-07-12T17:49:46","modified_gmt":"2023-07-12T17:49:46","slug":"como-exportar-e-importar-bloques-en-gutenberg","status":"publish","type":"post","link":"https:\/\/pruebasweb.argenispaz.com\/index.php\/2023\/07\/10\/como-exportar-e-importar-bloques-en-gutenberg\/","title":{"rendered":"\u00bfC\u00f3mo exportar e importar bloques en Gutenberg?"},"content":{"rendered":"<p>[et_pb_section fb_built=\u00bb1&#8243; _builder_version=\u00bb4.21.0&#8243; _module_preset=\u00bbdefault\u00bb global_colors_info=\u00bb{}\u00bb][et_pb_row _builder_version=\u00bb4.21.0&#8243; _module_preset=\u00bbdefault\u00bb global_colors_info=\u00bb{}\u00bb][et_pb_column type=\u00bb4_4&#8243; _builder_version=\u00bb4.21.0&#8243; _module_preset=\u00bbdefault\u00bb global_colors_info=\u00bb{}\u00bb][et_pb_text _builder_version=\u00bb4.21.0&#8243; _module_preset=\u00bbdefault\u00bb hover_enabled=\u00bb0&#8243; global_colors_info=\u00bb{}\u00bb sticky_enabled=\u00bb0&#8243;]<\/p>\n<p>En WordPress, Gutenberg ha surgido como una herramienta revolucionaria que ha cambiado la forma en que creamos y dise\u00f1amos contenido. Con su sistema de bloques, Gutenberg nos permite construir p\u00e1ginas y publicaciones de manera intuitiva y eficiente. Pero, \u00bfqu\u00e9 sucede cuando queremos reutilizar un bloque que hemos dise\u00f1ado con esmero en otra p\u00e1gina o incluso en otro sitio web? \u00bfTenemos que recrearlo desde cero? \u00a1Para nada! Aqu\u00ed es donde entra en juego la capacidad de exportar e importar <a href=\"https:\/\/www.webempresa.com\/blog\/como-crear-bloques-reutilizables-en-gutenberg.html\">bloques reutilizables Gutenberg<\/a>.<\/p>\n<p>En esta gu\u00eda, vamos a explorar c\u00f3mo podemos aprovechar esta funcionalidad para optimizar nuestro flujo de trabajo en WordPress. Aprenderemos c\u00f3mo podemos guardar nuestros bloques favoritos y reutilizarlos cuando y donde queramos. Ya sea que seamos novatos en WordPress o expertos en <a href=\"https:\/\/www.webempresa.com\/blog\/editor-wordpress-gutenberg-caracteristicas-primeros-pasos.html\">Gutenberg<\/a>, esta gu\u00eda nos proporcionar\u00e1 las herramientas y el conocimiento necesarios para manejar nuestros bloques con confianza.<\/p>\n<p>As\u00ed que, si estamos listo para llevar la experiencia con Gutenberg al siguiente nivel, \u00a1sigamos adelante!<\/p>\n<p>[\/et_pb_text][et_pb_text _builder_version=\u00bb4.21.0&#8243; _module_preset=\u00bbdefault\u00bb hover_enabled=\u00bb0&#8243; global_colors_info=\u00bb{}\u00bb sticky_enabled=\u00bb0&#8243;]<\/p>\n<h2>\u00bfQu\u00e9 son los bloques reutilizables Gutenberg?<\/h2>\n<p>Antes de sumergirnos en el proceso de importaci\u00f3n y exportaci\u00f3n de bloques, es esencial entender qu\u00e9 son los bloques reutilizables de Gutenberg. Los bloques reutilizables son una caracter\u00edstica poderosa de Gutenberg que nos permite <strong>guardar y reutilizar<\/strong> bloques o grupos de bloques en varias p\u00e1ginas y publicaciones.<\/p>\n<p>En lugar de recrear un <strong>bloque desde cero<\/strong> cada vez que lo necesitamos, podemos guardar un bloque que hayamos dise\u00f1ado y reutilizarlo con un par de clics. Esto no solo nos ahorra tiempo, sino que tambi\u00e9n asegura la coherencia en nuestro dise\u00f1o.<\/p>\n<p>Por ejemplo, supongamos que hemos creado un hermoso bloque de <strong>testimonios<\/strong> con un dise\u00f1o personalizado y contenido espec\u00edfico. Nos encanta c\u00f3mo se ve y queremos usarlo en varias p\u00e1ginas de nuestro sitio. En lugar de recrear este bloque en cada p\u00e1gina, podemos guardarlo como un bloque reutilizable y luego insertarlo en cualquier p\u00e1gina con solo unos pocos clics. Esto nos ahorra tiempo y nos asegura que el bloque d\u00e9 testimonios se vea y funcione de la misma manera en todas las p\u00e1ginas.<\/p>\n<p>Los bloques reutilizables de Gutenberg son una herramienta \u00fatil para optimizar nuestro flujo de trabajo en WordPress y mantener la coherencia en nuestro dise\u00f1o. Ahora que entendemos qu\u00e9 son, \u00a1veamos c\u00f3mo podemos <strong>exportar e importar<\/strong> estos bloques para usarlos en todo nuestro sitio y m\u00e1s all\u00e1!<\/p>\n<p>[\/et_pb_text][et_pb_text _builder_version=\u00bb4.21.0&#8243; _module_preset=\u00bbdefault\u00bb hover_enabled=\u00bb0&#8243; global_colors_info=\u00bb{}\u00bb sticky_enabled=\u00bb0&#8243;]<\/p>\n<h2>\u00bfPor qu\u00e9 exportar e importar bloques en Gutenberg?<\/h2>\n<p>La exportaci\u00f3n e importaci\u00f3n de bloques en Gutenberg es una caracter\u00edstica que puede ser de gran utilidad para los usuarios de WordPress. Pero,<strong> \u00bfpor qu\u00e9 querr\u00edamos hacerlo?<\/strong> Bueno, hay varias razones convincentes.<\/p>\n<p>En primer lugar, la exportaci\u00f3n de bloques nos permite reutilizar bloques o conjuntos de bloques en diferentes sitios web. Si hemos creado un bloque personalizado que nos encanta y queremos usarlo en otro sitio web de WordPress, podemos exportarlo y luego importarlo en el otro sitio. Esto nos ahorra tiempo y esfuerzo, ya que no tenemos que recrear el bloque desde cero.<\/p>\n<p>Adem\u00e1s, la importaci\u00f3n de bloques puede ser \u00fatil si estamos trabajando en un equipo y queremos compartir bloques entre los miembros del equipo. Por ejemplo, si un miembro del equipo ha creado un bloque de testimonios impresionante, puede exportarlo y compartirlo con el resto del equipo. Los dem\u00e1s miembros del equipo pueden importar el bloque en sus propios sitios web de WordPress y usarlo como deseen.<\/p>\n<p>Finalmente, la <strong>exportaci\u00f3n e importaci\u00f3n<\/strong> de bloques tambi\u00e9n puede ser \u00fatil para hacer copias de seguridad de nuestros bloques. Si hemos pasado mucho tiempo creando bloques personalizados, no queremos correr el riesgo de perderlos. Al exportar los bloques, podemos guardar una copia de ellos en nuestro ordenador o en un servicio de almacenamiento en la nube. Si algo sucede con nuestro sitio web, podemos importar los bloques desde la copia de seguridad.<\/p>\n<p>La capacidad de exportar e importar bloques en Gutenberg nos ofrece una mayor flexibilidad y eficiencia en la gesti\u00f3n de nuestro contenido en WordPress. Ahora, veamos c\u00f3mo podemos hacerlo.<\/p>\n<p>[\/et_pb_text][et_pb_text _builder_version=\u00bb4.21.0&#8243; _module_preset=\u00bbdefault\u00bb hover_enabled=\u00bb0&#8243; global_colors_info=\u00bb{}\u00bb sticky_enabled=\u00bb0&#8243;]<\/p>\n<h2>\u00bfC\u00f3mo crear un bloque reutilizable?<\/h2>\n<p>El uso de bloques reutilizables son una caracter\u00edstica de <strong>Gutenberg<\/strong> que nos favorece en cuanto a tiempo y maniobrabilidad de la web, esta funci\u00f3n es \u00fatil para elementos que van a ser recurrentes en nuestro sitio.<\/p>\n<p>Si por ejemplo tenemos una p\u00e1gina de productos y queremos incluir una imagen promocional ya creada, podemos exportar e importar en otras p\u00e1ginas que lo necesitemos. S\u00ed queremos usar m\u00e1s de un bloque para nuestra p\u00e1gina.<\/p>\n<p>Para crear este bloque solo tenemos que ingresar en la configuraci\u00f3n del bloque que queremos guardar, una vez all\u00ed seleccionamos la opci\u00f3n de a\u00f1adir a los bloques reutilizables.<\/p>\n<p>[\/et_pb_text][et_pb_image src=\u00bbhttps:\/\/pruebasweb.argenispaz.com\/wp-content\/uploads\/2023\/07\/crear-bloque-reutilizable.gif\u00bb title_text=\u00bbcrear bloque reutilizable\u00bb _builder_version=\u00bb4.21.0&#8243; _module_preset=\u00bbdefault\u00bb global_colors_info=\u00bb{}\u00bb][\/et_pb_image][et_pb_text _builder_version=\u00bb4.21.0&#8243; _module_preset=\u00bbdefault\u00bb hover_enabled=\u00bb0&#8243; global_colors_info=\u00bb{}\u00bb sticky_enabled=\u00bb0&#8243;]<\/p>\n<h2>\u00bfC\u00f3mo exportar un bloque reutilizable?<\/h2>\n<p>Una vez que hayamos creado y guardado nuestro elemento como bloque reutilizable, el siguiente paso es exportarlo. Para ello, solo hacemos clic en el bot\u00f3n <strong>\u00ab+\u00bb<\/strong> en la parte superior izquierda de nuestra p\u00e1gina o <a href=\"https:\/\/www.webempresa.com\/blog\/pagina-inicio-wordpress-pagina-entradas.html\">entrada<\/a> en el editor. Luego seleccionamos el icono que representa los bloques reutilizables.<\/p>\n<p>[\/et_pb_text][et_pb_image src=\u00bbhttps:\/\/pruebasweb.argenispaz.com\/wp-content\/uploads\/2023\/07\/bloques-reutilizables-en-WordPres.gif\u00bb title_text=\u00bbbloques reutilizables en WordPres\u00bb _builder_version=\u00bb4.21.0&#8243; _module_preset=\u00bbdefault\u00bb global_colors_info=\u00bb{}\u00bb][\/et_pb_image][et_pb_text _builder_version=\u00bb4.21.0&#8243; _module_preset=\u00bbdefault\u00bb hover_enabled=\u00bb0&#8243; global_colors_info=\u00bb{}\u00bb sticky_enabled=\u00bb0&#8243;]<\/p>\n<p>Necesitamos gestionar los bloques reutilizables, para esto hacemos clic en el bot\u00f3n inferior de esta secci\u00f3n o bien podemos hacer esto por medio del men\u00fa general de la parte superior derecha donde encontramos el mismo panel que estamos buscando al hacer clic en el bot\u00f3n de <strong>\u00ab+\u00bb<\/strong>.<\/p>\n<p>[\/et_pb_text][et_pb_image src=\u00bbhttps:\/\/pruebasweb.argenispaz.com\/wp-content\/uploads\/2023\/07\/gestionar-bloques-reutilizables.gif\u00bb title_text=\u00bbgestionar bloques reutilizables\u00bb _builder_version=\u00bb4.21.0&#8243; _module_preset=\u00bbdefault\u00bb global_colors_info=\u00bb{}\u00bb][\/et_pb_image][et_pb_text _builder_version=\u00bb4.21.0&#8243; _module_preset=\u00bbdefault\u00bb hover_enabled=\u00bb0&#8243; global_colors_info=\u00bb{}\u00bb sticky_enabled=\u00bb0&#8243;]<\/p>\n<p>En la p\u00e1gina que se carga, veremos una lista con todos los bloques que hemos convertido en bloques reutilizables. Desde esta lista, podemos <strong>exportar los bloques<\/strong> que deseamos migrar o solo tener como respaldo en nuestras computadoras. Para hacer esto, debemos dejar el cursor del mouse sobre el elemento y seleccionamos la opci\u00f3n de exportar como archivo JSON.<\/p>\n<p>Esto har\u00e1 que se descargue un archivo que guardara toda la informaci\u00f3n del bloque que estamos almacenando para luego usarla en la importaci\u00f3n ya sea en otro dominio o tengamos <a href=\"https:\/\/www.webempresa.com\/blog\/instalar-wordpress-subdominio-hosting.html\">apuntado nuestro WordPress a un subdominio<\/a>.<\/p>\n<p>[\/et_pb_text][et_pb_image src=\u00bbhttps:\/\/pruebasweb.argenispaz.com\/wp-content\/uploads\/2023\/07\/exportar-como-json.gif\u00bb title_text=\u00bbexportar como json\u00bb _builder_version=\u00bb4.21.0&#8243; _module_preset=\u00bbdefault\u00bb global_colors_info=\u00bb{}\u00bb][\/et_pb_image][et_pb_text _builder_version=\u00bb4.21.0&#8243; _module_preset=\u00bbdefault\u00bb hover_enabled=\u00bb0&#8243; global_colors_info=\u00bb{}\u00bb sticky_enabled=\u00bb0&#8243;]<\/p>\n<p>Al seleccionar esta opci\u00f3n, se nos descargar\u00e1 un archivo <strong>JSON<\/strong> en nuestra computadora. <strong>JSON<\/strong>, que significa <strong>JavaScript Object Notation<\/strong>, es un formato de texto ligero y f\u00e1cil de analizar para el intercambio de datos entre un servidor y una aplicaci\u00f3n web. Aunque est\u00e1 basado en <strong>JavaScript<\/strong>, es independiente de este lenguaje.<\/p>\n<p>Pero, dejando esto de lado, lo que debemos saber es que se descargar\u00e1 un archivo con el nombre de nuestro bloque reutilizable y la extensi\u00f3n <strong>.JSON<\/strong> en nuestra carpeta de descargas.<\/p>\n<p>Si abrimos este archivo con cualquier editor de texto veremos como este posee la informaci\u00f3n del bloque que hemos exportado.<\/p>\n<p>[\/et_pb_text][et_pb_image src=\u00bbhttps:\/\/pruebasweb.argenispaz.com\/wp-content\/uploads\/2023\/07\/calendario-codigo.gif\u00bb title_text=\u00bbcalendario codigo\u00bb _builder_version=\u00bb4.21.0&#8243; _module_preset=\u00bbdefault\u00bb global_colors_info=\u00bb{}\u00bb][\/et_pb_image][et_pb_text _builder_version=\u00bb4.21.0&#8243; _module_preset=\u00bbdefault\u00bb hover_enabled=\u00bb0&#8243; global_colors_info=\u00bb{}\u00bb sticky_enabled=\u00bb0&#8243;]<\/p>\n<h2>\u00bfC\u00f3mo importar un bloque reutilizable?<\/h2>\n<p>Cuando queramos importar el archivo <strong>JSON<\/strong> que hemos descargado, necesitaremos subirlo a nuestra nueva p\u00e1gina. Para hacerlo, volvemos a ingresar a la p\u00e1gina de entradas o la p\u00e1gina que estemos editando y accedemos al panel de gesti\u00f3n de bloques reutilizables. Una vez all\u00ed, seleccionamos el bot\u00f3n azul de la parte superior que indica <strong>importar el JSON<\/strong>.<\/p>\n<p>Debemos buscar nuestro archivo y finalizar la importaci\u00f3n haciendo clic en continuar, una vez finalizado el proceso veremos nuestro bloque en esta secci\u00f3n.<\/p>\n<p>[\/et_pb_text][et_pb_image src=\u00bbhttps:\/\/pruebasweb.argenispaz.com\/wp-content\/uploads\/2023\/07\/importar.gif\u00bb title_text=\u00bbimportar\u00bb _builder_version=\u00bb4.21.0&#8243; _module_preset=\u00bbdefault\u00bb global_colors_info=\u00bb{}\u00bb][\/et_pb_image][et_pb_text _builder_version=\u00bb4.21.0&#8243; _module_preset=\u00bbdefault\u00bb hover_enabled=\u00bb0&#8243; global_colors_info=\u00bb{}\u00bb sticky_enabled=\u00bb0&#8243;]<\/p>\n<p>Una vez hemos hecho la importaci\u00f3n de forma correcta ya podemos ingresar a nuestro panel de bloques en la p\u00e1gina que queremos insertar este o estos bloques que hemos importado, para ello solo debemos hacer clic en el bot\u00f3n del <strong>\u00ab+\u00bb<\/strong> y seleccionar el bloque que necesitemos.<\/p>\n<p>[\/et_pb_text][et_pb_image src=\u00bbhttps:\/\/pruebasweb.argenispaz.com\/wp-content\/uploads\/2023\/07\/insertar-bloque-importado.gif\u00bb title_text=\u00bbinsertar bloque importado\u00bb _builder_version=\u00bb4.21.0&#8243; _module_preset=\u00bbdefault\u00bb global_colors_info=\u00bb{}\u00bb][\/et_pb_image][et_pb_text _builder_version=\u00bb4.21.0&#8243; _module_preset=\u00bbdefault\u00bb global_colors_info=\u00bb{}\u00bb]<\/p>\n<h2>\u00a0\u00a0Conclusiones<\/h2>\n<p>En definitiva, el manejo eficiente de los bloques en Gutenberg, en especial la capacidad de exportar e importar bloques, puede ser un verdadero cambio de juego para nuestro sitio web en WordPress. No solo nos permite ahorrar tiempo y esfuerzo al reutilizar bloques personalizados en diferentes partes del sitio, sino que tambi\u00e9n nos permite mantener una consistencia est\u00e9tica y funcional en todas nuestras p\u00e1ginas.<\/p>\n<p>Hemos explorado c\u00f3mo los bloques reutilizables pueden ser una herramienta poderosa para crear secciones personalizadas. Tambi\u00e9n hemos visto c\u00f3mo la opci\u00f3n de exportar e importar bloques puede ser \u00fatil para sitios web multisitio, permiti\u00e9ndo mover bloques entre diferentes sitios con facilidad.<\/p>\n<p>Pero, como siempre, la clave est\u00e1 en experimentar y encontrar la forma de trabajar que mejor se adapte a nuestras necesidades y las del sitio web. As\u00ed que animamos a que exploremos estas funcionalidades y descubramos c\u00f3mo pueden ayudar a optimizar el trabajo en WordPress.<\/p>\n<p>Recordemos que si surge alguna duda o necesitamos ayuda, siempre podemos recurrir a nuestros foros de ayuda o soporte por medio de tickets.<\/p>\n<p>[\/et_pb_text][et_pb_text _builder_version=\u00bb4.21.0&#8243; _module_preset=\u00bbdefault\u00bb global_colors_info=\u00bb{}\u00bb]<\/p>\n<p>Tambi\u00e9n te puede interesar:<\/p>\n<p>&nbsp;<\/p>\n<ul>\n<li><a href=\"https:\/\/www.webempresa.com\/blog\/bookings-reservas-tiendas-online-woocommerce.html\"><span>Plugin de Reservas para WordPress<\/span><\/a><\/li>\n<li><a href=\"https:\/\/www.webempresa.com\/blog\/como-conectar-woocommerce-con-facebook-e-instagram.html\"><span>Conectar WooCommerce con Facebook<\/span><\/a><span><\/span><\/li>\n<li><a href=\"https:\/\/www.webempresa.com\/blog\/carritos-abandonados-woocommerce.html\"><span>Carritos abandonados en WooCommerce<\/span><\/a><\/li>\n<li><a href=\"\/\/www.webempresa.com\/blog\/bloque-productos-woocommerce.html\">Bloques de producto WooCommerce<\/a><\/li>\n<li><a href=\"https:\/\/www.webempresa.com\/blog\/como-integrar-paypal-express-woocommerce.html\"><span>Paypal en WooCommerce<\/span><\/a><\/li>\n<li><a href=\"\/\/www.webempresa.com\/blog\/solucionar-la-carga-lenta-en-tu-sitio-web-a-causa-de-wc-ajaxget_refreshed_fragments-de-woocommerce.html\"><span>wc-ajax=get_refreshed_fragments<\/span><\/a><\/li>\n<li><a href=\"https:\/\/www.webempresa.com\/blog\/anadir-videos-en-los-productos-de-woocommerce.html\"><span>Videos en los productos de WooCommerce<\/span><\/a><\/li>\n<\/ul>\n<p>[\/et_pb_text][\/et_pb_column][\/et_pb_row][\/et_pb_section]<\/p>\n","protected":false},"excerpt":{"rendered":"<p>En WordPress, Gutenberg ha surgido como una herramienta revolucionaria que ha cambiado la forma en que creamos y dise\u00f1amos contenido. Con su sistema de bloques, Gutenberg nos permite construir p\u00e1ginas y publicaciones de manera intuitiva y eficiente. Pero, \u00bfqu\u00e9 sucede cuando queremos reutilizar un bloque que hemos dise\u00f1ado con esmero en otra p\u00e1gina o incluso [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_et_pb_use_builder":"on","_et_pb_old_content":"","_et_gb_content_width":"","footnotes":""},"categories":[1],"tags":[],"_links":{"self":[{"href":"https:\/\/pruebasweb.argenispaz.com\/index.php\/wp-json\/wp\/v2\/posts\/274"}],"collection":[{"href":"https:\/\/pruebasweb.argenispaz.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/pruebasweb.argenispaz.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/pruebasweb.argenispaz.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/pruebasweb.argenispaz.com\/index.php\/wp-json\/wp\/v2\/comments?post=274"}],"version-history":[{"count":13,"href":"https:\/\/pruebasweb.argenispaz.com\/index.php\/wp-json\/wp\/v2\/posts\/274\/revisions"}],"predecessor-version":[{"id":316,"href":"https:\/\/pruebasweb.argenispaz.com\/index.php\/wp-json\/wp\/v2\/posts\/274\/revisions\/316"}],"wp:attachment":[{"href":"https:\/\/pruebasweb.argenispaz.com\/index.php\/wp-json\/wp\/v2\/media?parent=274"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/pruebasweb.argenispaz.com\/index.php\/wp-json\/wp\/v2\/categories?post=274"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/pruebasweb.argenispaz.com\/index.php\/wp-json\/wp\/v2\/tags?post=274"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}