Introducción

En este tutorial detallado veremos cómo crear y aplicar estilos profesionales a los bloques de lista de verificación (checklist) en el editor Gutenberg de WordPress. Abordaremos desde la estructura HTML y la accesibilidad hasta la integración con el editor (registro del bloque con una variación de estilo), el CSS para frontend y editor, y un pequeño script para gestionar el comportamiento (marcar/desmarcar) en el editor. Todos los ejemplos de código están incluidos y listos para copiar.

Concepto y objetivos

• Objetivo visual: convertir una lista normal en una lista con casillas visuales (checks) personalizadas.
• Objetivo funcional: permitir marcar/desmarcar elementos en el editor mediante clic o teclado (y mantener accesibilidad ARIA).
• Integración: añadir una variación de estilo al bloque core/list para que el editor la ofrezca como opción Lista de verificación.

Estructura HTML básica

El bloque de lista genera una estructura ul/ol con la clase del bloque. Podemos usar una variación que añada la clase is-style-checklist al elemento ul/ol. Ejemplo de HTML esperado:

  
Comprar harina
  
Hacer masa
  
Hornear 20 minutos

Registrar la variación de estilo en functions.php

Para que el editor permita activar una variación de estilo (por ejemplo, Lista de verificación), registraremos la variación con register_block_style y además encolaremos los CSS/JS necesarios para editor y frontend.

 checklist,
            label => Lista de verificación,
        )
    )
}
add_action( init, mi_checklist_registrar_estilo )

function mi_checklist_assets() {
    // CSS para frontend
    wp_enqueue_style(
        mi-checklist-frontend,
        get_stylesheet_directory_uri() . /css/checklist.css,
        array(),
        1.0
    )
}
add_action( enqueue_block_assets, mi_checklist_assets )

function mi_checklist_editor_assets() {
    // CSS y JS para el editor (bloque)
    wp_enqueue_style(
        mi-checklist-editor,
        get_stylesheet_directory_uri() . /css/checklist-editor.css,
        array(),
        1.0
    )

    wp_enqueue_script(
        mi-checklist-editor-js,
        get_stylesheet_directory_uri() . /js/checklist-editor.js,
        array( wp-dom-ready, wp-edit-post ),
        1.0,
        true
    )
}
add_action( enqueue_block_editor_assets, mi_checklist_editor_assets )
?>

CSS: diseño visual de la lista de verificación (frontend y editor)

El CSS se divide en dos partes: la base visual (colores, cajas, iconos) y los estados (marcado, enfoque). A continuación un CSS completo y comentado para lograr una experiencia moderna y accesible.

/ checklist.css y checklist-editor.css (pueden ser idénticos o ajustados para editor) /

/ 1. Reinicio: quitar marcador nativo /
.wp-block-list.is-style-checklist {
  list-style: none
  margin-left: 0
  padding-left: 0
}

/ 2. Espaciado y posición para el pseudo-checkbox /
.wp-block-list.is-style-checklist li {
  position: relative
  padding-left: 44px / deja sitio para el checkbox /
  margin: 0 0 0.6em 0
  line-height: 1.4
}

/ 3. Caja visible (pseudo-elemento) /
.wp-block-list.is-style-checklist li::before {
  content: 
  position: absolute
  left: 0
  top: 50%
  transform: translateY(-50%)
  width: 30px
  height: 30px
  border-radius: 6px
  border: 2px solid #cfd8dc / color del borde en estado normal /
  background: #ffffff
  box-sizing: border-box
  transition: background-color .18s ease, border-color .18s ease, box-shadow .12s ease
}

/ 4. Estado marcado: color y check SVG en background /
.wp-block-list.is-style-checklist li.is-checked::before {
  background-color: #2b8a3e / color del fondo cuando está marcado /
  border-color: #2b8a3e
  / Check SVG inline (escapado) para no depender de recursos externos /
  background-image: url(data:image/svg xmlutf8,)
  background-repeat: no-repeat
  background-position: center
  background-size: 60%
}

/ 5. Focus (teclado) para accesibilidad /
.wp-block-list.is-style-checklist li:focus,
.wp-block-list.is-style-checklist li:focus-visible {
  outline: none
  box-shadow: 0 0 0 3px rgba(43,138,62,0.18)
}

/ 6. Animación sutil al marcar/desmarcar /
.wp-block-list.is-style-checklist li,
.wp-block-list.is-style-checklist li::before {
  transition: transform .12s ease, opacity .12s ease, background-color .18s ease
}

/ 7. Texto desactivado cuando está marcado (opcional) /
.wp-block-list.is-style-checklist li.is-checked {
  color: #6b7280
  text-decoration: none / si prefieres tachado, usar text-decoration: line-through /
  opacity: 0.95
}

