{"id":425,"date":"2019-09-12T08:30:42","date_gmt":"2019-09-12T08:30:42","guid":{"rendered":"https:\/\/kenzap.blog\/?p=425"},"modified":"2019-12-14T10:45:31","modified_gmt":"2019-12-14T10:45:31","slug":"c%C3%B3mo-deshabilitar-temporalmente-y-ocultar-los-bloques-de-gutenberg-de-la-vista","status":"publish","type":"post","link":"https:\/\/kenzap.blog\/es\/c%C3%B3mo-deshabilitar-temporalmente-y-ocultar-los-bloques-de-gutenberg-de-la-vista\/","title":{"rendered":"C\u00f3mo deshabilitar temporalmente y ocultar los bloques de Gutenberg de la vista previa"},"content":{"rendered":"<p>Cuando dise\u00f1a su sitio web y crea m\u00faltiples iteraciones dentro del mismo post o p\u00e1gina es bastante com\u00fan que necesite ocultar cierta secci\u00f3n (bloques de Gutenberg) de la vista previa del sitio web.<\/p>\n<p>Esta breve gu\u00eda le proporcionar\u00e1 una r\u00e1pida visi\u00f3n general sobre c\u00f3mo hacerlo de la manera m\u00e1s \u00f3ptima. Recomendamos dos formas:<\/p>\n<ul>\n<li>Ocultar elemento con la ayuda de CSS.<\/li>\n<li>Eliminaci\u00f3n temporal de bloques con la ayuda de la funci\u00f3n <strong>Agregar a bloques reutilizables<\/strong>.<\/li>\n<\/ul>\n<h2>Enfoque CSS<br \/>\n<\/h2>\n<p>Estos dos enfoques son fundamentalmente diferentes. El CSS mantiene su secci\u00f3n en la p\u00e1gina y la carga durante la vista previa de la p\u00e1gina, pero la regla CSS indica a los navegadores que la oculten aunque est\u00e9 cargada. <\/p>\n<p>Este enfoque es bueno si desea mantener la estructura de bloques de la p\u00e1gina sin ning\u00fan cambio, pero es malo a largo plazo y para SEO porque la secci\u00f3n todav\u00eda se recupera de la base de datos de WordPress y se est\u00e1 cargando.<\/p>\n<h3>Paso 1 &#8211; Asignar una clase personalizada<\/h3>\n<p>Haga clic en el bloque que desea ocultar. Luego, en la parte derecha de la p\u00e1gina, en el panel de Control del Inspector, encuentre el campo de <em>entrada Avanzado &gt; Clase CSS adicional<\/em>. Aqu\u00ed es donde puede proporcionar su clase personalizada, por ejemplo, <strong>custom_class<\/strong>.<\/p>\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/kenzap.blog\/wp-content\/uploads\/2019\/09\/custom_class_to_block.jpg\" alt=\"\" class=\"wp-image-428\"\/><\/figure>\n<h3>Paso 2 &#8211; Crear Regla CSS<\/h3>\n<p>El siguiente y \u00faltimo paso es conectar esta clase con una regla CSS que instruir\u00e1 a todos los elementos y a sus hijos que contengan esta clase a ser ocultados. El c\u00f3digo puede tener el siguiente aspecto y se puede copiar pegado en la secci\u00f3n Apariencia &gt; Personalizador &gt; CSS personalizado de su administrador de WordPress.<\/p>\n<p>Tenga en cuenta que hay un punto delante de&#8230;<strong> custom_class<\/strong> mientras que no estaba ni deber\u00eda estar presente en el campo de entrada <em>Clase CSS adicional<\/em>.<\/p>\n<h2>Enfoque de los<strong> bloques reutilizables<\/strong><\/h2>\n<p>Una de las principales ventajas de utilizar este enfoque es que permite eliminar completamente uno o varios bloques adyacentes de la p\u00e1gina. A pesar de que el bloque puede ser pesado, la caracter\u00edstica de <strong>Bloque Reutilizable<\/strong> mantendr\u00e1 su estructura y contenido personalizado.<\/p>\n<h3>Paso 1 &#8211; Seleccionar uno o varios bloques<\/h3>\n<p>Puede seleccionar s\u00f3lo uno o varios bloques en caso de que desee ocultar varias secciones dentro de una operaci\u00f3n. Por lo tanto, seleccione el primer bloque que desea ocultar y no suelte el bot\u00f3n shift del teclado y, con la ayuda del rat\u00f3n o de las flechas del teclado, seleccione los bloques adyacentes.<\/p>\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/kenzap.blog\/wp-content\/uploads\/2019\/09\/Screen-Shot-2019-09-12-at-4.00.36-PM.jpg\" alt=\"\" class=\"wp-image-432\"\/><\/figure>\n<p>Observe el color azul de la selecci\u00f3n.<\/p>\n<h3>Paso 2 &#8211; A\u00f1adir a bloques reutilizables<\/h3>\n<p>Como se muestra en la imagen de la secci\u00f3n anterior hay un icono de tres puntos. Haga clic en \u00e9l y luego encuentre la opci\u00f3n <strong>Agregar a bloques reutilizables<\/strong>. Esta operaci\u00f3n guardar\u00e1 todas las personalizaciones y el estado del bloque. Ahora puedes eliminar completamente los bloques seleccionados y llamar a ese conjunto de bloques reutilizables bajo cualquier otra p\u00e1gina o mensaje de WordPress.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Cuando dise\u00f1a su sitio web y crea m\u00faltiples iteraciones dentro del mismo post o p\u00e1gina es bastante com\u00fan que necesite ocultar cierta secci\u00f3n (bloques de Gutenberg) de la vista previa del sitio web. Esta breve gu\u00eda le proporcionar\u00e1 una r\u00e1pida visi\u00f3n general sobre c\u00f3mo hacerlo de la manera m\u00e1s \u00f3ptima. Recomendamos dos formas: Ocultar elemento &hellip; <a href=\"https:\/\/kenzap.blog\/es\/c%C3%B3mo-deshabilitar-temporalmente-y-ocultar-los-bloques-de-gutenberg-de-la-vista\/\" class=\"more-link\">Continue reading <\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[17,18],"tags":[],"_links":{"self":[{"href":"https:\/\/kenzap.blog\/es\/wp-json\/wp\/v2\/posts\/425"}],"collection":[{"href":"https:\/\/kenzap.blog\/es\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kenzap.blog\/es\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kenzap.blog\/es\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/kenzap.blog\/es\/wp-json\/wp\/v2\/comments?post=425"}],"version-history":[{"count":0,"href":"https:\/\/kenzap.blog\/es\/wp-json\/wp\/v2\/posts\/425\/revisions"}],"wp:attachment":[{"href":"https:\/\/kenzap.blog\/es\/wp-json\/wp\/v2\/media?parent=425"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/kenzap.blog\/es\/wp-json\/wp\/v2\/categories?post=425"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kenzap.blog\/es\/wp-json\/wp\/v2\/tags?post=425"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}