Descripción

Crea pestañas accesibles y adaptables en el Editor de bloques de Gutenberg

Tabs Block for Gutenberg te permite añadir contenido con pestañas, adaptable y accesible, directamente en el Editor de bloques de WordPress, sin necesidad de código ni bibliotecas externas.

Ya sea que estés creando una página de documentación, una sección de características de producto o un diseño limpio con pestañas para organizar contenido, este plugin te ayuda a hacerlo de forma rápida y nativa.

¿Por qué elegir BlaBlaBlocks Tabs Block?

El plugin Tabs Block combina los estándares modernos de WordPress con la facilidad de uso. Desarrollado con la API de Interactividad de WordPress, garantiza un rendimiento ligero, accesibilidad y compatibilidad total con las versiones más recientes de WordPress.

Aspectos destacados

Pestañas accesibles: Marcado compatible con WCAG, roles ARIA y compatibilidad con navegación por teclado.
Cero dependencias: No utiliza jQuery ni frameworks pesados de JavaScript, gracias a la API de Interactividad.
Adaptable por defecto: Las pestañas se apilan o se desplazan automáticamente en pantallas más pequeñas.
Diseños horizontales y verticales: Cambia entre orientaciones de pestañas con un solo clic.
Plantillas listas para usar: Elige entre diseños predefinidos para comenzar más rápido.
Integración fluida con el Editor de bloques: Se ve, se siente y funciona como un bloque nativo de WordPress.

Características principales

1. Totalmente accesible

La accesibilidad no es opcional: viene integrada. Tabs Block sigue las pautas de WCAG 2.1 y añade:

Atributos ARIA para lectores de pantalla.
Gestión del foco en las pestañas para usuarios de teclado.
Marcado semántico compatible con tecnologías de asistencia.

2. Adaptable por diseño

No necesitas CSS personalizado ni media queries. Las pestañas adaptan automáticamente su diseño a distintos tamaños de pantalla:

On desktop: clean horizontal tab navigation.
En móviles: diseño apilado y desplegable, o desplazamiento con deslizamiento.

3. Pestañas horizontales y verticales

¿Quieres una navegación estilo barra lateral? Solo cambia el modo de diseño. Puedes alternar entre pestañas horizontales y verticales en cualquier momento, ideal para páginas de documentación o listas de funciones.

4. Basado en la API de Interactividad

A diferencia de la mayoría de los plugins de pestañas que dependen de frameworks de JavaScript, BlaBlaBlocks Tabs Block utiliza la API de Interactividad nativa de WordPress.
Esto significa que:

Carga y renderizado más rápidos.
Mejores puntuaciones en Core Web Vitals.
Gestión fluida del estado entre el editor y la parte pública del sitio.

5. Plantillas listas para usar

Ahorra tiempo con las plantillas integradas. Elige entre varios estilos de pestañas (minimalista, con borde, subrayado, con color) e insértalos con un solo clic.

6. Funciona en todas partes

Tabs Block es totalmente compatible con:

Temas de bloques (Edición completa del sitio)
Temas clásicos que usan el Editor de bloques
Bloques reutilizables y patrones de bloques
Bloques principales como Columnas, Grupos y Portada

Cómo usar el bloque de pestañas

Paso 1: Añade el bloque de pestañas

In the Block Editor, click the “+” icon to add a new block.
Search for “Tabs Block”.
Selecciónalo para insertarlo en tu entrada o página.

Paso 2: Elige un diseño

Abre la barra lateral derecha y elige entre los diseños horizontal o vertical. Puedes cambiarlo en cualquier momento.

Paso 3: Añade pestañas y contenido

Añade, renombra o elimina pestañas usando la barra de herramientas del bloque. Cada panel de pestaña admite cualquier bloque: texto, imágenes, videos, formularios, etc.

Paso 4: Personaliza la apariencia

Usa los controles de la barra lateral para ajustar:

Colores
Tipo de letra
Bordes
Relleno y espaciado

Paso 5: Previsualiza el comportamiento adaptable

Usa la vista previa de dispositivos del editor para probar cómo se comportan tus pestañas en móviles, tabletas y escritorio.

Consulta la documentación para más detalles.

Opciones de personalización

Tabs Block se integra perfectamente con las herramientas de diseño de WordPress, por lo que puedes:

Change background and text colors using global styles.
Adjust spacing, borders, and radii.
Aplica variaciones de estilo del bloque para mantener una apariencia uniforme en el sitio.

Para desarrolladores, la personalización avanzada puede realizarse mediante propiedades personalizadas de CSS o sobrescrituras en theme.json.

Casos de uso comunes

Pestañas de características del producto: Destaca detalles del producto, especificaciones y reseñas.
Páginas de documentación: Organiza instrucciones de configuración y referencias de API.
Preguntas frecuentes: Agrupa preguntas relacionadas en pestañas por tema.
Comparaciones de precios: Presenta los detalles de los planes de forma comparativa.
Portafolios: Muestra proyectos o casos de estudio por categoría.

Integración y compatibilidad

Tabs Block se integra fácilmente con:

Bloques principales de WordPress: Columnas, Grupos, Portada, Imagen, Párrafo, Botones, etc.
Edición completa del sitio (FSE): Funciona en plantillas y partes de plantilla.
Bloques reutilizables: Créalo una vez y reutilízalo en cualquier lugar.
Plugins de traducción: WPML, Polylang, Loco Translate.
Plugins de caché y optimización: Sin conflictos con WP Rocket, LiteSpeed Cache o Autoptimize.

Solución de problemas

¿Las pestañas no cambian?

Revisa si hay errores de JavaScript en la consola de tu navegador.
Asegúrate de tener instalado WordPress 6.5 o superior (se requiere la API de Interactividad).