/ 8. Soporte para tamaños y responsividad /
.wp-block-list.is-style-checklist li p {
  margin: 0 / si hay párrafos dentro de la li /
}

/ Ajustes para tema oscuro (ejemplo) - opcional /
.theme-dark .wp-block-list.is-style-checklist li::before {
  border-color: #6b7280
}

Comportamiento en el editor: script para alternar marcas y ARIA

Para una buena experiencia en el editor, añadiremos un pequeño script que transforma cada li de la variación en un elemento interactivo (role=checkbox, tabindex, manejo de teclado). El script detecta listas con la clase is-style-checklist y enlaza los manejadores necesarios. Este JS se incluye sólo en el editor (enqueue_example más arriba).

// checklist-editor.js (encolado sólo en el editor)
( function() {
  // Función para inicializar un elemento li como checkable
  function inicializarItem(li) {
    if (li.dataset.checklistBound) {
      return
    }
    li.dataset.checklistBound = 1

    // Atributos ARIA y accesibilidad
    li.setAttribute(role, checkbox)
    li.setAttribute(tabindex, 0)
    var checked = li.classList.contains(is-checked)
    li.setAttribute(aria-checked, checked ? true : false)

    function toggle() {
      var esChecked = li.classList.toggle(is-checked)
      li.setAttribute(aria-checked, esChecked ? true : false)
      // Si se desea, aquí se puede disparar un evento custom para que Gutenberg lo capture
    }

    li.addEventListener(click, function (e) {
      // Evitar interferir con enlaces o selección de texto
      if (e.target.tagName.toLowerCase() === a) return
      toggle()
    })

    li.addEventListener(keydown, function (e) {
      if (e.key ===    e.key === Enter) {
        e.preventDefault()
        toggle()
      }
    })
  }

  // Observador para detectar nuevos bloques/listas añadidos o cambios dinámicos en el editor
  var observer = new MutationObserver(function () {
    document.querySelectorAll(.wp-block-list.is-style-checklist li).forEach(function (li) {
      inicializarItem(li)
    })
  })

  // Iniciar observador sobre el editor
  var editorRoot = document.querySelector(.edit-post-visual-editor, .block-editor__container, #editor) // soportes varios selectores
  observer.observe(document.body, { childList: true, subtree: true })

  // Inicialización inmediata
  document.addEventListener(DOMContentLoaded, function () {
    document.querySelectorAll(.wp-block-list.is-style-checklist li).forEach(function (li) {
      inicializarItem(li)
    })
  })

})()

Detalles de accesibilidad

• Role y ARIA: cada elemento li debe exponer role=checkbox y aria-checked=truefalse para que los lectores de pantalla entiendan el estado.
• Teclado: soporte de Enter y Space para alternar, con foco claro (outline/box-shadow).
• Semántica: se mantiene la semántica de lista (ul/ol). Evitar sustituir por divs para no perder el significado de listado.

Ejemplo completo de integración

Flujo de archivos recomendado en tu tema:

1. functions.php -> registrar variación y encolar assets (PHP mostrado arriba)
2. css/checklist.css -> estilos frontend/editor (CSS arriba)
3. js/checklist-editor.js -> comportamiento editor (JS arriba)

Ejemplo de una entrada usando la variación (HTML resultante):

  
Preparar ingredientes
  
Mezclar la masa
  
Hornear 25 minutos

Variantes y personalizaciones avanzadas

• Usar SVG externo o icon fonts: en lugar del data URI, puedes usar background-image con la URL de un SVG o una fuente de iconos.
• Tachado del texto: aplicar text-decoration: line-through en .is-checked si ese estilo encaja con tu diseño.
• Animaciones: crear transiciones más complejas (transformaciones, fade-in para el check) para una experiencia más dinámica.
• Guardar estado: por defecto el marcado es solo visual en el editor si necesitas persistir que un item está marcado como dato semántico, considera un bloque personalizado que guarde atributos por ítem o una estructura de bloque diferente.

Consideraciones finales

La estrategia propuesta separa claramente estilos (CSS), interacción ligera (JS en editor) y registro del bloque (PHP), lo que facilita mantener compatibilidad con actualizaciones de WordPress y con temas hijos. Mantén en mente la accesibilidad (role, aria-checked y manejo de teclado) y evita confluir la interacción con enlaces u otros elementos dentro de la li.

Resumen rápido

• Registrar una variación con register_block_style para que el editor ofrezca la opción Lista de verificación.
• Encolar CSS tanto para frontend como para editor para garantizar consistencia visual.
• Añadir un JS en el editor para habilitar la interacción por clic y teclado, y exponer atributos ARIA.
• Probar en distintos temas y con lectores de pantalla para garantizar accesibilidad.

Recursos útiles (referencias)

Documentación de WordPress sobre register_block_style y encolado de assets en el editor es el punto de partida para adaptar los ejemplos a tu tema o plugin.