feat: WordPress export target (theme + pattern generation from a selection)

README.md

@@ -37,6 +37,7 @@ The generator is deterministic and runs inside Figma's plugin sandbox. It does n
 | Tailwind CSS | HTML, React (JSX), Twig; supports Tailwind 3 and Tailwind 4 |
 | Flutter      | Full app, stateless widget, or snippet                      |
 | SwiftUI      | Preview, `View` struct, or snippet                          |
+| WordPress    | WP Theme or Design Bundle, zipped for download (see below)  |
 
 The plugin can also package generated code and local image assets into downloadable starters:
 
@@ -46,6 +47,13 @@ The plugin can also package generated code and local image assets into downloada
 
 These exports are deliberately small and dependency-light. They are starting points, not generated production applications.
 
+### WordPress export
+
+Alongside the four code targets above, the plugin can generate Page Patterns for a **self-hosted WordPress site** running the block editor (Full Site Editing). Pick "WordPress" as the target, then choose one of two output modes:
+
+- **WP Theme** — a complete, installable WordPress block theme: `theme.json`, `style.css`, a page template with header/footer template parts, and one starter Pattern per top-level layer in your selection, packaged as `theme.zip`. Install it via **Appearance → Themes → Add New → Upload Theme** in WordPress, or unzip it into `wp-content/themes/`.
+- **Design Bundle** — the same normalized node tree the code targets convert from, exported instead as a `design-bundle.json` manifest plus an `assets/` folder of exported images, zipped. It's a target-neutral snapshot meant for another tool to read, not for pasting into a site directly — think of it as the "Normalize" stage of [How conversion works](#how-conversion-works) written to disk before any target-specific "Generate" step runs.
+
 ## What you can tune
 
 Options appear only when they apply to the selected target:
@@ -57,8 +65,10 @@ Options appear only when they apply to the selected target:
 - Embed images as Base64 in HTML.
 - Embed supported vector shapes as SVG for web output.
 - Switch between framework-specific file, component, and snippet modes.
+- Set the theme or bundle name for WordPress.
+- Embed fonts in the theme or bundle for WordPress.
 
-The interface also includes a visual preview, light and dark preview backgrounds, conversion warnings, extracted colors and gradients, code copying, and project downloads.
+The interface also includes a visual preview, light and dark preview backgrounds, conversion warnings, extracted colors and gradients, code copying, and project downloads. Note: WordPress targets do not display copyable code; they display theme or bundle information (designs, patterns, assets, fonts) instead.
 
 ## How to use it
 
@@ -160,14 +170,15 @@ pnpm format:check   # Check formatting without writing
 
 ### Repository structure
 
-| Path                 | Purpose                                                                                  |
-| -------------------- | ---------------------------------------------------------------------------------------- |
-| `packages/backend`   | Figma node processing, intermediate representation, code generators, and project exports |
-| `packages/plugin-ui` | Shared React interface used by the plugin and interactive website demo                   |
-| `packages/types`     | Shared settings, message, preview, and output types                                      |
-| `packages/tsconfig`  | Shared TypeScript configuration                                                          |
-| `apps/plugin`        | Figma controller and UI entry points; builds `code.js` and `index.html`                  |
-| `apps/web`           | Public website, interactive preview, privacy page, and comparison guides                 |
+| Path                             | Purpose                                                                                                   |
+| -------------------------------- | --------------------------------------------------------------------------------------------------------- |
+| `packages/backend`               | Figma node processing, intermediate representation, code generators, and project exports                  |
+| `packages/backend/src/wordpress` | WordPress export — generates a block theme or Design Bundle from the normalized node tree instead of code |
+| `packages/plugin-ui`             | Shared React interface used by the plugin and interactive website demo                                    |
+| `packages/types`                 | Shared settings, message, preview, and output types                                                       |
+| `packages/tsconfig`              | Shared TypeScript configuration                                                                           |
+| `apps/plugin`                    | Figma controller and UI entry points; builds `code.js` and `index.html`                                   |
+| `apps/web`                       | Public website, interactive preview, privacy page, and comparison guides                                  |
 
 ## Contributing and support
 

apps/plugin/plugin-src/code.ts

@@ -7,6 +7,8 @@ import {
   htmlMain,
   extractProjectImageNodeIds,
   generateProjectZip,
+  generateWordPressTheme,
+  generateDesignBundleZip,
   postSettingsChanged,
   replaceProjectImagePlaceholders,
 } from "backend";