¿No se aplican los estilos?

El CSS de tu tema puede sobrescribir los estilos de las pestañas. Intenta añadir una regla con mayor especificidad o usar los controles de diseño integrados del bloque.

Código abierto y gratuito

BlaBlaBlocks Tabs Block es de código abierto bajo la Licencia MIT.
Puedes usarlo, modificarlo y contribuir libremente a su desarrollo.

Código fuente:
https://github.com/lubusIN/blablablocks-tabs-block
Reportar problemas:
https://github.com/lubusIN/blablablocks-tabs-block/issues
Documentación:
https://github.com/lubusIN/blablablocks-tabs-block/wiki

Capturas

Ajustes del editor – Personaliza los diseños de las pestañas en la barra lateral del Editor de bloques.
Vista previa adaptable – Las pestañas se adaptan automáticamente a móviles, tabletas y escritorio.
Biblioteca de plantillas – Elige entre varios diseños de pestañas listos para usar.
Ejemplo en la parte pública del sitio – Mira cómo se muestran las pestañas adaptables en tu sitio.

Blocks

This plugin provides 2 blocks.

Tabs A dynamic tab block that lets you organize content into interactive, customizable tabs. Easily manage and display information in a clean, user-friendly layout.
Tab A single tab within a tabs block.

Instalación

Automático

Inicia sesión en tu panel de administración de WordPress.
Ve a Plugins > Añadir nuevo.
En el campo de búsqueda, escribe “Tabs Block for Gutenberg” y luego haz clic en “Buscar plugins”.”
Haz clic en Instalar ahora y luego en Activar.

Manual

Descarga el plugin BlaBlaBlocks Tabs Block.
Súbelo a tu servidor mediante FTP en /wp-content/plugins/.
Actívalo desde la pantalla de plugins en WordPress.

Preguntas frecuentes

1. ¿Este plugin funciona con la edición completa del sitio?: Sí. Tabs Block funciona perfectamente con temas de bloques y con el Editor del sitio.
2. ¿Puedo añadir bloques dentro de las pestañas?: Por supuesto. Cada panel de pestaña funciona como contenedor para cualquier bloque del núcleo o de terceros.
3. ¿Este plugin es compatible con dispositivos móviles?: Sí. Las pestañas se vuelven desplazables o se apilan automáticamente en pantallas pequeñas.
4. ¿Puedo usar Tabs Block dentro de columnas o grupos?: Sí. Permite anidamiento completo y control de alineación.
5. ¿Requiere bibliotecas de JavaScript?: No. Tabs Block utiliza la API de Interactividad de WordPress, por lo que no depende de jQuery.
6. ¿Cómo puedo cambiar los colores y la tipografía?: Usa las herramientas integradas de color, tipografía y bordes de WordPress desde la barra lateral del bloque.
7. ¿Puedo crear mis propias plantillas de pestañas?: Sí. Puedes guardar una configuración de Tabs Block como bloque reutilizable o patrón y reutilizarla en diferentes entradas.
8. ¿Cómo puedo crear pestañas verticales?: Selecciona el bloque de pestañas en la configuración de diseño elige “Vertical”.
9. ¿Por qué mis pestañas no cambian?: Asegúrate de estar usando WordPress 6.5 o superior y de que tu tema no sobrescriba las funciones de la API de Interactividad.
10. ¿Puedo personalizar las pestañas usando CSS?: Sí. Cada pestaña y panel tiene un nombre de clase único para aplicar estilos personalizados.
11. ¿Es compatible con plugins de caché?: Sí. Tabs Block no depende de AJAX ni de solicitudes dinámicas, por lo que el almacenamiento en caché no afectará su funcionamiento.

Reseñas

DeepBlue 22 de Marzo de 2026

Works like a charm with block theme Thank you for this 🙂

Leer la 1 reseña

Colaboradores y desarrolladores

“Tabs Block – Bloque de pestañas adaptables para Gutenberg” es un software de código abierto. Las siguientes personas han colaborado con este plugin.

“Tabs Block – Bloque de pestañas adaptables para Gutenberg” ha sido traducido a 1 idioma. Gracias a los traductores por sus colaboraciones.

Traduce “Tabs Block – Bloque de pestañas adaptables para Gutenberg” a tu idioma.

¿Interesado en el desarrollo?

Revise el código , eche un vistazo al repositorio SVN , o suscríbase al log de desarrollo por RSS .

Registro de cambios

1.1.3

Se resolvió el problema donde el espacio entre pestañas no se aplicaba al usar presets de espaciado (ej. pequeño, mediano, grande). Los valores preestablecidos ahora se convierten correctamente a variables CSS válidas como var(–wp–preset–spacing–*).
Se corrigió la representación de formatos de texto enriquecido dentro del contenido de las pestañas. El formato enriquecido ahora se aplica correctamente en el frontend en lugar de mostrarse como cadenas HTML sin procesar.

1.1.2

Se aseguró que tabId siempre esté sincronizado con clientId para evitar problemas de duplicación por @thomasnavarro en #32

1.1.1

Corrección: Se corrigió el manejo de caracteres especiales en los títulos de las pestañas para evitar fallos del bloque #30.

1.1.0

Corrección: El Editor del sitio mostraba constantemente “Revisar cambios” después de insertar el bloque Tabs #27.
Actualización: Se actualizó la versión del plugin a 1.1.0.
Actualización: Se actualizó “Probado hasta” a 6.9.

1.0.0

Lanzamiento inicial de Tabs Block for Gutenberg.
Se añadieron diseños de pestañas horizontales y verticales adaptables
Desarrollado con la API de Interactividad de WordPress para ofrecer un rendimiento sin dependencias.
Incluye plantillas listas para usar y marcado accesible compatible con WCAG.