create-nextblock 0.2.77 → 0.8.0

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

@@ -3,7 +3,8 @@
 import React from 'react';
 import { Label } from "@nextblock-cms/ui";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@nextblock-cms/ui";
-import type { SectionBlockContent } from "@/lib/blocks/blockRegistry";
+import { Checkbox, Input } from "@nextblock-cms/ui";
+import { SectionBlockContent } from '../../../../lib/blocks/blockRegistry';
 import BackgroundSelector from './BackgroundSelector';
 
 interface SectionConfigPanelProps {
@@ -55,18 +56,18 @@ export default function SectionConfigPanel({ content, onChange }: SectionConfigP
   };
 
   return (
-    <div className="space-y-4">
-      <div className="flex items-center justify-between">
-        <h3 className="text-lg font-medium text-gray-900 dark:text-gray-100">Section Configuration</h3>
+    <div className="rounded-lg border bg-card p-4 shadow-sm space-y-4">
+      <div className="flex items-start justify-between gap-4 border-b border-muted/50 pb-2 mb-1">
+        <h2 className="text-sm font-bold tracking-tight text-gray-900 dark:text-gray-100">Section Configuration</h2>
       </div>
       
-      <>
-        <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+      <div className="space-y-4 pt-1">
+        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
           {/* Container Type */}
-          <div className="space-y-2">
-            <Label htmlFor="container-type">Container Type</Label>
+          <div className="space-y-1.5">
+            <Label htmlFor="container-type" className="text-sm font-medium text-gray-700 dark:text-gray-300">Container Type</Label>
             <Select value={content.container_type} onValueChange={handleContainerTypeChange}>
-              <SelectTrigger id="container-type">
+              <SelectTrigger id="container-type" className="h-9 text-sm">
                 <SelectValue placeholder="Select container type" />
               </SelectTrigger>
               <SelectContent>
@@ -80,10 +81,10 @@ export default function SectionConfigPanel({ content, onChange }: SectionConfigP
           </div>
 
           {/* Desktop Columns */}
-          <div className="space-y-2">
-            <Label htmlFor="desktop-columns">Desktop Columns</Label>
+          <div className="space-y-1.5">
+            <Label htmlFor="desktop-columns" className="text-sm font-medium text-gray-700 dark:text-gray-300">Desktop Columns</Label>
             <Select value={content.responsive_columns?.desktop?.toString()} onValueChange={handleDesktopColumnsChange}>
-              <SelectTrigger id="desktop-columns">
+              <SelectTrigger id="desktop-columns" className="h-9 text-sm">
                 <SelectValue placeholder="Select columns" />
               </SelectTrigger>
               <SelectContent>
@@ -96,10 +97,10 @@ export default function SectionConfigPanel({ content, onChange }: SectionConfigP
           </div>
 
           {/* Column Gap */}
-          <div className="space-y-2">
-            <Label htmlFor="column-gap">Column Gap</Label>
+          <div className="space-y-1.5">
+            <Label htmlFor="column-gap" className="text-sm font-medium text-gray-700 dark:text-gray-300">Column Gap</Label>
             <Select value={content.column_gap} onValueChange={handleColumnGapChange}>
-              <SelectTrigger id="column-gap">
+              <SelectTrigger id="column-gap" className="h-9 text-sm">
                 <SelectValue placeholder="Select gap" />
               </SelectTrigger>
               <SelectContent>
@@ -113,13 +114,13 @@ export default function SectionConfigPanel({ content, onChange }: SectionConfigP
           </div>
 
           {/* Vertical Alignment */}
-          <div className="space-y-2">
-            <Label htmlFor="vertical-alignment">Vertical Alignment</Label>
+          <div className="space-y-1.5">
+            <Label htmlFor="vertical-alignment" className="text-sm font-medium text-gray-700 dark:text-gray-300">Vertical Alignment</Label>
             <Select 
               value={content.vertical_alignment || 'start'} 
               onValueChange={(value: any) => onChange({ ...content, vertical_alignment: value })}
             >
-              <SelectTrigger id="vertical-alignment">
+              <SelectTrigger id="vertical-alignment" className="h-9 text-sm">
                 <SelectValue placeholder="Select alignment" />
               </SelectTrigger>
               <SelectContent>
@@ -132,20 +133,96 @@ export default function SectionConfigPanel({ content, onChange }: SectionConfigP
           </div>
         </div>
 
-        {/* Background Configuration */}
-        <div className="space-y-4 pt-4 border-t border-gray-200 dark:border-gray-700">
-          <h4 className="text-md font-medium text-gray-900 dark:text-gray-100">Background</h4>
-          <BackgroundSelector
-            background={content.background || { type: 'none' }}
-            onChange={(newBackground) => {
-              onChange({
-                ...content,
-                background: newBackground,
-              });
-            }}
-          />
+        {/* Hero & Slider Toggles & Settings in a compact single flex flow */}
+        <div className="flex flex-wrap items-center gap-x-6 gap-y-3 pt-3 border-t border-muted/50">
+          {/* 1. Hero Section */}
+          <div className="flex items-center space-x-2">
+            <Checkbox
+              id="is-hero"
+              checked={content.is_hero || false}
+              onCheckedChange={(checked) => onChange({ ...content, is_hero: !!checked })}
+            />
+            <Label htmlFor="is-hero" className="text-sm font-medium cursor-pointer text-gray-700 dark:text-gray-300">
+              Hero Section (Prioritized image loading)
+            </Label>
+          </div>
+
+          {/* 2. Enable Slider */}
+          <div className="flex items-center space-x-2">
+            <Checkbox
+              id="slider"
+              checked={content.slider || false}
+              onCheckedChange={(checked) => onChange({ ...content, slider: !!checked })}
+            />
+            <Label htmlFor="slider" className="text-sm font-medium cursor-pointer text-gray-700 dark:text-gray-300">
+              Enable Slider (Carousel layout)
+            </Label>
+          </div>
+
+          <div className="h-4 w-px bg-muted/60 hidden md:block" />
+
+          {/* 3. Enable Autoplay */}
+          <div className={`flex items-center space-x-2 transition-opacity duration-200 ${!content.slider ? 'opacity-40' : ''}`}>
+            <Checkbox
+              id="autoplay"
+              disabled={!content.slider}
+              checked={content.slider && (content.autoplay || false)}
+              onCheckedChange={(checked) => onChange({ ...content, autoplay: !!checked })}
+              className={!content.slider ? 'cursor-not-allowed' : ''}
+            />
+            <Label 
+              htmlFor="autoplay" 
+              className={`text-sm font-medium cursor-pointer ${!content.slider ? 'text-muted-foreground/60 cursor-not-allowed' : 'text-gray-700 dark:text-gray-300'}`}
+            >
+              Enable Autoplay
+            </Label>
+          </div>
+
+          {/* 4. Autoplay Interval */}
+          <div className={`flex items-center gap-x-2 transition-opacity duration-200 ${(!content.slider || !content.autoplay) ? 'opacity-40' : ''}`}>
+            <Label 
+              htmlFor="timeframe" 
+              className={`text-sm font-medium whitespace-nowrap ${(!content.slider || !content.autoplay) ? 'text-muted-foreground/60 cursor-not-allowed' : 'text-gray-700 dark:text-gray-300'}`}
+            >
+              Interval:
+            </Label>
+            <div className="flex items-center space-x-1.5">
+              <Input
+                id="timeframe"
+                type="number"
+                min={1}
+                disabled={!content.slider || !content.autoplay}
+                value={content.timeframe !== undefined ? content.timeframe : 5}
+                onChange={(e) => {
+                  const val = parseInt(e.target.value);
+                  onChange({ ...content, timeframe: isNaN(val) || val <= 0 ? 5 : val });
+                }}
+                placeholder="5"
+                className={`h-9 w-16 text-center text-sm ${(!content.slider || !content.autoplay) ? 'cursor-not-allowed bg-muted/40' : ''}`}
+              />
+              <span className={`text-sm text-muted-foreground ${(!content.slider || !content.autoplay) ? 'cursor-not-allowed' : ''}`}>
+                seconds
+              </span>
+            </div>
+          </div>
         </div>
-      </>
+
+        {/* Background Configuration */}
+        {!content.slider && (
+          <div className="space-y-3 pt-3 border-t border-muted/50">
+            <h3 className="text-sm font-bold text-gray-900 dark:text-gray-100">Background</h3>
+            <BackgroundSelector
+              background={content.background || { type: 'none' }}
+              onChange={(newBackground) => {
+                onChange({
+                  ...content,
+                  background: newBackground,
+                });
+              }}
+            />
+          </div>
+        )}
+      </div>
     </div>
   );
 }

package/templates/nextblock-template/app/cms/blocks/editors/DynamicCustomBlockEditor.tsx

@@ -0,0 +1,167 @@
+// app/cms/blocks/editors/DynamicCustomBlockEditor.tsx
+"use client";
+
+import React, { useEffect, useState } from "react";
+import { Label } from "@nextblock-cms/ui";
+import { Input } from "@nextblock-cms/ui";
+import { Textarea } from "@nextblock-cms/ui";
+import { BlockEditorProps } from "../components/BlockEditorModal";
+import { DBRelationSelect } from "../../custom-blocks/components/DBRelationSelect";
+import { ImageR2Picker } from "../../custom-blocks/components/ImageR2Picker";
+import type { CustomBlockField } from "@nextblock-cms/utils";
+
+type CustomBlockDefinitionResponse = {
+  id: string;
+  slug: string;
+  name: string;
+  fields: CustomBlockField[];
+};
+
+// Fallback raw-JSON editor for block types with no custom definition.
+function JsonFallbackEditor({
+  content,
+  onChange,
+}: {
+  content: Record<string, any>;
+  onChange: (next: any) => void;
+}) {
+  const [value, setValue] = useState(() => JSON.stringify(content ?? {}, null, 2));
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    setValue(JSON.stringify(content ?? {}, null, 2));
+    setError(null);
+  }, [content]);
+
+  return (
+    <div className="space-y-2 p-4 border rounded-xl bg-card/50">
+      <Label htmlFor="custom-block-json-fallback" className="text-xs font-semibold">
+        Block Content (JSON)
+      </Label>
+      <Textarea
+        id="custom-block-json-fallback"
+        value={value}
+        spellCheck={false}
+        className="min-h-[320px] font-mono text-xs"
+        onChange={(e) => {
+          const next = e.target.value;
+          setValue(next);
+          try {
+            onChange(JSON.parse(next));
+            setError(null);
+          } catch (parseError) {
+            setError(parseError instanceof Error ? parseError.message : "Invalid JSON");
+          }
+        }}
+      />
+      {error && <p className="text-xs text-destructive">{error}</p>}
+    </div>
+  );
+}
+
+export default function DynamicCustomBlockEditor({
+  block,
+  content,
+  onChange,
+}: BlockEditorProps<Record<string, any>>) {
+  const [definition, setDefinition] = useState<CustomBlockDefinitionResponse | null>(null);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    async function loadDefinition() {
+      try {
+        const response = await fetch("/api/custom-blocks/editor-definitions");
+        if (response.ok) {
+          const payload = await response.json();
+          const blockType = block.block_type || (block as any).type;
+          const def = payload.definitions?.find((d: any) => d.slug === blockType);
+          if (def) {
+            setDefinition(def);
+          }
+        }
+      } catch (err) {
+        console.error("Failed to load custom block definition for editor:", err);
+      } finally {
+        setLoading(false);
+      }
+    }
+    loadDefinition();
+  }, [block.block_type, (block as any).type]);
+
+  if (loading) {
+    return <div className="p-4 text-center text-sm text-muted-foreground">Loading custom block settings...</div>;
+  }
+
+  // No matching custom block definition (e.g. a non-custom block type routed
+  // here as a fallback). Degrade gracefully to a raw JSON editor instead of an
+  // error so content stays editable.
+  if (!definition) {
+    return <JsonFallbackEditor content={content} onChange={onChange} />;
+  }
+
+  const handleFieldChange = (key: string, val: any) => {
+    onChange({ ...content, [key]: val });
+  };
+
+  return (
+    <div className="space-y-4 p-4 border rounded-xl bg-card/50">
+      <div className="pb-2 border-b">
+        <h4 className="text-sm font-bold text-slate-800 dark:text-slate-200">{definition.name}</h4>
+        <p className="text-xs text-muted-foreground">Custom Block Properties</p>
+      </div>
+
+      {definition.fields.map((field) => {
+        const fieldVal = content[field.key];
+        const fieldId = `custom-block-editor-${definition.slug}-${field.key}`;
+
+        return (
+          <div key={field.key} className="space-y-1 pt-2">
+            <Label htmlFor={fieldId} className="text-xs font-semibold text-slate-700 dark:text-slate-300">
+              {field.label} {field.required && <span className="text-destructive">*</span>}
+            </Label>
+            
+            {field.type === "rich-text" ? (
+              <Textarea
+                id={fieldId}
+                value={fieldVal || ""}
+                onChange={(e) => handleFieldChange(field.key, e.target.value)}
+                placeholder={field.placeholder}
+                className="min-h-24 text-sm"
+              />
+            ) : field.type === "image_r2" ? (
+              <ImageR2Picker
+                value={fieldVal && typeof fieldVal === "object" && "url" in fieldVal ? fieldVal : null}
+                onChange={(val) => handleFieldChange(field.key, val)}
+                accept={field.accept}
+                maxBytes={field.max_bytes}
+              />
+            ) : field.type === "db_relation" ? (
+              <DBRelationSelect
+                table={field.table}
+                value={
+                  field.multiple
+                    ? Array.isArray(fieldVal) ? fieldVal.map(String) : []
+                    : fieldVal ? String(fieldVal) : null
+                }
+                onChange={(val) => handleFieldChange(field.key, val)}
+                multiple={field.multiple}
+                displayColumn={field.display_column}
+                valueColumn={field.value_column}
+                filters={field.filters}
+              />
+            ) : (
+              <Input
+                id={fieldId}
+                type="text"
+                value={fieldVal || ""}
+                onChange={(e) => handleFieldChange(field.key, e.target.value)}
+                placeholder={field.placeholder}
+                className="h-9"
+              />
+            )}
+          </div>
+        );
+      })}
+    </div>
+  );
+}

