Ortak kavramlar
Birden fazla düzenleyicideki bloklar tarafından paylaşılan yeniden kullanılabilir tasarım alanları ve davranışları.
Decoration & visibility (BlockShell)
Most blocks share one reusable shell: visibility rules and decoration live on the same prop set, not as separate block types. Blocks that use BlockShell list these fields at the end of their Fields section. Visibility controls who/where the block appears (breakpoints, locales, auth, route lock, roles). Decoration controls spacing, background, border, shadow, motion, and related chrome around the block content.
Visibility
showOnBreakpoints
Per-breakpoint visibility. Set a breakpoint to `false` to hide the block on that viewport. Missing keys default to visible.
showOnBreakpoints: { mobile: false }showOnLocales
Limit which website locales show the block. Empty / missing means all enabled locales. Set a locale to `false` to hide.
showOnLocales: { tr: false }authVisibility
Who can see the block based on website sign-in state.
authVisibility: "authenticated"
routeLockVisibility
On locked object routes, show always, only when unlocked, or only when locked.
routeLockVisibility: "all"
roleVisibility
Optional list of website user role labels. Empty means all roles. Matching is case-sensitive.
roleVisibility: ["moderator"]
entryActionVisibility
Object-component only: show when the current entry exposes matching actions.
entryActionVisibility: "all"
queryPageVisibility
Optional: limit list blocks to the first query page only.
queryPageVisibility: "all"
Spacing & sizing
customizeEnabled
Enables the decoration controls below in the editor.
customizeEnabled: true
paddingEnabled
Turns padding controls on for this block.
paddingEnabled: true
paddingtoken
Theme spacing token applied as padding. Tokens let site owners customize spacing while blocks continue to share a consistent design language.
padding: "md"
paddingByBreakpointtoken
Theme spacing token per breakpoint. Use this when the block needs different, but still theme-consistent, spacing at different viewport sizes.
paddingByBreakpoint: { desktop: "md", mobile: "sm" }marginsEnabled
Turns margin controls on (configured via size/position maps).
marginsEnabled: false
sizeByBreakpoint
Optional width/height constraints per breakpoint. Modes: `fillParent` (stretch), `fitContent` (intrinsic), `static` (fixed length via `widthStatic`/`heightStatic` + unit), `ratio` (percent of the other axis via `widthRatio`/`heightRatio`).
`static` uses `widthStaticUnit` / `heightStaticUnit`: `px`, `vw`, `vh`, `vmin`, or `vmax` (default `px`). Example full-page background: `widthStatic: 100`, `widthStaticUnit: "vw"`, `heightStatic: 100`, `heightStaticUnit: "vh"` with fixed positioning and `pointerEvents: "none"`. `ratio` values are percentages of the opposite axis. `fillParent` and `fitContent` take no numeric unit.
sizeByBreakpoint: {
desktop: {
widthMode: "static",
widthStatic: 100,
widthStaticUnit: "vw",
heightMode: "static",
heightStatic: 100,
heightStaticUnit: "vh"
}
}pointerEvents
Whether the decoration frame receives pointer events. Use `none` for full-page decorative backgrounds so clicks pass through.
pointerEvents: "auto"
Position
positionEnabled
Enables absolute/relative positioning overlays.
positionEnabled: false
positionByBreakpoint
Positioning overlays per breakpoint (`static`, `relative`, `absolute`, `fixed`, `sticky`) with optional offsets in pixels (`top`, `right`, `bottom`, `left`).
positionByBreakpoint: {
desktop: { position: "relative", top: 0, left: 0 }
}Background
backgroundEnabled
Enables background fill, gradient, or image.
backgroundEnabled: true
backgroundWidth
Background span: page column or full viewport bleed.
backgroundWidth: "page"
backgroundKind
Solid color, gradient, image, muted autoplay video, or canvas animation (particles / reactive grid).
backgroundKind: "solid"
backgroundColorLight
Solid background color in light theme.
backgroundColorLight: "#ffffff"
backgroundColorDark
Solid background color in dark theme.
backgroundColorDark: "#111827"
gradientAngledeg
Gradient angle in degrees when `backgroundKind` is `gradient`.
gradientAngle: 135
gradientColors
Gradient stops with light/dark theme pairs.
gradientColors: [
{ light: "#2563eb", dark: "#1e3a8a" },
{ light: "#93c5fd", dark: "#1e40af" }
]backgroundImageSrc
Background image source when `backgroundKind` is `image`.
backgroundImageSrc: "https://cdn.example/bg.jpg"
backgroundImageMode
How the background image is sized.
backgroundImageMode: "cover"
backgroundRepeatSizepx
Tile size in pixels when background image mode is `repeat`.
backgroundRepeatSize: 64
backgroundPosition
CSS background-position value.
backgroundPosition: "center"
backgroundMotionEnabled
Seamless pan (and optional rotate) for gradient and image backgrounds.
backgroundMotionEnabled: true
backgroundMotionDirectionDegdeg
Pan direction in degrees (0 = right).
backgroundMotionDirectionDeg: 0
backgroundMotionSpeed
Relative pan speed for seamless cycling.
backgroundMotionSpeed: 20
backgroundMotionRotateDegPerSecdeg
Continuous rotation speed in degrees per second (0 = off).
backgroundMotionRotateDegPerSec: 0
backgroundVideoSrc
Video URL when `backgroundKind` is `video`. Always muted, autoplay, plays inline; never captures focus.
backgroundVideoSrc: "https://cdn.example/bg.mp4"
backgroundVideoFit
`cover` / `fill` use object-fit; `repeat` tiles frames on canvas.
Options: cover, fill, repeat
backgroundVideoFit: "cover"
backgroundVideoLoop
Loop the background video (default true).
backgroundVideoLoop: true
backgroundAnimationMode
Particle field or reactive grid (filled cells or continuous outlines) when `backgroundKind` is `animation`.
Options: particle, reactiveGrid
backgroundAnimationMode: "particle"
backgroundAnimShape
Built-in shape or custom SVG for particles/grid cells.
Options: circle, square, roundedSquare, triangle, diamond, hexagon, star, cross, svg
backgroundAnimShape: "circle"
backgroundAnimSvgSrc
SVG URL when shape is `svg`.
backgroundAnimSvgSrc: "https://cdn.example/shape.svg"
backgroundAnimColorMode
`solid` tints shapes; `fromAsset` keeps SVG colors.
Options: solid, fromAsset
backgroundAnimColorMode: "solid"
backgroundAnimSizepx
Base particle or cell size in pixels.
backgroundAnimSize: 12
backgroundAnimJitter
Particle-only 0–1 randomization for count, size, lifetime, and speed.
backgroundAnimJitter: 0.2
backgroundGridStyle
Reactive grid rendering: filled `cells`, or `continuous` shape outlines tiled edge-to-edge into one connected lattice that ripples around the cursor. Ignored for `svg` shapes, which always render as cells.
backgroundGridStyle: "cells"
backgroundGridHoverGrowLimitPct%
Maximum cell size change at the pointer. Positive values grow cells; negative values shrink them. A value of `50` reaches 150% scale after the configured reaction time.
backgroundGridHoverGrowLimitPct: 50
backgroundGridHoverRotateLimitDegdeg
Maximum cell rotation at the pointer. Positive values rotate clockwise; negative values rotate counterclockwise.
backgroundGridHoverRotateLimitDeg: 0
backgroundGridReactionTimeSecs
Seconds for cells or the continuous-grid ripple to reach their configured hover limit, and to return after the pointer leaves.
backgroundGridReactionTimeSec: 1
Border
borderEnabled
Enables border color, style, width, and radius.
borderEnabled: false
borderColorLight
Border color in light theme.
borderColorLight: "#e5e7eb"
borderColorDark
Border color in dark theme.
borderColorDark: "#374151"
Shadow
shadowEnabled
Enables box shadow values for light/dark themes.
shadowEnabled: false
shadowValueLight
CSS box-shadow value in light theme.
shadowValueLight: "0 8px 24px rgba(0, 0, 0, 0.12)"
shadowValueDark
CSS box-shadow value in dark theme.
shadowValueDark: "0 8px 24px rgba(0, 0, 0, 0.45)"
Motion & transform
scrollAnimationEnabled
Enables enter-on-scroll animation.
scrollAnimationEnabled: false
scrollAnimationType
Enter-on-scroll animation preset.
scrollAnimationType: "fadeIn"
scrollAnimationDurationms
Animation duration in milliseconds.
scrollAnimationDuration: 600
scrollAnimationDelayms
Animation delay in milliseconds.
scrollAnimationDelay: 0
cursorTiltEnabled
Tilts the block slightly toward the pointer.
cursorTiltEnabled: false
cursorTiltIntensity
Strength of the cursor tilt effect.
cursorTiltIntensity: 8
transformEnabled
Enables CSS transform controls.
transformEnabled: false
transformRotateXdeg
Rotation around the X axis in degrees.
transformRotateX: 0
transformRotateYdeg
Rotation around the Y axis in degrees.
transformRotateY: 0
transformRotateZdeg
Rotation around the Z axis in degrees.
transformRotateZ: 0
transformTranslateXpx
Horizontal translation in pixels.
transformTranslateX: 0
transformTranslateYpx
Vertical translation in pixels.
transformTranslateY: 0
transformTranslateZpx
Depth translation in pixels.
transformTranslateZ: 0
transformScaleratio
Uniform scale factor (unitless).
transformScale: 1
transformPerspectivepx
CSS perspective distance in pixels.
transformPerspective: 800
Advanced
decorationBySelector
Advanced: apply decoration token overlays for `hover`, `active`, and `focus`. Missing overlay keys inherit the default flat props.
decorationBySelector: {
hover: { backgroundColorLight: "#f3f4f6" }
}clipboardeditor only
Editor-only copy/paste helpers for block props.
// Editor-only — does not persist a stored value
Örnekler
{
"showOnBreakpoints": {
"mobile": false
}
}{
"authVisibility": "authenticated",
"customizeEnabled": true,
"paddingEnabled": true,
"padding": "md"
}