Flex List
Flex 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
listLayoutcontrol 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).
Fields
content
Main content payload. Shape depends on the block: nested slot blocks, rich-text HTML, or body copy.
content: []listLayout
Editor-only control — does not persist its own value.
Editor-only control. Persists flexDirectionByBreakpoint, gapByBreakpoint, justifyContentByBreakpoint, alignItemsByBreakpoint, flexWrapByBreakpoint — not a stored listLayout string.
flexDirectionByBreakpoint: { mobile: "column", desktop: "row" }
gapByBreakpoint: { mobile: 12, desktop: 24 }
justifyContentByBreakpoint: { desktop: "flex-start" }
alignItemsByBreakpoint: { desktop: "stretch" }
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 Puck id → breakpoint id → CSS order. Omitted ids keep source order. Web-only (email keeps DOM order).
layout: {
itemOrderByChildId: { "HeadingBlock-1": { mobile: 2, desktop: 0 } }
}Default props
{
"content": [],
"layout": {
"flexWrapByBreakpoint": {
"mobile": false,
"desktop": false
},
"gapByBreakpoint": {
"mobile": 8,
"desktop": 8
},
"justifyContentByBreakpoint": {},
"alignItemsByBreakpoint": {}
},
"shell": {
"customizeEnabled": false,
"pointerEvents": "auto",
"decorationBySelector": {},
"visibility": {
"showOnBreakpoints": {},
"showOnLocales": {},
"authVisibility": "all",
"routeLockVisibility": "all",
"roleVisibility": [],
"entryActionVisibility": "all",
"queryPageVisibility": "all",
"hideWhenEmpty": ""
},
"anchor": {
"anchorId": "",
"anchorKey": ""
},
"box": {
"padding": "none",
"paddingEnabled": false,
"marginsEnabled": false,
"sizeByBreakpoint": {},
"positionEnabled": false,
"positionByBreakpoint": {}
},
"background": {
"backgroundEnabled": false,
"backgroundWidth": "page",
"backgroundKind": "solid",
"backgroundColorLight": "",
"backgroundColorDark": "",
"gradientType": "linear",
"gradientAngle": 180,
"gradientColors": [
{
"light": "",
"dark": "",
"offset": 50
},
{
"light": "",
"dark": "",
"offset": 50
}
],
"gradientColor1Light": "",
"gradientColor1Dark": "",
"gradientColor2Light": "",
"gradientColor2Dark": "",
"backgroundImageSrc": "",
"backgroundImageMode": "cover",
"backgroundRepeatSize": 100,
"backgroundPosition": "center",
"backgroundMotionEnabled": false,
"backgroundMotionDirectionDeg": 0,
"backgroundMotionSpeed": 20,
"backgroundMotionRotateDegPerSec": 0,
"backgroundVideoSrc": "",
"backgroundVideoFit": "cover",
"backgroundVideoLoop": true,
"backgroundVideoRepeatSize": 100,
"backgroundAnimationMode": "particle",
"backgroundAnimShape": "circle",
"backgroundAnimSvgSrc": "",
"backgroundAnimColorMode": "solid",
"backgroundAnimColorLight": "#ffffff88",
"backgroundAnimColorDark": "#ffffff66",
"backgroundAnimSize": 12,
"backgroundAnimJitter": 0.2,
"backgroundParticleCount": 40,
"backgroundParticleLifetimeSec": 4,
"backgroundParticleSpeed": 40,
"backgroundParticleAnimType": "fade",
"backgroundParticleFromSide": "left",
"backgroundParticleToSide": "right",
"backgroundGridStyle": "cells",
"backgroundGridMotionDirectionDeg": 0,
"backgroundGridMotionSpeed": 0,
"backgroundGridRotateDegPerSec": 0,
"backgroundGridHoverGrowLimitPct": 50,
"backgroundGridHoverRotateLimitDeg": 0,
"backgroundGridReactionTimeSec": 1,
"backgroundGridHoverGrow": true,
"backgroundGridHoverRotate": false,
"backgroundGridHoverColor": false,
"backgroundGridHoverColorLight": "#ffffff55",
"backgroundGridHoverColorDark": "#ffffff33",
"backgroundGridReactionSpeed": 1,
"backgroundBackdropEnabled": false,
"backgroundBackdropBlurPx": 0,
"backgroundBackdropBrightness": 1,
"backgroundBackdropContrast": 1,
"backgroundBackdropSaturate": 1,
"backgroundBackdropGrayscale": 0,
"backgroundBackdropSepia": 0,
"backgroundBackdropHueRotateDeg": 0
},
"border": {
"borderEnabled": false,
"borderColorLight": "",
"borderColorDark": "",
"borderStyle": "solid"
},
"shadow": {
"shadowEnabled": false,
"shadowValueLight": "",
"shadowValueDark": ""
},
"effects": {
"effectsEnabled": false,
"opacity": 1,
"filterBlurPx": 0,
"filterBrightness": 1,
"filterContrast": 1,
"filterSaturate": 1,
"filterGrayscale": 0,
"filterSepia": 0,
"filterHueRotateDeg": 0,
"filterDropShadowOffsetX": 0,
"filterDropShadowOffsetY": 0,
"filterDropShadowBlur": 0,
"filterDropShadowColorLight": "",
"filterDropShadowColorDark": "",
"mixBlendMode": "normal"
},
"scrollAnimation": {
"scrollAnimationEnabled": false,
"scrollAnimationType": "fadeIn",
"scrollAnimationDuration": 600,
"scrollAnimationDelay": 0
},
"cursorTilt": {
"cursorTiltEnabled": false,
"cursorTiltIntensity": 12
},
"wander": {
"wanderEnabled": false,
"wanderSpeed": 40,
"wanderJitter": 40,
"wanderTurnRadius": 50,
"wanderTurnSmoothness": 40,
"wanderLimits": "parent"
},
"transform": {
"transformEnabled": false,
"transformRotateX": 0,
"transformRotateY": 0,
"transformRotateZ": 0,
"transformTranslateX": 0,
"transformTranslateY": 0,
"transformTranslateZ": 0,
"transformScale": 1
}
}
}