@marvalt/wparser 0.1.25 → 0.1.27

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));
     }
@@ -2143,10 +2152,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 +2201,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 +2217,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 +2232,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 +2255,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 +2423,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,
@@ -2437,6 +2466,7 @@ function createDefaultRegistry(colorMapper) {
         shortcodes: {}, // Empty by default - apps extend this
         fallback: Fallback,
         colorMapper,
+        spacingConfig,
     };
 }
 // Legacy function for backward compatibility - use getBlockTextContent instead
@@ -2526,8 +2556,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 +2605,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,
     };
 }