@marvalt/wparser 0.1.12 → 0.1.14

package/dist/index.esm.js

@@ -1380,15 +1380,15 @@ if (process.env.NODE_ENV === 'production') {
 
 var jsxRuntimeExports = jsxRuntime.exports;
 
-function renderNodes(blocks, registry, options) {
-    return blocks.map((block, index) => renderBlock(block, registry, `b-${index}`, options));
+function renderNodes(blocks, registry, options, page) {
+    return blocks.map((block, index) => renderBlock(block, registry, `b-${index}`, options, page));
 }
-function renderBlock(block, registry, key, options) {
+function renderBlock(block, registry, key, options, page) {
     const Renderer = registry.renderers[block.name] || registry.fallback;
     const children = block.innerBlocks && block.innerBlocks.length
-        ? block.innerBlocks.map((child, i) => renderBlock(child, registry, `${key}-${i}`, options))
+        ? block.innerBlocks.map((child, i) => renderBlock(child, registry, `${key}-${i}`, options, page))
         : undefined;
-    const node = Renderer({ block, children, context: { registry } });
+    const node = Renderer({ block, children, context: { registry, page } });
     if (options?.debugWrappers) {
         return (jsxRuntimeExports.jsx("div", { "data-block": block.name, className: "wp-block", children: node }, key));
     }
@@ -1732,20 +1732,29 @@ const Paragraph = ({ block, context }) => {
         const parts = renderTextWithShortcodes(content, context.registry);
         // Check if any part is a block-level element (section, div, etc.)
         // If so, render without wrapping in <p> to avoid DOM nesting violations
-        const hasBlockLevelContent = React.Children.toArray(parts).some((part) => {
-            if (React.isValidElement(part)) {
-                const type = part.type;
-                // Check for block-level HTML elements
-                if (typeof type === 'string' && ['section', 'div', 'article', 'header', 'footer', 'aside', 'nav'].includes(type)) {
-                    return true;
-                }
-                // Check if it's a React component (likely block-level)
-                if (typeof type === 'function' || (typeof type === 'object' && type !== null)) {
-                    return true;
-                }
+        const isBlockLevelElement = (element) => {
+            if (!React.isValidElement(element)) {
+                return false;
+            }
+            const type = element.type;
+            // Check for block-level HTML elements
+            if (typeof type === 'string' && ['section', 'div', 'article', 'header', 'footer', 'aside', 'nav'].includes(type)) {
+                return true;
+            }
+            // Check if it's React.Fragment - recursively check its children
+            if (type === React.Fragment) {
+                const fragmentProps = element.props;
+                const children = React.Children.toArray(fragmentProps.children);
+                return children.some((child) => isBlockLevelElement(child));
+            }
+            // Check if it's a React component (likely block-level)
+            // Most custom components render block-level content
+            if (typeof type === 'function' || (typeof type === 'object' && type !== null && type !== React.Fragment)) {
+                return true;
             }
             return false;
-        });
+        };
+        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 });
@@ -2083,7 +2092,7 @@ function createEnhancedRegistry(mappings = [], baseRegistry) {
     };
 }
 
-const WPContent = ({ blocks, registry, className }) => {
+const WPContent = ({ blocks, registry, className, page }) => {
     if (!Array.isArray(blocks)) {
         if (process.env.NODE_ENV !== 'production') {
             // eslint-disable-next-line no-console
@@ -2095,7 +2104,7 @@ const WPContent = ({ blocks, registry, className }) => {
         throw new Error('WPContent: registry is required');
     }
     const ast = parseGutenbergBlocks(blocks);
-    return (jsxRuntimeExports.jsx("div", { className: className, children: renderNodes(ast, registry) }));
+    return (jsxRuntimeExports.jsx("div", { className: className, children: renderNodes(ast, registry, undefined, page) }));
 };
 
 /**
@@ -2116,13 +2125,16 @@ const WPPage = ({ page, registry, className }) => {
     }
     const hasHeroShortcode = useMemo(() => detectHeroShortcode(page.blocks), [page.blocks]);
     const featured = getFeaturedImage(page);
-    return (jsxRuntimeExports.jsxs("article", { className: className, children: [!hasHeroShortcode && featured && (jsxRuntimeExports.jsx(HeroFromFeatured, { featured: featured, title: page.title?.rendered })), jsxRuntimeExports.jsx(WPContent, { blocks: page.blocks, registry: registry })] }));
+    return (jsxRuntimeExports.jsxs("article", { className: className, children: [!hasHeroShortcode && featured && (jsxRuntimeExports.jsx(HeroFromFeatured, { featured: featured, title: page.title?.rendered })), jsxRuntimeExports.jsx(WPContent, { blocks: page.blocks, registry: registry, page: page })] }));
 };
 function detectHeroShortcode(blocks) {
     for (const block of blocks) {
         const html = (block.innerHTML || '').toLowerCase();
         if (html.includes('[herosection]'))
             return true;
+        // Check if this is a cover block (which is a hero section)
+        if (block.name === 'core/cover')
+            return true;
         if (block.innerBlocks?.length && detectHeroShortcode(block.innerBlocks))
             return true;
     }
@@ -2165,10 +2177,14 @@ class WPErrorBoundary extends React.Component {
 
 /**
  * Extract background image URL from a block
- * Checks various possible sources: url, backgroundImage, innerHTML
+ * Checks various possible sources: url, backgroundImage, innerHTML, featured image
  */
-function extractBackgroundImage(block) {
+function extractBackgroundImage(block, page) {
     const attrs = block.attributes || {};
+    // Check if block uses featured image
+    if (attrs['useFeaturedImage'] === true && page?._embedded?.['wp:featuredmedia']?.[0]?.source_url) {
+        return page._embedded['wp:featuredmedia'][0].source_url;
+    }
     // Try various attribute keys
     let url = attrs['url'] ||
         attrs['backgroundImage'] ||
@@ -2424,10 +2440,12 @@ function extractButtonsFromInnerBlocks(block) {
  * Extract text alignment from inner blocks
  * Recursively searches for heading or paragraph blocks with textAlign attribute
  * Also checks group blocks for justifyContent in layout
+ * Priority: heading/paragraph textAlign takes precedence over group justifyContent
  */
 function extractTextAlignFromInnerBlocks(block) {
     const innerBlocks = block.innerBlocks || [];
-    // Recursively search for heading or paragraph blocks with textAlign
+    // First, recursively search for heading or paragraph blocks with textAlign
+    // (These take priority over group justifyContent)
     for (const innerBlock of innerBlocks) {
         if (innerBlock.name === 'core/heading' || innerBlock.name === 'core/paragraph') {
             const attrs = innerBlock.attributes || {};
@@ -2436,7 +2454,13 @@ function extractTextAlignFromInnerBlocks(block) {
                 return textAlign;
             }
         }
-        // Check group blocks for justifyContent
+        // Recursively search nested blocks for headings/paragraphs first
+        const nestedAlign = extractTextAlignFromInnerBlocks(innerBlock);
+        if (nestedAlign)
+            return nestedAlign;
+    }
+    // Only check group blocks if no heading/paragraph alignment found
+    for (const innerBlock of innerBlocks) {
         if (innerBlock.name === 'core/group') {
             const attrs = innerBlock.attributes || {};
             const layout = attrs['layout'];
@@ -2448,10 +2472,6 @@ function extractTextAlignFromInnerBlocks(block) {
             if (justifyContent === 'right')
                 return 'right';
         }
-        // Recursively search nested blocks
-        const nestedAlign = extractTextAlignFromInnerBlocks(innerBlock);
-        if (nestedAlign)
-            return nestedAlign;
     }
     return null;
 }