@@ -18,9 +20,10 @@ import { flutterCodeGenTextStyles } from "backend/src/flutter/flutterMain";
 import { htmlCodeGenTextStyles } from "backend/src/html/htmlMain";
 import { swiftUICodeGenTextStyles } from "backend/src/swiftui/swiftuiMain";
 import {
-  DownloadProjectFormat,
+  DownloadFormat,
   PluginSettings,
   SettingWillChangeMessage,
+  WordPressOutputMode,
 } from "types";
 
 let userPluginSettings: PluginSettings;
@@ -46,6 +49,11 @@ export const defaultPluginSettings: PluginSettings = {
   thresholdPercent: 15,
   baseFontFamily: "",
   fontFamilyCustomConfig: {},
+  // WordPress tab defaults (XC1)
+  wpOutputMode: "theme",
+  wpIncludeFonts: true,
+  // Placeholder only (XC2)
+  wpThemeName: "",
 };
 
 // A helper type guard to ensure the key belongs to the PluginSettings type
@@ -78,6 +86,8 @@ const getUserSettings = async () => {
   };
 
   userPluginSettings = updatedPluginSrcSettings as PluginSettings;
+  // Seed the theme name from the current file's name (XC3)
+  userPluginSettings.wpThemeName = figma.root.name;
   console.log("[DEBUG] getUserSettings - Final settings:", userPluginSettings);
   return userPluginSettings;
 };
