@marvalt/wparser 0.1.56 → 0.1.58

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,28 @@ 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 } });
+        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
@@ -2491,6 +2547,44 @@ const ListItem = ({ block, children, context }) => {
     return jsxRuntimeExports.jsx("li", { className: textColorClass || undefined, children: content || children });
 };
 const Group = ({ block, children, context }) => {
+    // If innerHTML exists, WordPress has already rendered the block wrapper with all its classes
+    // Extract the wrapper div attributes and use them, then render children inside
+    if (block.innerHTML) {
+        // Extract the opening div tag with all attributes
+        const openingDivMatch = block.innerHTML.match(/<div([^>]*)>/i);
+        if (openingDivMatch) {
+            const divAttributes = openingDivMatch[1];
+            // Parse class attribute to preserve WordPress classes
+            const classMatch = divAttributes.match(/class=["']([^"']+)["']/);
+            const styleMatch = divAttributes.match(/style=["']([^"']+)["']/);
+            // Build props for the div
+            const divProps = {};
+            if (classMatch) {
+                divProps.className = classMatch[1];
+            }
+            if (styleMatch) {
+                // Parse inline styles into React style object
+                const styles = {};
+                styleMatch[1].split(';').forEach(style => {
+                    const [key, value] = style.split(':').map(s => s.trim());
+                    if (key && value) {
+                        // Convert CSS property names to camelCase
+                        const cssKey = key.replace(/-([a-z])/g, (g) => g[1].toUpperCase());
+                        styles[cssKey] = value;
+                    }
+                });
+                if (Object.keys(styles).length > 0) {
+                    divProps.style = styles;
+                }
+            }
+            // Render with preserved WordPress classes/styles and children
+            return React.createElement('div', divProps, children);
+        }
+        // If we can't parse, fall back to rendering innerHTML as-is
+        // This will preserve structure but children may be duplicated
+        return jsxRuntimeExports.jsx("div", { dangerouslySetInnerHTML: { __html: block.innerHTML } });
+    }
+    // No innerHTML - use custom rendering logic
     const attrs = block.attributes || {};
     const align = attrs['align'];
     // Layout can be an object with type property, or nested structure
@@ -2760,19 +2854,41 @@ function createDefaultRegistry(colorMapper, spacingConfig) {
         },
         // Navigation block - renders WordPress navigation menu
         'core/navigation': ({ block, context }) => {
-            const attrs = block.attributes || {};
-            const layout = attrs['layout'];
-            const orientation = layout?.orientation || 'horizontal';
-            const ariaLabel = attrs['ariaLabel'];
-            // Render innerHTML which WordPress provides (contains the menu HTML)
+            // Render innerHTML which WordPress provides (contains the menu HTML with all classes)
             if (block.innerHTML) {
-                const navClasses = orientation === 'vertical'
-                    ? 'flex flex-col space-y-2'
-                    : 'flex flex-wrap gap-4';
-                return (jsxRuntimeExports.jsx("nav", { className: navClasses, "aria-label": ariaLabel || 'Navigation', dangerouslySetInnerHTML: { __html: block.innerHTML } }));
+                // Extract the nav element from innerHTML to preserve WordPress classes
+                // WordPress renders: <nav class="...">...</nav>
+                return jsxRuntimeExports.jsx("div", { dangerouslySetInnerHTML: { __html: block.innerHTML } });
             }
             // Fallback: render empty nav
-            return jsxRuntimeExports.jsx("nav", { className: "flex flex-wrap gap-4", "aria-label": ariaLabel || 'Navigation' });
+            return jsxRuntimeExports.jsx("nav", { "aria-label": "Navigation" });
+        },
+        // Site Title block - renders site title
+        'core/site-title': ({ block, context }) => {
+            // Render innerHTML which WordPress provides
+            if (block.innerHTML) {
+                return jsxRuntimeExports.jsx("div", { dangerouslySetInnerHTML: { __html: block.innerHTML } });
+            }
+            // Fallback: render site name from context if available
+            return null;
+        },
+        // Site Tagline block - renders site tagline/description
+        'core/site-tagline': ({ block, context }) => {
+            // Render innerHTML which WordPress provides
+            if (block.innerHTML) {
+                return jsxRuntimeExports.jsx("div", { dangerouslySetInnerHTML: { __html: block.innerHTML } });
+            }
+            // Fallback: render site description from context if available
+            return null;
+        },
+        // Post Date block - renders post date
+        'core/post-date': ({ block, context }) => {
+            // Render innerHTML which WordPress provides
+            if (block.innerHTML) {
+                return jsxRuntimeExports.jsx("div", { dangerouslySetInnerHTML: { __html: block.innerHTML } });
+            }
+            // Fallback: render current date
+            return null;
         },
     };
     return {