@marvalt/wparser 0.1.30 → 0.1.32

package/dist/index.cjs

@@ -2059,6 +2059,42 @@ function extractBackgroundColor(block, context) {
     // Fallback: return null (no background applied)
     return null;
 }
+/**
+ * Extract and map text color from block attributes
+ * Uses colorMapper from context to convert WordPress theme colors to app CSS classes
+ *
+ * @param block - WordPress block to extract text color from
+ * @param context - Render context containing optional colorMapper
+ * @returns CSS class string (e.g., 'text-white') or null if no mapping
+ */
+function extractTextColor(block, context) {
+    const attrs = block.attributes || {};
+    const wpColorName = attrs['textColor'] || attrs['text'];
+    if (!wpColorName || typeof wpColorName !== 'string') {
+        return null;
+    }
+    // Use colorMapper from context if available
+    // Note: colorMapper might return combined classes like "bg-gray-900 text-white"
+    // We'll extract just the text color part
+    if (context.colorMapper) {
+        const mapped = context.colorMapper(wpColorName);
+        if (mapped) {
+            // If the mapped class includes text color (e.g., "bg-gray-900 text-white"),
+            // extract just the text color part
+            const textColorMatch = mapped.match(/\btext-\S+/);
+            if (textColorMatch) {
+                return textColorMatch[0];
+            }
+        }
+    }
+    // Special handling for common WordPress color names when used as text color
+    // These are common text color mappings that might not be in the colorMapper
+    const textColorMap = {
+        'contrast': 'text-gray-900', // Contrast text is typically dark/black
+        'base': 'text-white', // Base text on dark backgrounds
+    };
+    return textColorMap[wpColorName] || null;
+}
 /**
  * Extract spacer height from block attributes or innerHTML
  * Returns height in pixels, or null if not found
@@ -2234,9 +2270,11 @@ const Paragraph = ({ block, context }) => {
             // Render block-level content without <p> wrapper, but add spacing wrapper
             return jsxRuntimeExports.jsx("div", { className: spacing, children: parts });
         }
-        return jsxRuntimeExports.jsx("p", { className: buildClassName('text-gray-700', spacing, textAlign), children: parts });
+        // Don't hardcode text color - let it inherit from parent (e.g., column with background color)
+        return jsxRuntimeExports.jsx("p", { className: buildClassName(spacing, textAlign), children: parts });
     }
-    return jsxRuntimeExports.jsx("p", { className: buildClassName('text-gray-700', spacing, textAlign), children: content });
+    // Don't hardcode text color - let it inherit from parent (e.g., column with background color)
+    return jsxRuntimeExports.jsx("p", { className: buildClassName(spacing, textAlign), children: content });
 };
 const Heading = ({ block, children, context }) => {
     const attrs = block.attributes || {};
@@ -2249,7 +2287,10 @@ const Heading = ({ block, children, context }) => {
     const sizeClass = fontSize || (level === 1 ? 'text-4xl' : level === 2 ? 'text-3xl' : level === 3 ? 'text-2xl' : 'text-xl');
     // Get spacing from config with improved defaults
     const spacingClass = getHeadingSpacing(context.spacingConfig || context.registry.spacingConfig, level);
-    return (jsxRuntimeExports.jsx(Tag, { className: buildClassName('font-bold text-gray-900', sizeClass, textAlign, spacingClass), children: children ?? content }));
+    // Extract text color if specified, otherwise inherit from parent
+    const textColor = extractTextColor(block, context);
+    const textColorClass = textColor || ''; // Don't hardcode - let it inherit from parent
+    return (jsxRuntimeExports.jsx(Tag, { className: buildClassName('font-bold', textColorClass, sizeClass, textAlign, spacingClass), children: children ?? content }));
 };
 const Image = ({ block, context }) => {
     const imageAttrs = getImageAttributes(block);
@@ -2270,9 +2311,12 @@ const List = ({ block, children, context }) => {
     const { ordered } = attrs;
     const Tag = ordered ? 'ol' : 'ul';
     const spacing = getSpacing(context.spacingConfig || context.registry.spacingConfig, 'list', 'my-6');
-    return React.createElement(Tag, { className: buildClassName('list-disc pl-6 space-y-2 text-gray-700', spacing) }, children);
+    // Extract text color if specified, otherwise inherit from parent
+    const textColor = extractTextColor(block, context);
+    const textColorClass = textColor || ''; // Don't hardcode - let it inherit from parent
+    return React.createElement(Tag, { className: buildClassName('list-disc pl-6 space-y-2', textColorClass, spacing) }, children);
 };
-const ListItem = ({ block, children }) => {
+const ListItem = ({ block, children, context }) => {
     // List items store their content in innerHTML (e.g., "<li>Text<br>More text</li>")
     // We need to extract the content from inside the <li> tag and render it properly
     let content = null;
@@ -2289,12 +2333,15 @@ const ListItem = ({ block, children }) => {
             }
         }
     }
+    // Extract text color if specified, otherwise inherit from parent
+    const textColor = extractTextColor(block, context);
+    const textColorClass = textColor || ''; // Don't hardcode - let it inherit from parent
     // If we have both innerHTML content and children (innerBlocks), combine them
     if (content && children && React.Children.count(children) > 0) {
-        return (jsxRuntimeExports.jsxs("li", { className: "text-gray-700", children: [content, children] }));
+        return (jsxRuntimeExports.jsxs("li", { className: textColorClass || undefined, children: [content, children] }));
     }
     // Return content from innerHTML if available, otherwise use children
-    return jsxRuntimeExports.jsx("li", { className: "text-gray-700", children: content || children });
+    return jsxRuntimeExports.jsx("li", { className: textColorClass || undefined, children: content || children });
 };
 const Group = ({ block, children, context }) => {
     const attrs = block.attributes || {};
@@ -2326,15 +2373,17 @@ const Columns = ({ block, children }) => {
     const alignClass = getAlignmentClasses(align);
     return (jsxRuntimeExports.jsx("div", { className: buildClassName('grid grid-cols-1 md:grid-cols-2 gap-6 lg:gap-12', alignClass), children: children }));
 };
-const Column = ({ block, children }) => {
+const Column = ({ block, children, context }) => {
     const attrs = block.attributes || {};
     const width = attrs['width'];
+    // Extract background color using color mapper
+    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: "space-y-4", style: style, children: children }));
+    return (jsxRuntimeExports.jsx("div", { className: buildClassName('space-y-4 p-6 rounded-lg', backgroundColor), style: style, children: children }));
 };
 const Separator = () => jsxRuntimeExports.jsx("hr", { className: "border-gray-200 my-8" });
-const ButtonBlock = ({ block }) => {
+const ButtonBlock = ({ block, context }) => {
     const attrs = block.attributes || {};
     let url = attrs['url'];
     let text = attrs['text'];
@@ -2354,10 +2403,20 @@ const ButtonBlock = ({ block }) => {
     if (!url && !text)
         return null;
     const buttonText = text || 'Learn more';
+    // Extract background and text colors from button attributes
+    const backgroundColor = extractBackgroundColor(block, context);
+    const textColor = extractTextColor(block, context);
+    // Build button classes
+    // Background: use extracted or default (buttons need a background)
+    const bgClass = backgroundColor || 'bg-primary';
+    // Text color: use extracted if specified, otherwise inherit from parent (don't force default)
+    const textClass = textColor || '';
+    // Hover: adjust based on whether we have a custom background
+    const hoverClass = backgroundColor ? 'hover:opacity-90' : 'hover:bg-primary/90';
     // Handle internal vs external links
     const isExternal = url && (url.startsWith('http://') || url.startsWith('https://'));
     const linkProps = isExternal ? { target: '_blank', rel: 'noopener noreferrer' } : {};
-    return (jsxRuntimeExports.jsx("a", { href: url || '#', className: "inline-flex items-center justify-center rounded-md bg-primary px-6 py-3 text-primary-foreground font-medium hover:bg-primary/90 transition-colors", ...linkProps, children: buttonText }));
+    return (jsxRuntimeExports.jsx("a", { href: url || '#', className: buildClassName('inline-flex items-center justify-center rounded-md px-6 py-3 font-medium transition-colors', bgClass, textClass, hoverClass), ...linkProps, children: buttonText }));
 };
 const Cover = ({ block, children }) => {
     const attrs = block.attributes || {};
@@ -2863,6 +2922,7 @@ exports.extractSpacerHeight = extractSpacerHeight;
 exports.extractSubtitleFromInnerBlocks = extractSubtitleFromInnerBlocks;
 exports.extractTextAlign = extractTextAlign;
 exports.extractTextAlignFromInnerBlocks = extractTextAlignFromInnerBlocks;
+exports.extractTextColor = extractTextColor;
 exports.extractTextFromHTML = extractTextFromHTML;
 exports.extractTitle = extractTitle;
 exports.extractTitleFromInnerBlocks = extractTitleFromInnerBlocks;