Callout

A labelled admonition box — note, tip, warning, or important — with a rich-text body. Use it for asides, gotchas, and warnings inside a page.

This is a custom block — register it via initBridge. The level is the block's variation; the body is a region of child blocks, so it holds real markdown — multiple paragraphs, lists, code.

Developer Reference

Schema

Pass this object inside the blocks option when calling initBridge() to register this block type with the admin UI. See Custom Blocks for the full setup guide.

{
  "fieldsets": [
    {
      "id": "default",
      "title": "Default",
      "fields": [
        "variation",
        "items"
      ]
    }
  ],
  "properties": {
    "variation": {
      "title": "Level",
      "choices": [
        [
          "note",
          "Note"
        ],
        [
          "tip",
          "Tip"
        ],
        [
          "warning",
          "Warning"
        ],
        [
          "important",
          "Important"
        ]
      ],
      "default": "note"
    },
    "items": {
      "widget": "blocks_layout",
      "allowedBlocks": [
        "slate"
      ]
    }
  },
  "required": []
}

JSON Block Data

Example JSON as stored in the Plone content API. This is the data structure your component will receive in the block prop.

{
  "@type": "callout",
  "variation": "note",
  "blocks": {
    "slate-5": {
      "@type": "slate",
      "value": [
        {
          "type": "p",
          "children": [
            {
              "text": "This is a "
            },
            {
              "type": "strong",
              "children": [
                {
                  "text": "note"
                }
              ]
            },
            {
              "text": " — the default level. The body takes normal markdown: "
            },
            {
              "type": "code",
              "children": [
                {
                  "text": "code"
                }
              ]
            },
            {
              "text": ", "
            },
            {
              "type": "link",
              "data": {
                "url": "/docs/frontend-guide/live-preview"
              },
              "children": [
                {
                  "text": "links"
                }
              ]
            },
            {
              "text": ", and multiple paragraphs."
            }
          ]
        }
      ]
    }
  },
  "blocks_layout": {
    "items": [
      "slate-5"
    ]
  }
}

Rendering

How this block renders in your frontend. Add its handling to your renderer, or — for list-style blocks — register a fetcher and reuse your list rendering.

const calloutLevels = {
  note:      { label: 'Note',      color: '#2563eb', bg: '#eff6ff' },
  tip:       { label: 'Tip',       color: '#059669', bg: '#ecfdf5' },
  warning:   { label: 'Warning',   color: '#d97706', bg: '#fffbeb' },
  important: { label: 'Important', color: '#dc2626', bg: '#fef2f2' },
};

function CalloutBlock({ block }) {
  const level = calloutLevels[block.variation] || calloutLevels.note;
  const blocks = block.blocks || {};
  const items = block.blocks_layout?.items || [];
  return (
    <aside
      data-block-uid={block['@uid']}
      className={`callout callout--${block.variation || 'note'}`}
      style={{ borderLeft: `4px solid ${level.color}`, background: level.bg, padding: '12px 16px', borderRadius: '4px', margin: '1em 0' }}
    >
      <div className="callout__label" style={{ fontWeight: 700, color: level.color, textTransform: 'uppercase', fontSize: '0.8em', letterSpacing: '0.05em', marginBottom: '4px' }}>
        {level.label}
      </div>
      <div className="callout__body">
        {items.map((id) => (
          <BlockRenderer key={id} block={{ ...blocks[id], '@uid': id }} />
        ))}
      </div>
    </aside>
  );
}