@yashwant.dharmdas/elementor-mcp 3.16.0 → 3.17.0

package/dist/index.js

@@ -4005,6 +4005,77 @@ function createMcpServer(sites) {
             return { content: [{ type: "text", text: `Error setting button: ${error.response?.data?.message || error.message}` }], isError: true };
         }
     });
+    // ── set-css-filters ───────────────────────────────────────────────────────
+    server.tool("set-css-filters", "Apply CSS filter effects to an image widget (or any widget via the Advanced tab) — blur, brightness, contrast, saturation, hue rotation. Use this when a Figma layer has image adjustments applied (Saturation slider, Contrast, Exposure, etc.).\n\nFIGMA → ELEMENTOR VALUE MAPPING (caller must convert):\n  • Figma Saturation -100..+100 → Elementor saturation 0..200 (formula: 100 + figma_value). A fully-desaturated Figma image (-100) → Elementor saturation=0 (B&W).\n  • Figma Contrast -100..+100 → Elementor contrast 0..200.\n  • Figma Exposure -100..+100 → Elementor brightness 0..200 (closest CSS-filter equivalent).\n  • Figma Highlights / Shadows / Temperature / Tint → no clean CSS-filter equivalent. Surface as a TODO; do NOT improvise with brightness/contrast.\n  • Figma Blur → Elementor blur in px.\n\nELEMENTOR-NATIVE RANGES (what this tool accepts directly):\n  • blur:       0..30   (px, 0 = none)\n  • brightness: 0..200  (100 = neutral, <100 darker, >100 brighter)\n  • contrast:   0..200  (100 = neutral)\n  • saturation: 0..200  (100 = neutral, 0 = B&W, 200 = oversaturated)\n  • hue:        0..360  (degrees, 0 = no rotation)\n\nAutomatically sets `css_filters_css_filter='custom'` so the values take effect. Pass `reset=true` to clear all filters (returns the widget to the default 'normal' filter mode). For non-image widgets, set `apply_to='any-widget'` to use the Advanced-tab `_css_filters_*` keys instead of the image-widget Style-tab `css_filters_*` keys.", {
+        page_id: z.string().describe("WordPress Page ID"),
+        element_id: z.string().describe("Element ID (typically an image widget; or any widget when apply_to='any-widget')"),
+        blur: z.number().optional().describe("Blur in px (0..30). 0 = no blur."),
+        brightness: z.number().optional().describe("Brightness 0..200 (100 = neutral)"),
+        contrast: z.number().optional().describe("Contrast 0..200 (100 = neutral)"),
+        saturation: z.number().optional().describe("Saturation 0..200 (100 = neutral, 0 = B&W). For a Figma layer with Saturation=-100, pass 0 here."),
+        hue: z.number().optional().describe("Hue rotation in degrees 0..360"),
+        hover_blur: z.number().optional().describe("Blur on hover (px)"),
+        hover_brightness: z.number().optional().describe("Brightness on hover (0..200)"),
+        hover_contrast: z.number().optional().describe("Contrast on hover (0..200)"),
+        hover_saturation: z.number().optional().describe("Saturation on hover (0..200)"),
+        hover_hue: z.number().optional().describe("Hue on hover (degrees)"),
+        apply_to: z.enum(["image-widget", "any-widget"]).optional().describe("Default 'image-widget' (Style-tab keys, css_filters_*). Use 'any-widget' for filters on a non-image widget via the Advanced tab (_css_filters_*)."),
+        reset: z.boolean().optional().describe("Clear all filters and set css_filter mode back to 'normal'. All numeric params are ignored when reset=true."),
+        site: siteParam,
+    }, async ({ page_id, element_id, blur, brightness, contrast, saturation, hue, hover_blur, hover_brightness, hover_contrast, hover_saturation, hover_hue, apply_to, reset, site }) => {
+        try {
+            const { wpUrl, authHeader } = resolveSite(sites, site);
+            const prefix = (apply_to ?? "image-widget") === "any-widget" ? "_css_filters_" : "css_filters_";
+            const slider = (n, unit = "px") => ({ unit, size: n, sizes: [] });
+            const s = {};
+            if (reset === true) {
+                s[`${prefix}css_filter`] = "normal";
+                // Zero out values explicitly so the editor doesn't keep showing stale settings
+                s[`${prefix}blur`] = slider(0);
+                s[`${prefix}brightness`] = slider(100);
+                s[`${prefix}contrast`] = slider(100);
+                s[`${prefix}saturation`] = slider(100);
+                s[`${prefix}hue`] = slider(0);
+            }
+            else {
+                // Any filter param triggers 'custom' mode
+                const anySet = blur !== undefined || brightness !== undefined || contrast !== undefined ||
+                    saturation !== undefined || hue !== undefined ||
+                    hover_blur !== undefined || hover_brightness !== undefined || hover_contrast !== undefined ||
+                    hover_saturation !== undefined || hover_hue !== undefined;
+                if (!anySet) {
+                    return { content: [{ type: "text", text: "No filter parameters provided. Pass at least one of blur/brightness/contrast/saturation/hue (or hover_*) — or pass reset=true." }], isError: true };
+                }
+                s[`${prefix}css_filter`] = "custom";
+                if (blur !== undefined)
+                    s[`${prefix}blur`] = slider(blur);
+                if (brightness !== undefined)
+                    s[`${prefix}brightness`] = slider(brightness);
+                if (contrast !== undefined)
+                    s[`${prefix}contrast`] = slider(contrast);
+                if (saturation !== undefined)
+                    s[`${prefix}saturation`] = slider(saturation);
+                if (hue !== undefined)
+                    s[`${prefix}hue`] = slider(hue);
+                // Hover variants
+                if (hover_blur !== undefined)
+                    s[`${prefix}hover_blur`] = slider(hover_blur);
+                if (hover_brightness !== undefined)
+                    s[`${prefix}hover_brightness`] = slider(hover_brightness);
+                if (hover_contrast !== undefined)
+                    s[`${prefix}hover_contrast`] = slider(hover_contrast);
+                if (hover_saturation !== undefined)
+                    s[`${prefix}hover_saturation`] = slider(hover_saturation);
+                if (hover_hue !== undefined)
+                    s[`${prefix}hover_hue`] = slider(hover_hue);
+            }
+            const result = await applyElementSettings(wpUrl, authHeader, page_id, element_id, s);
+            return { content: [{ type: "text", text: JSON.stringify({ applied: s, result }, null, 2) }] };
+        }
+        catch (error) {
+            return { content: [{ type: "text", text: `Error setting CSS filters: ${error.response?.data?.message || error.message}` }], isError: true };
+        }
+    });
     // ── validate-page-structure ───────────────────────────────────────────────
     server.tool("validate-page-structure", "Post-build sanity check on a page. Returns a report of structural / standards violations: header widgets in page body (should be a template), images with external URLs missing WP attachment IDs, hardcoded fonts/colors that should use kit globals, legacy _element_width on flex children, missing image alt text, suspicious min-heights. Call this AFTER building a page from Figma. If errors are found, fix them with the typed tools and re-run. If only warnings remain, surface them to the human for review.", {
         page_id: z.string().describe("WordPress Page ID to validate"),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yashwant.dharmdas/elementor-mcp",
-  "version": "3.16.0",
+  "version": "3.17.0",
   "description": "MCP server for controlling Elementor via Claude — supports multiple WordPress sites",
   "main": "dist/index.js",
   "type": "module",