Cómo Seleccionar y Usar Bloques Anidados en WordPress

Los bloques anidados son una de las características más potentes del editor de bloques de WordPress, y dominarlos puede llevar tus diseños al siguiente nivel.

Te permiten agrupar y organizar múltiples elementos como párrafos, imágenes y botones en un solo diseño. Una vez que entiendas cómo usarlos, podrás crear páginas más flexibles y de aspecto profesional sin depender de plugins adicionales o código personalizado.

En WPBeginner, hemos estado usando bloques anidados desde que se lanzaron por primera vez, y han cambiado por completo nuestra forma de abordar el diseño de páginas. Hacen que los diseños complejos sean más fáciles de gestionar y ayudan a convertir el contenido básico en secciones pulidas y fáciles de usar.

En esta guía, te explicaremos paso a paso cómo seleccionar y usar bloques anidados en WordPress, para que puedas empezar a crear diseños más limpios y efectivos con confianza.

¿Qué son los bloques anidados de WordPress?

La función de bloque anidado de WordPress Gutenberg te permite insertar (o 'anidar') uno o más bloques dentro de otro bloque.

Los bloques anidados te ayudan a crear diseños más complejos en tu sitio web de WordPress al añadir múltiples bloques uno dentro de otro. Esto permite una mayor flexibilidad al diseñar y formatear contenido para páginas y publicaciones.

Por ejemplo, puedes anidar múltiples bloques de Imagen dentro de un bloque de Grupo para mostrar un conjunto de fotos de un evento en particular o una serie de obras de arte creadas con una técnica específica.

Además, la función de bloque anidado te permite editar bloques individuales por separado. Esto te permite personalizar cada bloque según tus necesidades sin afectar a los demás bloques.

Esto, a su vez, da como resultado una mejor organización del contenido, hace que el contenido sea más atractivo y agiliza el proceso creativo.

Dicho esto, veamos cómo puedes seleccionar y usar fácilmente los bloques anidados de WordPress Gutenberg.

Cómo usar los bloques anidados de WordPress

Puedes anidar fácilmente varios bloques juntos usando el bloque Grupo o Columnas en el editor de bloques de Gutenberg.

Primero, necesitas abrir una publicación existente o nueva en el editor de bloques desde la barra lateral de administración de WordPress.

Desde aquí, simplemente haz clic en el botón ‘+’ para agregar un bloque en la esquina superior izquierda de la pantalla y busca el bloque Grupo. Al hacer clic en él y agregarlo a la página, debes seleccionar un diseño para los bloques que anidarás juntos.

Para este tutorial, seleccionaremos el diseño ‘Grupo’.

A continuación, simplemente haz clic en el botón ‘+’ en la pantalla para comenzar a agregar contenido dentro del bloque principal.

Para este tutorial, agregaremos un bloque de Imagen.

Al agregar el bloque, simplemente haz clic en el botón ‘Grupo’ en la barra de herramientas del bloque en la parte superior para seleccionar el bloque principal.

A continuación, necesitas hacer clic en el botón ‘+’ para abrir nuevamente el menú de bloques, desde donde puedes elegir otros bloques para agregar.

Cómo configurar los ajustes de bloques anidados de WordPress

Una vez que hayas anidado varios bloques, puedes configurar sus ajustes individuales haciendo clic en cada bloque. Desde allí, los ajustes del bloque aparecerán en la columna derecha de la pantalla.

Desde aquí, puedes ajustar el color de fondo, el color del texto y el tamaño de los bloques individuales sin afectar a los otros bloques que están anidados dentro de él.

Para configurar los ajustes del contenedor en sí, necesitas seleccionar el bloque padre. Puedes hacerlo haciendo clic en el icono 'Seleccionar padre' en la barra de herramientas del bloque. A menudo parece dos cuadrados apilados.

Alternativamente, puedes usar la barra de migas de pan en la parte inferior del editor para hacer clic en el nombre del padre, como 'Grupo' o 'Columnas'.

Esto abrirá los ajustes del bloque padre en la columna derecha. Ahora puedes configurar el diseño, el color de fondo y la tipografía de toda la sección.

Ten en cuenta que estos ajustes afectarán a todos los bloques anidados dentro del bloque padre, a menos que hayas aplicado estilos específicos a un bloque interno individual.

Cómo agrupar bloques existentes

También puedes convertir contenido existente en bloques anidados. Esto suele ser más rápido que crear primero un bloque de Grupo e intentar llenarlo después.

Simplemente selecciona los bloques que deseas combinar. Puedes hacerlo haciendo clic y arrastrando el ratón, o manteniendo presionada la tecla Shift y haciendo clic en varios bloques.

Una vez seleccionados, haz clic en el icono Agrupar en la barra de herramientas del bloque.

WordPress envolverá automáticamente tu contenido seleccionado dentro de un bloque de Grupo. Ahora puedes editar el diseño y el fondo como cualquier otra sección anidada.

Una vez que estés satisfecho, no olvides hacer clic en el botón ‘Publicar’ o ‘Actualizar’ para guardar tus cambios.

