@orion-studios/payload-studio 0.6.0-beta.180 → 0.6.0-beta.181

package/dist/builder-v2/client.js

@@ -1776,37 +1776,14 @@ var quickVerticalAlignStyles = {
 var negativePaddingCss = `
   .orion-builder-v2-negative-padding {
     display: flow-root;
-    isolation: isolate;
-    overflow: visible;
-    position: relative;
-  }
-
-  .orion-builder-v2-negative-padding.is-orion-negative-padding-bottom:not(.is-orion-negative-padding-top),
-  .orion-builder-v2-negative-padding.is-orion-negative-padding-right:not(.is-orion-negative-padding-left) {
-    overflow: hidden;
-  }
-
-  .orion-builder-v2-negative-padding::before {
-    background: var(--orion-negative-padding-background, transparent);
-    content: "";
-    inset: calc(-1 * var(--orion-negative-padding-top, 0px))
-      calc(-1 * var(--orion-negative-padding-right, 0px))
-      calc(-1 * var(--orion-negative-padding-bottom, 0px))
-      calc(-1 * var(--orion-negative-padding-left, 0px));
-    pointer-events: none;
-    position: absolute;
-    z-index: -1;
-  }
-
-  .orion-builder-v2-negative-padding > * {
     margin-top: var(--orion-negative-padding-top, 0px) !important;
     margin-right: var(--orion-negative-padding-right, 0px) !important;
     margin-bottom: var(--orion-negative-padding-bottom, 0px) !important;
     margin-left: var(--orion-negative-padding-left, 0px) !important;
     max-width: none !important;
+    overflow: visible;
     position: relative;
     width: calc(100% - var(--orion-negative-padding-left, 0px) - var(--orion-negative-padding-right, 0px)) !important;
-    z-index: 1;
   }
 `;
 var canvasSelectionCss = `
@@ -2062,6 +2039,17 @@ var getStoredOrionBackgroundColor = (attrs, style) => {
     block.backgroundColor
   );
 };
+var ensureNegativePaddingBackground = (component) => {
+  const attrs = component?.getAttributes?.() || {};
+  const style = component?.getStyle?.() || {};
+  if (!hasNegativePaddingState(attrs, style)) {
+    return;
+  }
+  const backgroundColor = getStoredOrionBackgroundColor(attrs, style);
+  if (backgroundColor && getStyleColorValue(style, "background-color") !== backgroundColor) {
+    component?.addStyle?.({ "background-color": backgroundColor });
+  }
+};
 var spacingTargetForComponent = (component) => {
   const element = component?.getEl?.();
   return element || null;
@@ -2692,7 +2680,7 @@ function GrapesPageEditor({
         } else if (negativePaddingBackground) {
           selected.addStyle?.({
             [negativePaddingBackgroundVariable]: negativePaddingBackground,
-            "background-color": "transparent"
+            "background-color": negativePaddingBackground
           });
           selected.addAttributes?.({ [negativePaddingBackgroundAttribute]: negativePaddingBackground });
         }
@@ -2744,7 +2732,7 @@ function GrapesPageEditor({
       selected.addStyle?.({
         ...backgroundColor ? {
           [negativePaddingBackgroundVariable]: backgroundColor,
-          "background-color": "transparent"
+          "background-color": backgroundColor
         } : {},
         [negativePaddingVariableForSide(side)]: negativeStyleValue,
         [property]: "0px"
@@ -3050,6 +3038,7 @@ function GrapesPageEditor({
       return;
     }
     hydrateSelectedTypographyStyleFromOrionBlock(component);
+    ensureNegativePaddingBackground(component);
     rememberComponentSnapshot(component);
     markSelectedCanvasBlock(component);
     refreshSelectedState(component);

package/dist/builder-v2/client.mjs

@@ -1652,37 +1652,14 @@ var quickVerticalAlignStyles = {
 var negativePaddingCss = `
   .orion-builder-v2-negative-padding {
     display: flow-root;
-    isolation: isolate;
-    overflow: visible;
-    position: relative;
-  }
-
-  .orion-builder-v2-negative-padding.is-orion-negative-padding-bottom:not(.is-orion-negative-padding-top),
-  .orion-builder-v2-negative-padding.is-orion-negative-padding-right:not(.is-orion-negative-padding-left) {
-    overflow: hidden;
-  }
-
-  .orion-builder-v2-negative-padding::before {
-    background: var(--orion-negative-padding-background, transparent);
-    content: "";
-    inset: calc(-1 * var(--orion-negative-padding-top, 0px))
-      calc(-1 * var(--orion-negative-padding-right, 0px))
-      calc(-1 * var(--orion-negative-padding-bottom, 0px))
-      calc(-1 * var(--orion-negative-padding-left, 0px));
-    pointer-events: none;
-    position: absolute;
-    z-index: -1;
-  }
-
-  .orion-builder-v2-negative-padding > * {
     margin-top: var(--orion-negative-padding-top, 0px) !important;
     margin-right: var(--orion-negative-padding-right, 0px) !important;
     margin-bottom: var(--orion-negative-padding-bottom, 0px) !important;
     margin-left: var(--orion-negative-padding-left, 0px) !important;
     max-width: none !important;
+    overflow: visible;
     position: relative;
     width: calc(100% - var(--orion-negative-padding-left, 0px) - var(--orion-negative-padding-right, 0px)) !important;
-    z-index: 1;
   }
 `;
 var canvasSelectionCss = `
@@ -1938,6 +1915,17 @@ var getStoredOrionBackgroundColor = (attrs, style) => {
     block.backgroundColor
   );
 };
+var ensureNegativePaddingBackground = (component) => {
+  const attrs = component?.getAttributes?.() || {};
+  const style = component?.getStyle?.() || {};
+  if (!hasNegativePaddingState(attrs, style)) {
+    return;
+  }
+  const backgroundColor = getStoredOrionBackgroundColor(attrs, style);
+  if (backgroundColor && getStyleColorValue(style, "background-color") !== backgroundColor) {
+    component?.addStyle?.({ "background-color": backgroundColor });
+  }
+};
 var spacingTargetForComponent = (component) => {
   const element = component?.getEl?.();
   return element || null;
@@ -2568,7 +2556,7 @@ function GrapesPageEditor({
         } else if (negativePaddingBackground) {
           selected.addStyle?.({
             [negativePaddingBackgroundVariable]: negativePaddingBackground,
-            "background-color": "transparent"
+            "background-color": negativePaddingBackground
           });
           selected.addAttributes?.({ [negativePaddingBackgroundAttribute]: negativePaddingBackground });
         }
@@ -2620,7 +2608,7 @@ function GrapesPageEditor({
       selected.addStyle?.({
         ...backgroundColor ? {
           [negativePaddingBackgroundVariable]: backgroundColor,
-          "background-color": "transparent"
+          "background-color": backgroundColor
         } : {},
         [negativePaddingVariableForSide(side)]: negativeStyleValue,
         [property]: "0px"
@@ -2926,6 +2914,7 @@ function GrapesPageEditor({
       return;
     }
     hydrateSelectedTypographyStyleFromOrionBlock(component);
+    ensureNegativePaddingBackground(component);
     rememberComponentSnapshot(component);
     markSelectedCanvasBlock(component);
     refreshSelectedState(component);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@orion-studios/payload-studio",
-  "version": "0.6.0-beta.180",
+  "version": "0.6.0-beta.181",
   "description": "Base CMS, builder, and custom admin toolkit for Orion Studios websites",
   "types": "./dist/index.d.ts",
   "main": "./dist/index.js",