Component

Field-level catalog tables below stay in English — they match the machine design schema used by the editor, API, and MCP.

Decoration and visibility use Decoration & visibility (BlockShell).

Mounts a reusable page component. The mount owns only source and bindings: it has no layout props. Layout lives in the component document, so change columns, gaps, or direction by reading the component with get_components and saving it with save_component, then editing the inner block's layout (for example layout.columnsByBreakpoint on a GridListBlock or VariableArrayTemplateBlock). Writing shell.layout.* on the mount saves without error but is never read; get_design_warnings reports design.warning.prop_not_supported_by_block.

Fields

source

pageComponentId

Id of the reusable page component to embed. The mount has no layout props; edit the component document to change its internal grid, columns, or direction.

To change a grid inside the component, call get_components with the component id, then save_component with an op on the inner block. Do not set shell.layout.* on the mount.

source: {
  source: { pageComponentId: "site_footer_cta" }
}

bindings

variableValues

Fallback input values keyed by component input id. The public page uses these only for inputs that are not listed in bindings.inputMappings. A mapped input always wins.

bindings: {
  variableValues: { heading: "Hello" }
}

inputMappings

How the host page fills this component's inputs. The public page reads bindings.inputMappings (also accepted as a flat inputMappings prop). Each row is { inputId, source }. source is a dot path on the request scope: requests.<name>.results, requests.<name>.results[].<field>, vars.<variableId>, or route.<param>. bindings.variableValues is only the fallback for inputs that have no mapping.

After the page has loaded, a list or get re-run refreshes every ComponentBlock input whose source starts with requests.<name>. It also refreshes variables written by that request's resultWrites, including an entry[] variable bound to VariableArrayTemplateBlock.

bindings: {
  inputMappings: [{ inputId: "images", source: "requests.list_product_images.results" }]
}

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

{
  "shell": {
    "visibility": {
      "authVisibility": "all",
      "routeLockVisibility": "all",
      "roleVisibility": [],
      "entryActionVisibility": "all",
      "queryPageVisibility": "all",
      "hideWhenEmpty": ""
    },
    "anchor": {
      "anchorId": "",
      "anchorKey": ""
    },
    "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": ""
    }
  },
  "source": {
    "pageComponentId": ""
  },
  "bindings": {
    "inputMappings": []
  }
}

</details>