Así es como se veían los bloques anidados en nuestro sitio web de demostración.

Extra: Usa el plugin Wayfinder para seleccionar fácilmente bloques anidados

A veces, puede ser difícil seleccionar un bloque individual y configurarlo cuando hay varios bloques anidados juntos.

Afortunadamente, el plugin Wayfinder hace que sea súper fácil seleccionar bloques anidados de un bloque padre e incluso te dice el tipo y la clase de los bloques.

Primero, necesitarás instalar y activar el plugin Wayfinder. Para más instrucciones, consulta nuestra guía para principiantes sobre cómo instalar un plugin de WordPress.

Después de la activación, dirígete a la página Ajustes » Wayfinder desde la barra lateral de administración de WordPress.

Una vez que estés allí, todos los ajustes ya estarán activados. Simplemente necesitas desmarcar la casilla junto a los ajustes que no deseas usar.

Por ejemplo, si quieres que Wayfinder muestre los tipos de bloque para todos los bloques en el editor, entonces deja la casilla marcada junto a la opción ‘Mostrar tipo de bloque’.

Sin embargo, si no quieres que el plugin muestre las clases de bloque, simplemente desmarca la casilla junto a esa opción.

Después de configurar los ajustes, no olvides hacer clic en el botón ‘Guardar Cambios’.

A continuación, necesitas abrir una entrada existente o nueva en el editor de bloques de WordPress desde el panel.

Una vez que estés allí, al pasar el ratón sobre cualquier bloque interno se mostrará un contorno con su nombre. También podrás ver el contorno y el nombre de cualquier bloque anidado dentro del bloque padre.

Esto te ayudará a identificar todos los diferentes bloques que están anidados dentro de un bloque de Grupo o Columna.

Desde aquí, puedes seleccionar fácilmente un bloque individual del bloque principal para configurar sus ajustes.

También puedes seleccionar todos los bloques anidados a la vez haciendo clic en el encabezado de ‘Columnas’ o ‘Grupo’. Esto abrirá la configuración del bloque principal en la columna derecha.

Después de configurar los ajustes del bloque, simplemente haz clic en el botón ‘Actualizar’ o ‘Publicar’ para guardar tus cambios.

Preguntas frecuentes sobre bloques anidados

Aquí tienes algunas preguntas que nuestros lectores han hecho con frecuencia sobre el uso de bloques anidados:

¿Cómo se seleccionan varios bloques en WordPress?

Para seleccionar varios bloques, haz clic en el primer bloque, mantén presionada la tecla Shift y luego haz clic en el último bloque que deseas seleccionar. Alternativamente, puedes hacer clic y arrastrar el cursor del mouse sobre los bloques para resaltarlos todos a la vez.

¿Cómo combinar bloques en WordPress?

Puedes combinar bloques seleccionando los elementos específicos que deseas fusionar y haciendo clic en el ícono Agrupar (cuadrados apilados) en la barra de herramientas del bloque. Esto los envuelve en un solo contenedor, lo que te permite moverlos o darles estilo como una sola unidad.

¿Cómo agrupar bloques?

Puedes agrupar bloques resaltándolos y seleccionando Agrupar en las opciones de la barra de herramientas. Esto crea un contenedor principal que mantiene los bloques organizados y te permite aplicar un color de fondo o un borde a toda la sección.

¿Qué es un bloque principal en WordPress?

Un bloque principal es un contenedor, como un bloque de Grupo o Columna, que contiene otros bloques dentro de él. Los bloques interiores se llaman bloques "anidados" o "hijos", y generalmente heredan la configuración de diseño y estilo del bloque principal.

¿Qué es un bloque separador en WordPress?

Un bloque Separador es una herramienta de diseño que se utiliza para agregar espacio vacío ajustable entre otros bloques. Te permite controlar la distancia vertical y el espacio entre secciones sin necesidad de escribir código personalizado.

¿Qué son los bloques dinámicos en WordPress?

Los bloques dinámicos son bloques que generan contenido automáticamente en lugar de guardar HTML estático. Ejemplos incluyen los bloques de Últimas Entradas o Calendario, que se actualizan inmediatamente cada vez que publicas contenido nuevo o cambias la configuración del sitio.

¿Qué es un bloque de línea divisoria en WordPress?

Un bloque de Línea Divisoria crea una separación visual entre secciones de contenido, generalmente mostrándose como una línea horizontal. Ayuda a dividir artículos largos en capítulos o temas distintos para mejorar la experiencia de lectura.

Esperamos que este artículo te haya ayudado a aprender cómo seleccionar y usar bloques anidados de WordPress. También podrías querer ver nuestro tutorial paso a paso sobre cómo cambiar la altura y el ancho de los bloques en WordPress y nuestra guía para principiantes sobre cómo usar patrones de bloques de WordPress.

Si te gustó este artículo, suscríbete a nuestro canal de YouTube para obtener tutoriales en video de WordPress. También puedes encontrarnos en Twitter y Facebook.