Aplica estilo a las listas nativas de Gutenberg

Usa los bloques List y List Item de WordPress para pasos ordenados, viñetas y listas anidadas. POM Theme añade opciones de estilo basadas en sus helpers CSS ya existentes sin sustituir el editor nativo. Esta guía está pensada para editores de contenido con el editor de bloques de WordPress activado.

Crea y organiza una lista

1. Abre Pages > Add Page, o edita una página existente en el editor de bloques.
2. Inserta List y escribe el primer elemento. Pulsa Enter para continuar con otro elemento.
3. Usa la barra de herramientas nativa para elegir una lista ordenada o desordenada y para aplicar sangría o quitar sangría a un elemento.
4. En las listas ordenadas, usa los ajustes nativos para el estilo del número, el valor inicial y el orden inverso.
5. Abre List View cuando necesites seleccionar la lista completa en lugar de un elemento individual o de una lista anidada.

La numeración y el anidamiento siguen formando parte de la estructura nativa de la lista. Los estilos de número recién seleccionados usan el atributo HTML de numeración equivalente en lugar de una regla CSS en línea. Una lista no es una colección de párrafos sin relación entre sí.

Aplica estilo a toda la lista o a un elemento individual

Selecciona la List o el List Item deseado, abre sus ajustes de bloque y expande Text. Elige Text color, Text size, Font weight, Line height y Capitalization. Usa Text alignment en la barra de herramientas.

Los elementos de lista heredan la tipografía de la lista. Deja un elemento en Inherit para que siga a su elemento principal, o elige un helper en ese elemento para anularlo. Una lista anidada también hereda la tipografía circundante salvo que tenga sus propios ajustes. Las selecciones de paleta almacenan ranuras numeradas, de modo que los futuros cambios de paleta se aplican a la lista automáticamente.

Los enlaces mantienen el color de enlace del tema. Para colorear palabras seleccionadas o un enlace, selecciona su texto y elige Theme text formatting directamente en la barra de herramientas flotante. El color de texto, el color de fondo y el tamaño usan clases helper existentes; los enlaces, la negrita y la cursiva siguen siendo controles nativos. Las listas no añaden cajas de icono de párrafo ni capitulares. Si la barra lateral de List muestra List View, cambia a Settings para acceder a sus controles de presentación.

Elige los marcadores y la sangría

Selecciona la List y expande List appearance > Markers and indentation:

• Native markers mantiene las viñetas o la numeración nativas.
• No markers — keep indentation oculta los marcadores manteniendo la sangría existente.
• No markers or indentation elimina los marcadores y el relleno izquierdo del tema.

Estos ajustes afectan a la lista seleccionada, no a todas las listas anidadas. Las listas sin marcadores conservan la semántica de lista para la tecnología de asistencia. Prefiere la numeración visible cuando la secuencia de pasos sea importante. Los controles no añaden iconos de viñeta personalizados ni CSS de marcadores arbitrarios.

Espaciado y visibilidad

En Spacing and visibility, usa los helpers de margen superior/inferior existentes, la opacidad en pasos del 10%, el centrado en pantallas pequeñas y la visibilidad por dispositivo. Los mismos controles están disponibles en cada elemento. El contenido oculto sigue siendo seleccionable con un indicador sombreado en el editor.

La opacidad del elemento principal también afecta a sus hijos: ajustar tanto una lista como su elemento al 70% produce una opacidad combinada del 49%. Un elemento no puede hacerse visible en un dispositivo donde su lista principal esté oculta. La visibilidad por dispositivo es solo presentación, no control de acceso. Ocultar elementos numerados puede cambiar la secuencia de numeración visible.

Contenido existente y verificación

El formato nativo guardado previamente se conserva. Si aparece Previous formatting, Reset previous block formatting elimina el antiguo estilo a nivel de bloque sin cambiar el contenido ni la numeración de la lista. Convertir una lista en otro tipo de bloque sigue las reglas de transformación nativas de WordPress; revisa la presentación específica del tema después de una conversión estructural.

Una lista numerada antigua puede mostrar Use HTML numbering instead of previous inline style. Esto conserva su estilo de numeración compatible a la vez que elimina la antigua regla de numeración en línea. Volver a seleccionar un estilo de número nativo también cambia a la numeración HTML.

Antes de publicar:

1. Guarda el borrador y vuelve a abrirlo. Confirma que los elementos, las listas anidadas, la numeración y los helpers seleccionados permanezcan intactos.
2. Previsualiza el frontend en los anchos de dispositivo pertinentes, incluidas las listas con anulaciones por elemento.
3. Comprueba los enlaces, la navegación por teclado, el contraste de color y el orden de lectura.
4. Si un cambio aparece en el contenido equivocado, usa List View para comprobar si seleccionaste la lista exterior, una lista anidada o un elemento.

Relacionado: Da estilo a los párrafos, Da estilo a los encabezados y Usa la visibilidad por dispositivo.