@marvalt/wparser 0.1.73 → 0.1.75

package/dist/index.cjs

@@ -1398,6 +1398,7 @@ function renderBlock(block, registry, key, options, page) {
             page,
             colorMapper: registry.colorMapper,
             spacingConfig: registry.spacingConfig,
+            themePalette: registry.themePalette,
         }
     });
     if (options?.debugWrappers) {
@@ -2277,6 +2278,27 @@ function extractBackgroundColorValue(block, context) {
     }
     return null;
 }
+/**
+ * Return inline style for background color when no Tailwind class is available.
+ * Supports WordPress custom color (style.color.background) and theme slug (themePalette).
+ *
+ * @param block - WordPress block
+ * @param context - Render context with optional themePalette
+ * @returns React.CSSProperties with backgroundColor or null
+ */
+function getBackgroundInlineStyle(block, context) {
+    const attrs = block.attributes || {};
+    const styleAttr = attrs['style'];
+    const customBg = styleAttr?.color?.background;
+    if (typeof customBg === 'string' && customBg.trim()) {
+        return { backgroundColor: customBg.trim() };
+    }
+    const wpColorName = attrs['backgroundColor'] || attrs['background'];
+    if (typeof wpColorName === 'string' && context.themePalette?.[wpColorName]) {
+        return { backgroundColor: context.themePalette[wpColorName] };
+    }
+    return null;
+}
 /**
  * Extract gradient background from block attributes
  * WordPress stores gradients in attributes.style.color.gradient
@@ -2735,11 +2757,12 @@ const Columns = ({ block, children }) => {
 const Column = ({ block, children, context }) => {
     const attrs = block.attributes || {};
     const width = attrs['width'];
-    // Extract background color using color mapper
+    // Extract background color using color mapper (Tailwind class)
     const backgroundColor = extractBackgroundColor(block, context);
-    // Handle column width (e.g., "50%" becomes flex-basis)
-    const style = width ? { flexBasis: width } : undefined;
-    return (jsxRuntimeExports.jsx("div", { className: buildClassName('space-y-4 p-6 rounded-lg', backgroundColor), style: style, children: children }));
+    // Inline background when no class (custom color or theme slug via themePalette)
+    const backgroundStyle = getBackgroundInlineStyle(block, context);
+    const style = { ...(width ? { flexBasis: width } : {}), ...(backgroundStyle || {}) };
+    return (jsxRuntimeExports.jsx("div", { className: buildClassName('space-y-4 p-6 rounded-lg', backgroundColor), style: Object.keys(style).length ? style : undefined, children: children }));
 };
 const Separator = () => jsxRuntimeExports.jsx("hr", { className: "border-gray-200 my-8" });
 const ButtonBlock = ({ block, context }) => {
@@ -3366,6 +3389,7 @@ exports.extractVideoIframeFromInnerBlocks = extractVideoIframeFromInnerBlocks;
 exports.findMatchingMapping = findMatchingMapping;
 exports.findShortcodes = findShortcodes;
 exports.getAlignmentClasses = getAlignmentClasses;
+exports.getBackgroundInlineStyle = getBackgroundInlineStyle;
 exports.getBlockTextContent = getBlockTextContent;
 exports.getCloudflareVariantUrl = getCloudflareVariantUrl;
 exports.getContainerClasses = getContainerClasses;