🎉 Add background blur info to plugins API

common/src/app/common/geom/shapes/bounds.cljc

@@ -42,9 +42,6 @@
    [{:id "shape" :type :blend-filters}]
    (->> shape :shadow (apply-filters :style :inner-shadow))
 
-   ;; Background blur won't work in current SVG specification
-   ;; We can revisit this in the future
-   #_(->> shape :background-blur list (apply-filters :type :background-blur))
    (->> shape :blur list (apply-filters :type :layer-blur))))
 
 (defn- calculate-filter-bounds

frontend/src/app/main/ui/shapes/export.cljs

@@ -217,8 +217,8 @@
            :penpot:spread (str spread)}])))
 
 (defn- export-blur-data [{:keys [blur]}]
-   (when-let [{:keys [type hidden value]} blur]
-     (mf/html
+  (when-let [{:keys [type hidden value]} blur]
+    (mf/html
      [:> "penpot:blur"
       #js {:penpot:blur-type (d/name type)
            :penpot:hidden    (str hidden)

frontend/src/app/main/ui/workspace/sidebar/options/menus/blur.cljs

@@ -209,7 +209,7 @@
          (and (identical? o-blur-values n-blur-values)
               (identical? o-background-blur-values n-background-blur-values)))))
 
-(mf/defc blur-menu* 
+(mf/defc blur-menu*
   {::mf/wrap [#(mf/memo' % check-props)]}
   [{:keys [ids type values]}]
   (let [render-wasm?        (features/use-feature "render-wasm/v1")

frontend/src/app/plugins/format.cljs

@@ -232,16 +232,14 @@
 
 ;; export interface Blur {
 ;;   id?: string;
-;;   type?: 'layer-blur' | 'background-blur';
 ;;   value?: number;
 ;;   hidden?: boolean;
 ;; }
 (defn format-blur
-  [{:keys [id type value hidden] :as blur}]
+  [{:keys [id value hidden] :as blur}]
   (when (some? blur)
     (obj/without-empty
      #js {:id (format-id id)
-          :type (format-key type)
           :value value
           :hidden hidden})))
 

frontend/src/app/plugins/parser.cljs

@@ -237,7 +237,6 @@
 
 ;; export interface Blur {
 ;;   id?: string;
-;;   type?: 'layer-blur';
 ;;   value?: number;
 ;;   hidden?: boolean;
 ;; }
@@ -246,7 +245,6 @@
   (when (some? blur)
     (d/without-nils
      {:id (-> (obj/get blur "id") parse-id)
-      :type (-> (obj/get blur "type") parse-keyword)
       :value (obj/get blur "value")
       :hidden (obj/get blur "hidden")})))
 

frontend/src/app/plugins/shape.cljs

@@ -509,7 +509,8 @@
               (if (nil? value)
                 (st/emit! (dwsh/update-shapes [id] #(dissoc % :blur)))
                 (let [id (obj/get self "$id")
-                      value (blur-defaults (parser/parse-blur value))]
+                      value (blur-defaults (parser/parse-blur value))
+                      value (assoc value :type :layer-blur)]
                   (cond
                     (not (sm/validate ctsb/schema:blur value))
                     (u/not-valid plugin-id :blur value)
@@ -528,7 +529,8 @@
               (if (nil? value)
                 (st/emit! (dwsh/update-shapes [id] #(dissoc % :background-blur)))
                 (let [id (obj/get self "$id")
-                      value (background-blur-defaults (parser/parse-blur value))]
+                      value (background-blur-defaults (parser/parse-blur value))
+                      value (assoc value :type :background-blur)]
                   (cond
                     (not (sm/validate ctsbb/schema:background-blur value))
                     (u/not-valid plugin-id :background-blur value)

mcp/packages/server/data/api_types.yml

@@ -960,12 +960,11 @@ Blur:
     ==============
 
     Represents blur properties in Penpot.
-    This interface includes properties for defining the type and intensity of a blur effect, along with its visibility.
+    This interface includes properties for defining the intensity of a blur effect, along with its visibility.
 
     ```
     interface Blur {
         id?: string;
-        type?: "layer-blur";
         value?: number;
         hidden?: boolean;
     }
@@ -980,13 +979,44 @@ Blur:
         ```
 
         The optional unique identifier for the blur effect.
-      type: |-
+      value: |-
         ```
-        type?: "layer-blur"
+        value?: number
         ```
 
-        The optional type of the blur effect.
-        Currently, only 'layer-blur' is supported.
+        The optional intensity value of the blur effect.
+      hidden: |-
+        ```
+        hidden?: boolean
+        ```
+
+        Specifies whether the blur effect is hidden.
+        Defaults to false if omitted.
+BackgroundBlur:
+  overview: |-
+    Interface BackgroundBlur
+    ==============
+
+    Represents background blur properties in Penpot.
+    This interface includes properties for defining the intensity of a blur effect, along with its visibility.
+
+    ```
+    interface Blur {
+        id?: string;
+        value?: number;
+        hidden?: boolean;
+    }
+    ```
+
+    Referenced by: Board, Boolean, Ellipse, Group, Image, Path, Rectangle, ShapeBase, SvgRaw, Text, VariantContainer
+  members:
+    Properties:
+      id: |-
+        ```
+        id?: string
+        ```
+
+        The optional unique identifier for the blur effect.
       value: |-
         ```
         value?: number
@@ -15436,6 +15466,7 @@ ShapeBase:
             | "luminosity";
         shadows: Shadow[];
         blur?: Blur;
+        backgroundBlur?: Blur;
         exports: Export[];
         boardX: number;
         boardY: number;

plugins/libs/plugin-types/index.d.ts

@@ -194,11 +194,6 @@ export interface Blur {
    * The optional unique identifier for the blur effect.
    */
   id?: string;
-  /**
-   * The optional type of the blur effect.
-   * Currently, only 'layer-blur' is supported.
-   */
-  type?: 'layer-blur';
   /**
    * The optional intensity value of the blur effect.
    */
@@ -3717,6 +3712,13 @@ export interface ShapeBase extends PluginData {
    */
   blur?: Blur;
 
+  /**
+   * The background blur effect applied to the shape.
+   * Background blur creates a blur effect on the content behind the shape,
+   * rather than on the shape's own content.
+   */
+  backgroundBlur?: Blur;
+
   /**
    * The export settings of the shape.
    */