Tutorial WordPress: Personalizar el bloque Lista con check verde usando pseudo-elementos

Personalizar el bloque Lista en WordPress: Lista con check verde usando pseudo-elementos

En este artículo se muestra, con todo lujo de detalles, cómo convertir una lista del bloque Lista de Gutenberg en una lista donde cada elemento muestre un check (marca) verde en lugar del marcador por defecto. Se incluyen distintos métodos para aplicar el estilo (CSS directo, variación de bloque registrada con PHP), consideraciones de accesibilidad y compatibilidad (anidamiento, RTL, responsive) y ejemplos prácticos listos para pegar en tu tema o en el personalizador.

Resumen de la idea

La técnica consiste en quitar el marcador por defecto (list-style) y dibujar, mediante pseudo-elementos (::before) sobre cada ltligt, una marca de verificación en un círculo verde. Este método evita añadir HTML adicional en cada elemento y funciona bien con el editor y el front-end si se aplica correctamente.

Requisitos y consideraciones previas

Conocer cómo añadir CSS a tu tema: via style.css, Appearance → Personalizar → CSS adicional, o un plugin de snippets.
Si quieres que la opción aparezca en el editor como una variación de bloque, necesitas acceso a functions.php del tema o un plugin para registrar estilos de bloque.
Compatibilidad: este enfoque usa pseudo-elementos CSS que no siempre son anunciados por lectores de pantalla ver sección de accesibilidad para mitigaciones.

Seleccionar el objetivo CSS correcto

El bloque Lista de Gutenberg suele renderizar la lista con una clase en el ltulgt similar a wp-block-list__list o dentro del bloque wp-block. Para mayor compatibilidad y para poder ofrecer una opción editable en el editor, veremos dos enfoques:

Aplicar CSS a una clase personalizada que añades al bloque desde el panel Avanzado (ej. lista-check).
Registrar una variación de estilo del bloque con PHP que añade la clase automática is-style-check-list al bloque cuando el editor selecciona ese estilo.

1) Método rápido: CSS para una clase personalizada

Pasos:

Selecciona tu bloque Lista en el editor y, en el panel Avanzado, añade la clase: lista-check.
Pega el CSS siguiente en el stylesheet del tema o en Apariencia → Personalizar → CSS adicional.

/ Estilo principal para la clase .lista-check aplicada al bloque Lista /
.lista-check .wp-block-list__list,
.lista-check ul,
.lista-check ol {
  margin: 0
  padding: 0
}

/ Quitar el marcador nativo y preparar los li /
.lista-check .wp-block-list__list li,
.lista-check ul li,
.lista-check ol li {
  list-style: none
  position: relative
  padding-left: 2.4em / espacio para el check /
  margin: 0.5em 0
}

/ Pseudo-elemento que renderiza el check en círculo verde /
.lista-check .wp-block-list__list li:before,
.lista-check ul li:before,
.lista-check ol li:before {
  content: 2714 / símbolo de check (✔) /
  position: absolute
  left: 0
  top: 50%
  transform: translateY(-50%)
  display: inline-block
  width: 1.6em
  height: 1.6em
  line-height: 1.6em
  text-align: center
  font-size: 0.95em
  color: #ffffff / color del símbolo /
  background-color: #28a745 / verde /
  border-radius: 50%
  box-shadow: 0 1px 0 rgba(0,0,0,0.06) inset
}

/ Opcional: ajustar para listas anidadas (sublistas) /
.lista-check .wp-block-list__list li li:before,
.lista-check ul li li:before,
.lista-check ol li li:before {
  width: 1.1em
  height: 1.1em
  line-height: 1.1em
  font-size: 0.8em
  left: 0.4em
}

/ Para compatibilidad RTL invertir posición /
.rtl .lista-check .wp-block-list__list li:before,
.rtl .lista-check ul li:before,
.rtl .lista-check ol li:before {
  left: auto
  right: 0
}

Explicación breve del CSS:

Se elimina list-style y se usa padding-left para reservar espacio al check.
El pseudo-elemento ::before inserta el símbolo Unicode ✔ y lo posiciona dentro de un círculo verde.
Se añaden reglas específicas para sublistas y soporte RTL.

2) Método recomendado: registrar una variación de bloque (para que el estilo aparezca en el editor)

Con este método registras una Block Style para el core/list, de modo que el editor muestre una opción de estilo llamada, por ejemplo, Lista con check y al aplicarla se añade la clase is-style-check-list al bloque. Luego solo aplicas CSS a esa clase.

Pega este fragmento PHP en el archivo functions.php de tu tema o en un plugin de funcionalidades:

 check-list,
                label        => Lista con check,
                is_default   => false,
            )
        )
    }
} )
?>

Luego, añade este CSS (usa el mismo que antes pero dirigido a la clase que WordPress aplicará: is-style-check-list):

/ Aplica estilo cuando se usa la variación registrada (is-style-check-list) /
.is-style-check-list .wp-block-list__list,
.is-style-check-list ul,
.is-style-check-list ol {
  margin: 0
  padding: 0
}

.is-style-check-list .wp-block-list__list li,
.is-style-check-list ul li,
.is-style-check-list ol li {
  list-style: none
  position: relative
  padding-left: 2.4em
  margin: 0.5em 0
}

