Embed block
Embeds third-party HTML such as a widget or iframe in a figure.
On this page
The Embed block places third-party embed markup on a page.
Where it is offeredLink to this section
Offered in the root, region and fragment tiers, so editors can place it on a page, inside a Section, Feature or Gallery body, and inside cards, columns and accordions. It is never offered in the slot tier. The block is on by default; turn it off with embed: false.
FieldsLink to this section
| Field | Type | Label | Default | Notes |
|---|---|---|---|---|
_inCard | checkbox | |||
_tier | select | Options: root (Root), region (Region), fragment (Fragment), slot (Slot), stack (Stack) | ||
align | radio | Alignment | left | Shown when siblingData?.embedCode; Required; Shown when sized(siblingData)&&(siblingData?.widthType==="pixels"||siblingData?.widthType==="percentage"&&typeof siblingData?.widthPercentage==="number"&&siblingData.widthPercentage<100); Options: left (Left), center (Center), right (Right) |
cardWidth | radio | Width alignment | default | Shown when siblingData?.embedCode; Required; Shown when hasValue(siblingData)&&siblingData?._inCard===true; Options: default (Default), card (Card width) |
disableAnimation | checkbox | Disable Animations | false | Shown when siblingData?.embedCode |
embedCode | code | Embed Code | Required | |
widthPercentage | number | 100 | Shown when siblingData?.embedCode; Required; Shown when visible(siblingData)&&siblingData?.[`${dimension}Type`]==="percentage" | |
widthPixels | number | 600 | Shown when siblingData?.embedCode; Required; Shown when visible(siblingData)&&siblingData?.[`${dimension}Type`]==="pixels" | |
widthType | radio | Width | percentage | Shown when siblingData?.embedCode; Required; Shown when visible(siblingData); Options: percentage (%), pixels (px) |
width | radio | Width alignment | default | Shown when siblingData?.embedCode; Required; Shown when (hasValue?hasValue(siblingData):true)&&siblingData?._tier!=="fragment"; Options: default (Default), container (Container), screen (Screen) |
As a direct child of a card it gains a Card width option; see Media inside a card.
Rendered outputLink to this section
Renders the embed inside a Figure.
ConverterLink to this section
embedConverter puts embedCode directly on <Figure dangerouslySetInnerHTML>. Empty code renders nothing. Outside fragment tier it applies percentage or pixel width and alignment; in a card it honors the direct-child Card width setting. This is trusted HTML, so only allow authors you trust to edit it; the converter does not sanitize it.
CustomizingLink to this section
Import EmbedBlock from @systhemaui/payload/blocks as the starting schema for a project block. Register the definition and your renderer through customBlocks, using type: 'block' and the editor tiers you intend to support. A distinct slug creates a new block; a converter registered under the existing embed slug takes precedence over the built-in converter. Keep the fields that renderer reads, including populated relationships and nested editor states.
See Registering blocks for the configuration pattern and Converters for the renderer contract. A project converter used in client-mode live preview also needs browser registration.