Block Designer Components

Builder-facing components for designing dynamic forms with search, drag-drop, and property editing

Overview

Block Designer provides a set of components for building form editors. BlockSelectorPanel shows available block types with search filtering. DesignerPropertiesPanel displays and edits selected block configuration. These components work together within LayoutWizard (designer mode) using leftSidebarContent and rightPanel props.

Key Features

Filter-as-you-type block search with Enter to add
Drag-and-drop support for block positioning
Categorized block palette with visual icons
Real-time property editing with auto-save

Components

BlockSelectorPanel

Left sidebar panel with search input and categorized block palette. Supports filter-as-you-type—when only one block matches, press Enter to add it instantly.

BlockPropertiesPanel

Right sidebar panel displaying selected block properties. Shows basic settings, type-specific configuration, access control, and advanced options.

BlockCanvas

Central area displaying the form structure with inline-editable resource header and draggable block cards.

Block Search

The search input filters blocks by name, type, or category as you type. When the search narrows to a single result, press Enter to immediately add that block to your form.

Pro tip: Type the first few letters of a block type and press Enter for quick insertion.

// BlockSelectorPanel search behavior:
// 1. Type to filter blocks by name, type, or category
// 2. Results update instantly as you type
// 3. When only ONE block matches, press Enter to add it
// 4. Clear search after adding a block

// Example: Type "rat" → only "Rating Scale" matches
// Press Enter → Rating Scale block added to form

Live Demo

BlockSelectorPanel

Interactive BlockSelectorPanel with search

Added Blocks

Click a block or use search + Enter to add blocks. They will appear here.

Props Reference

BlockSelectorPanel Props

Prop	Type	Default	Description
`onAddBlock`	`(type: string) => void`	`required`	Called when a block is clicked or selected via Enter
`disabled`	`boolean`	`false`	Disable the panel and search input

Usage

Standalone Component

import { BlockSelectorPanel } from '@/ui/blocks/dynamic-block/components';

<BlockSelectorPanel
  onAddBlock={(type) => {
    // Add block of this type to your form
    addBlockToForm(type);
  }}
  disabled={false}
/>

With LayoutWizard (Designer Mode)

import { LayoutWizard } from '@/ui/layouts';
import { PropertyPanel } from '@/ui/components';
import { BlockSelectorPanel, DesignerPropertiesPanel, BlockCanvas } from '@/ui/blocks/dynamic-block/components';
import { faListCheck, faCubes } from '@fortawesome/duotone-regular-svg-icons';

// LayoutWizard (designer mode) provides a 4-panel structure:
// - Left: WizardNav (steps) + leftSidebarContent (with search)
// - Center: BlockCanvas (full width, no padding)
// - Right: rightPanel (PropertyPanel with DesignerPropertiesPanel)
// - Bottom: WizardBar (navigation)

<LayoutWizard
  steps={steps}
  wizardTitle={t('resources.builder.wizardTitle')}
  wizardIcon={faListCheck}
  leftSidebarContent={<BlockSelectorPanel onAddBlock={handleAddBlock} />}
  leftSidebarSections={{
    contentHeader: { icon: faCubes, label: t('layout.blockDesigner.blockLibraryTitle') },
  }}
  rightPanel={
    <PropertyPanel size="wide">
      <DesignerPropertiesPanel />
    </PropertyPanel>
  }
  error={errorMessage}
  onBack={handleBack}
  onNext={handleNext}
>
  <BlockCanvas />
</LayoutWizard>

// BlockSelectorPanel search behavior: // 1. Type to filter blocks by name, type, or category // 2. Results update instantly as you type // 3. When only ONE block matches, press Enter to add it // 4. Clear search after adding a block // Example: Type "rat" → only "Rating Scale" matches // Press Enter → Rating Scale block added to form

Prop

Type

Default

Description

onAddBlock

(type: string) => void

required

Called when a block is clicked or selected via Enter

disabled

boolean

false

Disable the panel and search input

import { BlockSelectorPanel } from '@/ui/blocks/dynamic-block/components'; <BlockSelectorPanel onAddBlock={(type) => { // Add block of this type to your form addBlockToForm(type); }} disabled={false} />

import { LayoutWizard } from '@/ui/layouts'; import { PropertyPanel } from '@/ui/components'; import { BlockSelectorPanel, DesignerPropertiesPanel, BlockCanvas } from '@/ui/blocks/dynamic-block/components'; import { faListCheck, faCubes } from '@fortawesome/duotone-regular-svg-icons'; // LayoutWizard (designer mode) provides a 4-panel structure: // - Left: WizardNav (steps) + leftSidebarContent (with search) // - Center: BlockCanvas (full width, no padding) // - Right: rightPanel (PropertyPanel with DesignerPropertiesPanel) // - Bottom: WizardBar (navigation) <LayoutWizard steps={steps} wizardTitle={t('resources.builder.wizardTitle')} wizardIcon={faListCheck} leftSidebarContent={<BlockSelectorPanel onAddBlock={handleAddBlock} />} leftSidebarSections={{ contentHeader: { icon: faCubes, label: t('layout.blockDesigner.blockLibraryTitle') }, }} rightPanel={ <PropertyPanel size="wide"> <DesignerPropertiesPanel /> </PropertyPanel> } error={errorMessage} onBack={handleBack} onNext={handleNext} > <BlockCanvas /> </LayoutWizard>