create-nextblock 0.2.78 → 0.8.0

package/templates/nextblock-template/app/cms/custom-blocks/components/ImageR2Picker.tsx

@@ -0,0 +1,221 @@
+'use client';
+
+import { useRef, useState } from 'react';
+import { Image as ImageIcon, Loader2, UploadCloud, X } from 'lucide-react';
+import { Button, Input, Label } from '@nextblock-cms/ui';
+
+export type ImageR2Value = {
+  alt?: string;
+  file_name?: string;
+  file_type?: string;
+  height?: number;
+  object_key: string;
+  size_bytes?: number;
+  url: string;
+  width?: number;
+};
+
+export type ImageR2PickerProps = {
+  accept?: string[];
+  disabled?: boolean;
+  folder?: string;
+  maxBytes?: number;
+  onChange: (value: ImageR2Value | null) => void;
+  value?: ImageR2Value | null;
+};
+
+type PresignedUploadResponse = {
+  error?: string;
+  headers?: Record<string, string>;
+  objectKey?: string;
+  publicUrl?: string;
+  uploadUrl?: string;
+};
+
+const DEFAULT_ACCEPT = ['image/avif', 'image/gif', 'image/jpeg', 'image/png', 'image/webp'];
+const DEFAULT_MAX_BYTES = 10 * 1024 * 1024;
+
+function deriveAltText(filename: string) {
+  const base = filename.replace(/\.[^.]+$/, '');
+  return base
+    .replace(/[-_]+/g, ' ')
+    .replace(/\s+/g, ' ')
+    .trim();
+}
+
+function readImageDimensions(file: File) {
+  return new Promise<{ height?: number; width?: number }>((resolve) => {
+    const objectUrl = URL.createObjectURL(file);
+    const image = new window.Image();
+
+    image.onload = () => {
+      URL.revokeObjectURL(objectUrl);
+      resolve({ height: image.naturalHeight || undefined, width: image.naturalWidth || undefined });
+    };
+    image.onerror = () => {
+      URL.revokeObjectURL(objectUrl);
+      resolve({});
+    };
+    image.src = objectUrl;
+  });
+}
+
+export function ImageR2Picker({
+  accept = DEFAULT_ACCEPT,
+  disabled = false,
+  folder = 'custom-blocks',
+  maxBytes = DEFAULT_MAX_BYTES,
+  onChange,
+  value,
+}: ImageR2PickerProps) {
+  const inputRef = useRef<HTMLInputElement | null>(null);
+  const [error, setError] = useState<string | null>(null);
+  const [isUploading, setIsUploading] = useState(false);
+
+  async function handleFile(file: File | null) {
+    if (!file) {
+      return;
+    }
+
+    setError(null);
+
+    if (!accept.includes(file.type)) {
+      setError('Select an AVIF, GIF, JPEG, PNG, or WebP image.');
+      return;
+    }
+
+    if (file.size > maxBytes) {
+      setError(`Images are limited to ${Math.round(maxBytes / (1024 * 1024))} MB.`);
+      return;
+    }
+
+    setIsUploading(true);
+    try {
+      const dimensions = await readImageDimensions(file);
+      const presignedResponse = await fetch('/api/media/r2-presigned', {
+        body: JSON.stringify({
+          contentType: file.type,
+          filename: file.name,
+          folder,
+          size: file.size,
+        }),
+        headers: { 'Content-Type': 'application/json' },
+        method: 'POST',
+      });
+      const presignedPayload = (await presignedResponse.json()) as PresignedUploadResponse;
+
+      if (!presignedResponse.ok || !presignedPayload.uploadUrl || !presignedPayload.objectKey) {
+        throw new Error(presignedPayload.error || 'Could not prepare the upload.');
+      }
+
+      const uploadResponse = await fetch(presignedPayload.uploadUrl, {
+        body: file,
+        headers: presignedPayload.headers ?? { 'Content-Type': file.type },
+        method: 'PUT',
+      });
+
+      if (!uploadResponse.ok) {
+        throw new Error('The image upload did not complete.');
+      }
+
+      onChange({
+        alt: value?.alt || deriveAltText(file.name),
+        file_name: file.name,
+        file_type: file.type,
+        height: dimensions.height,
+        object_key: presignedPayload.objectKey,
+        size_bytes: file.size,
+        url: presignedPayload.publicUrl || `/${presignedPayload.objectKey}`,
+        width: dimensions.width,
+      });
+    } catch (uploadError) {
+      console.error('[ImageR2Picker] Upload failed:', uploadError);
+      setError(uploadError instanceof Error ? uploadError.message : 'The upload failed.');
+    } finally {
+      setIsUploading(false);
+      if (inputRef.current) {
+        inputRef.current.value = '';
+      }
+    }
+  }
+
+  return (
+    <div className="space-y-3">
+      <input
+        ref={inputRef}
+        accept={accept.join(',')}
+        className="sr-only"
+        disabled={disabled || isUploading}
+        onChange={(event) => void handleFile(event.target.files?.[0] ?? null)}
+        type="file"
+      />
+
+      <div className="flex items-center gap-3">
+        <div className="relative flex h-20 w-20 shrink-0 items-center justify-center overflow-hidden rounded-md border bg-muted">
+          {value?.url ? (
+            // Plain img (not next/image): the source can be any R2/external host
+            // and must never crash the editor on an unconfigured next/image host.
+            // eslint-disable-next-line @next/next/no-img-element
+            <img
+              alt={value.alt || value.file_name || 'Uploaded image'}
+              className="h-full w-full object-cover"
+              src={value.url}
+            />
+          ) : (
+            <ImageIcon className="h-7 w-7 text-muted-foreground" />
+          )}
+        </div>
+
+        <div className="min-w-0 flex-1 space-y-2">
+          <div className="flex flex-wrap gap-2">
+            <Button
+              disabled={disabled || isUploading}
+              onClick={() => inputRef.current?.click()}
+              size="sm"
+              type="button"
+              variant="outline"
+            >
+              {isUploading ? (
+                <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+              ) : (
+                <UploadCloud className="mr-2 h-4 w-4" />
+              )}
+              Upload
+            </Button>
+            {value ? (
+              <Button
+                disabled={disabled || isUploading}
+                onClick={() => onChange(null)}
+                size="sm"
+                type="button"
+                variant="ghost"
+              >
+                <X className="mr-2 h-4 w-4" />
+                Clear
+              </Button>
+            ) : null}
+          </div>
+
+          <p className="truncate text-xs text-muted-foreground">
+            {value?.object_key || 'No R2 image selected'}
+          </p>
+        </div>
+      </div>
+
+      {value ? (
+        <div className="space-y-1">
+          <Label htmlFor="image-r2-alt">Alt text</Label>
+          <Input
+            disabled={disabled || isUploading}
+            id="image-r2-alt"
+            onChange={(event) => onChange({ ...value, alt: event.target.value })}
+            placeholder="Describe the image"
+            value={value.alt ?? ''}
+          />
+        </div>
+      ) : null}
+
+      {error ? <p className="text-sm text-destructive">{error}</p> : null}
+    </div>
+  );
+}

