@marvalt/wparser 0.1.25 → 0.1.29

package/README.md

@@ -8,6 +8,15 @@ Static-only WordPress page parser and renderer for React apps.
 - Auto-hero uses featured image unless `[HEROSECTION]` is present
 - Extensible: future adapters (Elementor/Divi) via registry
 
+## Documentation
+
+Comprehensive documentation is available in the `docs/` folder:
+
+- **[STYLING.md](./docs/STYLING.md)** - How WordPress and applications control styling
+- **[COLOR_MAPPING.md](./docs/COLOR_MAPPING.md)** - Color mapping system for background colors
+- **[SPACING.md](./docs/SPACING.md)** - Spacing system and customization
+- **[CUSTOMIZATION.md](./docs/CUSTOMIZATION.md)** - Complete customization guide
+
 ## Installation
 
 Peer deps: React 18+

package/dist/index.cjs

@@ -1390,7 +1390,16 @@ function renderBlock(block, registry, key, options, page) {
     const children = block.innerBlocks && block.innerBlocks.length
         ? block.innerBlocks.map((child, i) => renderBlock(child, registry, `${key}-${i}`, options, page))
         : undefined;
-    const node = Renderer({ block, children, context: { registry, page, colorMapper: registry.colorMapper } });
+    const node = Renderer({
+        block,
+        children,
+        context: {
+            registry,
+            page,
+            colorMapper: registry.colorMapper,
+            spacingConfig: registry.spacingConfig,
+        }
+    });
     if (options?.debugWrappers) {
         return (jsxRuntimeExports.jsx("div", { "data-block": block.name, className: "wp-block", children: node }, key));
     }
@@ -2050,6 +2059,36 @@ function extractBackgroundColor(block, context) {
     // Fallback: return null (no background applied)
     return null;
 }
+/**
+ * Extract spacer height from block attributes or innerHTML
+ * Returns height in pixels, or null if not found
+ */
+function extractSpacerHeight(block) {
+    const attrs = block.attributes || {};
+    // First, try to get height from attributes
+    const height = attrs['height'];
+    if (typeof height === 'number') {
+        return height;
+    }
+    if (typeof height === 'string') {
+        // Parse "100px" or "100" to number
+        const match = height.match(/^(\d+)/);
+        if (match) {
+            return parseInt(match[1], 10);
+        }
+    }
+    // Fall back to parsing innerHTML for style="height:100px"
+    if (block.innerHTML) {
+        const styleMatch = block.innerHTML.match(/style=["']([^"']+)["']/i);
+        if (styleMatch) {
+            const heightMatch = styleMatch[1].match(/height:\s*(\d+)px/i);
+            if (heightMatch) {
+                return parseInt(heightMatch[1], 10);
+            }
+        }
+    }
+    return null;
+}
 
 /**
  * Style mapping utilities
@@ -2143,10 +2182,25 @@ function buildClassName(...classes) {
         .trim();
 }
 
+// Helper function to get spacing value with fallback
+// Only accepts string keys (excludes 'heading' which is an object)
+function getSpacing(spacingConfig, key, fallback) {
+    return spacingConfig?.[key] || fallback;
+}
+// Helper function to get heading spacing
+function getHeadingSpacing(spacingConfig, level) {
+    const headingConfig = spacingConfig?.heading;
+    if (level === 1)
+        return headingConfig?.h1 || 'mt-10 mb-8';
+    if (level === 2)
+        return headingConfig?.h2 || 'mt-8 mb-6';
+    return headingConfig?.h3 || 'mt-6 mb-4';
+}
 const Paragraph = ({ block, context }) => {
     const content = getBlockTextContent(block);
     const attrs = block.attributes || {};
     const textAlign = getTextAlignClasses(attrs['align']);
+    const spacing = getSpacing(context.spacingConfig || context.registry.spacingConfig, 'paragraph', 'my-6');
     // Check if content contains shortcodes
     const hasShortcodes = /\[(\w+)/.test(content);
     if (hasShortcodes && context.registry.shortcodes) {
@@ -2177,14 +2231,14 @@ const Paragraph = ({ block, context }) => {
         };
         const hasBlockLevelContent = React.Children.toArray(parts).some((part) => isBlockLevelElement(part));
         if (hasBlockLevelContent) {
-            // Render block-level content without <p> wrapper
-            return jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: parts });
+            // 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 my-4', textAlign), children: parts });
+        return jsxRuntimeExports.jsx("p", { className: buildClassName('text-gray-700', spacing, textAlign), children: parts });
     }
-    return jsxRuntimeExports.jsx("p", { className: buildClassName('text-gray-700 my-4', textAlign), children: content });
+    return jsxRuntimeExports.jsx("p", { className: buildClassName('text-gray-700', spacing, textAlign), children: content });
 };
-const Heading = ({ block, children }) => {
+const Heading = ({ block, children, context }) => {
     const attrs = block.attributes || {};
     const { level = 2 } = attrs;
     const content = getBlockTextContent(block);
@@ -2193,12 +2247,11 @@ const Heading = ({ block, children }) => {
     const Tag = `h${Math.min(Math.max(Number(level) || 2, 1), 6)}`;
     // Default heading sizes if fontSize not specified
     const sizeClass = fontSize || (level === 1 ? 'text-4xl' : level === 2 ? 'text-3xl' : level === 3 ? 'text-2xl' : 'text-xl');
-    // Add spacing: mt for top (except first heading), mb for bottom
-    // Use larger bottom margin for headings to create visual separation
-    const spacingClass = level === 1 ? 'mt-8 mb-6' : level === 2 ? 'mt-6 mb-4' : 'mt-4 mb-3';
+    // 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 }));
 };
-const Image = ({ block }) => {
+const Image = ({ block, context }) => {
     const imageAttrs = getImageAttributes(block);
     if (!imageAttrs.url)
         return null;
@@ -2209,13 +2262,15 @@ const Image = ({ block }) => {
         const height = imageAttrs.height;
         imageUrl = getCloudflareVariantUrl(imageUrl, { width, height });
     }
-    return (jsxRuntimeExports.jsx("img", { src: imageUrl, alt: imageAttrs.alt, width: imageAttrs.width, height: imageAttrs.height, className: "w-full h-auto rounded-lg object-cover my-4", style: { maxWidth: '100%', height: 'auto' }, loading: "lazy" }));
+    const spacing = getSpacing(context.spacingConfig || context.registry.spacingConfig, 'image', 'my-6');
+    return (jsxRuntimeExports.jsx("img", { src: imageUrl, alt: imageAttrs.alt, width: imageAttrs.width, height: imageAttrs.height, className: buildClassName('w-full h-auto rounded-lg object-cover', spacing), style: { maxWidth: '100%', height: 'auto' }, loading: "lazy" }));
 };
-const List = ({ block, children }) => {
+const List = ({ block, children, context }) => {
     const attrs = block.attributes || {};
     const { ordered } = attrs;
     const Tag = ordered ? 'ol' : 'ul';
-    return React.createElement(Tag, { className: 'list-disc pl-6 space-y-2 text-gray-700 my-4' }, children);
+    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);
 };
 const ListItem = ({ children }) => {
     return jsxRuntimeExports.jsx("li", { className: "text-gray-700", children: children });
@@ -2230,7 +2285,11 @@ const Group = ({ block, children, context }) => {
     // Determine if this is a section-level group (has alignment) or content-level
     const isSection = align === 'full' || align === 'wide';
     const containerClass = getContainerClasses(align, layout);
-    const spacingClass = isSection ? getSectionSpacingClasses() : getContentSpacingClasses();
+    // Get spacing from config or use defaults
+    const spacingConfig = context.spacingConfig || context.registry.spacingConfig;
+    const spacingClass = isSection
+        ? (spacingConfig?.section || getSectionSpacingClasses())
+        : (spacingConfig?.content || getContentSpacingClasses());
     // Ensure container class is always applied for constrained groups
     const finalContainerClass = layout?.type === 'constrained' && align === 'wide'
         ? 'container'
@@ -2394,7 +2453,7 @@ const Fallback = ({ block, children }) => {
     // Minimal fallback; do not render innerHTML directly in v1 for safety
     return jsxRuntimeExports.jsx("div", { "data-unknown-block": block.name, children: children });
 };
-function createDefaultRegistry(colorMapper) {
+function createDefaultRegistry(colorMapper, spacingConfig) {
     const renderers = {
         'core/paragraph': Paragraph,
         'core/heading': Heading,
@@ -2431,12 +2490,22 @@ function createDefaultRegistry(colorMapper) {
             const html = block.innerHTML || '';
             return jsxRuntimeExports.jsx("div", { dangerouslySetInnerHTML: { __html: html } });
         },
+        // Spacer block - adds vertical spacing
+        'core/spacer': ({ block }) => {
+            const height = extractSpacerHeight(block);
+            if (height && height > 0) {
+                return jsxRuntimeExports.jsx("div", { style: { height: `${height}px` }, "aria-hidden": "true" });
+            }
+            // Default fallback if height not found
+            return jsxRuntimeExports.jsx("div", { style: { height: '100px' }, "aria-hidden": "true" });
+        },
     };
     return {
         renderers,
         shortcodes: {}, // Empty by default - apps extend this
         fallback: Fallback,
         colorMapper,
+        spacingConfig,
     };
 }
 // Legacy function for backward compatibility - use getBlockTextContent instead
@@ -2526,8 +2595,8 @@ function findMatchingMapping(block, mappings) {
  * const registry = createEnhancedRegistry(mappings);
  * ```
  */
-function createEnhancedRegistry(mappings = [], baseRegistry, colorMapper) {
-    const base = baseRegistry || createDefaultRegistry(colorMapper);
+function createEnhancedRegistry(mappings = [], baseRegistry, colorMapper, spacingConfig) {
+    const base = baseRegistry || createDefaultRegistry(colorMapper, spacingConfig);
     // Create enhanced renderers that check patterns first
     const enhancedRenderers = {
         ...base.renderers,
@@ -2575,6 +2644,8 @@ function createEnhancedRegistry(mappings = [], baseRegistry, colorMapper) {
         matchBlock,
         // Use provided colorMapper or inherit from base registry
         colorMapper: colorMapper || base.colorMapper,
+        // Use provided spacingConfig or inherit from base registry
+        spacingConfig: spacingConfig || base.spacingConfig,
     };
 }
 
@@ -2767,6 +2838,7 @@ exports.extractImageUrlWithFallback = extractImageUrlWithFallback;
 exports.extractMediaPosition = extractMediaPosition;
 exports.extractMinHeight = extractMinHeight;
 exports.extractOverlayColor = extractOverlayColor;
+exports.extractSpacerHeight = extractSpacerHeight;
 exports.extractSubtitleFromInnerBlocks = extractSubtitleFromInnerBlocks;
 exports.extractTextAlign = extractTextAlign;
 exports.extractTextAlignFromInnerBlocks = extractTextAlignFromInnerBlocks;