create-nextblock 0.13.8 → 0.13.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-nextblock",
-  "version": "0.13.8",
+  "version": "0.13.10",
   "description": "",
   "main": "index.js",
   "bin": {

package/templates/nextblock-template/app/actions/productGridActions.ts

@@ -0,0 +1,40 @@
+'use server';
+
+import {
+  loadProductGridPage,
+  type ProductGridQuery,
+} from '../../lib/blocks/product-grid-data';
+import {
+  PRODUCT_GRID_MAX_LIMIT,
+  PRODUCT_GRID_DEFAULT_PAGE_SIZE,
+} from '../../lib/blocks/ecommerce-block-schemas';
+import type { Product } from '@nextblock-cms/ecommerce/types';
+
+export interface ProductGridPageResult {
+  products: Product[];
+  totalCount: number;
+  error?: string;
+}
+
+/**
+ * Pagination for the Product Grid block. Only ever returns published products
+ * (`getProducts` defaults to status `active`), so this is safe to call from the
+ * storefront. The page size is clamped here because the argument arrives from
+ * the client — the unlimited path stays server-render only.
+ */
+export async function fetchProductGridPage(
+  query: ProductGridQuery
+): Promise<ProductGridPageResult> {
+  try {
+    const limit = Math.min(
+      Math.max(1, Math.floor(query.limit) || PRODUCT_GRID_DEFAULT_PAGE_SIZE),
+      PRODUCT_GRID_MAX_LIMIT
+    );
+
+    const { products, totalCount } = await loadProductGridPage({ ...query, limit });
+    return { products, totalCount };
+  } catch (error) {
+    console.error('[Product Grid] Failed to load page:', error);
+    return { products: [], totalCount: 0, error: 'Failed to load products.' };
+  }
+}

package/templates/nextblock-template/app/api/cms/ecommerce/product-picker/route.ts

@@ -0,0 +1,151 @@
+import { NextResponse } from 'next/server';
+import {
+  createClient,
+  getServiceRoleSupabaseClient,
+  verifyPackageOnline,
+} from '@nextblock-cms/db/server';
+
+export const dynamic = 'force-dynamic';
+
+/** How many products a single search returns before the UI asks for a narrower query. */
+const PRODUCT_PAGE_SIZE = 50;
+/** Guard against an unbounded `ids` list when hydrating labels for an existing selection. */
+const MAX_HYDRATED_IDS = 100;
+
+export interface ProductPickerCategory {
+  id: string;
+  name: string;
+  slug: string;
+}
+
+export interface ProductPickerProduct {
+  id: string;
+  title: string;
+  slug: string | null;
+  sku: string | null;
+  status: string | null;
+  languageCode: string | null;
+  translationGroupId: string | null;
+}
+
+/**
+ * PostgREST parses `,`, `.`, `(` and `)` inside an `or(...)` filter, so anything
+ * the author types has to be stripped before it is interpolated into one.
+ */
+function sanitizeSearchTerm(term: string): string {
+  return term.replace(/[,().*%\\]/g, ' ').trim().slice(0, 80);
+}
+
+/**
+ * Options for the Product Grid block pickers: every category plus a page of
+ * products (optionally filtered by `search`). `ids` hydrates labels for an
+ * existing selection whose products fall outside the current page.
+ */
+export async function GET(request: Request) {
+  try {
+    const supabase = createClient();
+    const {
+      data: { user },
+      error: authError,
+    } = await supabase.auth.getUser();
+
+    if (authError || !user) {
+      return NextResponse.json({ error: 'Unauthorized' }, { status: 401 });
+    }
+
+    const { data: profile } = await supabase
+      .from('profiles')
+      .select('role')
+      .eq('id', user.id)
+      .single();
+
+    if (!profile || !['ADMIN', 'WRITER'].includes(profile.role)) {
+      return NextResponse.json(
+        { error: 'Forbidden: Insufficient permissions' },
+        { status: 403 }
+      );
+    }
+
+    // Fail closed: without the ecommerce package there is no product catalog to
+    // browse, and the blocks that use this route are hidden from the picker.
+    if (!(await verifyPackageOnline('ecommerce'))) {
+      return NextResponse.json(
+        { error: 'The ecommerce package is not active.' },
+        { status: 403 }
+      );
+    }
+
+    const url = new URL(request.url);
+    const search = sanitizeSearchTerm(url.searchParams.get('search') ?? '');
+    const ids = (url.searchParams.get('ids') ?? '')
+      .split(',')
+      .map((id) => id.trim())
+      .filter(Boolean)
+      .slice(0, MAX_HYDRATED_IDS);
+
+    // Reading the catalog is admin work behind the role check above.
+    const admin = getServiceRoleSupabaseClient();
+
+    const productColumns =
+      'id, title, slug, sku, status, translation_group_id, languages(code)';
+
+    let productsQuery = admin
+      .from('products')
+      .select(productColumns)
+      .order('created_at', { ascending: false })
+      // Fetch one extra row so the UI can tell the author the list was truncated.
+      .limit(PRODUCT_PAGE_SIZE + 1);
+
+    if (search) {
+      productsQuery = productsQuery.or(`title.ilike.%${search}%,sku.ilike.%${search}%`);
+    }
+
+    const [categoriesResult, productsResult, selectedResult] = await Promise.all([
+      admin.from('categories').select('id, name, slug').order('name', { ascending: true }),
+      productsQuery,
+      ids.length > 0
+        ? admin.from('products').select(productColumns).in('id', ids)
+        : Promise.resolve({ data: [], error: null }),
+    ]);
+
+    if (categoriesResult.error) throw categoriesResult.error;
+    if (productsResult.error) throw productsResult.error;
+    if (selectedResult.error) throw selectedResult.error;
+
+    const toPickerProduct = (row: any): ProductPickerProduct => ({
+      id: row.id,
+      title: row.title,
+      slug: row.slug ?? null,
+      sku: row.sku ?? null,
+      status: row.status ?? null,
+      languageCode: row.languages?.code ?? null,
+      translationGroupId: row.translation_group_id ?? null,
+    });
+
+    const productRows = (productsResult.data ?? []) as any[];
+    const hasMore = productRows.length > PRODUCT_PAGE_SIZE;
+    const products = productRows.slice(0, PRODUCT_PAGE_SIZE).map(toPickerProduct);
+
+    // Merge the hydrated selection in so already-chosen products always render
+    // with a real label, even when a search hides them.
+    const byId = new Map(products.map((product) => [product.id, product]));
+    for (const row of (selectedResult.data ?? []) as any[]) {
+      if (!byId.has(row.id)) byId.set(row.id, toPickerProduct(row));
+    }
+
+    return NextResponse.json(
+      {
+        categories: (categoriesResult.data ?? []) as ProductPickerCategory[],
+        products: Array.from(byId.values()),
+        hasMore,
+      },
+      { status: 200 }
+    );
+  } catch (error) {
+    console.error('[Product Picker API] Unexpected error:', error);
+    return NextResponse.json(
+      { error: 'Failed to load product picker options.' },
+      { status: 500 }
+    );
+  }
+}

package/templates/nextblock-template/app/cms/CmsClientLayout.tsx

@@ -22,6 +22,7 @@ import { FeedbackModal } from "./components/FeedbackModal";
 import { CortexGlobalAgentChat } from "./components/CortexGlobalAgentChat";
 import { CortexAiPageContextProvider } from "./components/CortexAiPageContext";
 import { CortexAiActiveProvider } from "./components/CortexAiActiveContext";
+import { EcommerceActiveProvider } from "./components/EcommerceActiveContext";
 import { useAppBranding } from "../../components/AppShell";
 import { resolveMediaUrl } from "../../lib/media/resolveMediaUrl";
 
@@ -257,6 +258,7 @@ export default function CmsClientLayout({
   return (
     <CortexAiPageContextProvider>
       <CortexAiActiveProvider isActive={isCortexAiActive}>
+      <EcommerceActiveProvider isActive={isEcommerceActive}>
     <div className="relative flex h-full min-h-0 w-full overflow-hidden bg-slate-50 dark:bg-slate-950 md:flex-row">
       <div className="fixed bottom-4 right-4 z-[60] md:hidden">
         <Button
@@ -516,6 +518,7 @@ export default function CmsClientLayout({
       )}
       {isAdmin && isCortexAiActive && <CortexGlobalAgentChat />}
     </div>
+      </EcommerceActiveProvider>
       </CortexAiActiveProvider>
     </CortexAiPageContextProvider>
   )

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

@@ -9,7 +9,7 @@ import type { Database, Json } from "@nextblock-cms/db";
 import { BlockType } from '../../../../lib/blocks/blockRegistry';
 
 type Block = Database["public"]["Tables"]["blocks"]["Row"];
-import { getBlockDefinition, SectionBlockContent } from '../../../../lib/blocks/blockRegistry';
+import { blockHasEditableContent, getBlockDefinition, SectionBlockContent } from '../../../../lib/blocks/blockRegistry';
 import { Button } from "@nextblock-cms/ui";
 import { PlusCircle } from "lucide-react";
 import {
@@ -113,6 +113,8 @@ export default function BlockEditorArea({ parentId, parentType, initialBlocks, l
   const [isBlockSelectorOpen, setIsBlockSelectorOpen] = useState(false);
   const [activeBlock, setActiveBlock] = useState<Block | null>(null);
   const [insertionIndex, setInsertionIndex] = useState<number | null>(null);
+  // Id of the block that was just added, so its editor can open on its own.
+  const [autoEditBlockId, setAutoEditBlockId] = useState<number | null>(null);
   const [editingNestedBlockInfo, setEditingNestedBlockInfo] = useState<EditingNestedBlockInfo | null>(null);
   const [NestedBlockEditorComponent, setNestedBlockEditorComponent] = useState<ComponentType<any> | null>(null);
   const [tempNestedBlockContent, setTempNestedBlockContent] = useState<Json | null>(null);
@@ -377,6 +379,11 @@ export default function BlockEditorArea({ parentId, parentType, initialBlocks, l
 
         setBlocks(finalBlocks);
         lastSavedBlocks.current = finalBlocks;
+        // Context-driven blocks (cart, checkout, …) have nothing to configure,
+        // so only jump into the editor when there is something to edit.
+        if (blockHasEditableContent(blockType)) {
+          setAutoEditBlockId(newBlock.id);
+        }
         router.refresh();
       } else {
         alert(`Error adding block: ${createResult?.error}`);
@@ -506,6 +513,8 @@ export default function BlockEditorArea({ parentId, parentType, initialBlocks, l
                 </div>
                 <SortableBlockItem
                   block={block}
+                  autoOpenEditor={block.id === autoEditBlockId}
+                  onAutoOpenHandled={() => setAutoEditBlockId(null)}
                   onContentChange={handleContentChange}
                   onDelete={async (blockIdToDelete) => {
                     startTransition(async () => {

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

@@ -16,6 +16,8 @@ import {
 } from "@nextblock-cms/ui";
 import { Search, X, Package } from 'lucide-react';
 import { blockRegistry, BlockType } from '../../../../lib/blocks/blockRegistry';
+import { isEcommerceBlockType } from '../../../../lib/blocks/blockTypes';
+import { useEcommerceActive } from '../../components/EcommerceActiveContext';
 import BlockTypeCard from './BlockTypeCard';
 
 interface BlockTypeSelectorProps {
@@ -25,7 +27,8 @@ interface BlockTypeSelectorProps {
   allowedBlockTypes?: BlockType[];
 }
 
-const CATEGORIES = ["All", "Layout", "Content", "Media", "Interactive", "E-commerce", "Custom"];
+const ECOMMERCE_CATEGORY = "E-commerce";
+const CATEGORIES = ["All", "Layout", "Content", "Media", "Interactive", ECOMMERCE_CATEGORY, "Custom"];
 
 const getBlockCategory = (type: string, isCustomSlug?: boolean): string => {
   if (isCustomSlug) {
@@ -50,7 +53,7 @@ const getBlockCategory = (type: string, isCustomSlug?: boolean): string => {
     case 'cart':
     case 'checkout':
     case 'product_details':
-      return 'E-commerce';
+      return ECOMMERCE_CATEGORY;
     default:
       return 'Content';
   }
@@ -65,6 +68,9 @@ const BlockTypeSelector: React.FC<BlockTypeSelectorProps> = ({
   const [searchQuery, setSearchQuery] = React.useState('');
   const [activeCategory, setActiveCategory] = React.useState('All');
   const [customDefs, setCustomDefs] = React.useState<any[]>([]);
+  // Store blocks are only offered when the ecommerce package is activated. The
+  // context defaults to false outside the CMS layout, so this fails closed.
+  const isEcommerceActive = useEcommerceActive();
 
   // Reset state and fetch custom blocks when modal is opened
   React.useEffect(() => {
@@ -93,10 +99,16 @@ const BlockTypeSelector: React.FC<BlockTypeSelectorProps> = ({
     onOpenChange(false);
   };
 
+  const visibleCategories = React.useMemo(
+    () => CATEGORIES.filter((category) => category !== ECOMMERCE_CATEGORY || isEcommerceActive),
+    [isEcommerceActive]
+  );
+
   const blockDefs = React.useMemo(() => {
     const coreDefs = Object.values(blockRegistry).filter(
       (blockDef) =>
-        !allowedBlockTypes || allowedBlockTypes.includes(blockDef.type)
+        (!allowedBlockTypes || allowedBlockTypes.includes(blockDef.type)) &&
+        (isEcommerceActive || !isEcommerceBlockType(blockDef.type))
     );
 
     const mappedCustomDefs = customDefs.map((def) => ({
@@ -114,7 +126,7 @@ const BlockTypeSelector: React.FC<BlockTypeSelectorProps> = ({
     }));
 
     return [...coreDefs, ...mappedCustomDefs];
-  }, [allowedBlockTypes, customDefs]);
+  }, [allowedBlockTypes, customDefs, isEcommerceActive]);
 
   // Memoized filter and search results to prevent re-calculations during key strokes
   const filteredBlockDefs = React.useMemo(() => {
@@ -174,7 +186,7 @@ const BlockTypeSelector: React.FC<BlockTypeSelectorProps> = ({
 
             {/* Category Filter Tabs */}
             <div className="flex flex-wrap gap-1.5 pb-3 border-b border-border">
-              {CATEGORIES.map((category) => (
+              {visibleCategories.map((category) => (
                 <button
                   key={category}
                   type="button"

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

@@ -5,7 +5,7 @@ import { cn } from '@nextblock-cms/utils';
 import { Button } from '@nextblock-cms/ui';
 import { PlusCircle, Trash2, Edit2, GripVertical, Image as ImageIcon } from "lucide-react";
 import { SectionBlockContent } from '../../../../lib/blocks/blockRegistry';
-import { availableBlockTypes, getBlockDefinition, getInitialContent, BlockType } from '../../../../lib/blocks/blockRegistry';
+import { availableBlockTypes, blockHasEditableContent, getBlockDefinition, getInitialContent, BlockType } from '../../../../lib/blocks/blockRegistry';
 import { useDroppable } from "@dnd-kit/core";
 import { useSortable } from "@dnd-kit/sortable";
 import { CSS } from "@dnd-kit/utilities";
@@ -415,6 +415,10 @@ export default function ColumnEditor({ columnIndex, blocks, onBlocksChange, bloc
       temp_id: `temp-${Date.now()}-${Math.random()}`
     };
     onBlocksChange([...blocks, newBlock]);
+    // Open the new block's editor straight away, matching the top-level editor.
+    if (blockHasEditableContent(selectedBlockType)) {
+      handleStartEdit(newBlock, blocks.length);
+    }
   };
 
   const handleSelectBlockType = (selectedBlockType: BlockType) => {

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

@@ -1,14 +1,14 @@
 // app/cms/blocks/components/EditableBlock.tsx
 "use client";
 
-import React, { useState, Suspense, useMemo, lazy, LazyExoticComponent, ComponentType } from 'react';
+import React, { useState, useEffect, useRef, Suspense, useMemo, lazy, LazyExoticComponent, ComponentType } from 'react';
 import type { Database } from "@nextblock-cms/db";
 import PostsGridBlockEditor from '../editors/PostsGridBlockEditor';
 
 type Block = Database['public']['Tables']['blocks']['Row'];
 import { Button, Card, CardContent, Avatar, AvatarImage, AvatarFallback } from "@nextblock-cms/ui";
 import { GripVertical, Edit2, Image as ImageIcon, MessageSquareQuote } from "lucide-react";
-import { getBlockDefinition, blockRegistry, BlockType } from '../../../../lib/blocks/blockRegistry';
+import { blockHasEditableContent, getBlockDefinition, blockRegistry, BlockType } from '../../../../lib/blocks/blockRegistry';
 import { BlockEditorModal } from './BlockEditorModal';
 import { DeleteBlockButtonClient } from './DeleteBlockButtonClient';
 import { cn } from '@nextblock-cms/utils';
@@ -23,6 +23,10 @@ export interface EditableBlockProps {
   dragHandleProps?: Record<string, any>;
   onEditNestedBlock?: (parentBlockId: string, columnIndex: number, blockIndexInColumn: number) => void;
   className?: string;
+  /** Open this block's editor as soon as it mounts — set for a just-added block. */
+  autoOpenEditor?: boolean;
+  /** Called once the auto-open has fired, so the parent can clear the flag. */
+  onAutoOpenHandled?: () => void;
 }
 
 export default function EditableBlock({
@@ -32,12 +36,15 @@ export default function EditableBlock({
   dragHandleProps,
   onEditNestedBlock,
   className,
+  autoOpenEditor,
+  onAutoOpenHandled,
 }: EditableBlockProps) {
   void onEditNestedBlock;
   // Move all hooks to the top before any conditional returns
   const [isConfigPanelOpen, setIsConfigPanelOpen] = useState(false);
   const [editingBlock, setEditingBlock] = useState<Block | null>(null);
   const [LazyEditor, setLazyEditor] = useState<LazyExoticComponent<ComponentType<any>> | ComponentType<any> | null>(null);
+  const autoOpenedRef = useRef<number | null>(null);
 
   const SectionEditor = useMemo(() => {
     if (block?.block_type === 'section') {
@@ -49,15 +56,12 @@ export default function EditableBlock({
     return null;
   }, [block?.block_type]);
 
-  // Add a guard for undefined block prop after hooks
-  if (!block) {
-    // Or some other placeholder/error display
-    return <div className="p-4 border rounded-lg bg-card shadow text-red-500">Error: Block data is missing in EditableBlock.</div>;
-  }
-
-
-
   const handleEditClick = () => {
+    // cart / checkout / product_details are context-driven: empty schema, and the
+    // editor file their registry entry names does not exist. Opening one throws.
+    if (!blockHasEditableContent(block.block_type)) {
+      return;
+    }
     if (block.block_type === 'section') {
       setIsConfigPanelOpen(prev => !prev);
     } else {
@@ -87,6 +91,22 @@ export default function EditableBlock({
     }
   };
 
+  // A block the author just added opens straight into its editor — adding a
+  // heading is always followed by wanting to type one. The ref keeps it to once
+  // per block, so closing the editor (or a router refresh) does not reopen it.
+  useEffect(() => {
+    if (!autoOpenEditor || !block || autoOpenedRef.current === block.id) return;
+    autoOpenedRef.current = block.id;
+    handleEditClick();
+    onAutoOpenHandled?.();
+  }, [autoOpenEditor, block, handleEditClick, onAutoOpenHandled]);
+
+  // Add a guard for undefined block prop after hooks
+  if (!block) {
+    // Or some other placeholder/error display
+    return <div className="p-4 border rounded-lg bg-card shadow text-red-500">Error: Block data is missing in EditableBlock.</div>;
+  }
+
   const handleCardClick = (e: React.MouseEvent<HTMLDivElement>) => {
     // If the element that was clicked, or any of its parents up to the card, is a button,
     // then we should ignore the click on the card. This lets the button's own onClick handle the event.
@@ -279,14 +299,22 @@ export default function EditableBlock({
        default: {
         const blockDefinition = getBlockDefinition(currentBlockType as BlockType);
         const blockLabel = blockDefinition?.label || currentBlockType;
+        const hasEditableContent = blockHasEditableContent(currentBlockType);
         const placeholder = (
           <div
-            className="py-4 flex flex-col items-center justify-center space-y-2 min-h-[80px] border border-dashed rounded-md bg-muted/20 cursor-pointer hover:border-primary"
+            className={cn(
+              "py-4 flex flex-col items-center justify-center space-y-2 min-h-[80px] border border-dashed rounded-md bg-muted/20",
+              hasEditableContent && "cursor-pointer hover:border-primary"
+            )}
             onClick={handleCardClick}
           >
             <div className="text-center">
               <p className="text-sm font-medium text-muted-foreground">{blockLabel}</p>
-              <p className="text-xs text-muted-foreground">Click edit to modify content</p>
+              <p className="text-xs text-muted-foreground">
+                {hasEditableContent
+                  ? 'Click edit to modify content'
+                  : 'Renders from the current page context — nothing to configure'}
+              </p>
             </div>
           </div>
         );
@@ -304,13 +332,14 @@ export default function EditableBlock({
 
   const isSection = block?.block_type === 'section';
   const blockDefinition = getBlockDefinition(block.block_type as BlockType);
+  const isEditable = blockHasEditableContent(block.block_type);
 
   return (
     <div
       onClick={handleCardClick}
       className={cn(
         "p-4 border rounded-lg bg-card shadow",
-        !isSection && "cursor-pointer hover:border-primary transition-colors",
+        !isSection && isEditable && "cursor-pointer hover:border-primary transition-colors",
         className
       )}
     >
@@ -322,17 +351,19 @@ export default function EditableBlock({
           <h4 className="font-semibold p-0 m-0 mb-1">{blockDefinition?.label || block.block_type}</h4>
         </div>
         <div className="flex items-center gap-1">
-            <Button
-              variant="ghost"
-              size="icon"
-              onClick={(e) => {
-                e.stopPropagation();
-                handleEditClick();
-              }}
-              aria-label={isSection ? "Toggle Section Config" : "Edit block"}
-            >
-              <Edit2 className="h-4 w-4 text-muted-foreground" />
-            </Button>
+            {isEditable && (
+              <Button
+                variant="ghost"
+                size="icon"
+                onClick={(e) => {
+                  e.stopPropagation();
+                  handleEditClick();
+                }}
+                aria-label={isSection ? "Toggle Section Config" : "Edit block"}
+              >
+                <Edit2 className="h-4 w-4 text-muted-foreground" />
+              </Button>
+            )}
           <DeleteBlockButtonClient
             blockId={block.id}
             blockTitle={blockDefinition?.label || block.block_type}