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 de todos los bloques anidados juntos, tendrás que hacer clic en el botón ‘Agrupar’ en la barra de herramientas del bloque en la parte superior. Esto abrirá la configuración del bloque principal en la columna de la derecha.

Ahora puedes configurar la justificación, orientación, color de fondo, color de texto y tipografía de todos los bloques anidados.

Ten en cuenta que estos ajustes afectarán a todos los bloques anidados dentro del bloque principal.

También puedes convertir un bloque individual existente en bloques anidados haciendo clic en el botón ‘Opciones’ en la barra de herramientas superior de cualquier bloque.

Esto abrirá un menú, donde deberás seleccionar la opción ‘Crear patrón’.

Una vez que hayas hecho eso, se abrirá un cuadro de diálogo pidiéndote que le des un nombre y elijas una categoría para tu nuevo bloque reutilizable.

Luego, haz clic en el botón ‘Crear’ para guardar tu configuración.

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

En nuestro ejemplo, hemos anidado un bloque de Título, Imagen y Párrafo dentro de un bloque de Grupo.

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.

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.