@marvalt/wparser 0.1.14 → 0.1.15

package/dist/index.esm.js

@@ -1835,9 +1835,13 @@ const ButtonBlock = ({ block }) => {
 };
 const Cover = ({ block, children }) => {
     const attrs = block.attributes || {};
-    const { url, id, backgroundImage, overlayColor, dimRatio = 0, align = 'full', minHeight, minHeightUnit = 'vh', hasParallax, } = attrs;
+    const { url, id, backgroundImage, cloudflareUrl, overlayColor, dimRatio = 0, align = 'full', minHeight, minHeightUnit = 'vh', hasParallax, } = attrs;
     // Get background image URL from various possible sources
-    let bgImageUrl = url || backgroundImage || (typeof backgroundImage === 'object' && backgroundImage?.url);
+    // Priority: cloudflareUrl (from plugin) > url > backgroundImage > innerHTML extraction
+    let bgImageUrl = cloudflareUrl;
+    if (!bgImageUrl) {
+        bgImageUrl = url || backgroundImage || (typeof backgroundImage === 'object' && backgroundImage?.url);
+    }
     // If not found in attributes, try to extract from innerHTML
     if (!bgImageUrl && block.innerHTML) {
         // Try to extract img src from innerHTML
@@ -1853,10 +1857,16 @@ const Cover = ({ block, children }) => {
             }
         }
     }
-    // Convert to Cloudflare URL if it's a Cloudflare image, otherwise use as-is
-    if (bgImageUrl && isCloudflareImageUrl(bgImageUrl)) {
-        // Use full width for cover images
-        bgImageUrl = getCloudflareVariantUrl(bgImageUrl, { width: 1920 });
+    // Convert to Cloudflare URL variant if it's a Cloudflare image, otherwise use as-is
+    if (bgImageUrl) {
+        if (isCloudflareImageUrl(bgImageUrl)) {
+            // Use full width for cover images
+            bgImageUrl = getCloudflareVariantUrl(bgImageUrl, { width: 1920 });
+        }
+        // If cloudflareUrl was provided, it's already a Cloudflare URL, just add variant
+        else if (cloudflareUrl) {
+            bgImageUrl = getCloudflareVariantUrl(cloudflareUrl, { width: 1920 });
+        }
     }
     // Build alignment classes
     const alignClass = getAlignmentClasses(align);
@@ -1887,12 +1897,36 @@ const MediaText = ({ block, children, context }) => {
     // Access innerBlocks to identify media vs content
     const innerBlocks = block.innerBlocks || [];
     // Find media block (image or video)
-    const mediaBlockIndex = innerBlocks.findIndex((b) => b.name === 'core/image' || b.name === 'core/video');
+    let mediaBlockIndex = innerBlocks.findIndex((b) => b.name === 'core/image' || b.name === 'core/video');
+    // Check for cloudflareUrl in attributes first (provided by WordPress plugin)
+    const cloudflareUrl = attrs['cloudflareUrl'];
+    // If no media block found, try to extract from innerHTML
+    let imageUrl = null;
+    if (mediaBlockIndex === -1 && block.innerHTML) {
+        // Extract img src from innerHTML
+        const imgMatch = block.innerHTML.match(/<img[^>]+src=["']([^"']+)["']/i);
+        if (imgMatch && imgMatch[1]) {
+            imageUrl = imgMatch[1];
+        }
+    }
     // Render children - media-text typically has media as first child, then content
     const childrenArray = React.Children.toArray(children);
-    const mediaElement = mediaBlockIndex >= 0 && childrenArray[mediaBlockIndex]
+    let mediaElement = mediaBlockIndex >= 0 && childrenArray[mediaBlockIndex]
         ? childrenArray[mediaBlockIndex]
         : null;
+    // Use cloudflareUrl from attributes if available
+    if (!mediaElement && cloudflareUrl) {
+        const finalImageUrl = getCloudflareVariantUrl(cloudflareUrl, { width: 1024 });
+        mediaElement = (jsxRuntimeExports.jsx("img", { src: finalImageUrl, alt: "", className: "w-full h-auto rounded-lg object-cover" }));
+    }
+    // If we extracted image URL from innerHTML, render it
+    else if (!mediaElement && imageUrl) {
+        // Convert to Cloudflare URL if applicable
+        const finalImageUrl = isCloudflareImageUrl(imageUrl)
+            ? getCloudflareVariantUrl(imageUrl, { width: 1024 })
+            : imageUrl;
+        mediaElement = (jsxRuntimeExports.jsx("img", { src: finalImageUrl, alt: "", className: "w-full h-auto rounded-lg object-cover" }));
+    }
     // Content is all other children
     const contentElements = childrenArray.filter((_, index) => index !== mediaBlockIndex);
     // Build alignment classes
@@ -1905,7 +1939,9 @@ const MediaText = ({ block, children, context }) => {
     const stackClass = 'flex-col md:flex-row';
     // Media position determines order
     const isMediaRight = mediaPosition === 'right';
-    return (jsxRuntimeExports.jsx("div", { className: buildClassName(alignClass, 'px-4'), children: jsxRuntimeExports.jsxs("div", { className: buildClassName('flex', stackClass, verticalAlignClass, 'gap-6 lg:gap-12'), children: [jsxRuntimeExports.jsx("div", { className: buildClassName(isMediaRight ? 'order-2' : 'order-1', imageFill ? 'w-full md:w-1/2' : 'flex-shrink-0'), children: mediaElement || jsxRuntimeExports.jsx("div", { className: "bg-gray-200 h-64 rounded-lg" }) }), jsxRuntimeExports.jsx("div", { className: buildClassName(isMediaRight ? 'order-1' : 'order-2', imageFill ? 'w-full md:w-1/2' : 'flex-1', 'space-y-4'), children: contentElements.length > 0 ? contentElements : children })] }) }));
+    // Add section spacing for consistent vertical rhythm
+    const spacingClass = getSectionSpacingClasses();
+    return (jsxRuntimeExports.jsx("div", { className: buildClassName(alignClass, spacingClass, 'px-4'), children: jsxRuntimeExports.jsxs("div", { className: buildClassName('flex', stackClass, verticalAlignClass, 'gap-6 lg:gap-12'), children: [jsxRuntimeExports.jsx("div", { className: buildClassName(isMediaRight ? 'order-2' : 'order-1', imageFill ? 'w-full md:w-1/2' : 'flex-shrink-0 md:w-1/2'), children: mediaElement || jsxRuntimeExports.jsx("div", { className: "bg-gray-200 h-64 rounded-lg" }) }), jsxRuntimeExports.jsx("div", { className: buildClassName(isMediaRight ? 'order-1' : 'order-2', 'md:w-1/2', getContentSpacingClasses()), children: contentElements.length > 0 ? contentElements : children })] }) }));
 };
 const Fallback = ({ block, children }) => {
     // Minimal fallback; do not render innerHTML directly in v1 for safety