@marvalt/wparser 0.1.57 → 0.1.58

package/dist/index.d.ts

@@ -421,8 +421,9 @@ declare function extractHeadingLevel(block: WordPressBlock): number;
 declare function extractTextAlign(block: WordPressBlock): 'left' | 'center' | 'right' | null;
 /**
  * Extract font size from block
+ * Checks both fontSize attribute and style.typography.fontSize
  */
-declare function extractFontSize(block: WordPressBlock): string | null;
+declare function extractFontSize(block: WordPressBlock, context?: RenderContext): string | null;
 /**
  * Convert image URL to Cloudflare variant if it's a Cloudflare URL
  */
@@ -515,9 +516,10 @@ declare function extractGradientBackground(block: WordPressBlock): string | null
 /**
  * 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
  */
 declare function extractTextColor(block: WordPressBlock, context: RenderContext): string | null;

package/dist/index.esm.js

@@ -1872,11 +1872,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
@@ -2154,17 +2174,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 = {
@@ -2339,6 +2388,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)
@@ -2374,24 +2426,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