package/templates/nextblock-template/app/cms/blocks/editors/FeaturedProductBlockEditor.tsx

@@ -0,0 +1,31 @@
+"use client";
+
+import { Label, Input } from "@nextblock-cms/ui";
+import { BlockEditorProps } from '../components/BlockEditorModal';
+import { FeaturedProductBlockContent } from '../../../../lib/blocks/ecommerce-block-schemas';
+
+export default function FeaturedProductBlockEditor({ content, onChange }: BlockEditorProps<Partial<FeaturedProductBlockContent>>) {
+
+  const handleChange = (field: keyof FeaturedProductBlockContent, value: any) => {
+    onChange({ ...content, [field]: value });
+  };
+
+  return (
+    <div className="space-y-4 p-3 border-t mt-2">
+      <div>
+        <Label htmlFor="fp-id">Product ID (UUID)</Label>
+        <Input
+          id="fp-id"
+          value={content.productId || ""}
+          onChange={(e) => handleChange('productId', e.target.value)}
+          placeholder="e.g. 123e4567-e89b..."
+          className="mt-1"
+        />
+         <p className="text-xs text-muted-foreground mt-1">
+            Copy the Product ID from the Products table.
+         </p>
+      </div>
+      {/* Additional fields like showBackground can be added here */}
+    </div>
+  );
+}

