Bloques de formularios y lógica condicional de WordPress con Flow
Flow proporciona un creador de formularios nativo de Gutenberg con bloques de diseño y contenedores, y bloques de campos renderizados dentro de un único entorno de ejecución de React. El editor serializa el árbol de bloques en una única definición para el frontend, por lo que el formulario final se comporta como una aplicación coordinada en lugar de como numerosos bloques dinámicos aislados.
Bloques contenedores
Flow incluye bloques contenedores y de diseño como:
- Formulario
- Grupo
- Cuadrícula
- Pila
- Conjunto de campos
- Contraer
- Asistente
- Paso del asistente
- Estado de éxito
- Oculto visualmente
- Separador
Bloques de presentación en el DOM ligero
Flow también incluye un bloque Galería para diseños modales o de caja de luz. Acepta bloques internos core/image, se renderiza en el DOM normal del documento en vez de en el entorno de ejecución de Mantine con raíz de sombra y puede mostrar controles anterior/siguiente, miniaturas opcionales, pies de foto o contador opcionales y una posición inicial que tiene en cuenta el modal.
Cuando la galería se encuentra dentro de un Modal de Flow, el envoltorio que la abre puede apuntar a ella con wps-flow-gallery-target--{galleryId} y solicitar una imagen inicial con índice basado en 1 mediante wps-flow-gallery-index--N. La barra lateral de Gutenberg también incluye un panel auxiliar que genera esos patrones de clases para los autores.
Bloque Debate
El bloque Debate renderiza un árbol público de comentarios vinculado al contenido desde el backend de Flow. Un Formulario de Flow asociado crea comentarios y respuestas, mientras que el bloque Debate se encarga de la lista, la paginación, las acciones del propietario, las fechas, los recuentos, la navegación por respuestas y, opcionalmente, los resúmenes y filtros de valoraciones de los comentarios raíz. Puede seguir siendo legible públicamente mientras la autenticación de Cognito protege las modificaciones de comentarios, incluso en una página exportada estáticamente.
Consulte Debates y comentarios para conocer la configuración de Formulario/Debate, la identidad del destino, los modos de acceso, los límites de respuesta y los requisitos del sitio estático.
Bloques de campos
Flow incluye bloques avanzados de entrada y valores como:
- Campo de texto
- Campo de área de texto
- Campo de selección
- Campo de grupo de casillas
- Campo de casilla
- Campo de fecha
- Campo de interruptor
- Campo numérico
- Campo de opción
- Campo de contraseña
- Campo de PIN
- Campo de color
- Campo de archivo
- Campo deslizante
- Campo deslizante de intervalo
- Campo de etiquetas
- Campo de valoración
- Sugerencias de IA
- Metadatos del envío
- Botón Guardar borrador
- Botón Enviar
Flujos con asistente y estado de éxito
Los bloques Asistente y Paso del asistente permiten crear formularios de varios pasos con validación por paso, reglas opcionales de navegación entre pasos e indicadores de progreso opcionales.
El bloque Estado de éxito permite renderizar una vista específica después del envío o de la aceptación por la IA, en lugar de mostrar solo un mensaje de éxito genérico. Resulta útil cuando quiere un estado de confirmación más completo con acciones siguientes, metadatos del envío o controles para «volver al formulario» o «enviar de todos modos».
El editor también incluye un control de vista previa para que los autores puedan ver un paso concreto del asistente o un estado de éxito directamente en Gutenberg sin tener que recorrer todo el flujo cada vez.
Bloque Sugerencias de IA
El bloque Sugerencias de IA está pensado para ayudar a completar el formulario antes del envío definitivo. Puede:
- ejecutarse con un preajuste seleccionado,
- usar opcionalmente la recuperación desde una base de conocimiento,
- renderizar varias sugerencias con su confianza y documentación relacionada,
- admitir acciones para aceptar y rechazar,
- permitir que un usuario continúe con un envío normal después de revisar las sugerencias.
El entorno de ejecución registra el estado de las sugerencias de IA, lo que permite que otros bloques y condiciones reaccionen en función de si ya se ejecutaron, se aceptaron o se rechazaron.
Guardar borrador y metadatos del envío
El bloque del botón Guardar borrador habilita la persistencia de borradores en los formularios que los permiten. El entorno de ejecución puede guardar un borrador, reanudarlo más adelante y, opcionalmente, eliminarlo.
El bloque Metadatos del envío está pensado para diseños de estado de éxito e interfaces de respuesta similares. Puede renderizar metadatos proporcionados por el backend, como el ID y el estado del envío, la marca de tiempo de aceptación o detalles de la respuesta relacionados con la IA.
Lógica condicional
La lógica condicional puede controlar dinámicamente el comportamiento de campos y contenedores. Las acciones admitidas incluyen mostrar/ocultar, activar/desactivar, establecer como obligatorio/opcional, actualizar opciones, asignar un valor y borrar un valor. Los operadores incluyen comprobaciones de igualdad, pruebas de contenido, empieza/termina por, comparaciones numéricas, comprobaciones de vacío y pruebas de pertenencia como cualquiera de/ninguno de.
Flow también ofrece condiciones que conocen el estado de la IA para que los diseños puedan reaccionar al estado de las sugerencias en tiempo de ejecución. Ejemplos habituales:
- mostrar una sección de seguimiento solo después de ejecutar las sugerencias de IA,
- revelar campos manuales cuando el usuario rechace todas las sugerencias,
- renderizar un estado de éxito alternativo después de aceptar una sugerencia de IA.
Temas y presentación
Los formularios de Flow admiten ajustes configurables de presentación, como idioma, dirección del texto, modo de color, colores primarios, paletas personalizadas generadas y anulaciones personalizadas del tema. Consulte la página Temas (variables CSS) para obtener instrucciones sobre cómo anular los tokens de diseño de Mantine y Flow.