.is-style-check-list .wp-block-list__list li:before,
.is-style-check-list ul li:before,
.is-style-check-list ol li:before {
  content: 2714
  position: absolute
  left: 0
  top: 50%
  transform: translateY(-50%)
  display: inline-block
  width: 1.6em
  height: 1.6em
  line-height: 1.6em
  text-align: center
  font-size: 0.95em
  color: #ffffff
  background-color: #28a745
  border-radius: 50%
  box-shadow: 0 1px 0 rgba(0,0,0,0.06) inset
}

/ Ajustes para sublistas y RTL como en el ejemplo anterior /
.is-style-check-list .wp-block-list__list li li:before { / ... / }
.rtl .is-style-check-list .wp-block-list__list li:before { / ... / }

Una vez añadido el PHP y el CSS, al editar una Lista verás en la barra lateral la opción de estilos y podrás seleccionar Lista con check. En el front-end la lista mostrará los checks verdes.

Accesibilidad (importantísimo)

Los pseudo-elementos no siempre son anunciados por lectores de pantalla. Si la marca de verificación es puramente decorativa (por ejemplo, la lista simplemente enumera características), no necesitas anunciarla. Si en cambio cada check significa algo semántico (por ejemplo, confirmación de un requisito cumplido), debes proporcionar texto accesible adicional.

Recomendaciones:

Si el check es decorativo: asegúrate de que el texto de la lista por sí solo transmite la información principal.
Si el check añade información semántica: añade un texto oculto para lectores de pantalla dentro del contenido del ltligt (por ejemplo: ltspan class=screen-reader-textgtCompletadolt/spangt) o estructura la lista con roles/atributos ARIA apropiados. Muchos themes ya incluyen la clase .screen-reader-text si no, añade la regla CSS para ocultarlo visualmente pero mantenerlo para AT.

Ejemplo de CSS para clase .screen-reader-text (si no existe en tu theme)

.screen-reader-text {
  position: absolute !important
  height: 1px width: 1px
  overflow: hidden
  clip: rect(1px, 1px, 1px, 1px)
  white-space: nowrap
}

Si añades ese ltspangt manualmente o mediante HTML en el bloque (si usas el bloque HTML dentro del editor), el lector de pantalla leerá la información adicional sin mostrar texto visible.

Mejoras y variantes

Usar un icono SVG en lugar de carácter Unicode para un control visual más preciso (puedes usar background-image con data URI en el pseudo-elemento).
Usar variables CSS para permitir personalizar color desde theme.json o por usuario: background-color: var(–wp–preset–color–green, #28a745)
Animaciones sutiles: por ejemplo, transición de transform/opacity en :before para un efecto al cargar.
Soporte para tamaños distintos: puedes ajustar width/height y font-size o usar media queries para puntos de quiebre.

Ejemplo avanzado: usar un SVG inline como background para mayor control de render

/ pseudo-elemento usando un SVG en background (data URI) /
.is-style-check-list .wp-block-list__list li:before {
  content: 
  position: absolute
  left: 0
  top: 50%
  transform: translateY(-50%)
  display: inline-block
  width: 1.6em
  height: 1.6em
  background-image: url(data:image/svg xmlutf8,)
  background-size: contain
  background-repeat: no-repeat
}

Nota: en la data URI deben escaparse caracteres especiales correctamente en este ejemplo se usa la versión simple compatible para la mayoría de navegadores.

Compatibilidad con sublistas y espaciados

Cuando tengas sublistas dentro de una lista que usa check, revisa visualmente el espaciado. Nuestro CSS de ejemplo reduce el tamaño del icono en sublistas puedes adaptar left/padding-left para respetar la jerarquía visual.

Consejos finales y buenas prácticas

Mantén los checks puramente decorativos si no quieres cargar información adicional para lectores de pantalla.
Si necesitas cambiar color desde el editor de bloques, considera exponer la variable CSS en theme.json o crear varias variaciones de estilo (por ejemplo, check-list–green, check-list–blue).
Prueba en distintos navegadores y dispositivos, y verifica la apariencia en el editor (Gutenberg) y en el front-end.
Evita sobrecomplicar el CSS: menos reglas y selectores concretos (ej. .is-style-check-list .wp-block-list__list li) garantizan menor conflicto con el theme.

Conclusión

Personalizar el bloque Lista de WordPress para mostrar un check verde usando pseudo-elementos es una técnica elegante y ligera que no requiere alterar el contenido HTML de cada elemento. Puedes implementarla rápidamente añadiendo una clase al bloque y pegando el CSS, o integrarla mejor registrando una variación de bloque con PHP para que el estilo esté disponible desde el editor. Ten en cuenta la accesibilidad y prueba en diferentes contextos (sublistas, RTL, móvil).

Ejemplo rápido de pasos para aplicar en un site

En el editor, selecciona tu bloque Lista y en Avanzado añade la clase lista-check (o usa la variación si has registrado con PHP).
Pega el CSS proporcionado en Apariencia → Personalizar → CSS adicional o en style.css.
Verifica en front-end, en móvil y con lector de pantalla según la relevancia semántica del check.

SushiHost