Embed Pages / Entities

Since v3.7.0 you can emebed a page or entity (i.e. a Page with a pageType with isEntity true) inside of another page, so that it is a single source of truth: anytime the embedded page is changed, the change is reflected in all the pages embedding it.

This can be done creating a special "embed brick". By default (unless you disable it via the enableDefaultEmbedBrick configuration), you already have a pre-made "embed brick", but you can create your own.

An embed brick must have a sideEditProp with name types.EmbedProp of type types.SideEditPropType.Relationship. You can choose to limit the page the editor can select to just one pageType, usign the references property of the 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.',
    },
  ],
}