feat: page builder — engine (L1) + editor backend (L2a-1) + editor frontend (L2a-2)

config/lattice.php

@@ -51,6 +51,11 @@
         'middleware' => ['web', 'auth'],
     ],
 
+    'blocks' => [
+        'endpoint' => 'lattice/blocks/render',
+        'middleware' => ['web', 'auth'],
+    ],
+
     'remote-sources' => [
         'endpoint' => 'lattice/remote-sources/{source}/token',
         'middleware' => ['web', 'auth'],

docs/fixtures/enums.json

@@ -131,6 +131,10 @@
                 "name": "Builder",
                 "value": "field.builder"
             },
+            {
+                "name": "BlockEditor",
+                "value": "field.block-editor"
+            },
             {
                 "name": "Checkbox",
                 "value": "field.checkbox"

lang/de/form.php

@@ -2,6 +2,19 @@
 declare(strict_types=1);
 
 return [
+    'block-editor' => [
+        'drag' => 'Ziehen',
+        'drag-to-reorder' => 'Zum Neuanordnen ziehen',
+        'duplicate' => 'Duplizieren',
+        'empty-slot' => 'Blöcke hier ablegen',
+        'has-errors' => 'Dieser Block enthält Fehler.',
+        'move-down' => 'Nach unten',
+        'move-up' => 'Nach oben',
+        'no-settings' => 'Dieser Block hat keine Einstellungen.',
+        'remove' => 'Block entfernen',
+        'select-block' => 'Block auswählen, um ihn zu bearbeiten.',
+        'unknown-block' => 'Unbekannter Block',
+    ],
     'editor' => [
         'bold' => 'Fett',
         'italic' => 'Kursiv',

lang/en/form.php

@@ -2,6 +2,19 @@
 declare(strict_types=1);
 
 return [
+    'block-editor' => [
+        'drag' => 'Drag',
+        'drag-to-reorder' => 'Drag to reorder',
+        'duplicate' => 'Duplicate',
+        'empty-slot' => 'Drop blocks here',
+        'has-errors' => 'This block has errors.',
+        'move-down' => 'Move down',
+        'move-up' => 'Move up',
+        'no-settings' => 'This block has no settings.',
+        'remove' => 'Remove block',
+        'select-block' => 'Select a block to edit it.',
+        'unknown-block' => 'Unknown block',
+    ],
     'editor' => [
         'bold' => 'Bold',
         'italic' => 'Italic',

package.json

@@ -165,6 +165,9 @@
     "docs:preview": "astro preview"
   },
   "dependencies": {
+    "@dnd-kit/core": "^6.3.1",
+    "@dnd-kit/sortable": "^8.0.0",
+    "@dnd-kit/utilities": "^3.2.2",
     "@internationalized/date": "^3.12.2",
     "@lattice-php/vite-svg-sprite": "^0.2.2",
     "@radix-ui/react-checkbox": "^1.1.4",

resources/js/form/components/fields/add-row-menu.tsx

@@ -6,7 +6,7 @@ import {
   DropdownMenuTrigger,
 } from "@lattice-php/lattice/ui/dropdown-menu";
 
-export type AddRowOption = { type: string; label: string };
+export type AddRowOption = { type: string; label: string; icon?: string; description?: string };
 
 export function AddRowMenu({
   addLabel,
@@ -34,9 +34,17 @@ export function AddRowMenu({
           <DropdownMenuItem
             key={option.type}
             data-test={`builder-add-${option.type}`}
+            icon={option.icon}
             onClick={() => onSelect(option.type)}
           >
-            {option.label}
+            {option.description ? (
+              <span className="flex flex-col">
+                <span>{option.label}</span>
+                <span className="text-xs text-lt-muted-fg">{option.description}</span>
+              </span>
+            ) : (
+              option.label
+            )}
           </DropdownMenuItem>
         ))}
       </DropdownMenuContent>

resources/js/form/components/fields/block-editor/canvas.test.tsx

@@ -0,0 +1,211 @@
+import { configure, fireEvent, render, screen, within } from "@testing-library/react";
+import { beforeAll, expect, it, vi } from "vitest";
+
+beforeAll(() => configure({ testIdAttribute: "data-test" }));
+
+vi.mock("@lattice-php/lattice/core/renderer", () => ({
+  Renderer: ({ nodes }: { nodes: { props: { text: string } }[] }) => (
+    <span>{nodes[0]?.props.text}</span>
+  ),
+}));
+
+import { BlockCanvas } from "./canvas";
+
+const templates = [
+  {
+    type: "hero",
+    label: "Hero",
+    icon: "layout-dashboard",
+    description: "A big heading.",
+    schema: [],
+  },
+  { type: "text", label: "Text", schema: [] },
+  {
+    type: "columns",
+    label: "Columns",
+    schema: [],
+    slots: [{ name: "main", label: "Main column" }],
+  },
+  {
+    type: "restricted",
+    label: "Restricted",
+    schema: [],
+    slots: [{ name: "main", blocks: ["hero"] }],
+  },
+] as never[];
+
+function renderCanvas(rows: Record<string, unknown>[], overrides: Record<string, unknown> = {}) {
+  const handlers = {
+    onSelect: vi.fn<(rowId: string) => void>(),
+    onRemove: vi.fn<(path: unknown) => void>(),
+    onDuplicate: vi.fn<(path: unknown) => void>(),
+    onShift: vi.fn<(path: unknown, delta: number) => void>(),
+    onAppend: vi.fn<(path: unknown, slot: string, type: string) => void>(),
+  };
+
+  render(
+    <BlockCanvas
+      rows={rows}
+      templates={templates as never}
+      addLabel="Add"
+      wireFor={(id: string) =>
+        (((overrides.wire as Record<string, unknown[]>) ?? {})[id] as never) ?? []
+      }
+      onPreviewSeed={() => {}}
+      selectedId={(overrides.selectedId as string) ?? null}
+      errorIds={(overrides.errorIds as Set<string>) ?? new Set()}
+      onSelect={handlers.onSelect}
+      onMoveBlock={() => {}}
+      onRemove={handlers.onRemove}
+      onDuplicate={handlers.onDuplicate}
+      onShift={handlers.onShift}
+      onAppend={handlers.onAppend}
+    />,
+  );
+
+  return handlers;
+}
+
+function openActions(rowId: string): void {
+  fireEvent.click(
+    within(screen.getByTestId(`block-shell-${rowId}`)).getByTestId("row-actions-menu"),
+  );
+}
+
+it("renders each row's wire and selects on click", () => {
+  const wire = {
+    a: [{ type: "heading", props: { text: "Alpha" } }],
+    b: [{ type: "text", props: { text: "Beta" } }],
+  };
+
+  const { onSelect } = renderCanvas(
+    [
+      { rowId: "a", type: "hero" },
+      { rowId: "b", type: "text" },
+    ],
+    { wire, selectedId: "a" },
+  );
+
+  expect(screen.getByText("Alpha")).toBeInTheDocument();
+  expect(screen.getByTestId("block-shell-a")).toHaveAttribute("aria-selected", "true");
+
+  fireEvent.click(screen.getByTestId("block-shell-b"));
+  expect(onSelect).toHaveBeenCalledWith("b");
+});
+
+it("removes a block through its action menu", () => {
+  const { onRemove } = renderCanvas([
+    { rowId: "a", type: "hero" },
+    { rowId: "b", type: "text" },
+  ]);
+
+  openActions("b");
+  fireEvent.click(screen.getByTestId("row-action-remove"));
+
+  expect(onRemove).toHaveBeenCalledWith([{ index: 1 }]);
+});
+
+it("duplicates and reorders a block through its action menu", () => {
+  const { onDuplicate, onShift } = renderCanvas([
+    { rowId: "a", type: "hero" },
+    { rowId: "b", type: "text" },
+  ]);
+
+  openActions("a");
+  fireEvent.click(screen.getByTestId("row-action-duplicate"));
+  expect(onDuplicate).toHaveBeenCalledWith([{ index: 0 }]);
+
+  openActions("a");
+  fireEvent.click(screen.getByTestId("row-action-move-down"));
+  expect(onShift).toHaveBeenCalledWith([{ index: 0 }], 1);
+});
+
+it("flags a block whose fields have errors", () => {
+  renderCanvas([{ rowId: "a", type: "hero" }], { errorIds: new Set(["a"]) });
+
+  expect(screen.getByTestId("block-error-a")).toBeInTheDocument();
+});
+
+it("renders slot areas with nested child shells for a slotted block", () => {
+  const wire = { h1: [{ type: "heading", props: { text: "Inner" } }] };
+
+  renderCanvas(
+    [
+      {
+        rowId: "c1",
+        type: "columns",
+        slots: { main: [{ rowId: "h1", type: "hero" }] },
+      },
+    ],
+    { wire },
+  );
+
+  expect(screen.getByTestId("block-slot-main")).toBeInTheDocument();
+  expect(screen.getByTestId("block-shell-h1")).toBeInTheDocument();
+  expect(screen.getByText("Inner")).toBeInTheDocument();
+});
+
+it("labels a slot heading and describes blocks in the add menu", () => {
+  renderCanvas([{ rowId: "c1", type: "columns", slots: { main: [] } }]);
+
+  expect(screen.getByText("Main column")).toBeInTheDocument();
+
+  fireEvent.click(screen.getByTestId("builder-add"));
+
+  expect(screen.getByText("A big heading.")).toBeInTheDocument();
+});
+
+it("shows an empty-slot drop target when a slot has no children", () => {
+  renderCanvas([{ rowId: "c1", type: "columns", slots: { main: [] } }]);
+
+  expect(screen.getByText("Drop blocks here")).toBeInTheDocument();
+});
+
+it("selects a nested child without selecting its parent", () => {
+  const { onSelect } = renderCanvas([
+    {
+      rowId: "c1",
+      type: "columns",
+      slots: { main: [{ rowId: "h1", type: "hero" }] },
+    },
+  ]);
+
+  fireEvent.click(screen.getByTestId("block-shell-h1"));
+
+  expect(onSelect).toHaveBeenCalledTimes(1);
+  expect(onSelect).toHaveBeenCalledWith("h1");
+});
+
+it("offers only the allowed blocks in a restricted slot's add menu", () => {
+  renderCanvas([{ rowId: "r1", type: "restricted", slots: { main: [] } }]);
+
+  fireEvent.click(screen.getByTestId("builder-add"));
+
+  expect(screen.getByTestId("builder-add-hero")).toBeInTheDocument();
+  expect(screen.queryByTestId("builder-add-columns")).not.toBeInTheDocument();
+  expect(screen.queryByTestId("builder-add-text")).not.toBeInTheDocument();
+});
+
+it("appends an allowed block into a slot through its add menu", () => {
+  const { onAppend } = renderCanvas([{ rowId: "c1", type: "columns", slots: { main: [] } }]);
+
+  fireEvent.click(screen.getByTestId("builder-add"));
+  fireEvent.click(screen.getByTestId("builder-add-hero"));
+
+  expect(onAppend).toHaveBeenCalledWith([{ index: 0 }], "main", "hero");
+});
+
+it("removes a nested child with its slot path", () => {
+  const { onRemove } = renderCanvas([
+    {
+      rowId: "c1",
+      type: "columns",
+      slots: { main: [{ rowId: "h1", type: "hero" }] },
+    },
+  ]);
+
+  openActions("h1");
+  fireEvent.click(screen.getByTestId("row-action-remove"));
+
+  expect(onRemove).toHaveBeenCalledWith([{ index: 0, slot: "main" }, { index: 0 }]);
+});