package/templates/nextblock-template/app/cms/custom-blocks/new/page.tsx

@@ -0,0 +1,12 @@
+import React from "react";
+import { BlockComposer } from "../components/BlockComposer";
+
+export const dynamic = "force-dynamic";
+
+export default function CreateCustomBlockPage() {
+  return (
+    <div className="w-full">
+      <BlockComposer mode="create" />
+    </div>
+  );
+}

package/templates/nextblock-template/app/cms/custom-blocks/page.tsx

@@ -0,0 +1,438 @@
+"use client";
+
+import React, { useState, useEffect, useTransition } from "react";
+import Link from "next/link";
+import { useRouter } from "next/navigation";
+import { toast } from "react-hot-toast";
+import {
+  PlusCircle,
+  Copy,
+  Trash2,
+  Edit,
+  Search,
+  Grid,
+  List,
+  Boxes,
+  Loader2,
+  Code,
+  Layers,
+  Database,
+  ImageIcon,
+  Type,
+  HelpCircle,
+} from "lucide-react";
+import {
+  Button,
+  Card,
+  CardHeader,
+  CardTitle,
+  CardDescription,
+  CardContent,
+  CardFooter,
+  Badge,
+  Input,
+  ConfirmationDialog,
+  Skeleton,
+} from "@nextblock-cms/ui";
+import {
+  listCustomBlockDefinitions,
+  deleteCustomBlockDefinition,
+  duplicateCustomBlockDefinition,
+} from "./actions";
+import { BlocksLibraryTransferControls } from "./components/BlocksLibraryTransferControls";
+import type { CustomBlockDefinition } from "@nextblock-cms/utils";
+
+export default function CustomBlocksListPage() {
+  const router = useRouter();
+  const [isPending, startTransition] = useTransition();
+  const [blocks, setBlocks] = useState<CustomBlockDefinition[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [searchQuery, setSearchQuery] = useState("");
+  const [viewMode, setViewMode] = useState<"grid" | "list">("grid");
+  const [deletingBlock, setDeletingBlock] = useState<CustomBlockDefinition | null>(null);
+  const [duplicatingId, setDuplicatingId] = useState<string | null>(null);
+
+  const fetchBlocks = async () => {
+    setLoading(true);
+    try {
+      const res = await listCustomBlockDefinitions();
+      if (res.success) {
+        setBlocks(res.data);
+      } else {
+        toast.error(res.error || "Failed to load custom blocks.");
+      }
+    } catch (err) {
+      console.error(err);
+      toast.error("An error occurred loading blocks.");
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    fetchBlocks();
+
+    // Refetch when Cortex AI (or another surface) reports a custom block change,
+    // and when the tab regains focus, so the library stays in sync without a reload.
+    const handleDataChanged = () => fetchBlocks();
+    window.addEventListener("nextblock:cortex-data-changed", handleDataChanged);
+    window.addEventListener("focus", handleDataChanged);
+
+    return () => {
+      window.removeEventListener("nextblock:cortex-data-changed", handleDataChanged);
+      window.removeEventListener("focus", handleDataChanged);
+    };
+  }, []);
+
+  const handleDuplicate = async (id: string, name: string) => {
+    setDuplicatingId(id);
+    const toastId = toast.loading(`Duplicating block "${name}"...`);
+    try {
+      const res = await duplicateCustomBlockDefinition(id);
+      if (res.success) {
+        toast.success(`Duplicated "${name}" successfully!`, { id: toastId });
+        fetchBlocks();
+      } else {
+        toast.error(res.error || `Failed to duplicate "${name}".`, { id: toastId });
+      }
+    } catch (err) {
+      console.error(err);
+      toast.error("An unexpected error occurred during duplication.", { id: toastId });
+    } finally {
+      setDuplicatingId(null);
+    }
+  };
+
+  const handleDelete = async () => {
+    if (!deletingBlock) return;
+    const blockName = deletingBlock.name;
+    const blockId = deletingBlock.id;
+    setDeletingBlock(null);
+
+    const toastId = toast.loading(`Deleting block "${blockName}"...`);
+    try {
+      const res = await deleteCustomBlockDefinition(blockId);
+      if (res.success) {
+        toast.success(`Deleted block "${blockName}".`, { id: toastId });
+        fetchBlocks();
+      } else {
+        toast.error(res.error || `Failed to delete block "${blockName}".`, { id: toastId });
+      }
+    } catch (err) {
+      console.error(err);
+      toast.error("An unexpected error occurred during deletion.", { id: toastId });
+    }
+  };
+
+  const filteredBlocks = blocks.filter(
+    (b) =>
+      b.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
+      b.slug.toLowerCase().includes(searchQuery.toLowerCase()) ||
+      (b.description && b.description.toLowerCase().includes(searchQuery.toLowerCase()))
+  );
+
+  const getFieldIcon = (type: string) => {
+    switch (type) {
+      case "text":
+        return <Type className="h-3 w-3 mr-1 text-sky-500" />;
+      case "rich-text":
+        return <Code className="h-3 w-3 mr-1 text-emerald-500" />;
+      case "image_r2":
+        return <ImageIcon className="h-3 w-3 mr-1 text-amber-500" />;
+      case "db_relation":
+        return <Database className="h-3 w-3 mr-1 text-violet-500" />;
+      default:
+        return <HelpCircle className="h-3 w-3 mr-1 text-slate-500" />;
+    }
+  };
+
+  return (
+    <div className="w-full space-y-6">
+      {/* Header Panel */}
+      <div className="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4 border-b border-slate-200 dark:border-slate-800 pb-5">
+        <div>
+          <h2 className="text-2xl font-bold tracking-tight text-slate-900 dark:text-slate-50">Blocks Library</h2>
+          <p className="text-sm text-muted-foreground mt-1">
+            Build and manage custom block modules, layouts, and relations for rich pages.
+          </p>
+        </div>
+        <div className="flex flex-wrap items-center gap-2">
+          <BlocksLibraryTransferControls onImported={fetchBlocks} />
+          <Button asChild className="shadow-sm hover:scale-[1.01] transition-transform">
+            <Link href="/cms/custom-blocks/new">
+              <PlusCircle className="mr-2 h-4 w-4" /> Create Custom Block
+            </Link>
+          </Button>
+        </div>
+      </div>
+
+      {/* Toolbar */}
+      <div className="flex flex-col sm:flex-row gap-4 items-center justify-between">
+        <div className="relative w-full sm:max-w-md">
+          <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
+          <Input
+            placeholder="Search custom blocks by name or slug..."
+            value={searchQuery}
+            onChange={(e) => setSearchQuery(e.target.value)}
+            className="pl-9 dark:bg-slate-900/60"
+          />
+        </div>
+        <div className="flex items-center gap-2 border rounded-lg p-1 bg-white dark:bg-slate-900 border-slate-200 dark:border-slate-800 self-end sm:self-auto">
+          <Button
+            variant={viewMode === "grid" ? "secondary" : "ghost"}
+            size="icon"
+            onClick={() => setViewMode("grid")}
+            className="h-8 w-8"
+            title="Grid View"
+          >
+            <Grid className="h-4 w-4" />
+          </Button>
+          <Button
+            variant={viewMode === "list" ? "secondary" : "ghost"}
+            size="icon"
+            onClick={() => setViewMode("list")}
+            className="h-8 w-8"
+            title="List View"
+          >
+            <List className="h-4 w-4" />
+          </Button>
+        </div>
+      </div>
+
+      {/* Listing Grid/List */}
+      {loading ? (
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+          {[1, 2, 3].map((n) => (
+            <Card key={n} className="h-[240px] border-slate-200 dark:border-slate-800">
+              <CardHeader className="space-y-2">
+                <Skeleton className="h-5 w-2/3" />
+                <Skeleton className="h-4 w-1/3" />
+              </CardHeader>
+              <CardContent className="space-y-3">
+                <Skeleton className="h-10 w-full" />
+                <Skeleton className="h-4 w-1/2" />
+              </CardContent>
+            </Card>
+          ))}
+        </div>
+      ) : filteredBlocks.length === 0 ? (
+        <div className="flex flex-col items-center justify-center text-center py-16 px-4 border border-dashed border-slate-200 dark:border-slate-800 rounded-xl bg-white dark:bg-slate-900/40">
+          <div className="h-16 w-16 rounded-full bg-primary/10 flex items-center justify-center text-primary mb-4">
+            <Boxes className="h-8 w-8" />
+          </div>
+          <h3 className="text-lg font-semibold text-slate-900 dark:text-slate-50">No blocks found</h3>
+          <p className="text-sm text-muted-foreground mt-2 max-w-sm">
+            {searchQuery
+              ? "No blocks matched your search criteria. Try modifying your filters."
+              : "No custom blocks are registered. Start creating custom layouts or prompt Cortex AI."}
+          </p>
+          {!searchQuery && (
+            <Button asChild className="mt-6">
+              <Link href="/cms/custom-blocks/new">
+                <PlusCircle className="mr-2 h-4 w-4" /> Add Your First Block
+              </Link>
+            </Button>
+          )}
+        </div>
+      ) : viewMode === "grid" ? (
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+          {filteredBlocks.map((block) => (
+            <Card
+              key={block.id}
+              className="flex flex-col justify-between border-slate-200 dark:border-slate-800/80 bg-white dark:bg-slate-900 hover:shadow-lg hover:border-slate-300 dark:hover:border-slate-700/80 transition-all duration-200 rounded-xl overflow-hidden"
+            >
+              <CardHeader className="pb-3 border-b border-slate-100 dark:border-slate-800/50">
+                <div className="flex justify-between items-start gap-2">
+                  <div className="space-y-1">
+                    <CardTitle className="text-lg font-bold text-slate-900 dark:text-slate-50 leading-tight">
+                      {block.name}
+                    </CardTitle>
+                    <code className="text-xs font-mono bg-slate-100 dark:bg-slate-800 text-slate-600 dark:text-slate-300 px-1.5 py-0.5 rounded block w-fit">
+                      {block.slug}
+                    </code>
+                  </div>
+                  <Badge
+                    variant={block.is_original ? "outline" : "default"}
+                    className={
+                      block.is_original
+                        ? "bg-slate-50 dark:bg-slate-800 text-slate-600 dark:text-slate-300 border-slate-200 dark:border-slate-700 font-medium shrink-0"
+                        : "bg-indigo-50 dark:bg-indigo-950/40 text-indigo-700 dark:text-indigo-300 border-indigo-200 dark:border-indigo-800/60 font-medium shrink-0"
+                    }
+                  >
+                    {block.is_original ? "Original" : "Custom"}
+                  </Badge>
+                </div>
+                {block.description && (
+                  <p className="text-xs text-muted-foreground line-clamp-2 mt-2 leading-relaxed">
+                    {block.description}
+                  </p>
+                )}
+              </CardHeader>
+
+              <CardContent className="py-4 space-y-3 flex-grow">
+                <div>
+                  <h4 className="text-xs font-semibold text-slate-500 dark:text-slate-400 uppercase tracking-wider mb-2">
+                    Fields Schema ({block.fields.length})
+                  </h4>
+                  {block.fields.length === 0 ? (
+                    <span className="text-xs text-muted-foreground italic">No fields defined</span>
+                  ) : (
+                    <div className="flex flex-wrap gap-1.5 max-h-24 overflow-y-auto">
+                      {block.fields.map((f) => (
+                        <div
+                          key={f.key}
+                          className="inline-flex items-center text-xs px-2 py-1 rounded-md border border-slate-200 dark:border-slate-800 bg-slate-50/50 dark:bg-slate-900/50 text-slate-700 dark:text-slate-300 font-medium"
+                          title={`${f.label} (${f.type})`}
+                        >
+                          {getFieldIcon(f.type)}
+                          <span className="truncate max-w-[100px]">{f.key}</span>
+                        </div>
+                      ))}
+                    </div>
+                  )}
+                </div>
+              </CardContent>
+
+              <CardFooter className="pt-3 pb-4 px-6 bg-slate-50/50 dark:bg-slate-900/30 border-t border-slate-100 dark:border-slate-800/40 flex justify-between items-center">
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  className="text-destructive hover:bg-destructive/10 hover:text-destructive shrink-0 px-2.5"
+                  onClick={() => setDeletingBlock(block)}
+                >
+                  <Trash2 className="h-4 w-4 mr-1.5" /> Delete
+                </Button>
+                <div className="flex gap-2 shrink-0">
+                  <Button
+                    variant="outline"
+                    size="sm"
+                    className="px-2.5 dark:border-slate-700"
+                    disabled={duplicatingId === block.id}
+                    onClick={() => handleDuplicate(block.id, block.name)}
+                  >
+                    {duplicatingId === block.id ? (
+                      <Loader2 className="h-4 w-4 animate-spin mr-1.5" />
+                    ) : (
+                      <Copy className="h-4 w-4 mr-1.5" />
+                    )}
+                    Duplicate
+                  </Button>
+                  <Button asChild size="sm" className="px-2.5">
+                    <Link href={`/cms/custom-blocks/${block.id}/edit`}>
+                      <Edit className="h-4 w-4 mr-1.5" /> Edit
+                    </Link>
+                  </Button>
+                </div>
+              </CardFooter>
+            </Card>
+          ))}
+        </div>
+      ) : (
+        /* List View */
+        <div className="rounded-xl border border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900 overflow-hidden shadow-sm">
+          <table className="w-full text-left border-collapse">
+            <thead>
+              <tr className="border-b border-slate-200 dark:border-slate-800 bg-slate-50/50 dark:bg-slate-900/50 text-xs font-semibold text-slate-500 uppercase tracking-wider">
+                <th className="px-6 py-4">Block Name / Slug</th>
+                <th className="px-6 py-4">Description</th>
+                <th className="px-6 py-4">Origin</th>
+                <th className="px-6 py-4">Fields count</th>
+                <th className="px-6 py-4 text-right">Actions</th>
+              </tr>
+            </thead>
+            <tbody className="divide-y divide-slate-200 dark:divide-slate-800 text-sm">
+              {filteredBlocks.map((block) => (
+                <tr
+                  key={block.id}
+                  className="hover:bg-slate-50/50 dark:hover:bg-slate-900/30 transition-colors"
+                >
+                  <td className="px-6 py-4 font-medium text-slate-900 dark:text-slate-100">
+                    <div className="flex flex-col gap-1">
+                      <span className="font-semibold text-slate-900 dark:text-slate-100">
+                        {block.name}
+                      </span>
+                      <code className="text-xs font-mono text-slate-500 dark:text-slate-400">
+                        {block.slug}
+                      </code>
+                    </div>
+                  </td>
+                  <td className="px-6 py-4 text-muted-foreground max-w-sm truncate">
+                    {block.description || <span className="italic text-xs">No description</span>}
+                  </td>
+                  <td className="px-6 py-4">
+                    <Badge
+                      variant={block.is_original ? "outline" : "default"}
+                      className={
+                        block.is_original
+                          ? "bg-slate-50 dark:bg-slate-800 text-slate-600 dark:text-slate-300 border-slate-200 dark:border-slate-700"
+                          : "bg-indigo-50 dark:bg-indigo-950/40 text-indigo-700 dark:text-indigo-300 border-indigo-200 dark:border-indigo-800/60"
+                      }
+                    >
+                      {block.is_original ? "Original" : "Custom"}
+                    </Badge>
+                  </td>
+                  <td className="px-6 py-4">
+                    <Badge variant="secondary" className="font-medium bg-slate-100 dark:bg-slate-800">
+                      {block.fields.length} fields
+                    </Badge>
+                  </td>
+                  <td className="px-6 py-4 text-right">
+                    <div className="flex items-center justify-end gap-2">
+                      <Button
+                        variant="ghost"
+                        size="icon"
+                        disabled={duplicatingId === block.id}
+                        onClick={() => handleDuplicate(block.id, block.name)}
+                        title="Duplicate"
+                        className="h-8 w-8 text-slate-600 dark:text-slate-300"
+                      >
+                        {duplicatingId === block.id ? (
+                          <Loader2 className="h-4 w-4 animate-spin" />
+                        ) : (
+                          <Copy className="h-4 w-4" />
+                        )}
+                      </Button>
+                      <Button
+                        asChild
+                        variant="ghost"
+                        size="icon"
+                        title="Edit"
+                        className="h-8 w-8 text-slate-600 dark:text-slate-300"
+                      >
+                        <Link href={`/cms/custom-blocks/${block.id}/edit`}>
+                          <Edit className="h-4 w-4" />
+                        </Link>
+                      </Button>
+                      <Button
+                        variant="ghost"
+                        size="icon"
+                        onClick={() => setDeletingBlock(block)}
+                        title="Delete"
+                        className="h-8 w-8 text-destructive hover:bg-destructive/10 hover:text-destructive"
+                      >
+                        <Trash2 className="h-4 w-4" />
+                      </Button>
+                    </div>
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      )}
+
+      {/* Confirmation Dialog for Deleting Block */}
+      <ConfirmationDialog
+        isOpen={deletingBlock !== null}
+        onOpenChange={(open) => {
+          if (!open) setDeletingBlock(null);
+        }}
+        onConfirm={handleDelete}
+        title="Delete Block Definition"
+        description={`Are you sure you want to delete the block "${deletingBlock?.name}"? All custom instances of this block in pages and posts will lose their visual formatting and render settings.`}
+        confirmText="Delete Block"
+        isDestructive={true}
+      />
+    </div>
+  );
+}