@marvalt/wparser 0.1.40 → 0.1.42

package/dist/index.esm.js

@@ -2081,13 +2081,45 @@ function extractVideoIframeFromInnerBlocks(block) {
  */
 function extractBackgroundColor(block, context) {
     const attrs = block.attributes || {};
-    const wpColorName = attrs['backgroundColor'] || attrs['background'];
+    // Try multiple possible attribute names for background color
+    // WordPress can store it as backgroundColor, background, or in style
+    let wpColorName = attrs['backgroundColor'] ||
+        attrs['background'] ||
+        attrs['backgroundColorSlug'] ||
+        null;
+    // If not found in attributes, check className for WordPress color classes
+    // WordPress uses classes like: has-accent-4-background-color, has-contrast-background-color
+    if (!wpColorName && attrs['className']) {
+        const className = attrs['className'];
+        const colorMatch = className.match(/has-([\w-]+)-background-color/);
+        if (colorMatch && colorMatch[1]) {
+            // Convert kebab-case to slug (e.g., "accent-4" stays "accent-4", "contrast" stays "contrast")
+            wpColorName = colorMatch[1];
+        }
+    }
+    // Debug logging in development
+    if (typeof process !== 'undefined' && process.env?.NODE_ENV === 'development') {
+        if (!wpColorName && context.colorMapper) {
+            console.log('🔍 extractBackgroundColor - No backgroundColor found in block:', {
+                blockName: block.name,
+                hasClassName: !!attrs['className'],
+                className: attrs['className'],
+                hasStyle: !!attrs['style'],
+                availableAttrs: Object.keys(attrs),
+            });
+        }
+    }
     if (!wpColorName || typeof wpColorName !== 'string') {
         return null;
     }
     // Use colorMapper from context if available
     if (context.colorMapper) {
-        return context.colorMapper(wpColorName);
+        const result = context.colorMapper(wpColorName);
+        // Debug logging
+        if (typeof process !== 'undefined' && process.env?.NODE_ENV === 'development') {
+            console.log('🎨 extractBackgroundColor - Mapped', wpColorName, '→', result);
+        }
+        return result;
     }
     // Fallback: return null (no background applied)
     return null;
@@ -2102,34 +2134,62 @@ function extractBackgroundColor(block, context) {
  */
 function extractTextColor(block, context) {
     const attrs = block.attributes || {};
-    const wpColorName = attrs['textColor'] || attrs['text'];
+    // Try multiple possible attribute names for text color
+    let wpColorName = attrs['textColor'] ||
+        attrs['text'] ||
+        attrs['textColorSlug'] ||
+        null;
+    // If not found in attributes, check className for WordPress color classes
+    // WordPress uses classes like: has-accent-4-color, has-contrast-color
+    // Note: We need to avoid matching has-{color}-background-color, so we check for -color that's not followed by -background
+    if (!wpColorName && attrs['className']) {
+        const className = attrs['className'];
+        // Match: has-{color}-color (text color class, not background-color)
+        // This regex matches "has-accent-4-color" but not "has-accent-4-background-color"
+        const colorMatch = className.match(/has-([\w-]+)-color(?!-background)/);
+        if (colorMatch && colorMatch[1]) {
+            wpColorName = colorMatch[1];
+        }
+        // Debug logging
+        if (typeof process !== 'undefined' && process.env?.NODE_ENV === 'development' && !wpColorName) {
+            // Check if there are any color-related classes
+            const hasColorClass = className.includes('-color');
+            if (hasColorClass && context.colorMapper) {
+                console.log('🔍 extractTextColor - Found color class in className but no match:', {
+                    blockName: block.name,
+                    className: className,
+                    colorClasses: className.split(' ').filter(c => c.includes('-color')),
+                });
+            }
+        }
+    }
     if (!wpColorName || typeof wpColorName !== 'string') {
         return null;
     }
-    // Special handling for common WordPress color names when used as text color
-    // These mappings take precedence because text color semantics differ from background color
-    const textColorMap = {
-        'contrast': 'text-gray-900', // Contrast text is typically dark/black (opposite of contrast background)
-        'base': 'text-white', // Base text on dark backgrounds
-    };
-    // Check special text color mappings first
-    if (textColorMap[wpColorName]) {
-        return textColorMap[wpColorName];
-    }
     // 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
+    // Note: colorMapper returns combined classes like "bg-[#FBFAF3] text-gray-900"
+    // We need to 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];
+            // Extract text color classes (e.g., "text-white", "text-gray-900")
+            // Match text- classes but not text- in the middle of other classes
+            const textColorMatch = mapped.match(/\btext-[\w-]+/g);
+            if (textColorMatch && textColorMatch.length > 0) {
+                // Return the last text color class (in case there are multiple)
+                const result = textColorMatch[textColorMatch.length - 1];
+                // Debug logging
+                if (typeof process !== 'undefined' && process.env?.NODE_ENV === 'development') {
+                    console.log('🎨 extractTextColor - Mapped', wpColorName, '→', result, '(from:', mapped, ')');
+                }
+                return result;
             }
+            // If no text color class found, try to determine from the background color
+            // For theme palette colors, we can infer text color based on brightness
+            // But for now, return null if no text color is in the mapped result
         }
     }
+    // Fallback: return null (no text color applied, will inherit from parent)
     return null;
 }
 /**