Embed Pages

Sometimes you need a block or set of blocks that you can reuse across different pages. This allows changes to the original block(s) to be reflected on every page that embeds them (for example, a CTA with a newsletter subscription form).

You can achieve this through special “embed bricks” that allow you to embed one page inside another. When you modify the original page, the changes automatically appear on every page that embeds it.

Note

It’s generally advisable to save these “reusable fragments”—which aren’t full pages with a route in the website—using an Entity pageType (a page type with isEntity set to true). This prevents these fragments from appearing in the main pages list.

The Default Embed Brick

By default (unless disabled via the enableDefaultEmbedBrick configuration), you have access to a pre-made “embed brick” that allows editors to embed any page of any type.

Custom Embed Brick

You can create a custom embed brick that restricts editors to embedding only pages of a specific type.

An embed brick must have a sideEditProp with name types.EmbedProp, of type types.SideEditPropType.Relationship.

You can limit the pages an editor can select to just one pageType by using the references property of relationshipOptions.

Example usage

const embedPageBrick: types.Brick = () => null

embedPageBrick.schema = {
  name: 'product-embed',
  label: 'Embed Product',
  category: 'Embed',
  sideEditProps: [
    {
      name: types.EmbedProp, // This triggers Embedding
      label: 'Embed a product',
      type: types.SideEditPropType.Relationship,
      relationshipOptions: {
        references: 'product', // You can choose to limit choice to just one pageType
        multiple: false, // Multiple not supported for embeds
      },
      helperText: 'Choose a product, save to view it.',
    },
  ],
}