Potencia tu extensión de diseñador con las actualizaciones del modo de compilación

Las Designer Extensions de Webflow permiten a los desarrolladores crear herramientas que amplían y mejoran las capacidades de Webflow Designer. Ya sea para uso general o integradas en herramientas diseñadas para sitios específicos, te permiten añadir tus propias funciones personalizadas a la plataforma. Recientemente, hemos actualizado las API de Designer específicamente para mejorar la experiencia de la aplicación al trabajar con diferentes roles de usuario.

Webflow Designer admite diferentes tipos de roles para que los equipos puedan controlar lo que los distintos editores pueden hacer en el sitio. (¿Quieres saber más? Echa un vistazo al tutorial de Webflow University sobre los roles del sitio). Pero, ¿cómo afecta esto a las Designer Extensions?

Cómo funcionaba antes...

Antes del cambio que acabamos de lanzar, una extensión podía comprobar si una acción concreta estaba disponible para un rol determinado. Por ejemplo:

const capabilities = await webflow.canForAppMode([ webflow.appModes.canDesign, webflow.appModes.canEdit]);

Esto devuelve un objeto con valores booleanos para canDesign y canEdit. Aunque esta comprobación basada en roles es útil, los desarrolladores necesitan un poco más para gestionar mejor los distintos tipos de permisos disponibles en un sitio.

Qué hay de nuevo

Hemos lanzado varias actualizaciones para que a tus Designer Extensions les resulte más fácil gestionar y reaccionar a las diferentes formas en que pueden ejecutarse. Primero, añadimos getCurrentMode, que devuelve el modo actual. En cuanto a nuestro código y API, el modo se refiere al rol del usuario que está ejecutando la extensión en ese momento. Aquí tienes un ejemplo:

const mode = await webflow.getCurrentMode();

if (mode === "design") {
  showDesignUI();
} else if (mode === "build") {
  showBuildUI();
} else {
  showNeutralUI();
}

En segundo lugar, también puedes comprobar específicamente un modo determinado:

if (await webflow.isMode("design")) {
  await insertElement();
}

Y, por último, las Designer Extensions ya podían detectar cambios en el modo actual, pero no pasábamos el nuevo modo en el evento. Esto es tan sencillo como añadir un valor mode en el objeto de evento que se pasa:

const unsubscribe = webflow.subscribe("currentappmode", (event) => {
  console.log("New mode:", event.mode);

  if (event.appModes.canDesign) {
    showDesignTools();
  } else {
    hideDesignTools();
  }
});

Para utilizar estas nuevas funciones, las Designer Extensions deben activarlas editando su archivo webflow.json y añadiendo:

"featureFlags": {
    "expandedAppModes": true
}

También puedes establecer el valor en false si quieres asegurarte explícitamente de que estas nuevas funciones no afecten a tu extensión.