List

Aşağıdaki alan düzeyi katalog tabloları İngilizce kalır — düzenleyici, API ve MCP’nin kullandığı makine tasarım şemasıyla birebir uyumludur.

Decoration and visibility use Dekorasyon ve görünürlük (BlockShell).

Preferred flex layout for slot children (no columns array). The editor listLayout control writes per-breakpoint maps (not a single enum): flexDirectionByBreakpoint, gapByBreakpoint, justifyContentByBreakpoint, alignItemsByBreakpoint, flexWrapByBreakpoint. Use Item order (itemOrderByChildId) to change child CSS order by breakpoint without moving blocks in the canvas. Prefer over legacy RowBlock for new designs (including email chrome). Direction defaults to row at every breakpoint: for a stack set layout.flexDirectionByBreakpoint to { mobile: "column", desktop: "column" }, and for a responsive split use { mobile: "column", desktop: "row" }. Grid keys (columnsByBreakpoint, columnGapByBreakpoint, rowGapByBreakpoint, justifyItemsByBreakpoint, *SpanByChildId) are NOT FlexListBlock props — use GridListBlock for a grid; a card is a GridListBlock cell wrapping a column FlexListBlock.

Fields

listLayout

Editor-only control — does not persist its own value.

Editor-only control. Persists flexDirectionByBreakpoint, gapByBreakpoint, justifyContentByBreakpoint, alignItemsByBreakpoint, flexWrapByBreakpoint — not a stored listLayout string.

Options: gallery, slider, grid

flexDirectionByBreakpoint: { mobile: "column", desktop: "row" }
gapByBreakpoint: { mobile: 12, desktop: 24 }
justifyContentByBreakpoint: { desktop: "flex-start" }
alignItemsByBreakpoint: { desktop: "center" }
flexWrapByBreakpoint: { desktop: "wrap" }

itemOrder

Editor-only control — does not persist its own value.

Editor-only Flex List Item order control. Does not persist as itemOrder — writes itemOrderByChildId.

// Writes:
itemOrderByChildId: { "HeadingBlock-1": { mobile: 2, desktop: 0 } }

layout

flexDirectionByBreakpoint

Flex direction per breakpoint id (row | column | row-reverse | column-reverse).

layout: {
  flexDirectionByBreakpoint: { mobile: "column", desktop: "row" }
}

gapByBreakpoint

Gap in px per breakpoint.

layout: {
  gapByBreakpoint: { mobile: 12, desktop: 24 }
}

itemOrderByChildId

Map of child block id → breakpoint id → CSS order. Omitted ids keep source order. Web-only (email keeps DOM order).

layout: {
  itemOrderByChildId: { "HeadingBlock-1": { mobile: 2, desktop: 0 } }
}

<details><summary>Default props</summary>

{
  "shell": {
    "visibility": {
      "authVisibility": "all",
      "routeLockVisibility": "all",
      "roleVisibility": [],
      "entryActionVisibility": "all",
      "queryPageVisibility": "all",
      "hideWhenEmpty": ""
    },
    "anchor": {
      "anchorId": "",
      "anchorKey": ""
    },
    "customizeEnabled": false,
    "spacing": {
      "padding": {
        "value": "none",
        "enabled": false
      },
      "margin": {
        "enabled": false
      }
    },
    "box": {
      "enabled": false
    },
    "background": {
      "enabled": false,
      "width": "page",
      "kind": "solid",
      "solid": {
        "color": {
          "light": "",
          "dark": ""
        }
      },
      "gradient": {
        "angle": 180,
        "type": "linear",
        "colors": [
          {
            "light": "",
            "dark": "",
            "offset": 50
          },
          {
            "light": "",
            "dark": "",
            "offset": 50
          }
        ],
        "color1Light": "",
        "color1Dark": "",
        "color2Light": "",
        "color2Dark": ""
      },
      "image": {
        "src": "",
        "mode": "cover",
        "repeatSize": 100,
        "position": "center"
      },
      "motion": {
        "enabled": false,
        "directionDeg": 0,
        "speed": 20,
        "rotateDegPerSec": 0,
        "animationMode": "particle"
      },
      "video": {
        "src": "",
        "source": "file",
        "youtubeUrl": "",
        "fit": "cover",
        "loop": true,
        "repeatSize": 100
      },
      "particles": {
        "shape": "circle",
        "svgSrc": "",
        "colorMode": "solid",
        "colorLight": "#ffffff88",
        "colorDark": "#ffffff66",
        "size": 12,
        "jitter": 0.2,
        "count": 40,
        "lifetimeSec": 4,
        "speed": 40,
        "animType": "fade",
        "fromSide": "left",
        "toSide": "right"
      },
      "grid": {
        "style": "cells",
        "motionDirectionDeg": 0,
        "motionSpeed": 0,
        "rotateDegPerSec": 0,
        "hoverGrowLimitPct": 50,
        "hoverRotateLimitDeg": 0,
        "reactionTimeSec": 1,
        "hoverGrow": true,
        "hoverRotate": false,
        "hoverColor": false,
        "hoverColorLight": "#ffffff55",
        "hoverColorDark": "#ffffff33",
        "reactionSpeed": 1
      },
      "backdrop": {
        "enabled": false,
        "blurPx": 0,
        "brightness": 1,
        "contrast": 1,
        "saturate": 1,
        "grayscale": 0,
        "sepia": 0,
        "hueRotateDeg": 0
      }
    },
    "pointerEvents": "auto",
    "effects": {
      "enabled": false,
      "opacity": 1,
      "blurPx": 0,
      "brightness": 1,
      "contrast": 1,
      "saturate": 1,
      "grayscale": 0,
      "sepia": 0,
      "hueRotateDeg": 0,
      "dropShadowOffsetX": 0,
      "dropShadowOffsetY": 0,
      "dropShadowBlur": 0,
      "dropShadowColorLight": "",
      "dropShadowColorDark": "",
      "mixBlendMode": "normal"
    },
    "animation": {
      "scroll": {
        "enabled": false,
        "type": "fadeIn",
        "duration": 600,
        "delay": 0
      },
      "tilt": {
        "enabled": false,
        "intensity": 12
      },
      "wander": {
        "enabled": false,
        "speed": 40,
        "jitter": 40,
        "turnRadius": 50,
        "turnSmoothness": 40,
        "limits": "parent"
      },
      "transform": {
        "enabled": false,
        "rotateX": 0,
        "rotateY": 0,
        "rotateZ": 0,
        "translateX": 0,
        "translateY": 0,
        "translateZ": 0,
        "scale": 1
      }
    }
  },
  "appearance": {
    "border": {
      "enabled": false,
      "style": "solid",
      "colorLight": "",
      "colorDark": ""
    },
    "shadow": {
      "enabled": false,
      "valueLight": "",
      "valueDark": ""
    }
  },
  "content": [],
  "layout": {
    "gapByBreakpoint": {
      "mobile": 8,
      "desktop": 8
    },
    "flexWrapByBreakpoint": {
      "mobile": false,
      "desktop": false
    }
  }
}

</details>