@useinsider/guido 3.12.0-beta.98baf2f → 3.12.0-beta.ab050f8

package/dist/composables/useStripoEventHandler.js

@@ -3,33 +3,30 @@ import { useEditorStore as u } from "../stores/editor.js";
 import { useOnboardingStore as l } from "../stores/onboarding.js";
 import { useUnsubscribeStore as b } from "../stores/unsubscribe.js";
 const v = () => {
-  const { updateSyncModule: r, getSyncModule: s } = i(), d = u(), a = b(), c = {
+  const { updateSyncModule: d, getSyncModule: r } = i(), n = u(), s = b(), a = {
     block_dropped: ({ blockName: e }) => {
       if (e === "BLOCK_TEXT") {
-        const o = l(), t = !o.shouldShowOnboarding("textBlockOnboarding"), n = o.isActive("textBlockOnboarding");
-        if (t || n)
+        const o = l(), t = !o.shouldShowOnboarding("textBlockOnboarding"), c = o.isActive("textBlockOnboarding");
+        if (t || c)
           return;
         o.start("textBlockOnboarding");
       }
     },
     module_saved: async (e) => {
-      d.syncModulesEnabled && (console.debug("[module_saved] Saved module data:", e), await r(e));
+      n.syncModulesEnabled && (console.debug("[module_saved] Saved module data:", e), await d(e));
     },
     module_dropped: async (e) => {
-      if (!d.syncModulesEnabled)
+      if (!n.syncModulesEnabled)
         return;
-      const { moduleId: o, syncModule: t } = e;
-      if (!t)
-        return;
-      const n = await s(o);
-      console.debug("[module_dropped] Sync module data:", n), n.unsubscriptionPreferencePages.length && await a.fetchTemplates();
+      const { moduleId: o } = e, t = await r(o);
+      console.debug("[module_dropped] Sync module data:", t), t.unsubscriptionPreferencePages.length && await s.fetchTemplates();
     },
     module_updated: async (e) => {
-      d.syncModulesEnabled && (console.debug("[module_updated] Updated module data:", e), await r(e));
+      n.syncModulesEnabled && (console.debug("[module_updated] Updated module data:", e), await d(e));
     }
   };
   return { handleEvent: async (e, o) => {
-    const t = c[e];
+    const t = a[e];
     console.debug("Stripo Event: ", e, o), t && await t(o);
   } };
 };

package/dist/extensions/Blocks/Recommendation/constants/controlIds.js

@@ -1,4 +1,4 @@
-var o = /* @__PURE__ */ ((c) => (c.BUTTON_ALIGN = "recommendation-block-button-align-control", c.BUTTON_BORDER = "recommendation-block-button-border-control", c.BUTTON_BORDER_RADIUS = "recommendation-block-button-border-radius-control", c.BUTTON_COLOR = "recommendation-block-button-color-control", c.BUTTON_FIT_TO_CONTENT = "recommendation-block-button-fit-to-content-control", c.BUTTON_FONT_FAMILY = "recommendation-block-button-font-family-control", c.BUTTON_MARGINS = "recommendation-block-button-margins-control", c.BUTTON_PADDINGS = "recommendation-block-button-paddings-control", c.BUTTON_TEXT = "recommendation-block-button-text-control", c.BUTTON_TEXT_SIZE = "recommendation-block-button-text-size-control", c.BUTTON_TEXT_STYLE_AND_FONT_COLOR = "recommendation-block-button-text-style-and-font-color-control", c.NAME_ALIGN = "recommendation-block-name-align-control", c.NAME_BACKGROUND = "recommendation-block-name-background-control", c.NAME_COLOR = "recommendation-block-name-color-control", c.NAME_FONT_FAMILY = "recommendation-block-name-font-family-control", c.NAME_PADDINGS = "recommendation-block-name-paddings-control", c.NAME_SIZE = "recommendation-block-name-size-control", c.NAME_STYLE = "recommendation-block-name-style-control", c.NAME_TEXT_TRIM = "recommendation-block-name-text-trim-control", c.PRICE_ALIGN = "recommendation-block-price-align-control", c.PRICE_BACKGROUND = "recommendation-block-price-background-control", c.PRICE_COLOR = "recommendation-block-price-color-control", c.PRICE_FONT_FAMILY = "recommendation-block-price-font-family-control", c.PRICE_PADDINGS = "recommendation-block-price-paddings-control", c.PRICE_SIZE = "recommendation-block-price-size-control", c.PRICE_STYLE = "recommendation-block-price-style-control", c.OLD_PRICE_ALIGN = "recommendation-block-old-price-align-control", c.OLD_PRICE_BACKGROUND = "recommendation-block-old-price-background-control", c.OLD_PRICE_COLOR = "recommendation-block-old-price-color-control", c.OLD_PRICE_FONT_FAMILY = "recommendation-block-old-price-font-family-control", c.OLD_PRICE_PADDINGS = "recommendation-block-old-price-paddings-control", c.OLD_PRICE_SIZE = "recommendation-block-old-price-size-control", c.OLD_PRICE_STYLE = "recommendation-block-old-price-style-control", c.OMNIBUS_PRICE_ALIGN = "recommendation-block-omnibus-price-align-control", c.OMNIBUS_PRICE_BACKGROUND = "recommendation-block-omnibus-price-background-control", c.OMNIBUS_PRICE_COLOR = "recommendation-block-omnibus-price-color-control", c.OMNIBUS_PRICE_FONT_FAMILY = "recommendation-block-omnibus-price-font-family-control", c.OMNIBUS_PRICE_PADDINGS = "recommendation-block-omnibus-price-paddings-control", c.OMNIBUS_PRICE_SIZE = "recommendation-block-omnibus-price-size-control", c.OMNIBUS_PRICE_STYLE = "recommendation-block-omnibus-price-style-control", c.OMNIBUS_PRICE_TEXT_BEFORE = "recommendation-block-omnibus-price-text-before-control", c.OMNIBUS_PRICE_TEXT_AFTER = "recommendation-block-omnibus-price-text-after-control", c.OMNIBUS_DISCOUNT_ALIGN = "recommendation-block-omnibus-discount-align-control", c.OMNIBUS_DISCOUNT_BACKGROUND = "recommendation-block-omnibus-discount-background-control", c.OMNIBUS_DISCOUNT_COLOR = "recommendation-block-omnibus-discount-color-control", c.OMNIBUS_DISCOUNT_FONT_FAMILY = "recommendation-block-omnibus-discount-font-family-control", c.OMNIBUS_DISCOUNT_PADDINGS = "recommendation-block-omnibus-discount-paddings-control", c.OMNIBUS_DISCOUNT_SIZE = "recommendation-block-omnibus-discount-size-control", c.OMNIBUS_DISCOUNT_STYLE = "recommendation-block-omnibus-discount-style-control", c.OMNIBUS_DISCOUNT_TEXT_BEFORE = "recommendation-block-omnibus-discount-text-before-control", c.OMNIBUS_DISCOUNT_TEXT_AFTER = "recommendation-block-omnibus-discount-text-after-control", c.IMAGE_SIZE = "recommendation-block-image-size-control", c.IMAGE_MARGINS = "recommendation-block-image-margins-control", c.CUSTOM_ATTR_ALIGN = "recommendation-block-custom-attr-align-control", c.CUSTOM_ATTR_BACKGROUND = "recommendation-block-custom-attr-background-control", c.CUSTOM_ATTR_COLOR = "recommendation-block-custom-attr-color-control", c.CUSTOM_ATTR_FONT_FAMILY = "recommendation-block-custom-attr-font-family-control", c.CUSTOM_ATTR_PADDINGS = "recommendation-block-custom-attr-paddings-control", c.CUSTOM_ATTR_SIZE = "recommendation-block-custom-attr-size-control", c.CUSTOM_ATTR_STYLE = "recommendation-block-custom-attr-style-control", c.CUSTOM_ATTR_TEXT_TRIM = "recommendation-block-custom-attr-text-trim-control", c.SYNC_INFO_MESSAGE = "recommendation-block-sync-info-message", c))(o || {});
+var o = /* @__PURE__ */ ((c) => (c.BLOCK_BACKGROUND = "recommendation-block-background-color-control", c.BUTTON_ALIGN = "recommendation-block-button-align-control", c.BUTTON_BORDER = "recommendation-block-button-border-control", c.BUTTON_BORDER_RADIUS = "recommendation-block-button-border-radius-control", c.BUTTON_COLOR = "recommendation-block-button-color-control", c.BUTTON_FIT_TO_CONTENT = "recommendation-block-button-fit-to-content-control", c.BUTTON_FONT_FAMILY = "recommendation-block-button-font-family-control", c.BUTTON_MARGINS = "recommendation-block-button-margins-control", c.BUTTON_PADDINGS = "recommendation-block-button-paddings-control", c.BUTTON_TEXT = "recommendation-block-button-text-control", c.BUTTON_TEXT_SIZE = "recommendation-block-button-text-size-control", c.BUTTON_TEXT_STYLE_AND_FONT_COLOR = "recommendation-block-button-text-style-and-font-color-control", c.NAME_ALIGN = "recommendation-block-name-align-control", c.NAME_BACKGROUND = "recommendation-block-name-background-control", c.NAME_COLOR = "recommendation-block-name-color-control", c.NAME_FONT_FAMILY = "recommendation-block-name-font-family-control", c.NAME_PADDINGS = "recommendation-block-name-paddings-control", c.NAME_SIZE = "recommendation-block-name-size-control", c.NAME_STYLE = "recommendation-block-name-style-control", c.NAME_TEXT_TRIM = "recommendation-block-name-text-trim-control", c.PRICE_ALIGN = "recommendation-block-price-align-control", c.PRICE_BACKGROUND = "recommendation-block-price-background-control", c.PRICE_COLOR = "recommendation-block-price-color-control", c.PRICE_FONT_FAMILY = "recommendation-block-price-font-family-control", c.PRICE_PADDINGS = "recommendation-block-price-paddings-control", c.PRICE_SIZE = "recommendation-block-price-size-control", c.PRICE_STYLE = "recommendation-block-price-style-control", c.OLD_PRICE_ALIGN = "recommendation-block-old-price-align-control", c.OLD_PRICE_BACKGROUND = "recommendation-block-old-price-background-control", c.OLD_PRICE_COLOR = "recommendation-block-old-price-color-control", c.OLD_PRICE_FONT_FAMILY = "recommendation-block-old-price-font-family-control", c.OLD_PRICE_PADDINGS = "recommendation-block-old-price-paddings-control", c.OLD_PRICE_SIZE = "recommendation-block-old-price-size-control", c.OLD_PRICE_STYLE = "recommendation-block-old-price-style-control", c.OMNIBUS_PRICE_ALIGN = "recommendation-block-omnibus-price-align-control", c.OMNIBUS_PRICE_BACKGROUND = "recommendation-block-omnibus-price-background-control", c.OMNIBUS_PRICE_COLOR = "recommendation-block-omnibus-price-color-control", c.OMNIBUS_PRICE_FONT_FAMILY = "recommendation-block-omnibus-price-font-family-control", c.OMNIBUS_PRICE_PADDINGS = "recommendation-block-omnibus-price-paddings-control", c.OMNIBUS_PRICE_SIZE = "recommendation-block-omnibus-price-size-control", c.OMNIBUS_PRICE_STYLE = "recommendation-block-omnibus-price-style-control", c.OMNIBUS_PRICE_TEXT_BEFORE = "recommendation-block-omnibus-price-text-before-control", c.OMNIBUS_PRICE_TEXT_AFTER = "recommendation-block-omnibus-price-text-after-control", c.OMNIBUS_DISCOUNT_ALIGN = "recommendation-block-omnibus-discount-align-control", c.OMNIBUS_DISCOUNT_BACKGROUND = "recommendation-block-omnibus-discount-background-control", c.OMNIBUS_DISCOUNT_COLOR = "recommendation-block-omnibus-discount-color-control", c.OMNIBUS_DISCOUNT_FONT_FAMILY = "recommendation-block-omnibus-discount-font-family-control", c.OMNIBUS_DISCOUNT_PADDINGS = "recommendation-block-omnibus-discount-paddings-control", c.OMNIBUS_DISCOUNT_SIZE = "recommendation-block-omnibus-discount-size-control", c.OMNIBUS_DISCOUNT_STYLE = "recommendation-block-omnibus-discount-style-control", c.OMNIBUS_DISCOUNT_TEXT_BEFORE = "recommendation-block-omnibus-discount-text-before-control", c.OMNIBUS_DISCOUNT_TEXT_AFTER = "recommendation-block-omnibus-discount-text-after-control", c.IMAGE_SIZE = "recommendation-block-image-size-control", c.IMAGE_MARGINS = "recommendation-block-image-margins-control", c.CUSTOM_ATTR_ALIGN = "recommendation-block-custom-attr-align-control", c.CUSTOM_ATTR_BACKGROUND = "recommendation-block-custom-attr-background-control", c.CUSTOM_ATTR_COLOR = "recommendation-block-custom-attr-color-control", c.CUSTOM_ATTR_FONT_FAMILY = "recommendation-block-custom-attr-font-family-control", c.CUSTOM_ATTR_PADDINGS = "recommendation-block-custom-attr-paddings-control", c.CUSTOM_ATTR_SIZE = "recommendation-block-custom-attr-size-control", c.CUSTOM_ATTR_STYLE = "recommendation-block-custom-attr-style-control", c.CUSTOM_ATTR_TEXT_TRIM = "recommendation-block-custom-attr-text-trim-control", c.SYNC_INFO_MESSAGE = "recommendation-block-sync-info-message", c))(o || {});
 export {
   o as RecommendationControlId
 };

package/dist/extensions/Blocks/Recommendation/controls/blockBackground/index.js

@@ -0,0 +1,11 @@
+import { createBlockBackgroundColorControl as o } from "../../../controlFactories.js";
+import { RecommendationControlId as r } from "../../constants/controlIds.js";
+import { BLOCK_ROOT_SELECTOR as t } from "../../constants/selectors.js";
+const C = ".esd-block-text", m = o(
+  r.BLOCK_BACKGROUND,
+  t,
+  C
+);
+export {
+  m as BlockBackgroundColorControl
+};

package/dist/extensions/Blocks/Recommendation/extension.js

@@ -1,4 +1,4 @@
-import { ExtensionBuilder as r } from "../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
+import { ExtensionBuilder as t } from "../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
 import { RecommendationBlock as m } from "./block.js";
 import n from "./canvasPreview.css.js";
 import { RecommendationBlockControl as i } from "./controls/main/index.js";
@@ -6,42 +6,44 @@ import "./constants/selectors.js";
 import "./store/recommendation.js";
 import "./utils/captureStyleTemplates.js";
 import { NameControls as e } from "./controls/name/index.js";
-import { PriceControls as s } from "./controls/price/index.js";
-import { OldPriceControls as l } from "./controls/oldPrice/index.js";
+import { PriceControls as l } from "./controls/price/index.js";
+import { OldPriceControls as s } from "./controls/oldPrice/index.js";
 import { OmnibusPriceControls as p } from "./controls/omnibusPrice/index.js";
 import { OmnibusDiscountControls as a } from "./controls/omnibusDiscount/index.js";
 import { ButtonControls as c } from "./controls/button/index.js";
-import { ImageControls as f } from "./controls/image/index.js";
-import { CustomAttributeControls as C } from "./controls/customAttribute/index.js";
+import { ImageControls as C } from "./controls/image/index.js";
+import { CustomAttributeControls as f } from "./controls/customAttribute/index.js";
 import { SpacingControl as d } from "./controls/spacing/index.js";
-import { CardBackgroundColorControl as u } from "./controls/cardBackground/index.js";
-import { RecommendationCardCompositionControl as g } from "./controls/cardComposition/index.js";
-import { SyncInfoMessageControl as y } from "./controls/syncInfoMessage.js";
+import { BlockBackgroundColorControl as u } from "./controls/blockBackground/index.js";
+import { CardBackgroundColorControl as g } from "./controls/cardBackground/index.js";
+import { RecommendationCardCompositionControl as y } from "./controls/cardComposition/index.js";
+import { SyncInfoMessageControl as B } from "./controls/syncInfoMessage.js";
 import { RecommendationIconsRegistry as P } from "./iconsRegistry.js";
 import R from "./recommendation.css.js";
 import { SettingsPanel as S } from "./settingsPanel.js";
-const w = [
+const k = [
   e,
-  s,
   l,
+  s,
   p,
   a,
   c,
-  f,
-  C
-], B = [
+  C,
+  f
+], w = [
   i,
   u,
-  d,
   g,
-  y
+  d,
+  y,
+  B
 ], b = [
-  ...B,
-  ...w.flatMap((o) => Object.values(o))
-], U = b.reduce(
-  (o, t) => o.addControl(t),
-  new r().addBlock(m).withSettingsPanelRegistry(S)
+  ...w,
+  ...k.flatMap((o) => Object.values(o))
+], W = b.reduce(
+  (o, r) => o.addControl(r),
+  new t().addBlock(m).withSettingsPanelRegistry(S)
 ).addStyles(R).withPreviewStyles(n).withIconsRegistry(P).build();
 export {
-  U as default
+  W as default
 };

package/dist/extensions/Blocks/Recommendation/settingsPanel.js

@@ -1,9 +1,9 @@
-import { SettingsPanelRegistry as E, SettingsPanelTab as _, SettingsTab as O, ContainerControls as C, TextControls as R } from "../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
-import { BLOCK_ID as U } from "./block.js";
+import { SettingsPanelRegistry as E, SettingsPanelTab as _, SettingsTab as I, ContainerControls as C } from "../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
+import { BLOCK_ID as R } from "./block.js";
 import { RecommendationBlockId as S } from "./constants/blockIds.js";
 import { RecommendationControlId as T } from "./constants/controlIds.js";
 import "./constants/selectors.js";
-import { CONTROL_BLOCK_ID as A } from "./controls/main/index.js";
+import { CONTROL_BLOCK_ID as U } from "./controls/main/index.js";
 import "./store/recommendation.js";
 import "./utils/captureStyleTemplates.js";
 import "./controls/name/index.js";
@@ -13,37 +13,38 @@ import "./controls/omnibusPrice/index.js";
 import "./controls/omnibusDiscount/index.js";
 import "./controls/button/index.js";
 import "./controls/image/index.js";
-import { SPACING_CONTROL_ID as L } from "./controls/spacing/index.js";
-import { CARD_BACKGROUND_COLOR_CONTROL_ID as D } from "./controls/cardBackground/index.js";
-import { COMPOSITION_CONTROL_BLOCK_ID as B } from "./controls/cardComposition/index.js";
+import { SPACING_CONTROL_ID as A } from "./controls/spacing/index.js";
+import "./controls/blockBackground/index.js";
+import { CARD_BACKGROUND_COLOR_CONTROL_ID as L } from "./controls/cardBackground/index.js";
+import { COMPOSITION_CONTROL_BLOCK_ID as D } from "./controls/cardComposition/index.js";
 import { SYNC_INFO_MESSAGE_CONTROL_ID as N } from "./controls/syncInfoMessage.js";
-class d extends E {
-  registerBlockControls(I) {
-    I[U] = [
+class s extends E {
+  registerBlockControls(O) {
+    O[R] = [
       new _(
-        O.SETTINGS,
+        I.SETTINGS,
         [
-          A,
+          U,
           C.EXTERNAL_INDENTS
         ]
       ),
       new _(
-        O.STYLES,
+        I.STYLES,
         [
-          R.TEXT_BLOCK_BACKGROUND_COLOR,
-          D,
-          L
+          T.BLOCK_BACKGROUND,
+          L,
+          A
         ]
       ),
       new _(
         "Card Composition",
         [
-          B
+          D
         ]
       ).withLabel(this.api.translate("Card Composition"))
-    ], I[S.NAME] = [
+    ], O[S.NAME] = [
       new _(
-        O.SETTINGS,
+        I.SETTINGS,
         [
           N,
           T.NAME_STYLE,
@@ -53,7 +54,7 @@ class d extends E {
         ]
       ),
       new _(
-        O.STYLES,
+        I.STYLES,
         [
           T.NAME_BACKGROUND,
           T.NAME_FONT_FAMILY,
@@ -61,9 +62,9 @@ class d extends E {
           T.NAME_COLOR
         ]
       )
-    ], I[S.PRICE] = [
+    ], O[S.PRICE] = [
       new _(
-        O.SETTINGS,
+        I.SETTINGS,
         [
           N,
           T.PRICE_STYLE,
@@ -72,7 +73,7 @@ class d extends E {
         ]
       ),
       new _(
-        O.STYLES,
+        I.STYLES,
         [
           T.PRICE_BACKGROUND,
           T.PRICE_FONT_FAMILY,
@@ -80,9 +81,9 @@ class d extends E {
           T.PRICE_COLOR
         ]
       )
-    ], I[S.OLD_PRICE] = [
+    ], O[S.OLD_PRICE] = [
       new _(
-        O.SETTINGS,
+        I.SETTINGS,
         [
           N,
           T.OLD_PRICE_STYLE,
@@ -91,7 +92,7 @@ class d extends E {
         ]
       ),
       new _(
-        O.STYLES,
+        I.STYLES,
         [
           T.OLD_PRICE_BACKGROUND,
           T.OLD_PRICE_FONT_FAMILY,
@@ -99,9 +100,9 @@ class d extends E {
           T.OLD_PRICE_COLOR
         ]
       )
-    ], I[S.OMNIBUS_PRICE] = [
+    ], O[S.OMNIBUS_PRICE] = [
       new _(
-        O.SETTINGS,
+        I.SETTINGS,
         [
           N,
           T.OMNIBUS_PRICE_TEXT_BEFORE,
@@ -112,7 +113,7 @@ class d extends E {
         ]
       ),
       new _(
-        O.STYLES,
+        I.STYLES,
         [
           T.OMNIBUS_PRICE_BACKGROUND,
           T.OMNIBUS_PRICE_FONT_FAMILY,
@@ -120,9 +121,9 @@ class d extends E {
           T.OMNIBUS_PRICE_COLOR
         ]
       )
-    ], I[S.OMNIBUS_DISCOUNT] = [
+    ], O[S.OMNIBUS_DISCOUNT] = [
       new _(
-        O.SETTINGS,
+        I.SETTINGS,
         [
           N,
           T.OMNIBUS_DISCOUNT_TEXT_BEFORE,
@@ -133,7 +134,7 @@ class d extends E {
         ]
       ),
       new _(
-        O.STYLES,
+        I.STYLES,
         [
           T.OMNIBUS_DISCOUNT_BACKGROUND,
           T.OMNIBUS_DISCOUNT_FONT_FAMILY,
@@ -141,9 +142,9 @@ class d extends E {
           T.OMNIBUS_DISCOUNT_COLOR
         ]
       )
-    ], I[S.BUTTON] = [
+    ], O[S.BUTTON] = [
       new _(
-        O.SETTINGS,
+        I.SETTINGS,
         [
           N,
           T.BUTTON_TEXT,
@@ -153,7 +154,7 @@ class d extends E {
         ]
       ),
       new _(
-        O.STYLES,
+        I.STYLES,
         [
           T.BUTTON_COLOR,
           T.BUTTON_FONT_FAMILY,
@@ -164,9 +165,9 @@ class d extends E {
           T.BUTTON_BORDER
         ]
       )
-    ], I[S.CUSTOM_ATTRIBUTE] = [
+    ], O[S.CUSTOM_ATTRIBUTE] = [
       new _(
-        O.SETTINGS,
+        I.SETTINGS,
         [
           T.CUSTOM_ATTR_STYLE,
           T.CUSTOM_ATTR_ALIGN,
@@ -175,7 +176,7 @@ class d extends E {
         ]
       ),
       new _(
-        O.STYLES,
+        I.STYLES,
         [
           T.CUSTOM_ATTR_BACKGROUND,
           T.CUSTOM_ATTR_FONT_FAMILY,
@@ -183,9 +184,9 @@ class d extends E {
           T.CUSTOM_ATTR_COLOR
         ]
       )
-    ], I[S.IMAGE] = [
+    ], O[S.IMAGE] = [
       new _(
-        O.SETTINGS,
+        I.SETTINGS,
         [
           N,
           T.IMAGE_SIZE,
@@ -196,5 +197,5 @@ class d extends E {
   }
 }
 export {
-  d as SettingsPanel
+  s as SettingsPanel
 };

package/dist/extensions/Blocks/controlFactories.js

@@ -1,80 +1,80 @@
-import { TextAlignBuiltInControl as a, TextColorBuiltInControl as g, TextSizeBuiltInControl as f, TextStyleBuiltInControl as x, TextFontFamilyBuiltInControl as C, ButtonBackgroundColorBuiltInControl as T, TextPaddingsBuiltInControl as B, ImageSizeBuiltInControl as m, ImageMarginsBuiltInControl as y, ButtonAlignBuiltInControl as I, ButtonBorderBuiltInControl as S, ButtonBorderRadiusBuiltInControl as A, ButtonColorBuiltInControl as b, ButtonFontFamilyBuiltInControl as N, ButtonMarginsBuiltInControl as q, ButtonPaddingsBuiltInControl as $, ButtonTextBuiltInControl as k, ButtonTextSizeBuiltInControl as p, ButtonTextStyleAndFontColorBuiltInControl as h, ButtonFitToContainerBuiltInControl as F, TextLineSpacingBuiltInControl as M } from "../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
-const R = "buttonTextStyleForm", _ = "backgroundColor", E = /* @__PURE__ */ new Set(["", "transparent", "rgba(0, 0, 0, 0)"]);
-function z(o, n, r) {
-  return class extends a {
+import { TextAlignBuiltInControl as C, TextColorBuiltInControl as T, TextSizeBuiltInControl as B, TextStyleBuiltInControl as m, TextFontFamilyBuiltInControl as y, ButtonBackgroundColorBuiltInControl as g, TextPaddingsBuiltInControl as A, ImageSizeBuiltInControl as S, ImageMarginsBuiltInControl as I, ButtonAlignBuiltInControl as b, ButtonBorderBuiltInControl as k, ButtonBorderRadiusBuiltInControl as N, ButtonColorBuiltInControl as h, ButtonFontFamilyBuiltInControl as q, ButtonMarginsBuiltInControl as p, ButtonPaddingsBuiltInControl as $, ButtonTextBuiltInControl as F, ButtonTextSizeBuiltInControl as v, ButtonTextStyleAndFontColorBuiltInControl as M, ButtonFitToContainerBuiltInControl as R, TextLineSpacingBuiltInControl as _ } from "../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
+const O = "buttonTextStyleForm", f = "backgroundColor", x = /* @__PURE__ */ new Set(["", "transparent", "rgba(0, 0, 0, 0)"]), E = ["elementColor", f], K = "esd-extension-block-id";
+function U(r, e, o) {
+  return class extends C {
     getId() {
-      return o;
+      return r;
     }
-    getTargetNodes(e) {
-      if (!n || !r)
-        return [e];
-      const t = e.closest(r);
-      return t ? t.querySelectorAll(`[esd-extension-block-id="${n}"]`) : [];
+    getTargetNodes(n) {
+      if (!e || !o)
+        return [n];
+      const t = n.closest(o);
+      return t ? t.querySelectorAll(`[esd-extension-block-id="${e}"]`) : [];
     }
   };
 }
-function v(o, n, r) {
-  return class extends g {
+function Y(r, e, o) {
+  return class extends T {
     getId() {
-      return o;
+      return r;
     }
-    getTargetNodes(e) {
-      if (!n || !r)
-        return [e];
-      const t = e.closest(r);
-      return t ? t.querySelectorAll(`[esd-extension-block-id="${n}"]`) : [];
+    getTargetNodes(n) {
+      if (!e || !o)
+        return [n];
+      const t = n.closest(o);
+      return t ? t.querySelectorAll(`[esd-extension-block-id="${e}"]`) : [];
     }
   };
 }
-function P(o, n, r) {
-  return class extends f {
+function G(r, e, o) {
+  return class extends B {
     getId() {
-      return o;
+      return r;
     }
-    getTargetNodes(e) {
-      if (!n || !r)
-        return [e];
-      const t = e.closest(r);
-      return t ? t.querySelectorAll(`[esd-extension-block-id="${n}"]`) : [];
+    getTargetNodes(n) {
+      if (!e || !o)
+        return [n];
+      const t = n.closest(o);
+      return t ? t.querySelectorAll(`[esd-extension-block-id="${e}"]`) : [];
     }
   };
 }
-function D(o, n, r) {
-  return class extends x {
+function H(r, e, o) {
+  return class extends m {
     getId() {
-      return o;
+      return r;
     }
-    getTargetNodes(e) {
-      if (!n || !r)
-        return [e];
-      const t = e.closest(r);
-      return t ? t.querySelectorAll(`[esd-extension-block-id="${n}"]`) : [];
+    getTargetNodes(n) {
+      if (!e || !o)
+        return [n];
+      const t = n.closest(o);
+      return t ? t.querySelectorAll(`[esd-extension-block-id="${e}"]`) : [];
     }
   };
 }
-function K(o, n, r) {
-  return class extends C {
+function V(r, e, o) {
+  return class extends y {
     getId() {
-      return o;
+      return r;
     }
-    getTargetNodes(e) {
-      if (!n || !r)
-        return [e];
-      const t = e.closest(r);
-      return t ? t.querySelectorAll(`[esd-extension-block-id="${n}"]`) : [];
+    getTargetNodes(n) {
+      if (!e || !o)
+        return [n];
+      const t = n.closest(o);
+      return t ? t.querySelectorAll(`[esd-extension-block-id="${e}"]`) : [];
     }
   };
 }
-function L(o, n, r) {
-  return class extends T {
+function w(r, e, o) {
+  return class extends g {
     getId() {
-      return o;
+      return r;
     }
-    getTargetNodes(e) {
-      if (!n || !r)
-        return [e];
-      const t = e.closest(r);
-      return t ? t.querySelectorAll(`[esd-extension-block-id="${n}"]`) : [];
+    getTargetNodes(n) {
+      if (!e || !o)
+        return [n];
+      const t = n.closest(o);
+      return t ? t.querySelectorAll(`[esd-extension-block-id="${e}"]`) : [];
     }
     /**
      * Mirrors the picked background onto each target cell as an INLINE style.
@@ -85,148 +85,211 @@ function L(o, n, r) {
      * (SD-143023). Writing the inline here keeps it the single source of truth and in
      * sync on every edit. Merged into the parent control's single patch (no extra apply).
      */
-    getAdditionalModifications(e) {
-      const t = this.getTargetNodes(e);
+    getAdditionalModifications(n) {
+      const t = this.getTargetNodes(n);
       if (!t.length)
         return;
-      const s = this.api.getValues()[_], i = !s || E.has(s), c = this.api.getDocumentModifier();
+      const s = this.api.getValues()[f], i = !s || x.has(s), l = this.api.getDocumentModifier();
       return t.forEach((u) => {
-        const l = c.modifyHtml(u);
-        i ? l.removeStyle("background-color") : l.setStyle("background-color", s);
-      }), c;
+        const c = l.modifyHtml(u);
+        i ? c.removeStyle("background-color") : c.setStyle("background-color", s);
+      }), l;
     }
   };
 }
-function U(o, n, r) {
-  return class extends B {
+function L(r) {
+  const e = E.find((n) => n in r);
+  if (!e)
+    return;
+  const o = r[e];
+  return typeof o == "string" ? o : "";
+}
+function z(r, e) {
+  return e.startsWith(".") && "hasClass" in r && r.hasClass(e.slice(1));
+}
+function a(r, e) {
+  try {
+    return z(r, e) ? r : r.closest(e) ?? void 0;
+  } catch {
+    return;
+  }
+}
+function D(r, e) {
+  if (!("querySelectorAll" in r))
+    return [];
+  try {
+    return r.querySelectorAll(e).filter((o) => "getAttribute" in o && !o.getAttribute(K));
+  } catch {
+    return [];
+  }
+}
+function W(r, e, o) {
+  return class extends g {
     getId() {
-      return o;
+      return r;
+    }
+    /** The parent control renders its own generic title; restore the block-level wording. */
+    getLabels() {
+      return { title: this.api.translate("Block Background Color") };
+    }
+    getTargetNodes(n) {
+      const t = a(n, e);
+      return t ? [t] : [];
     }
-    getTargetNodes(e) {
-      if (!n || !r)
-        return [e];
-      const t = e.closest(r);
-      return t ? t.querySelectorAll(`[esd-extension-block-id="${n}"]`) : [];
+    /**
+     * Writes the picked background onto the block as an inline style plus a `bgcolor`
+     * attribute. This is the whole mechanism, not a mirror: the parent control's own
+     * write never reaches the block element (verified at runtime). `bgcolor` is the
+     * channel Outlook honours on a `<td>`, and matches what the migrator emits.
+     */
+    getAdditionalModifications(n) {
+      const t = a(n, e);
+      if (!t)
+        return;
+      const s = L(this.api.getValues());
+      if (s === void 0)
+        return;
+      const i = !s || x.has(s), l = this.api.getDocumentModifier();
+      return [
+        t,
+        ...D(t, o)
+      ].forEach((c) => {
+        const d = l.modifyHtml(c);
+        i ? d.removeStyle("background-color").removeAttribute("bgcolor") : d.setStyle("background-color", s).setAttribute("bgcolor", s);
+      }), l;
     }
   };
 }
-function Y(o, n, r) {
-  return class extends M {
+function X(r, e, o) {
+  return class extends A {
     getId() {
-      return o;
+      return r;
     }
-    getTargetNodes(e) {
-      return [e];
+    getTargetNodes(n) {
+      if (!e || !o)
+        return [n];
+      const t = n.closest(o);
+      return t ? t.querySelectorAll(`[esd-extension-block-id="${e}"]`) : [];
     }
   };
 }
-function w(o, n, r = ".ins-recommendation-product-container") {
-  return class extends I {
+function j(r, e, o) {
+  return class extends _ {
     getId() {
-      return o;
+      return r;
     }
-    getTargetNodes(e) {
-      const t = e.closest(r);
-      return t ? t.querySelectorAll(`[esd-extension-block-id="${n}"]`) : [];
+    getTargetNodes(n) {
+      return [n];
     }
   };
 }
-function G(o, n, r = ".ins-recommendation-product-container") {
+function J(r, e, o = ".ins-recommendation-product-container") {
   return class extends b {
     getId() {
-      return o;
+      return r;
     }
-    getTargetNodes(e) {
-      const t = e.closest(r);
-      return t ? t.querySelectorAll(`[esd-extension-block-id="${n}"]`) : [];
+    getTargetNodes(n) {
+      const t = n.closest(o);
+      return t ? t.querySelectorAll(`[esd-extension-block-id="${e}"]`) : [];
     }
   };
 }
-function H(o, n, r = ".ins-recommendation-product-container") {
-  return class extends S {
+function Q(r, e, o = ".ins-recommendation-product-container") {
+  return class extends h {
     getId() {
-      return o;
+      return r;
     }
-    getTargetNodes(e) {
-      const t = e.closest(r);
-      return t ? t.querySelectorAll(`[esd-extension-block-id="${n}"]`) : [];
+    getTargetNodes(n) {
+      const t = n.closest(o);
+      return t ? t.querySelectorAll(`[esd-extension-block-id="${e}"]`) : [];
     }
   };
 }
-function V(o, n, r = ".ins-recommendation-product-container") {
-  return class extends A {
+function Z(r, e, o = ".ins-recommendation-product-container") {
+  return class extends k {
     getId() {
-      return o;
+      return r;
     }
-    getTargetNodes(e) {
-      const t = e.closest(r);
-      return t ? t.querySelectorAll(`[esd-extension-block-id="${n}"]`) : [];
+    getTargetNodes(n) {
+      const t = n.closest(o);
+      return t ? t.querySelectorAll(`[esd-extension-block-id="${e}"]`) : [];
     }
   };
 }
-function W(o, n, r = ".ins-recommendation-product-container") {
+function tt(r, e, o = ".ins-recommendation-product-container") {
   return class extends N {
     getId() {
-      return o;
+      return r;
     }
-    getTargetNodes(e) {
-      const t = e.closest(r);
-      return t ? t.querySelectorAll(`[esd-extension-block-id="${n}"]`) : [];
+    getTargetNodes(n) {
+      const t = n.closest(o);
+      return t ? t.querySelectorAll(`[esd-extension-block-id="${e}"]`) : [];
     }
   };
 }
-function X(o, n, r = ".ins-recommendation-product-container") {
+function et(r, e, o = ".ins-recommendation-product-container") {
   return class extends q {
     getId() {
-      return o;
+      return r;
+    }
+    getTargetNodes(n) {
+      const t = n.closest(o);
+      return t ? t.querySelectorAll(`[esd-extension-block-id="${e}"]`) : [];
+    }
+  };
+}
+function nt(r, e, o = ".ins-recommendation-product-container") {
+  return class extends p {
+    getId() {
+      return r;
     }
-    getTargetNodes(e) {
-      const t = e.closest(r);
-      return t ? t.querySelectorAll(`[esd-extension-block-id="${n}"]`) : [];
+    getTargetNodes(n) {
+      const t = n.closest(o);
+      return t ? t.querySelectorAll(`[esd-extension-block-id="${e}"]`) : [];
     }
   };
 }
-function j(o, n, r = ".ins-recommendation-product-container") {
+function rt(r, e, o = ".ins-recommendation-product-container") {
   return class extends $ {
     getId() {
-      return o;
+      return r;
     }
-    getTargetNodes(e) {
-      const t = e.closest(r);
-      return t ? t.querySelectorAll(`[esd-extension-block-id="${n}"]`) : [];
+    getTargetNodes(n) {
+      const t = n.closest(o);
+      return t ? t.querySelectorAll(`[esd-extension-block-id="${e}"]`) : [];
     }
   };
 }
-function J(o, n, r = ".ins-recommendation-product-container") {
-  return class extends k {
+function ot(r, e, o = ".ins-recommendation-product-container") {
+  return class extends F {
     getId() {
-      return o;
+      return r;
     }
-    getTargetNodes(e) {
-      const t = e.closest(r);
-      return t ? t.querySelectorAll(`[esd-extension-block-id="${n}"]`) : [];
+    getTargetNodes(n) {
+      const t = n.closest(o);
+      return t ? t.querySelectorAll(`[esd-extension-block-id="${e}"]`) : [];
     }
   };
 }
-function Q(o, n, r = ".ins-recommendation-product-container") {
-  return class extends p {
+function st(r, e, o = ".ins-recommendation-product-container") {
+  return class extends v {
     getId() {
-      return o;
+      return r;
     }
-    getTargetNodes(e) {
-      const t = e.closest(r);
-      return t ? t.querySelectorAll(`[esd-extension-block-id="${n}"]`) : [];
+    getTargetNodes(n) {
+      const t = n.closest(o);
+      return t ? t.querySelectorAll(`[esd-extension-block-id="${e}"]`) : [];
     }
   };
 }
-function Z(o, n, r) {
-  return class extends h {
+function it(r, e, o) {
+  return class extends M {
     getId() {
-      return o;
+      return r;
     }
-    getTargetNodes(e) {
-      const t = e.closest(r);
-      return t ? t.querySelectorAll(`[esd-extension-block-id="${n}"]`) : [];
+    getTargetNodes(n) {
+      const t = n.closest(o);
+      return t ? t.querySelectorAll(`[esd-extension-block-id="${e}"]`) : [];
     }
     /**
      * Propagates Bold/Italic to ALL product buttons, not just the focused one.
@@ -238,58 +301,58 @@ function Z(o, n, r) {
      * (`buttonTextStyleForm.{bold,italic}`) because the patched node isn't updated yet
      * when this runs. Returned modifications are merged into the parent control's patch.
      */
-    getAdditionalModifications(e) {
-      const t = e.closest(r);
+    getAdditionalModifications(n) {
+      const t = n.closest(o);
       if (!t)
         return;
-      const s = t.querySelectorAll(`[esd-extension-block-id="${n}"] a.es-button`);
+      const s = t.querySelectorAll(`[esd-extension-block-id="${e}"] a.es-button`);
       if (!s.length)
         return;
-      const i = this.api.getValues()[R];
+      const i = this.api.getValues()[O];
       if (!i)
         return;
-      const c = i.bold ? "bold" : "normal", u = i.italic ? "italic" : "normal", l = this.api.getDocumentModifier();
+      const l = i.bold ? "bold" : "normal", u = i.italic ? "italic" : "normal", c = this.api.getDocumentModifier();
       return s.forEach((d) => {
-        l.modifyHtml(d).setStyle("font-weight", c).setStyle("font-style", u);
-      }), l;
+        c.modifyHtml(d).setStyle("font-weight", l).setStyle("font-style", u);
+      }), c;
     }
   };
 }
-function tt(o, n, r) {
-  return class extends F {
+function lt(r, e, o) {
+  return class extends R {
     getId() {
-      return o;
+      return r;
     }
-    getTargetNodes(e) {
-      const t = e.closest(r);
-      return t ? t.querySelectorAll(`[esd-extension-block-id="${n}"]`) : [];
+    getTargetNodes(n) {
+      const t = n.closest(o);
+      return t ? t.querySelectorAll(`[esd-extension-block-id="${e}"]`) : [];
     }
   };
 }
-function et(o, n, r) {
-  return class extends m {
+function ct(r, e, o) {
+  return class extends S {
     getId() {
-      return o;
+      return r;
     }
-    getTargetNodes(e) {
+    getTargetNodes(n) {
       try {
-        const t = e.closest(r);
-        return t ? t.querySelectorAll(`[esd-extension-block-id="${n}"]`) : [];
+        const t = n.closest(o);
+        return t ? t.querySelectorAll(`[esd-extension-block-id="${e}"]`) : [];
       } catch {
         return [];
       }
     }
   };
 }
-function nt(o, n, r) {
-  return class extends y {
+function ut(r, e, o) {
+  return class extends I {
     getId() {
-      return o;
+      return r;
     }
-    getTargetNodes(e) {
+    getTargetNodes(n) {
       try {
-        const t = e.closest(r);
-        return t ? t.querySelectorAll(`[esd-extension-block-id="${n}"]`) : [];
+        const t = n.closest(o);
+        return t ? t.querySelectorAll(`[esd-extension-block-id="${e}"]`) : [];
       } catch {
         return [];
       }
@@ -297,25 +360,26 @@ function nt(o, n, r) {
   };
 }
 export {
-  w as createButtonAlignControl,
-  H as createButtonBorderControl,
-  V as createButtonBorderRadiusControl,
-  G as createButtonColorControl,
-  tt as createButtonFitToContainerControl,
-  W as createButtonFontFamilyControl,
-  X as createButtonMarginsControl,
-  j as createButtonPaddingsControl,
-  J as createButtonTextControl,
-  Q as createButtonTextSizeControl,
-  Z as createButtonTextStyleAndFontColorControl,
-  nt as createImageMarginsControl,
-  et as createImageSizeControl,
-  U as createPaddingsControl,
-  z as createTextAlignControl,
-  L as createTextBackgroundColorControl,
-  v as createTextColorControl,
-  K as createTextFontFamilyControl,
-  Y as createTextLineSpacingControl,
-  P as createTextSizeControl,
-  D as createTextStyleControl
+  W as createBlockBackgroundColorControl,
+  J as createButtonAlignControl,
+  Z as createButtonBorderControl,
+  tt as createButtonBorderRadiusControl,
+  Q as createButtonColorControl,
+  lt as createButtonFitToContainerControl,
+  et as createButtonFontFamilyControl,
+  nt as createButtonMarginsControl,
+  rt as createButtonPaddingsControl,
+  ot as createButtonTextControl,
+  st as createButtonTextSizeControl,
+  it as createButtonTextStyleAndFontColorControl,
+  ut as createImageMarginsControl,
+  ct as createImageSizeControl,
+  X as createPaddingsControl,
+  U as createTextAlignControl,
+  w as createTextBackgroundColorControl,
+  Y as createTextColorControl,
+  V as createTextFontFamilyControl,
+  j as createTextLineSpacingControl,
+  G as createTextSizeControl,
+  H as createTextStyleControl
 };

package/dist/services/stripoApi.js

@@ -2,78 +2,77 @@ import { useHttp as d } from "../composables/useHttp.js";
 import { useToaster as m } from "../composables/useToaster.js";
 import { MAX_DEFAULT_TEMPLATE_ID as y } from "../enums/defaults.js";
 import { useBlankTemplate as f } from "./blankTemplate.js";
-const I = () => {
-  const { get: a, post: i } = d(), { handleError: s } = m(), { getBlankTemplate: n } = f();
+const D = () => {
+  const { get: s, post: u } = d(), { handleError: r } = m(), { getBlankTemplate: o } = f();
   return {
     getToken: async () => {
       try {
-        const { data: t } = await a("/stripo/get-user-token");
+        const { data: t } = await s("/stripo/get-user-token");
         return t.body.token;
       } catch (t) {
-        return s(t, "Failed to fetch token"), "";
+        return r(t, "Failed to fetch token"), "";
       }
     },
     getCustomFonts: async () => {
       try {
-        const { data: t = [] } = await a("/stripo/get-partner-custom-fonts");
+        const { data: t = [] } = await s("/stripo/get-partner-custom-fonts");
         return t.map((e) => ({
           ...e,
           active: !0
         }));
       } catch (t) {
-        return s(t, "Failed to fetch custom fonts"), [];
+        return r(t, "Failed to fetch custom fonts"), [];
       }
     },
     getDefaultTemplate: async () => {
       try {
-        const t = new URLSearchParams(window.location.search), e = t.get("default-template"), r = t.get("master"), c = e ? parseInt(e) : 0, l = c >= 1 && c <= y ? c : 0;
-        if (!l && !r)
-          return await n();
-        const p = `/stripo/default-template/${l}`, { data: u } = await a(p), o = typeof u == "string" ? JSON.parse(u) : u;
-        return !o || typeof o != "object" || !("html" in o) || !("css" in o) ? await n() : o;
+        const t = new URLSearchParams(window.location.search), e = t.get("default-template"), l = t.get("master"), n = e ? parseInt(e) : 0, i = n >= 1 && n <= y ? n : 0;
+        if (!i && !l)
+          return await o();
+        const p = `/stripo/default-template/${i}`, { data: c } = await s(p), a = typeof c == "string" ? JSON.parse(c) : c;
+        return !a || typeof a != "object" || !("html" in a) || !("css" in a) ? await o() : a;
       } catch (t) {
-        return s(t, "Failed to fetch default template"), n();
+        return r(t, "Failed to fetch default template"), o();
       }
     },
     getSyncModulesStatus: async () => {
       try {
-        const { data: t } = await a("/newsletter/settings/synchronisation-in-modules-status");
+        const { data: t } = await s("/newsletter/settings/synchronisation-in-modules-status");
         return t.status;
       } catch (t) {
-        return s(t, "Failed to fetch sync modules status"), !1;
+        return r(t, "Failed to fetch sync modules status"), !1;
       }
     },
     updateSyncModule: async (t) => {
       try {
-        return await i(`/stripo/stripo-modules/${t.moduleId}/update`), !0;
+        return await u(`/stripo/stripo-modules/${t.moduleId}/update`), !0;
       } catch (e) {
-        return s(e, "Failed to update sync module"), !1;
+        return r(e, "Failed to update sync module"), !1;
       }
     },
     getSyncModule: async (t) => {
-      const e = {
-        id: 0,
-        stripoId: 0,
-        unsubscriptionPreferencePages: []
-      };
       try {
-        const { data: r } = await a(`/stripo/stripo-modules/${t}/get`);
-        return Array.isArray(r) || !Array.isArray(r == null ? void 0 : r.unsubscriptionPreferencePages) ? e : r;
-      } catch (r) {
-        return s(r, "Failed to get sync module"), e;
+        const { data: e } = await s(`/stripo/stripo-modules/${t}/get`);
+        return e;
+      } catch (e) {
+        return r(e, "Failed to get sync module"), {
+          id: 0,
+          stripoId: 0,
+          unsubscriptionPreferencePages: []
+        };
       }
     },
     setSyncModuleUnsubscriptionPages: async (t) => {
       if (t.length === 0)
         return !0;
       try {
-        return await i("/stripo/stripo-modules/set-unsubscription-preference-pages", t), !0;
+        return await u("/stripo/stripo-modules/set-unsubscription-preference-pages", t), !0;
       } catch (e) {
-        return s(e, "Failed to set unsubscription preference pages"), !1;
+        return r(e, "Failed to set unsubscription preference pages"), !1;
       }
     }
   };
 };
 export {
-  I as useStripoApi
+  D as useStripoApi
 };

package/dist/src/extensions/Blocks/Recommendation/constants/controlIds.d.ts

@@ -3,6 +3,7 @@
  * These IDs are returned by the getId() method of each control
  */
 export declare enum RecommendationControlId {
+    BLOCK_BACKGROUND = "recommendation-block-background-color-control",
     BUTTON_ALIGN = "recommendation-block-button-align-control",
     BUTTON_BORDER = "recommendation-block-button-border-control",
     BUTTON_BORDER_RADIUS = "recommendation-block-button-border-radius-control",

package/dist/src/extensions/Blocks/Recommendation/controls/blockBackground/index.d.ts

@@ -0,0 +1,14 @@
+export declare const BlockBackgroundColorControl: {
+    new (): {
+        getId(): string;
+        getLabels(): {
+            title: string;
+        };
+        getTargetNodes(root: import("@stripoinc/ui-editor-extensions").ImmutableHtmlNode): import("@stripoinc/ui-editor-extensions").ImmutableHtmlNode[];
+        getAdditionalModifications(root: import("@stripoinc/ui-editor-extensions").ImmutableHtmlNode): import("@stripoinc/ui-editor-extensions").TemplateModifier<import("@stripoinc/ui-editor-extensions").HtmlNodeModifier, import("@stripoinc/ui-editor-extensions").CssNodeModifier> | undefined;
+        getParentControlId(): string;
+        api: import("@stripoinc/ui-editor-extensions").ControlApi;
+        getModificationDescription(): import("@stripoinc/ui-editor-extensions").ModificationDescription | undefined;
+        isVisible(_node: import("@stripoinc/ui-editor-extensions").ImmutableHtmlNode): boolean;
+    };
+};

package/dist/src/extensions/Blocks/Recommendation/controls/index.d.ts

@@ -20,6 +20,7 @@ export { ButtonControls } from './button';
 export { ImageControls } from './image';
 export { CustomAttributeControls } from './customAttribute';
 export { SpacingControl, SPACING_CONTROL_ID } from './spacing';
+export { BlockBackgroundColorControl } from './blockBackground';
 export { CardBackgroundColorControl, CARD_BACKGROUND_COLOR_CONTROL_ID } from './cardBackground';
 export { RecommendationCardCompositionControl, COMPOSITION_CONTROL_BLOCK_ID } from './cardComposition';
 export { SyncInfoMessageControl, SYNC_INFO_MESSAGE_CONTROL_ID } from './syncInfoMessage';

package/dist/src/extensions/Blocks/controlFactories.d.ts

@@ -115,6 +115,36 @@ export declare function createTextBackgroundColorControl(controlId: string, targ
         isVisible(_node: ImmutableHtmlNode): boolean;
     };
 };
+/**
+ * Factory function to create a background color control for a whole extension block.
+ *
+ * Stripo's built-in block-background control resolves its own target and descends to the
+ * nearest `.esd-block-text`, which inside a Recommendation block is the title cell rather
+ * than the block itself (SD-145082). Overriding `getTargetNodes` moves that resolution here.
+ */
+export declare function createBlockBackgroundColorControl(controlId: string, blockRootSelector?: string, 
+/** Extra cells inside the block to keep in sync — e.g. a title cell holding a pre-fix color. */
+additionalTargetSelector?: string): {
+    new (): {
+        getId(): string;
+        /** The parent control renders its own generic title; restore the block-level wording. */
+        getLabels(): {
+            title: string;
+        };
+        getTargetNodes(root: ImmutableHtmlNode): ImmutableHtmlNode[];
+        /**
+         * Writes the picked background onto the block as an inline style plus a `bgcolor`
+         * attribute. This is the whole mechanism, not a mirror: the parent control's own
+         * write never reaches the block element (verified at runtime). `bgcolor` is the
+         * channel Outlook honours on a `<td>`, and matches what the migrator emits.
+         */
+        getAdditionalModifications(root: ImmutableHtmlNode): import("@stripoinc/ui-editor-extensions").TemplateModifier<import("@stripoinc/ui-editor-extensions").HtmlNodeModifier, import("@stripoinc/ui-editor-extensions").CssNodeModifier> | undefined;
+        getParentControlId(): string;
+        api: import("@stripoinc/ui-editor-extensions").ControlApi;
+        getModificationDescription(): import("@stripoinc/ui-editor-extensions").ModificationDescription | undefined;
+        isVisible(_node: ImmutableHtmlNode): boolean;
+    };
+};
 /**
  * Factory function to create paddings controls for different block elements
  * When targetBlockId and containerSelector are not provided, applies directly to root

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@useinsider/guido",
-  "version": "3.12.0-beta.98baf2f",
+  "version": "3.12.0-beta.ab050f8",
   "description": "Guido is a Vue + TypeScript wrapper for Email Plugin. Easily embed the email editor in your Vue applications.",
   "main": "./dist/guido.umd.cjs",
   "module": "./dist/library.js",