create-nextblock 0.13.9 → 0.13.10

package/package.json

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

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/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}

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

@@ -5,7 +5,6 @@ import { Check, ChevronsUpDown, Loader2, Search, X } from 'lucide-react';
 import {
   Badge,
   Button,
-  Checkbox,
   Input,
   Popover,
   PopoverContent,
@@ -13,6 +12,25 @@ import {
 } from '@nextblock-cms/ui';
 import { cn } from '@nextblock-cms/utils';
 
+/**
+ * A checkbox *look* without the interactive element. The whole option row is the
+ * button, and Radix's `Checkbox` renders its own `<button>` — nesting the two is
+ * invalid HTML and breaks hydration.
+ */
+function CheckIndicator({ checked }: { checked: boolean }) {
+  return (
+    <span
+      aria-hidden="true"
+      className={cn(
+        'flex h-3.5 w-3.5 shrink-0 items-center justify-center rounded-[4px] border border-primary transition-colors',
+        checked && 'bg-primary text-primary-foreground'
+      )}
+    >
+      {checked && <Check className="h-3 w-3" />}
+    </span>
+  );
+}
+
 export interface PickerOption {
   id: string;
   label: string;
@@ -179,7 +197,11 @@ export default function MultiEntityPicker({
             />
           </div>
 
-          <div className="max-h-60 overflow-y-auto p-1">
+          <div
+            role="listbox"
+            aria-multiselectable="true"
+            className="max-h-60 overflow-y-auto p-1"
+          >
             {filteredOptions.length === 0 ? (
               <p className="py-6 text-center text-xs text-muted-foreground">
                 {isLoading ? 'Loading…' : emptyMessage}
@@ -204,12 +226,7 @@ export default function MultiEntityPicker({
                       isChecked && 'bg-accent/40'
                     )}
                   >
-                    <Checkbox
-                      checked={isChecked}
-                      tabIndex={-1}
-                      aria-hidden="true"
-                      className="pointer-events-none h-3.5 w-3.5 shrink-0"
-                    />
+                    <CheckIndicator checked={isChecked} />
                     <span className="flex min-w-0 flex-col">
                       <span className="truncate font-medium">{option.label}</span>
                       {option.description && (
@@ -226,11 +243,6 @@ export default function MultiEntityPicker({
                         {option.badge}
                       </Badge>
                     )}
-                    {isChecked && (
-                      <Check
-                        className={cn('h-3.5 w-3.5 shrink-0 text-primary', !option.badge && 'ml-auto')}
-                      />
-                    )}
                   </button>
                 );
               })

package/templates/nextblock-template/lib/blocks/blockRegistry.ts

@@ -572,9 +572,29 @@ export function getBlockDefinition(blockType: string): BlockDefinition | undefin
   return undefined;
 }
 
+/**
+ * Whether a block type has anything for an author to configure.
+ *
+ * `cart`, `checkout` and `product_details` are context-driven: they declare an
+ * empty schema and ship no editor file at all, so opening an editor for them
+ * would show an empty dialog (and fail on the missing module). Used to decide
+ * whether adding a block should jump straight into its editor.
+ *
+ * @param blockType - The block type or custom-block slug
+ * @returns true when the block exposes editable fields
+ */
+export function blockHasEditableContent(blockType: string): boolean {
+  const definition = getBlockDefinition(blockType);
+  // Custom blocks are not in the registry; they always render a field editor.
+  if (!definition) return true;
+  const shape = (definition.schema as unknown as { shape?: Record<string, unknown> })?.shape;
+  if (!shape) return true;
+  return Object.keys(shape).length > 0;
+}
+
 /**
  * Get the initial content for a specific block type
- * 
+ *
  * @param blockType - The type of block to get initial content for
  * @returns The initial content object or undefined if block type not found
  */

package/templates/nextblock-template/next-env.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
-import "./.next/types/routes.d.ts";
+import "./.next/dev/types/routes.d.ts";
 
 // NOTE: This file should not be edited
 // see https://nextjs.org/docs/app/api-reference/config/typescript for more information.

package/templates/nextblock-template/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nextblock-cms/template",
-  "version": "0.13.9",
+  "version": "0.13.10",
   "private": true,
   "scripts": {
     "dev": "next dev",