@@ -92,7 +102,7 @@ const initSettings = async () => {
 
 // Used to prevent running from happening again.
 let isLoading = false;
-let isDownloadingProject = false;
+let isDownloading = false;
 let rerunAfterDownload = false;
 const safeRun = async (settings: PluginSettings) => {
   console.log(
@@ -101,7 +111,7 @@ const safeRun = async (settings: PluginSettings) => {
     "selectionCount =",
     figma.currentPage.selection.length,
   );
-  if (isDownloadingProject) {
+  if (isDownloading) {
     rerunAfterDownload = true;
     return;
   }
@@ -153,7 +163,7 @@ type ExportedProjectImage = {
 
 const allowedFormatsByFramework: Record<
   "Flutter" | "HTML" | "SwiftUI" | "Tailwind",
-  DownloadProjectFormat[]
+  DownloadFormat[]
 > = {
   Flutter: ["flutter"],
   HTML: ["html", "nextjs", "vite"],
@@ -265,7 +275,7 @@ const getConvertedSelectionForDownload = async (
 
 const generateDownloadCode = async (
   nodes: readonly SceneNode[],
-  format: DownloadProjectFormat,
+  format: DownloadFormat,
   pluginSettings: PluginSettings,
 ) => {
   const convertedSelection = await getConvertedSelectionForDownload(
@@ -317,14 +327,16 @@ const generateDownloadCode = async (
   return result?.html || "<div>Failed to generate HTML</div>";
 };
 
-const downloadProject = async (format: DownloadProjectFormat) => {
+const downloadProject = async (format: DownloadFormat) => {
   if (!["flutter", "html", "nextjs", "swiftui", "vite"].includes(format)) {
     throw new Error(`Invalid download format: ${format}.`);
   }
 
   const pluginSettings = { ...userPluginSettings };
   if (
     pluginSettings.framework === "Compose" ||
+    // Safety net (XC33)
+    pluginSettings.framework === "WordPress" ||
     !allowedFormatsByFramework[pluginSettings.framework].includes(format)
   ) {
     throw new Error(
@@ -373,13 +385,104 @@ const downloadProject = async (format: DownloadProjectFormat) => {
   );
 
   figma.ui.postMessage({
-    type: "project-zip",
+    type: "zip",
     zip,
     format,
     fileName: `${rootName}-${format}.zip`,
   });
 };
 
+// F2C's own plugin version (XC5)
+const PLUGIN_VERSION = "1.0.0";
+
+const downloadWordPressOutput = async (format: DownloadFormat) => {
+  // format is one of the two wordpress-* DownloadFormat values (XC34)
+  const outputMode: WordPressOutputMode =
+    format === "wordpress-design-bundle" ? "designBundle" : "theme";
+  const pluginSettings = { ...userPluginSettings };
+  const selection = [...figma.currentPage.selection];
+  if (selection.length === 0) {
+    throw new Error(
+      outputMode === "theme"
+        ? "Please select at least one layer to generate a WordPress theme from."
+        : "Please select at least one layer to generate a Design Bundle from.",
+    );
+  }
+
+  // Both outputs share buildBundleFromSelection  (XC6)
+  const result =
+    outputMode === "theme"
+      ? await generateWordPressTheme(selection, pluginSettings, {
+          pluginVersion: PLUGIN_VERSION,
+          themeName: pluginSettings.wpThemeName,
+        })
+      : await generateDesignBundleZip(selection, pluginSettings, {
+          bundleName: pluginSettings.wpThemeName,
+        });
+
+  // No artificial size ceiling here (XC7)
+  const zip = result.zip.buffer.slice(
+    result.zip.byteOffset,
+    result.zip.byteOffset + result.zip.byteLength,
+  );
+
+  figma.ui.postMessage({
+    type: "zip",
+    zip,
+    format,
+    fileName: result.fileName,
+    warnings: result.warnings,
+    summary: result.summary,
+  });
+};
+
+// Shared guard/try-catch/finally shape for the merged download message
+// handler below: both the code-target and WordPress download paths need
+// the isLoading/isDownloading guards and the same finally-block rerun
+// logic, differing only in two bits of user-facing/log text (the error
+// type itself is now shared too -- both flows post the one
+// "download-error" message).
+const runGuardedDownload = async (
+  itemLabel: string,
+  logLabel: string,
+  action: () => Promise<void>,
+) => {
+  if (isLoading) {
+    figma.ui.postMessage({
+      type: "download-error",
+      error: "Please wait for the current conversion to finish.",
+    });
+    return;
+  }
+
+  if (isDownloading) {
+    figma.ui.postMessage({
+      type: "download-error",
+      error: "A project download is already in progress.",
+    });
+    return;
+  }
+
+  isDownloading = true;
+  try {
+    await action();
+  } catch (error) {
+    console.error(`${logLabel} failed:`, error);
+    figma.ui.postMessage({
+      type: "download-error",
+      error: `Failed to create ${itemLabel}: ${
+        error instanceof Error ? error.message : "Unknown error occurred"
+      }`,
+    });
+  } finally {
+    isDownloading = false;
+    if (rerunAfterDownload) {
+      rerunAfterDownload = false;
+      void safeRun(userPluginSettings);
+    }
+  }
+};
+
 const standardMode = async () => {
   console.log("[DEBUG] standardMode - Starting standard mode initialization");
   figma.showUI(__html__, { width: 450, height: 700, themeColors: true });
@@ -420,46 +523,39 @@ const standardMode = async () => {
 
     if (msg.type === "ui-ready") {
       await initializeOnce();
-    } else if (msg.type === "download-project") {
-      if (isLoading) {
-        figma.ui.postMessage({
-          type: "project-download-error",
-          error: "Please wait for the current conversion to finish.",
-        });
-        return;
-      }
-
-      if (isDownloadingProject) {
-        figma.ui.postMessage({
-          type: "project-download-error",
-          error: "A project download is already in progress.",
-        });
-        return;
-      }
-
-      isDownloadingProject = true;
-      try {
-        await downloadProject(msg.format as DownloadProjectFormat);
-      } catch (error) {
-        console.error("Download project failed:", error);
-        figma.ui.postMessage({
-          type: "project-download-error",
-          error: `Failed to create project: ${
-            error instanceof Error ? error.message : "Unknown error occurred"
-          }`,
-        });
-      } finally {
-        isDownloadingProject = false;
-        if (rerunAfterDownload) {
-          rerunAfterDownload = false;
-          void safeRun(userPluginSettings);
-        }
-      }
+    } else if (msg.type === "download") {
+      const format = msg.format as DownloadFormat;
+      const isWordPress =
+        format === "wordpress-theme" || format === "wordpress-design-bundle";
+      // Both wordpress-* formats used to share the "WordPress theme"
+      // label here, so a failed Design Bundle generation surfaced the
+      // misleading error "Failed to create WordPress theme." The format
+      // is already known at this point -- use it.
+      const isDesignBundle = format === "wordpress-design-bundle";
+      await runGuardedDownload(
+        isDesignBundle
+          ? "Design Bundle"
+          : isWordPress
+            ? "WordPress theme"
+            : "project",
+        isDesignBundle
+          ? "Design Bundle download"
+          : isWordPress
+            ? "WordPress theme download"
+            : "Download project",
+        () =>
+          isWordPress
+            ? downloadWordPressOutput(format)
+            : downloadProject(format),
+      );
     } else if (msg.type === "pluginSettingWillChange") {
       const { key, value } = msg as SettingWillChangeMessage<unknown>;
       console.log(`[DEBUG] Setting changed: ${key} = ${value}`);
       (userPluginSettings as any)[key] = value;
-      figma.clientStorage.setAsync("userPluginSettings", userPluginSettings);
+      // Do not persist wpThemeName (XC9)
+      const settingsToPersist = { ...userPluginSettings };
+      delete (settingsToPersist as any).wpThemeName;
+      figma.clientStorage.setAsync("userPluginSettings", settingsToPersist);
       safeRun(userPluginSettings);
     } else if (msg.type === "get-selection-json") {
       console.log("[DEBUG] get-selection-json message received");