@marvalt/wparser 0.1.57 → 0.1.59

package/dist/index.cjs

@@ -1874,11 +1874,31 @@ function extractTextAlign(block) {
 }
 /**
  * Extract font size from block
+ * Checks both fontSize attribute and style.typography.fontSize
  */
-function extractFontSize(block) {
+function extractFontSize(block, context) {
     const attrs = block.attributes || {};
+    // Check inherited font size from context (from parent group)
+    if (context && context.inheritedFontSize) {
+        return context.inheritedFontSize;
+    }
+    // Check style.typography.fontSize (can be a preset name or CSS value)
+    const styleFontSize = attrs['style']?.typography?.fontSize;
+    if (styleFontSize) {
+        if (typeof styleFontSize === 'string') {
+            return styleFontSize;
+        }
+        // If it's an object, it might have a value property
+        if (typeof styleFontSize === 'object' && styleFontSize.value) {
+            return styleFontSize.value;
+        }
+    }
+    // Check fontSize attribute (preset name like 'small', 'medium', etc.)
     const fontSize = attrs['fontSize'];
-    return typeof fontSize === 'string' ? fontSize : null;
+    if (typeof fontSize === 'string') {
+        return fontSize;
+    }
+    return null;
 }
 /**
  * Convert image URL to Cloudflare variant if it's a Cloudflare URL
@@ -2156,17 +2176,46 @@ function extractGradientBackground(block) {
 /**
  * Extract and map text color from block attributes
  * Uses colorMapper from context to convert WordPress theme colors to app CSS classes
+ * Also checks style.color.text and inherited colors from parent groups
  *
  * @param block - WordPress block to extract text color from
- * @param context - Render context containing optional colorMapper
+ * @param context - Render context containing optional colorMapper and themePalette
  * @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'];
+    // Check inherited text color from context (from parent group)
+    if (context.inheritedTextColor) {
+        return context.inheritedTextColor;
+    }
+    // Check style.color.text (can be a color name or CSS variable)
+    const styleTextColor = attrs['style']?.color?.text;
+    let wpColorName = null;
+    if (styleTextColor) {
+        if (typeof styleTextColor === 'string') {
+            wpColorName = styleTextColor;
+        }
+        else if (typeof styleTextColor === 'object' && styleTextColor.color) {
+            wpColorName = styleTextColor.color;
+        }
+    }
+    // Fall back to textColor or text attribute
+    if (!wpColorName) {
+        wpColorName = attrs['textColor'] || attrs['text'];
+    }
     if (!wpColorName || typeof wpColorName !== 'string') {
         return null;
     }
+    // If it's a CSS variable or hex color, return it directly
+    if (wpColorName.startsWith('var(') || wpColorName.startsWith('#')) {
+        return `text-[${wpColorName}]`;
+    }
+    // Get theme palette from context if available
+    const themePalette = context?.themePalette || context.registry?.themePalette || context.registry?.wpStyles?.theme_palette;
+    if (themePalette && themePalette[wpColorName]) {
+        // Return inline style class with actual color value
+        return `text-[${themePalette[wpColorName]}]`;
+    }
     // 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 = {
@@ -2341,6 +2390,9 @@ const Paragraph = ({ block, context }) => {
     // Extract text color if specified, otherwise inherit from parent (CSS variables handle default)
     const textColor = extractTextColor(block, context);
     const textColorClass = textColor || ''; // Don't hardcode - let CSS variables handle default
+    // Extract font size if specified
+    const fontSize = extractFontSize(block, context);
+    const fontSizeClass = fontSize ? getFontSizeClasses(fontSize) : '';
     // Check if innerHTML contains HTML elements (like links, strong, em, etc.)
     const hasHTML = block.innerHTML && /<[a-z][\s\S]*>/i.test(block.innerHTML);
     // Check if content contains shortcodes (check both HTML and text content)
@@ -2376,24 +2428,44 @@ const Paragraph = ({ block, context }) => {
         const hasBlockLevelContent = React.Children.toArray(parts).some((part) => isBlockLevelElement(part));
         if (hasBlockLevelContent) {
             // Render block-level content without <p> wrapper, but add spacing wrapper
-            return jsxRuntimeExports.jsx("div", { className: buildClassName(spacing, textColorClass), children: parts });
+            const fontSize = extractFontSize(block, context);
+            const fontSizeClass = fontSize ? getFontSizeClasses(fontSize) : '';
+            return jsxRuntimeExports.jsx("div", { className: buildClassName(spacing, textColorClass, fontSizeClass), children: parts });
         }
         // Render shortcode parts inside paragraph (shortcodes are processed as React components)
-        return jsxRuntimeExports.jsx("p", { className: buildClassName(spacing, textAlign, textColorClass), children: parts });
+        return jsxRuntimeExports.jsx("p", { className: buildClassName(spacing, textAlign, textColorClass, fontSizeClass), children: parts });
     }
     // If innerHTML contains HTML elements but no shortcodes, render it directly (preserves links, formatting, etc.)
     if (hasHTML && block.innerHTML) {
-        return jsxRuntimeExports.jsx("p", { className: buildClassName(spacing, textAlign, textColorClass), dangerouslySetInnerHTML: { __html: htmlContent } });
+        // Check if innerHTML already contains a paragraph tag - if so, extract content to avoid double nesting
+        const trimmedContent = htmlContent.trim();
+        if (trimmedContent.startsWith('<p') && trimmedContent.endsWith('</p>')) {
+            // Extract content from paragraph tag
+            const contentMatch = trimmedContent.match(/<p[^>]*>(.*?)<\/p>/s);
+            if (contentMatch) {
+                const innerContent = contentMatch[1];
+                // Check if inner content also has a paragraph (double nesting)
+                if (innerContent.trim().startsWith('<p')) {
+                    // Render as div to avoid invalid HTML
+                    return jsxRuntimeExports.jsx("div", { className: buildClassName(spacing, textAlign, textColorClass, fontSizeClass), dangerouslySetInnerHTML: { __html: innerContent } });
+                }
+                // Render the extracted content in a paragraph
+                return jsxRuntimeExports.jsx("p", { className: buildClassName(spacing, textAlign, textColorClass, fontSizeClass), dangerouslySetInnerHTML: { __html: innerContent } });
+            }
+        }
+        return jsxRuntimeExports.jsx("p", { className: buildClassName(spacing, textAlign, textColorClass, fontSizeClass), dangerouslySetInnerHTML: { __html: htmlContent } });
     }
     // No HTML and no shortcodes, just render plain text content
-    return jsxRuntimeExports.jsx("p", { className: buildClassName(spacing, textAlign, textColorClass), children: textContent });
+    return jsxRuntimeExports.jsx("p", { className: buildClassName(spacing, textAlign, textColorClass, fontSizeClass), children: textContent });
 };
 const Heading = ({ block, children, context }) => {
     const attrs = block.attributes || {};
     const { level = 2 } = attrs;
     const content = getBlockTextContent(block);
     const textAlign = getTextAlignClasses(attrs['textAlign']);
-    const fontSize = getFontSizeClasses(attrs['fontSize']);
+    // Extract font size - check both fontSize attribute and style.typography.fontSize
+    const extractedFontSize = extractFontSize(block, context);
+    const fontSize = extractedFontSize ? getFontSizeClasses(extractedFontSize) : '';
     const Tag = `h${Math.min(Math.max(Number(level) || 2, 1), 6)}`;
     // Use CSS variables for font sizes (defined in index.css) instead of Tailwind classes
     // Only use Tailwind class if explicitly set via fontSize attribute