@marvalt/wparser 0.1.11 → 0.1.13

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,7 +2125,7 @@ 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) {
@@ -2165,10 +2174,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'] ||