easy-email-pro-theme 1.7.1 → 1.7.2

package/lib/index.js

@@ -1662,6 +1662,7 @@ const ElementTools$1 = ({ element, nodeElement, path: path2 }) => {
   const isSectionCategory = BlockManager.getBlockByType(
     element.type
   ).category.includes(ElementCategory.SECTION);
+  const isHroCategory = NodeUtils.isHeroElement(element);
   const isWrapperCategory = BlockManager.getBlockByType(
     element.type
   ).category.includes(ElementCategory.WRAPPER);
@@ -1674,6 +1675,7 @@ const ElementTools$1 = ({ element, nodeElement, path: path2 }) => {
     {
       contentEditable: false,
       className: "element-tools-container",
+      "data-is-hero-category": isHroCategory,
       "data-is-section-category": isSectionCategory,
       "data-is-wrapper-category": isWrapperCategory,
       "data-is-full-width": isFullWidth
@@ -1743,7 +1745,7 @@ const ElementSelected$1 = ({ element, nodeElement, path: path2 }) => {
     nodeElement
   ));
 };
-const styleText$8 = "[data-slate-block=page] {\n  --sectionElementOffset: 100px ;\n}\n\n@media screen and (max-width: 850px) {\n  [data-slate-block=page] {\n    --sectionElementOffset: 70px ;\n  }\n}\n.section-category-hover {\n  height: 100%;\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: calc(100% + 2 * var(--sectionElementOffset));\n  transform: translate(calc(-1 * var(--sectionElementOffset)), 0);\n}\n\n[data-is-full-width=true].section-category-hover {\n  width: calc(100% - 4px);\n  transform: none;\n}\n\n[data-is-section-category=true].element-tools-container {\n  width: calc(100% + 2 * var(--sectionElementOffset));\n  transform: translate(calc(-1 * var(--sectionElementOffset)), 0);\n}\n\n[data-is-section-category=true][data-is-full-width=true].element-tools-container {\n  width: calc(100% - 4px);\n  transform: none;\n}\n\n.wrapper-category-hover {\n  height: 100%;\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: calc(100% + 2 * var(--sectionElementOffset));\n  transform: translate(calc(-1 * var(--sectionElementOffset)), 0);\n}\n\n[data-is-full-width=true].wrapper-category-hover {\n  width: calc(100% - 4px);\n  transform: none;\n}\n\n[data-is-wrapper-category=true].element-tools-container {\n  width: calc(100% + 2 * var(--sectionElementOffset));\n  transform: translate(calc(-1 * var(--sectionElementOffset)), 0);\n  position: absolute;\n}\n\n[data-is-wrapper-category=true][data-is-full-width=true].element-tools-container {\n  width: calc(100% - 4px);\n  transform: none;\n}\n\n.wrapper-category-hover {\n  height: 100%;\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: calc(100% + 2 * var(--sectionElementOffset));\n  transform: translate(calc(-1 * var(--sectionElementOffset)), 0);\n}\n\n[data-is-wrapper-category=true].element-tools-container {\n  width: calc(100% + 2 * var(--sectionElementOffset));\n  transform: translate(calc(-1 * var(--sectionElementOffset)), 0);\n  position: absolute;\n}";
+const styleText$8 = "[data-slate-block=page] {\n  --sectionElementOffset: 100px ;\n}\n\n@media screen and (max-width: 850px) {\n  [data-slate-block=page] {\n    --sectionElementOffset: 70px ;\n  }\n}\n.section-category-hover {\n  height: 100%;\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: calc(100% + 2 * var(--sectionElementOffset));\n  transform: translate(calc(-1 * var(--sectionElementOffset)), 0);\n}\n\n.hero-category-hover {\n  height: 100%;\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: calc(100% + 2 * var(--sectionElementOffset));\n  transform: translate(calc(-1 * var(--sectionElementOffset)), 0);\n}\n\n[data-is-full-width=true].section-category-hover {\n  width: calc(100% - 4px);\n  transform: none;\n}\n\n[data-is-hero-category=true].element-tools-container {\n  width: calc(100% + 2 * var(--sectionElementOffset));\n  transform: translate(calc(-1 * var(--sectionElementOffset)), 0);\n}\n\n[data-is-section-category=true].element-tools-container {\n  width: calc(100% + 2 * var(--sectionElementOffset));\n  transform: translate(calc(-1 * var(--sectionElementOffset)), 0);\n}\n\n[data-is-section-category=true][data-is-full-width=true].element-tools-container {\n  width: calc(100% - 4px);\n  transform: none;\n}\n\n.wrapper-category-hover {\n  height: 100%;\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: calc(100% + 2 * var(--sectionElementOffset));\n  transform: translate(calc(-1 * var(--sectionElementOffset)), 0);\n}\n\n[data-is-full-width=true].wrapper-category-hover {\n  width: calc(100% - 4px);\n  transform: none;\n}\n\n[data-is-wrapper-category=true].element-tools-container {\n  width: calc(100% + 2 * var(--sectionElementOffset));\n  transform: translate(calc(-1 * var(--sectionElementOffset)), 0);\n  position: absolute;\n}\n\n[data-is-wrapper-category=true][data-is-full-width=true].element-tools-container {\n  width: calc(100% - 4px);\n  transform: none;\n}\n\n.wrapper-category-hover {\n  height: 100%;\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: calc(100% + 2 * var(--sectionElementOffset));\n  transform: translate(calc(-1 * var(--sectionElementOffset)), 0);\n}\n\n[data-is-wrapper-category=true].element-tools-container {\n  width: calc(100% + 2 * var(--sectionElementOffset));\n  transform: translate(calc(-1 * var(--sectionElementOffset)), 0);\n  position: absolute;\n}";
 const ElementPlaceholder$1 = ({ element, nodeElement, isSelected, isHover, path: path2 }) => {
   const { deleteBlock } = useElementInteract();
   const onPointerDown = (ev) => {
@@ -1752,6 +1754,7 @@ const ElementPlaceholder$1 = ({ element, nodeElement, isSelected, isHover, path:
     deleteBlock(Path.parent(path2));
   };
   const isSectionCategory = NodeUtils.isSectionElement(element);
+  const isHeroCategory = NodeUtils.isHeroElement(element);
   const isWrapperCategory = NodeUtils.isWrapperElement(element);
   let renderContent = null;
   if (isSectionCategory) {
@@ -1763,6 +1766,9 @@ const ElementPlaceholder$1 = ({ element, nodeElement, isSelected, isHover, path:
         className: "section-category-hover"
       }
     ));
+  }
+  if (isHeroCategory) {
+    renderContent = /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement("div", { className: "hero-category-hover" }));
   } else if (isWrapperCategory) {
     const isFullWidth = get(element.attributes, "full-width") == "full-width";
     renderContent = /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, isFullWidth ? /* @__PURE__ */ React__default.createElement("tbody", null, /* @__PURE__ */ React__default.createElement("tr", null, /* @__PURE__ */ React__default.createElement("td", null, /* @__PURE__ */ React__default.createElement(
@@ -20321,7 +20327,11 @@ function AttributesContainer$3({
       component: AttributeField.Height,
       path: nodePath,
       name: "height",
-      label: t("Height")
+      label: t("Height"),
+      formItem: {
+        required: true,
+        requiredSymbol: true
+      }
     }
   ), /* @__PURE__ */ React__default.createElement(
     ResponsiveField,
@@ -20338,12 +20348,33 @@ function AttributesContainer$3({
       hideBackgroundSize: true,
       name: ""
     }
+  ), /* @__PURE__ */ React__default.createElement(
+    ResponsiveField,
+    {
+      component: AttributeField.Width,
+      path: nodePath,
+      name: "background-width",
+      formItem: {
+        required: true,
+        requiredSymbol: true,
+        help: t(
+          `The width of the image used is required for Outlook compatibility.`
+        )
+      }
+    }
   ), /* @__PURE__ */ React__default.createElement(
     ResponsiveField,
     {
       component: AttributeField.Height,
       path: nodePath,
-      name: "background-height"
+      name: "background-height",
+      formItem: {
+        required: true,
+        requiredSymbol: true,
+        help: t(
+          `The height of the image used is required for Outlook compatibility.`
+        )
+      }
     }
   ), /* @__PURE__ */ React__default.createElement(Divider$1, null), /* @__PURE__ */ React__default.createElement(
     ResponsiveField,
@@ -39488,6 +39519,7 @@ const ElementTools = ({ element, nodeElement, path: path2 }) => {
   const isSectionCategory = BlockManager.getBlockByType(
     element.type
   ).category.includes(ElementCategory.SECTION);
+  const isHroCategory = NodeUtils.isHeroElement(element);
   const isWrapperCategory = BlockManager.getBlockByType(
     element.type
   ).category.includes(ElementCategory.WRAPPER);
@@ -39525,6 +39557,7 @@ const ElementTools = ({ element, nodeElement, path: path2 }) => {
       contentEditable: false,
       className: "element-tools-container",
       "data-is-section-category": isSectionCategory,
+      "data-is-hero-category": isHroCategory,
       "data-is-wrapper-category": isWrapperCategory,
       "data-is-full-width": isFullWidth
     },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "easy-email-pro-theme",
-  "version": "1.7.1",
+  "version": "1.7.2",
   "description": "",
   "files": [
     "lib"