Iniciar sesión

Shortcodes de formularios de Flow y widgets de Elementor

Flow se puede reutilizar fuera de Gutenberg mediante integraciones con shortcodes y Elementor.

Shortcodes​

[smartcloud-flow-form id="..."]​

Use este shortcode cuando el bloque o patrón reutilizable al que se hace referencia contiene un bloque Formulario de Flow.

El shortcode renderiza un formulario de Flow desde el bloque o patrón de origen indicado. Los nombres de los atributos se normalizan entre camelCase, kebab-case y snake_case.

En implementaciones que usan anulaciones de la configuración en tiempo de ejecución, también puede pasar cargas útiles de configuración codificadas, como configB64, desde la página contenedora.

Los ajustes de cadenas en tiempo de ejecución también pueden usar los mismos tokens de interpolación descritos en la página de la API de JavaScript. Por ejemplo, endpointPath puede establecerse en valores como {{location.origin}}/contact, {{wpsuite.apiBaseUrl}}/contact o {{global.MyApp.forms.submitUrl}} cuando esas variables globales están disponibles en la página contenedora.

Cuando un formulario usa un punto de conexión de envío personalizado, también puede establecer endpointMethod en GET, POST, PUT o PATCH. Si se omite, Flow sigue usando POST. Con GET, Flow envía los valores serializados de los campos como parámetros de consulta de la URL. Se pueden proporcionar encabezados adicionales de solicitud del navegador mediante endpointHeaders como una cadena de objeto JSON, por ejemplo {"X-Request-Source":"wpsuite"}. Los valores de los encabezados admiten los mismos tokens de interpolación en tiempo de ejecución que endpointPath, de modo que valores como {"X-Post-Id":"{{wp.postId}}","X-Email":"{{email}}"} se resuelven al enviar.

[smartcloud-flow-form id="123"]

[smartcloud-flow-content-root id="..."]​

Use este shortcode cuando el bloque o patrón reutilizable al que se hace referencia contiene un bloque Raíz de contenido de Flow.

Resulta útil para renderizar un contenedor de contenido de Flow guardado y sus bloques secundarios de presentación o diseño fuera de Gutenberg, sin insertar una instancia de formulario. El shortcode usa la misma normalización de nombres de atributos que el shortcode de formulario.

Entre las anulaciones habituales se incluyen language, direction, colorMode, primaryColor y themeOverrides. También se puede proporcionar configuración anidada adicional en el cuerpo del shortcode como mini-YAML, por ejemplo para colors, primaryShade o fieldOverrides.

[smartcloud-flow-content-root id="456" colormode="dark"]
primaryShade:
  light: 5
  dark: 8
[/smartcloud-flow-content-root]

[smartcloud-flow-modal id="..."]​

Use este shortcode cuando el bloque o patrón reutilizable al que se hace referencia contiene un bloque Modal de Flow.

El shortcode renderiza la estructura modal guardada de Flow y admite la misma normalización de atributos camelCase, kebab-case y snake_case que los demás shortcodes de Flow. Las anulaciones del comportamiento modal, como modalId, showCloseButton, closeButtonLabel, allowBodyFullscreen, size, position, mobileBehavior, backdropStyle y las opciones de cierre, se pueden proporcionar directamente en el shortcode.

[smartcloud-flow-modal id="789" modalid="product-gallery" allowbodyfullscreen="true"]

Elementor​

Flow también incluye integración con Elementor para insertar bloques de Flow en diseños creados con Elementor.

Widgets disponibles:

  • Flow Form
  • Flow Content Root
  • Flow Modal

Los controles de anulación de los widgets pueden dejarse en estado heredado. En ese caso, el widget no emite el atributo de shortcode correspondiente, por lo que continúa vigente el valor original almacenado en el patrón de Flow indicado. El widget modal aplica la misma regla a opciones como la visibilidad del botón de cierre y la compatibilidad con la pantalla completa del cuerpo.

Comportamiento en tiempo de ejecución​

Las rutas de shortcode y Elementor conservan la misma interfaz de ejecución que la salida de Gutenberg para las funciones de renderizado compartidas de Flow:

  • los mismos eventos smartcloud-flow:* siguen propagándose a la página contenedora,
  • las mismas anulaciones del tema y los tokens --flow-* siguen aplicándose dentro de la raíz de sombra,
  • se usa como origen de renderizado la misma estructura guardada de bloques de Flow.

En concreto, para los formularios de Flow renderizados también se mantiene el comportamiento de envío existente:

  • el formulario puede seguir enviándose directamente desde el navegador a la URL del punto de conexión configurada para ese formulario,
  • los puntos de conexión de envío personalizados respetan el endpointMethod configurado (GET, POST, PUT o PATCH),
  • los formularios que conocen el backend siguen usando el transporte del backend de Flow configurado,
  • siguen funcionando el asistente, el estado de éxito, los borradores y las sugerencias de IA,