Se connecter

Blocs de formulaires WordPress et logique conditionnelle avec Flow

Flow fournit un générateur de formulaires natif Gutenberg avec des blocs de disposition/conteneur et des blocs de champs rendus dans un seul runtime React. L’éditeur sérialise l’arbre de blocs en une définition frontend unique, de sorte que le formulaire final se comporte comme une seule application coordonnée plutôt qu’un ensemble de blocs dynamiques isolés.

Blocs conteneurs​

Flow inclut des blocs de conteneur et de mise en page tels que :

  • Formulaire
  • Groupe
  • Grille
  • Pile
  • Groupe de champs
  • Zone repliable
  • Assistant
  • Étape de l’assistant
  • État de réussite
  • Masqué visuellement
  • Séparateur

Blocs de présentation Light DOM​

Flow inclut aussi un bloc Gallery pour les mises en page modales/lightbox. Il accepte des blocs enfants core/image, s’affiche dans le DOM document normal plutôt que dans le runtime à shadow-root de Mantine, et peut afficher des commandes précédent/suivant, des miniatures facultatives, des légendes/compteurs facultatifs, ainsi qu’une position de départ sensible à la modale.

Lorsque la galerie se trouve dans une Flow Modal, le wrapper d’ouverture peut la cibler avec wps-flow-gallery-target--{galleryId} et demander une image de départ numérotée à partir de 1 avec wps-flow-gallery-index--N. La barre latérale Gutenberg inclut aussi un panneau d’aide qui génère ces patrons de classe pour les auteurs.

Bloc Discussion​

Le bloc Discussion affiche une arborescence publique de commentaires liée au contenu depuis le backend Flow. Un Flow Form associé crée les commentaires et les réponses, tandis que le bloc Discussion gère l’affichage de la liste, la pagination, les actions du propriétaire, les dates, les compteurs, la navigation des réponses, ainsi que des résumés et filtres optionnels des notes de commentaires racine. Il peut rester publiquement lisible pendant que l’authentification Cognito protège les mutations de commentaire, y compris sur une page exportée statiquement.

Voir Discussions et commentaires pour la configuration du Form/Discussion, l’identité cible, les modes d’accès, les limites de réponse et les exigences de site statique.

Blocs de champs​

Flow inclut des blocs de saisie/valeur riches tels que :

  • Champ de texte
  • Zone de texte
  • Liste de sélection
  • Groupe de cases à cocher
  • Case à cocher
  • Champ de date
  • Interrupteur
  • Champ numérique
  • Bouton radio
  • Champ de mot de passe
  • Champ de code PIN
  • Champ de couleur
  • Champ de fichier
  • Curseur
  • Curseur de plage
  • Champ d’étiquettes
  • Champ d’évaluation
  • Suggestions IA
  • Métadonnées de soumission
  • Bouton d’enregistrement du brouillon
  • Bouton d’envoi

Flux Wizard et état de succès​

Les blocs Assistant et Étape de l’assistant vous permettent de créer des formulaires multi-étapes avec validation par étape, règles facultatives de navigation entre étapes et indicateurs de progression facultatifs.

Le bloc État de réussite vous permet d’afficher une vue dédiée après soumission ou après acceptation IA au lieu d’un simple message de succès générique. C’est utile lorsque vous souhaitez un état de confirmation plus riche avec des actions suivantes, des métadonnées de soumission ou des contrôles « retour au formulaire » / « soumettre quand même ».

L’éditeur inclut aussi un contrôle d’aperçu pour les auteurs de formulaires, afin qu’ils puissent prévisualiser une étape donnée du wizard ou l’état de succès directement dans Gutenberg sans cliquer à travers tout le flux à chaque fois.

Bloc Suggestions IA​

Le bloc Suggestions IA sert à une assistance à la saisie avant la soumission finale. Il peut :

  • fonctionner avec un préréglage sélectionné,
  • utiliser facultativement une récupération dans la base de connaissances,
  • afficher plusieurs suggestions avec leur confiance et la documentation associée,
  • prendre en charge les actions d’acceptation et de rejet,
  • permettre à un utilisateur de poursuivre avec une soumission normale même après avoir examiné les suggestions.

Le runtime suit l’état des suggestions IA, ce qui signifie que d’autres blocs et conditions peuvent réagir au fait que les suggestions ont déjà été exécutées, acceptées ou rejetées.

Enregistrement du brouillon et métadonnées de soumission​

Le bloc Bouton d’enregistrement du brouillon permet la persistance du brouillon sur les formulaires qui autorisent les brouillons. Le runtime peut enregistrer un brouillon, le reprendre plus tard et éventuellement le supprimer.

Le bloc Métadonnées de soumission est destiné aux mises en page d’état de succès et aux interfaces de réponse similaires. Il peut afficher des métadonnées fournies par le backend telles que l’ID de soumission, le statut, l’horodatage d’acceptation ou les détails de réponse liés à l’IA.

Logique conditionnelle​

La logique conditionnelle peut contrôler dynamiquement le comportement des champs et des conteneurs. Les actions prises en charge incluent afficher/masquer, activer/désactiver, définir obligatoire/définir facultatif, mettre à jour les options, définir une valeur et effacer une valeur. Les opérateurs incluent les comparaisons d’égalité, les tests de contenu, le commence/termine par, les comparaisons numériques, les tests de vide et les tests d’appartenance tels que any-of/none-of.

Flow expose aussi des conditions sensibles à l’IA afin que les mises en page puissent réagir à l’état d’exécution des suggestions. Exemples typiques :

  • afficher une section de suivi uniquement après l’exécution des suggestions IA,
  • révéler des champs manuels lorsque l’utilisateur a rejeté toutes les suggestions,
  • afficher un état de succès alternatif après l’acceptation d’une suggestion IA.

Thématisation et présentation​

Les formulaires Flow prennent en charge des paramètres de présentation configurables tels que la langue, le sens du texte, le mode de couleur, les couleurs primaires, les palettes personnalisées générées et les substitutions de thème personnalisées. Voir la page Thématisation (variables CSS) pour savoir comment remplacer les jetons de conception Mantine et Flow.