package/templates/nextblock-template/app/cms/blocks/editors/FormBlockEditor.tsx

@@ -10,8 +10,8 @@ import { Input } from '@nextblock-cms/ui';
 import { Label } from '@nextblock-cms/ui';
 import { Checkbox } from '@nextblock-cms/ui';
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@nextblock-cms/ui';
-import { BlockEditorProps } from '@/app/cms/blocks/components/BlockEditorModal';
-import type { FormBlockContent, FormField, FormFieldOption } from '@/lib/blocks/blockRegistry';
+import { BlockEditorProps } from '../components/BlockEditorModal';
+import { FormBlockContent, FormField, FormFieldOption } from '../../../../lib/blocks/blockRegistry';
 
 // Sub-component for a single editable form field in the editor
 const SortableFormField = ({ field, index, onUpdate, onDelete }: { field: FormField, index: number, onUpdate: (index: number, field: FormField) => void, onDelete: (index: number) => void }) => {

package/templates/nextblock-template/app/cms/blocks/editors/HeadingBlockEditor.tsx

@@ -5,7 +5,7 @@ import React from "react";
 import { Label } from "@nextblock-cms/ui";
 import { Input } from "@nextblock-cms/ui";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@nextblock-cms/ui";
-import type { HeadingBlockContent } from "@/lib/blocks/blockRegistry";
+import { HeadingBlockContent } from '../../../../lib/blocks/blockRegistry';
 import { BlockEditorProps } from '../components/BlockEditorModal';
 
 export default function HeadingBlockEditor({ content, onChange }: BlockEditorProps<Partial<HeadingBlockContent>>) {

package/templates/nextblock-template/app/cms/blocks/editors/ImageBlockEditor.tsx

@@ -18,11 +18,10 @@ export type ImageBlockContent = {
     height: number | null;
     blur_data_url: string | null;
 };
-import { ImageIcon, X as XIcon } from 'lucide-react';
-import MediaPickerDialog from "@/app/cms/media/components/MediaPickerDialog"; // Import the upload form
-import { BlockEditorProps } from '../components/BlockEditorModal';
-
-const R2_BASE_URL = process.env.NEXT_PUBLIC_R2_BASE_URL || "";
+import { ImageIcon, X as XIcon } from 'lucide-react';
+import MediaPickerDialog from "../../media/components/MediaPickerDialog"; // Import the upload form
+import { BlockEditorProps } from '../components/BlockEditorModal';
+import { resolveMediaUrl } from '../../../../lib/media/resolveMediaUrl';
 
 export default function ImageBlockEditor({ content, onChange }: BlockEditorProps<Partial<ImageBlockContent>>) {
   const [selectedMediaObjectKey, setSelectedMediaObjectKey] = useState<string | null | undefined>(content.object_key);
@@ -84,21 +83,22 @@ export default function ImageBlockEditor({ content, onChange }: BlockEditorProps
     setSelectedMediaObjectKey(null);
     onChange({ media_id: null, object_key: null, alt_text: "", caption: "", width: null, height: null, blur_data_url: null });
   };
-
-  const displayObjectKey = content.object_key || selectedMediaObjectKey;
-
-  return (
-    <div className="space-y-3 p-3 border-t mt-2">
-      <Label>Image</Label>
-      <div className="mt-1 p-3 border rounded-md bg-muted/30 min-h-[120px] flex flex-col items-center justify-center">
-        {isLoadingMediaDetails && <p>Loading image details...</p>}
-        {!isLoadingMediaDetails && displayObjectKey && typeof content.width === 'number' && typeof content.height === 'number' && content.width > 0 && content.height > 0 ? (
-          <div className="relative group inline-block" style={{ maxWidth: content.width, maxHeight: 200 }}> {/* Max height for editor preview consistency */}
-            <Image
-              src={`${R2_BASE_URL}/${displayObjectKey}`}
-              alt={content.alt_text || "Selected image"}
-              width={content.width}
-              height={content.height}
+
+  const displayObjectKey = content.object_key || selectedMediaObjectKey;
+  const displayImageUrl = resolveMediaUrl(displayObjectKey);
+
+  return (
+    <div className="space-y-3 p-3 border-t mt-2">
+      <Label>Image</Label>
+      <div className="mt-1 p-3 border rounded-md bg-muted/30 min-h-[120px] flex flex-col items-center justify-center">
+        {isLoadingMediaDetails && <p>Loading image details...</p>}
+        {!isLoadingMediaDetails && displayImageUrl && typeof content.width === 'number' && typeof content.height === 'number' && content.width > 0 && content.height > 0 ? (
+          <div className="relative group inline-block" style={{ maxWidth: content.width, maxHeight: 200 }}> {/* Max height for editor preview consistency */}
+            <Image
+              src={displayImageUrl}
+              alt={content.alt_text || "Selected image"}
+              width={content.width}
+              height={content.height}
               className="rounded-md object-contain" // Removed max-h-40, relying on width/height and parent max-height
               style={{ maxHeight: '200px' }} // Ensure image does not exceed this height in preview
               placeholder={content.blur_data_url ? "blur" : "empty"}
@@ -108,15 +108,15 @@ export default function ImageBlockEditor({ content, onChange }: BlockEditorProps
               type="button" variant="destructive" size="icon"
               className="absolute top-1 right-1 opacity-0 group-hover:opacity-100 transition-opacity h-6 w-6"
               onClick={handleRemoveImage} title="Remove Image"
-            > <XIcon className="h-3 w-3" /> </Button>
-          </div>
-        ) : !isLoadingMediaDetails && displayObjectKey ? ( // Fallback if width/height are missing but key exists
-          <div className="relative group inline-block">
-            <Image
-              src={`${R2_BASE_URL}/${displayObjectKey}`}
-              alt={content.alt_text || "Selected image"}
-              width={300}
-              height={200}
+            > <XIcon className="h-3 w-3" /> </Button>
+          </div>
+        ) : !isLoadingMediaDetails && displayImageUrl ? ( // Fallback if width/height are missing but key exists
+          <div className="relative group inline-block">
+            <Image
+              src={displayImageUrl}
+              alt={content.alt_text || "Selected image"}
+              width={300}
+              height={200}
               className="rounded-md object-contain max-h-40 block"
               style={{ maxHeight: '200px' }}
             />

package/templates/nextblock-template/app/cms/blocks/editors/PostsGridBlockEditor.tsx

@@ -1,9 +1,8 @@
 // app/cms/blocks/editors/PostsGridBlockEditor.tsx
-import React, { useState, useEffect } from 'react';
+import React from 'react';
 import { BlockEditorProps } from '../components/BlockEditorModal';
 import { Input } from '@nextblock-cms/ui';
 import { Label } from '@nextblock-cms/ui';
-// import { useToast } from "@nextblock-cms/ui"; // Assuming you have a toast component - Removed for now
 
 interface PostsGridBlockContent {
   title?: string;
@@ -13,20 +12,17 @@ interface PostsGridBlockContent {
 }
 
 const PostsGridBlockEditor: React.FC<BlockEditorProps<PostsGridBlockContent>> = ({ content, onChange }) => {
-  const [currentTitle, setCurrentTitle] = useState(content.title || 'Recent Posts');
-  const [currentPostsPerPage, setCurrentPostsPerPage] = useState(content.postsPerPage || 6);
-  const [currentColumns, setCurrentColumns] = useState(content.columns || 3);
+  const currentTitle = content.title || 'Recent Posts';
+  const currentPostsPerPage = content.postsPerPage || 6;
+  const currentColumns = content.columns || 3;
   const showPagination = content.showPagination === undefined ? true : content.showPagination;
 
-  useEffect(() => {
-    const newContentPayload = {
-      title: currentTitle,
-      postsPerPage: Number(currentPostsPerPage),
-      columns: Number(currentColumns),
-      showPagination: showPagination,
-    };
-    onChange(newContentPayload);
-  }, [currentTitle, currentPostsPerPage, currentColumns, showPagination, onChange]);
+  const handleChange = (field: keyof PostsGridBlockContent, value: any) => {
+    onChange({
+      ...content,
+      [field]: value,
+    });
+  };
 
   return (
     <div className="space-y-4 p-4 border rounded-md">
@@ -37,7 +33,7 @@ const PostsGridBlockEditor: React.FC<BlockEditorProps<PostsGridBlockContent>> =
         <Input
           id="posts-grid-title"
           value={currentTitle}
-          onChange={(e) => setCurrentTitle(e.target.value)}
+          onChange={(e) => handleChange('title', e.target.value)}
           placeholder="Enter title for the posts grid"
         />
       </div>
@@ -48,7 +44,7 @@ const PostsGridBlockEditor: React.FC<BlockEditorProps<PostsGridBlockContent>> =
           id="posts-grid-per-page"
           type="number"
           value={currentPostsPerPage}
-          onChange={(e) => setCurrentPostsPerPage(parseInt(e.target.value, 10))}
+          onChange={(e) => handleChange('postsPerPage', parseInt(e.target.value, 10))}
           min="1"
         />
       </div>
@@ -59,9 +55,9 @@ const PostsGridBlockEditor: React.FC<BlockEditorProps<PostsGridBlockContent>> =
           id="posts-grid-columns"
           type="number"
           value={currentColumns}
-          onChange={(e) => setCurrentColumns(parseInt(e.target.value, 10))}
+          onChange={(e) => handleChange('columns', parseInt(e.target.value, 10))}
           min="1"
-          max="6" // Example max, adjust as needed
+          max="6"
         />
       </div>
       

package/templates/nextblock-template/app/cms/blocks/editors/ProductGridBlockEditor.tsx

@@ -0,0 +1,41 @@
+"use client";
+
+import React from 'react';
+import { Label, Input } from "@nextblock-cms/ui";
+import { BlockEditorProps } from '../components/BlockEditorModal';
+import { ProductGridBlockContent } from '../../../../lib/blocks/ecommerce-block-schemas';
+
+export default function ProductGridBlockEditor({ content, onChange }: BlockEditorProps<Partial<ProductGridBlockContent>>) {
+
+  const handleChange = (field: keyof ProductGridBlockContent, value: any) => {
+    onChange({ ...content, [field]: value });
+  };
+
+  return (
+    <div className="space-y-4 p-3 border-t mt-2">
+      <div>
+        <Label htmlFor="pg-limit">Item Limit</Label>
+        <Input
+          id="pg-limit"
+          type="number"
+          min={1}
+          max={20}
+          value={content.limit || 6}
+          onChange={(e) => handleChange('limit', parseInt(e.target.value) || 6)}
+          className="mt-1"
+        />
+      </div>
+      <div>
+        <Label htmlFor="pg-title">Grid Title (Optional)</Label>
+        <Input
+          id="pg-title"
+          value={content.title || ""}
+          onChange={(e) => handleChange('title', e.target.value)}
+          placeholder="New Arrivals"
+          className="mt-1"
+        />
+      </div>
+       {/* Type selection could be added here, currently defaulting to 'latest' */}
+    </div>
+  );
+}