Crea un acordeón en Gutenberg
Usa Accordion para agrupar información relacionada en paneles expandibles, como detalles de entrega o preguntas frecuentes. Cada Accordion item tiene su propio título, subtítulo opcional y contenido anidado. Esta guía está dirigida a editores que usan el editor de bloques de WordPress con POM activo.
Añadir paneles
- Abre Pages → All Pages o Posts → All Posts y edita tu contenido en el editor de bloques.
- Abre el insertador de bloques y elige el Accordion de POM. WordPress también puede ofrecer su bloque de acordeón nativo independiente; elige el bloque de POM para la presentación y los controles del tema.
- Selecciona Add panel. El nuevo elemento contiene un párrafo listo para escribir. Un Accordion vacío permanece vacío hasta que añadas un panel.
- Introduce Title y, opcionalmente, Subtitle en el lienzo o en Panel settings en la barra lateral del bloque. Estos campos aceptan texto plano. Usa Title tag para elegir el nivel de encabezado adecuado, o None / SPAN cuando el título no sea un encabezado del documento.
- Añade contenido dentro del elemento. Las opciones admitidas incluyen párrafos, encabezados, listas, imágenes, galerías, botones, iconos, Icon Box, Gap, Section, Row, Carousel, Tabs, Modal y bloques Accordion anidados. Row sigue conteniendo Columns; Section puede contener contenido directamente.
- Selecciona el Accordion principal en la vista de lista. Sus controles Panels permiten seleccionar, reordenar, duplicar o eliminar elementos. La vista de lista nativa y los controles de bloque siguen disponibles.
- Guarda el borrador y previsualiza la página pública antes de publicar.
Elegir el comportamiento de apertura
En los Accordion settings del bloque principal, activa One panel at a time para cerrar un elemento hermano cuando se abre otro. Si varios elementos tienen Open by default activado, el primer elemento tiene prioridad en la página pública. Con el modo de un solo panel desactivado, varios elementos pueden permanecer abiertos. Todos los paneles pueden cerrarse en cualquiera de los dos modos.
Show content in editor y Hide content in editor solo cambian la vista de edición. No modifican Open by default, y al seleccionar contenido anidado se abre su panel para editarlo. El editor no ejecuta la animación de colapso pública.
Los acordeones anidados tienen reglas de apertura independientes. Abrir un panel interno no cierra su panel externo ni afecta a otro acordeón en otra parte de la página.
Adaptarse al tema
- El Style del bloque principal ofrece Dark text y Light text. El Heading color y el Icons color del elemento usan la paleta del tema y tienen prioridad sobre el estilo heredado; borra una selección de paleta para heredar.
- Los iconos de abierto/cerrado proceden de los ajustes de marca del tema. Su SVG se guarda con cada elemento. Tras cambiar esos ajustes, selecciona Refresh theme icons en los elementos existentes y guarda la página para actualizar sus instantáneas.
- Usa Visibility and CSS classes del bloque principal para la visibilidad por dispositivo y los helpers existentes del tema. Cada elemento también tiene CSS classes. Estos controles no crean una nueva hoja de estilos.
- Un Accessible name opcional del bloque principal etiqueta la región del acordeón. Usa una descripción breve cuando haya que distinguir varios acordeones.
Enlazar directamente a un panel
En Panel settings del elemento, usa Panel ID, por ejemplo delivery-details. Enlaza a #delivery-details en la misma página o añade ese fragmento a la URL de la página. La página pública abre el panel de destino y los paneles del acordeón que lo contienen.
Mantén los ID únicos. Empieza con una letra o un guion bajo y usa solo letras, números, guiones y guiones bajos, sin #. Duplicar un elemento o un Accordion completo genera nuevos ID de panel conflictivos. El ancla HTML nativa opcional de un elemento identifica su contenedor externo; Panel ID identifica el cuerpo expandible y es el destino de enlace recomendado.
Convertir un acordeón Legacy
Coloca un contenedor [web_accordion]…[/web_accordion] completo en un bloque nativo Shortcode y, a continuación, elige Review panel conversion en su barra de herramientas flotante. Revisa el informe y confirma Convert selected container solo cuando no haya ningún aviso bloqueante. La acción no guarda ni publica; Undo restaura el origen original.
La conversión admitida conserva el ID de grupo, las clases helper, el estilo, el ajuste de uno a la vez, el título/subtítulo/etiqueta del panel, las ranuras numéricas de paleta de encabezado/icono, el estado de apertura explícito, el ID opcional del contenedor del elemento y los enlaces canónicos #accordion-…. Captura los iconos del tema configurados actualmente, igual que los elementos Accordion estáticos normales. Los cuerpos de los paneles permanecen sin cambios dentro de los bloques Shortcode anidados; los módulos Legacy no relacionados no se convierten.
Los atributos desconocidos, los ID faltantes o duplicados, los títulos enriquecidos, las familias de paneles anidadas, el contenido fuera de los paneles y las estructuras vc_tta_* originales requieren revisión manual. Consulta la guía de conversión de Tabs para conocer los límites compartidos, las diferencias de controles generados y las comprobaciones de publicación. Compara siempre el espaciado de párrafos y los selectores personalizados en la vista previa de la página completa.
Verificar el resultado
- Guarda y vuelve a abrir el editor. Confirma que los títulos, el orden, el contenido y las opciones de apertura por defecto permanecen intactos.
- Previsualiza en móvil, en ambos tamaños de tableta, en escritorio y en Very Large. Comprueba los títulos largos, el contraste de la paleta y los medios anidados.
- En la página pública, usa Tab para enfocar un encabezado y Enter o Espacio para alternarlo. Arriba/Abajo se desplaza entre los encabezados del acordeón actual; Inicio/Fin va a su primer/último encabezado.
- Comprueba el comportamiento de un solo panel y de varios paneles, y después abre un enlace directo a un panel en una carga de página nueva.
- Si hay una galería o un carrusel dentro de un panel, ábrelo y confirma que sus imágenes y su navegación se ajustan al área disponible.
Los bloques Accordion y Accordion item guardan su HTML de forma estática. Sus scripts de tema existentes y su hoja de estilos condicional se detectan a partir del contenido de la página, incluso cuando la interfaz Legacy del Page Builder está desactivada. Una Image o Gallery dinámica anidada sigue resolviendo sus propios medios actuales de forma independiente.
Solución de problemas
- Un elemento se ve distinto del estilo principal: comprueba sus selecciones explícitas de paleta de encabezado e icono.
- Los iconos de marca actualizados no son visibles: actualiza los iconos del tema del elemento y guarda; cambiar los iconos globales no reescribe el HTML estático ya guardado.
- Un enlace de panel abre el contenido incorrecto: comprueba si hay un ID reutilizado manualmente y actualiza el enlace al Panel ID del elemento previsto.
- Varios paneles son visibles en el editor a pesar del modo de un solo panel: la vista de edición te permite llegar al contenido de forma intencionada e independiente de las reglas de apertura públicas.