create-nextblock 0.13.10 → 0.13.12

package/templates/nextblock-template/components/blocks/renderers/FormBlockRenderer.tsx

@@ -13,139 +13,139 @@ import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@
 import { Textarea } from '@nextblock-cms/ui';
 import type { VisualEditAttributes } from '../../../lib/visual-editing/types';
 
-interface FormBlockRendererProps {
-  content: FormBlockContent;
-  languageId: number;
-  visualEditAttributes?: VisualEditAttributes;
-  botProtectionPublic?: BotProtectionPublicSettings;
-  scriptNonce?: string;
-}
-
-type BotProtectionProvider = 'none' | 'turnstile' | 'recaptcha';
-
-type BotProtectionPublicSettings = {
-  provider: BotProtectionProvider;
-  siteKey: string;
-};
-
-function SubmitButton({ text, verifying }: { text: string; verifying?: boolean }) {
-  const { pending } = useFormStatus();
-  const isDisabled = pending || verifying;
-  return (
-    <Button type="submit" disabled={isDisabled}>
-      {verifying ? 'Verifying...' : pending ? 'Submitting...' : text}
-    </Button>
-  );
-}
-
-function resolveBotProtection(
-  content: FormBlockContent,
-  botProtectionPublic?: BotProtectionPublicSettings
-) {
-  const blockProvider = content.botProtectionProvider;
-  const provider: BotProtectionProvider =
-    blockProvider === 'turnstile' || blockProvider === 'recaptcha'
-      ? blockProvider
-      : botProtectionPublic?.provider || 'none';
-  const fallbackSiteKey =
-    provider === 'turnstile'
-      ? process.env.NEXT_PUBLIC_TURNSTILE_SITE_KEY
-      : provider === 'recaptcha'
-        ? process.env.NEXT_PUBLIC_RECAPTCHA_SITE_KEY
-        : '';
-  const publicSiteKey =
-    provider === botProtectionPublic?.provider ? botProtectionPublic?.siteKey || '' : '';
-  const siteKey = content.botProtectionSiteKey?.trim() ||
-    publicSiteKey ||
-    fallbackSiteKey ||
-    '';
-
-  return { provider, siteKey };
-}
-
-const FormBlockRenderer: React.FC<FormBlockRendererProps> = ({ content, visualEditAttributes, botProtectionPublic, scriptNonce }) => {
-  const { provider, siteKey } = resolveBotProtection(content, botProtectionPublic);
-  const [state, formAction] = useActionState(handleFormSubmission.bind(null, {
-    recipient: content.recipient_email,
-    botProtectionProvider: provider,
-  }), {
-    success: false,
-    message: '',
-  });
-
-  const [recaptchaToken, setRecaptchaToken] = useState<string>('');
-  const turnstileRef = useRef<HTMLDivElement>(null);
-  const turnstileWidgetIdRef = useRef<string | null>(null);
-  const pendingTurnstileFormRef = useRef<HTMLFormElement | null>(null);
-  const [turnstileToken, setTurnstileToken] = useState<string>('');
-  const [turnstileError, setTurnstileError] = useState<string>('');
-  const [isVerifyingTurnstile, setIsVerifyingTurnstile] = useState(false);
-
-  useEffect(() => {
-    if (provider === 'turnstile' && siteKey && typeof window !== 'undefined') {
-      let widgetId: string | null = null;
-
-      const renderWidget = () => {
-        if ((window as any).turnstile && turnstileRef.current) {
-          // Clear any stale children
-          turnstileRef.current.innerHTML = '';
-          try {
-            widgetId = (window as any).turnstile.render(turnstileRef.current, {
-              sitekey: siteKey,
-              theme: 'light',
-              execution: 'execute',
-              'response-field': false,
-              callback: (token: string) => {
-                setTurnstileToken(token);
-                setTurnstileError('');
-                setIsVerifyingTurnstile(false);
-
-                const form = pendingTurnstileFormRef.current;
-                if (form) {
-                  pendingTurnstileFormRef.current = null;
-                  const input = form.querySelector('input[name="cf-turnstile-response"]') as HTMLInputElement | null;
-                  if (input) {
-                    input.value = token;
-                  }
-                  form.requestSubmit();
-                }
-              },
-              'expired-callback': () => {
-                setTurnstileToken('');
-              },
-              'error-callback': () => {
-                setTurnstileToken('');
-                pendingTurnstileFormRef.current = null;
-                setIsVerifyingTurnstile(false);
-                setTurnstileError('Security verification could not be completed. Please try again.');
-              },
-              'timeout-callback': () => {
-                setTurnstileToken('');
-                pendingTurnstileFormRef.current = null;
-                setIsVerifyingTurnstile(false);
-                setTurnstileError('Security verification timed out. Please try again.');
-              },
-            });
-            turnstileWidgetIdRef.current = widgetId;
-
-            if (widgetId && pendingTurnstileFormRef.current) {
-              try {
-                (window as any).turnstile.execute(widgetId);
-              } catch (err) {
-                console.error("Turnstile execute error:", err);
-                pendingTurnstileFormRef.current = null;
-                setIsVerifyingTurnstile(false);
-                setTurnstileError('Security verification could not be started. Please try again.');
-              }
-            }
-          } catch (err) {
-            console.error("Turnstile render error:", err);
-            pendingTurnstileFormRef.current = null;
-            setIsVerifyingTurnstile(false);
-            setTurnstileError('Security verification could not be loaded. Please refresh and try again.');
-          }
-        }
-      };
+interface FormBlockRendererProps {
+  content: FormBlockContent;
+  languageId: number;
+  visualEditAttributes?: VisualEditAttributes;
+  botProtectionPublic?: BotProtectionPublicSettings;
+  scriptNonce?: string;
+}
+
+type BotProtectionProvider = 'none' | 'turnstile' | 'recaptcha';
+
+type BotProtectionPublicSettings = {
+  provider: BotProtectionProvider;
+  siteKey: string;
+};
+
+function SubmitButton({ text, verifying }: { text: string; verifying?: boolean }) {
+  const { pending } = useFormStatus();
+  const isDisabled = pending || verifying;
+  return (
+    <Button type="submit" disabled={isDisabled}>
+      {verifying ? 'Verifying...' : pending ? 'Submitting...' : text}
+    </Button>
+  );
+}
+
+function resolveBotProtection(
+  content: FormBlockContent,
+  botProtectionPublic?: BotProtectionPublicSettings
+) {
+  const blockProvider = content.botProtectionProvider;
+  const provider: BotProtectionProvider =
+    blockProvider === 'turnstile' || blockProvider === 'recaptcha'
+      ? blockProvider
+      : botProtectionPublic?.provider || 'none';
+  const fallbackSiteKey =
+    provider === 'turnstile'
+      ? process.env.NEXT_PUBLIC_TURNSTILE_SITE_KEY
+      : provider === 'recaptcha'
+        ? process.env.NEXT_PUBLIC_RECAPTCHA_SITE_KEY
+        : '';
+  const publicSiteKey =
+    provider === botProtectionPublic?.provider ? botProtectionPublic?.siteKey || '' : '';
+  const siteKey = content.botProtectionSiteKey?.trim() ||
+    publicSiteKey ||
+    fallbackSiteKey ||
+    '';
+
+  return { provider, siteKey };
+}
+
+const FormBlockRenderer: React.FC<FormBlockRendererProps> = ({ content, visualEditAttributes, botProtectionPublic, scriptNonce }) => {
+  const { provider, siteKey } = resolveBotProtection(content, botProtectionPublic);
+  const [state, formAction] = useActionState(handleFormSubmission.bind(null, {
+    recipient: content.recipient_email,
+    botProtectionProvider: provider,
+  }), {
+    success: false,
+    message: '',
+  });
+
+  const [recaptchaToken, setRecaptchaToken] = useState<string>('');
+  const turnstileRef = useRef<HTMLDivElement>(null);
+  const turnstileWidgetIdRef = useRef<string | null>(null);
+  const pendingTurnstileFormRef = useRef<HTMLFormElement | null>(null);
+  const [turnstileToken, setTurnstileToken] = useState<string>('');
+  const [turnstileError, setTurnstileError] = useState<string>('');
+  const [isVerifyingTurnstile, setIsVerifyingTurnstile] = useState(false);
+
+  useEffect(() => {
+    if (provider === 'turnstile' && siteKey && typeof window !== 'undefined') {
+      let widgetId: string | null = null;
+
+      const renderWidget = () => {
+        if ((window as any).turnstile && turnstileRef.current) {
+          // Clear any stale children
+          turnstileRef.current.innerHTML = '';
+          try {
+            widgetId = (window as any).turnstile.render(turnstileRef.current, {
+              sitekey: siteKey,
+              theme: 'light',
+              execution: 'execute',
+              'response-field': false,
+              callback: (token: string) => {
+                setTurnstileToken(token);
+                setTurnstileError('');
+                setIsVerifyingTurnstile(false);
+
+                const form = pendingTurnstileFormRef.current;
+                if (form) {
+                  pendingTurnstileFormRef.current = null;
+                  const input = form.querySelector('input[name="cf-turnstile-response"]') as HTMLInputElement | null;
+                  if (input) {
+                    input.value = token;
+                  }
+                  form.requestSubmit();
+                }
+              },
+              'expired-callback': () => {
+                setTurnstileToken('');
+              },
+              'error-callback': () => {
+                setTurnstileToken('');
+                pendingTurnstileFormRef.current = null;
+                setIsVerifyingTurnstile(false);
+                setTurnstileError('Security verification could not be completed. Please try again.');
+              },
+              'timeout-callback': () => {
+                setTurnstileToken('');
+                pendingTurnstileFormRef.current = null;
+                setIsVerifyingTurnstile(false);
+                setTurnstileError('Security verification timed out. Please try again.');
+              },
+            });
+            turnstileWidgetIdRef.current = widgetId;
+
+            if (widgetId && pendingTurnstileFormRef.current) {
+              try {
+                (window as any).turnstile.execute(widgetId);
+              } catch (err) {
+                console.error("Turnstile execute error:", err);
+                pendingTurnstileFormRef.current = null;
+                setIsVerifyingTurnstile(false);
+                setTurnstileError('Security verification could not be started. Please try again.');
+              }
+            }
+          } catch (err) {
+            console.error("Turnstile render error:", err);
+            pendingTurnstileFormRef.current = null;
+            setIsVerifyingTurnstile(false);
+            setTurnstileError('Security verification could not be loaded. Please refresh and try again.');
+          }
+        }
+      };
 
       if ((window as any).turnstile) {
         renderWidget();
@@ -158,81 +158,81 @@ const FormBlockRenderer: React.FC<FormBlockRendererProps> = ({ content, visualEd
         }, 100);
         return () => clearInterval(interval);
       }
-
-      return () => {
-        if (widgetId && (window as any).turnstile) {
-          try {
-            (window as any).turnstile.remove(widgetId);
-          } catch {
-            // Ignore
-          }
-        }
-        turnstileWidgetIdRef.current = null;
-      };
-    }
-  }, [provider, siteKey]);
-
-  useEffect(() => {
-    if (!state.success && state.message) {
-      setRecaptchaToken('');
-
-      if (provider === 'turnstile') {
-        setTurnstileToken('');
-        pendingTurnstileFormRef.current = null;
-        setIsVerifyingTurnstile(false);
-        const widgetId = turnstileWidgetIdRef.current;
-        if (widgetId && typeof window !== 'undefined' && (window as any).turnstile) {
-          try {
-            (window as any).turnstile.reset(widgetId);
-          } catch {
-            // Ignore reset failures; the next render can still create a fresh token.
-          }
-        }
-      }
-    }
-  }, [provider, state.message, state.success]);
-
-  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
-    if (provider === 'turnstile' && siteKey) {
-      const widgetId = turnstileWidgetIdRef.current;
-      const turnstile = typeof window !== 'undefined' ? (window as any).turnstile : undefined;
-      const token = widgetId && turnstile
-        ? turnstile.getResponse(widgetId)
-        : turnstileToken;
-
-      const input = e.currentTarget.querySelector('input[name="cf-turnstile-response"]') as HTMLInputElement | null;
-      if (token && input) {
-        input.value = token;
-        return;
-      }
-
-      e.preventDefault();
-
-      if (!widgetId || !turnstile) {
-        pendingTurnstileFormRef.current = e.currentTarget;
-        setTurnstileError('');
-        setIsVerifyingTurnstile(true);
-        return;
-      }
-
-      pendingTurnstileFormRef.current = e.currentTarget;
-      setTurnstileError('');
-      setIsVerifyingTurnstile(true);
-
-      try {
-        turnstile.execute(widgetId);
-      } catch (err) {
-        console.error("Turnstile execute error:", err);
-        pendingTurnstileFormRef.current = null;
-        setIsVerifyingTurnstile(false);
-        setTurnstileError('Security verification could not be started. Please try again.');
-      }
-      return;
-    }
-
-    if (provider === 'recaptcha' && siteKey && !recaptchaToken) {
-      e.preventDefault();
-      const form = e.currentTarget;
+
+      return () => {
+        if (widgetId && (window as any).turnstile) {
+          try {
+            (window as any).turnstile.remove(widgetId);
+          } catch {
+            // Ignore
+          }
+        }
+        turnstileWidgetIdRef.current = null;
+      };
+    }
+  }, [provider, siteKey]);
+
+  useEffect(() => {
+    if (!state.success && state.message) {
+      setRecaptchaToken('');
+
+      if (provider === 'turnstile') {
+        setTurnstileToken('');
+        pendingTurnstileFormRef.current = null;
+        setIsVerifyingTurnstile(false);
+        const widgetId = turnstileWidgetIdRef.current;
+        if (widgetId && typeof window !== 'undefined' && (window as any).turnstile) {
+          try {
+            (window as any).turnstile.reset(widgetId);
+          } catch {
+            // Ignore reset failures; the next render can still create a fresh token.
+          }
+        }
+      }
+    }
+  }, [provider, state.message, state.success]);
+
+  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+    if (provider === 'turnstile' && siteKey) {
+      const widgetId = turnstileWidgetIdRef.current;
+      const turnstile = typeof window !== 'undefined' ? (window as any).turnstile : undefined;
+      const token = widgetId && turnstile
+        ? turnstile.getResponse(widgetId)
+        : turnstileToken;
+
+      const input = e.currentTarget.querySelector('input[name="cf-turnstile-response"]') as HTMLInputElement | null;
+      if (token && input) {
+        input.value = token;
+        return;
+      }
+
+      e.preventDefault();
+
+      if (!widgetId || !turnstile) {
+        pendingTurnstileFormRef.current = e.currentTarget;
+        setTurnstileError('');
+        setIsVerifyingTurnstile(true);
+        return;
+      }
+
+      pendingTurnstileFormRef.current = e.currentTarget;
+      setTurnstileError('');
+      setIsVerifyingTurnstile(true);
+
+      try {
+        turnstile.execute(widgetId);
+      } catch (err) {
+        console.error("Turnstile execute error:", err);
+        pendingTurnstileFormRef.current = null;
+        setIsVerifyingTurnstile(false);
+        setTurnstileError('Security verification could not be started. Please try again.');
+      }
+      return;
+    }
+
+    if (provider === 'recaptcha' && siteKey && !recaptchaToken) {
+      e.preventDefault();
+      const form = e.currentTarget;
       if (typeof window !== 'undefined' && (window as any).grecaptcha) {
         (window as any).grecaptcha.ready(() => {
           (window as any).grecaptcha.execute(siteKey, { action: 'submit' }).then((token: string) => {
@@ -262,24 +262,24 @@ const FormBlockRenderer: React.FC<FormBlockRendererProps> = ({ content, visualEd
   return (
     <>
       {provider === 'recaptcha' && siteKey && (
-        <Script
-          strategy="lazyOnload"
-          src={`https://www.google.com/recaptcha/api.js?render=${siteKey}`}
-          nonce={scriptNonce}
-        />
-      )}
-      {provider === 'turnstile' && siteKey && (
-        <Script
-          strategy="afterInteractive"
-          src="https://challenges.cloudflare.com/turnstile/v0/api.js?render=explicit"
-          nonce={scriptNonce}
-          onError={() => {
-            pendingTurnstileFormRef.current = null;
-            setIsVerifyingTurnstile(false);
-            setTurnstileError('Security verification could not be loaded. Please refresh and try again.');
-          }}
-        />
-      )}
+        <Script
+          strategy="lazyOnload"
+          src={`https://www.google.com/recaptcha/api.js?render=${siteKey}`}
+          nonce={scriptNonce}
+        />
+      )}
+      {provider === 'turnstile' && siteKey && (
+        <Script
+          strategy="afterInteractive"
+          src="https://challenges.cloudflare.com/turnstile/v0/api.js?render=explicit"
+          nonce={scriptNonce}
+          onError={() => {
+            pendingTurnstileFormRef.current = null;
+            setIsVerifyingTurnstile(false);
+            setTurnstileError('Security verification could not be loaded. Please refresh and try again.');
+          }}
+        />
+      )}
 
       <form
         action={formAction}
@@ -308,29 +308,29 @@ const FormBlockRenderer: React.FC<FormBlockRendererProps> = ({ content, visualEd
           </div>
         ))}
 
-        {provider === 'recaptcha' && (
-          <input type="hidden" name="g-recaptcha-response" value={recaptchaToken} readOnly />
-        )}
-
-        {provider === 'turnstile' && siteKey && (
-          <div className="my-4 flex justify-start">
-            <input type="hidden" name="cf-turnstile-response" value={turnstileToken} readOnly />
-            <div ref={turnstileRef}></div>
-          </div>
-        )}
-
-        {turnstileError && (
-          <p className="text-sm text-red-600">{turnstileError}</p>
-        )}
-
-        {state.message && !state.success && (
-            <p className="text-sm text-red-600">{state.message}</p>
-        )}
-        <SubmitButton text={content.submit_button_text} verifying={isVerifyingTurnstile} />
-      </form>
-    </>
-  );
-};
+        {provider === 'recaptcha' && (
+          <input type="hidden" name="g-recaptcha-response" value={recaptchaToken} readOnly />
+        )}
+
+        {provider === 'turnstile' && siteKey && (
+          <div className="my-4 flex justify-start">
+            <input type="hidden" name="cf-turnstile-response" value={turnstileToken} readOnly />
+            <div ref={turnstileRef}></div>
+          </div>
+        )}
+
+        {turnstileError && (
+          <p className="text-sm text-red-600">{turnstileError}</p>
+        )}
+
+        {state.message && !state.success && (
+            <p className="text-sm text-red-600">{state.message}</p>
+        )}
+        <SubmitButton text={content.submit_button_text} verifying={isVerifyingTurnstile} />
+      </form>
+    </>
+  );
+};
 
 const renderField = (field: FormField) => {
     const commonProps = {

package/templates/nextblock-template/components/blocks/renderers/SectionBlockRenderer.tsx

@@ -379,6 +379,9 @@ async function renderNestedBlock({
       parentBlockIndex={parentBlockIndex}
       botProtectionPublic={botProtectionPublic}
       scriptNonce={scriptNonce}
+      // Hero sections also carry LCP-eligible media in dynamically loaded
+      // renderers (e.g. video_embed's poster frame), not just nested images.
+      priority={priority}
     />
   );
 }

package/templates/nextblock-template/components/blocks/renderers/VideoEmbedBlockRenderer.tsx

@@ -1,17 +1,22 @@
 import React from "react";
 import type { VideoEmbedBlockContent } from '../../../lib/blocks/blockRegistry';
 import type { VisualEditAttributes } from "../../../lib/visual-editing/types";
+import YouTubeFacade from "../../media/YouTubeFacade";
+import { parseYouTubeUrl } from "../../../lib/media/youtube";
 
 interface VideoEmbedBlockRendererProps {
   content: VideoEmbedBlockContent;
   languageId: number;
   visualEditAttributes?: VisualEditAttributes;
+  /** Set for hero / first-position blocks so the poster is preloaded (LCP). */
+  priority?: boolean;
 }
 
 const VideoEmbedBlockRenderer: React.FC<VideoEmbedBlockRendererProps> = ({
   content,
   languageId,
   visualEditAttributes,
+  priority = false,
 }) => {
   void languageId;
   if (!content.url) {
@@ -29,22 +34,16 @@ const VideoEmbedBlockRenderer: React.FC<VideoEmbedBlockRendererProps> = ({
     );
   }
 
-  // Convert YouTube URLs to embed format
-  const getEmbedUrl = (url: string) => {
-    const youtubeRegex = /(?:youtube\.com\/watch\?v=|youtu\.be\/)([^&\n?#]+)/;
-    const match = url.match(youtubeRegex);
-    
-    if (match) {
-      const videoId = match[1];
-      const params = new URLSearchParams();
-      if (content.autoplay) params.set('autoplay', '1');
-      if (!content.controls) params.set('controls', '0');
-      
-      return `https://www.youtube.com/embed/${videoId}?${params.toString()}`;
-    }
-    
-    return url; // Return original URL if not YouTube
-  };
+  // parseYouTubeUrl handles watch?v=, youtu.be/, /shorts/, /live/ and a pasted
+  // /embed/ URL alike -- the old regex matched only the first two and returned
+  // anything else verbatim, so YouTube's own Share > Embed string slipped through
+  // as a cookie-setting www.youtube.com frame.
+  const parsed = parseYouTubeUrl(content.url);
+  const embedParams = new URLSearchParams(parsed ? parsed.params.toString() : '');
+  if (content.controls === false) embedParams.set('controls', '0');
+  // content.autoplay is intentionally NOT applied on load: an autoplaying frame
+  // boots the YouTube player during a Lighthouse run and re-creates the Cookie
+  // issue. The facade autoplays after the user clicks, which is the same UX.
 
   return (
     <div className="my-4" {...visualEditAttributes}>
@@ -52,13 +51,24 @@ const VideoEmbedBlockRenderer: React.FC<VideoEmbedBlockRendererProps> = ({
         <h3 className="text-lg font-semibold mb-2">{content.title}</h3>
       )}
       <div className="relative aspect-video">
-        <iframe
-          src={getEmbedUrl(content.url)}
-          title={content.title || "Video"}
-          className="w-full h-full rounded-lg"
-          allowFullScreen
-          loading="lazy"
-        />
+        {parsed ? (
+          <YouTubeFacade
+            videoId={parsed.videoId}
+            title={content.title}
+            query={embedParams.toString()}
+            className="absolute inset-0 h-full w-full rounded-lg"
+            priority={priority}
+          />
+        ) : (
+          <iframe
+            src={content.url}
+            title={content.title || "Video"}
+            className="w-full h-full rounded-lg"
+            referrerPolicy="strict-origin-when-cross-origin"
+            allowFullScreen
+            loading="lazy"
+          />
+        )}
       </div>
     </div>
   );

package/templates/nextblock-template/components/blocks/types.ts

@@ -1,9 +1,9 @@
 import type { Database } from '@nextblock-cms/db';
 
-export type PostWithMediaDimensions = Database['public']['Tables']['posts']['Row'] & {
-    feature_image_url: string | null;
-    feature_image_width: number | null;
-    feature_image_height: number | null;
-    blur_data_url: string | null;
-    estimated_read_time_minutes: number;
-};
+export type PostWithMediaDimensions = Database['public']['Tables']['posts']['Row'] & {
+    feature_image_url: string | null;
+    feature_image_width: number | null;
+    feature_image_height: number | null;
+    blur_data_url: string | null;
+    estimated_read_time_minutes: number;
+};

package/templates/nextblock-template/components/env-var-warning.tsx

@@ -1,6 +1,6 @@
-import Link from "next/link";
-import { Badge } from "@nextblock-cms/ui";
-import { Button } from "@nextblock-cms/ui";
+import Link from "next/link";
+import { Badge } from "@nextblock-cms/ui";
+import { Button } from "@nextblock-cms/ui";
 
 export function EnvVarWarning() {
   return (