Skip to content
Docs

Pages, Page Types, Templates

Pages

A Page in React Bricks represent a unit of content.

It corresponds to a website page or a blog post, but can also store content fragments reusable across different pages.

A page has content, type, slug, name, author, meta values, statuses (visibility, lock, approval phase, etc.), tags, and creation date.

The content of a page is an array of content blocks. Each block has an id, a type (referencing the corresponding brick name) and props to pass to the brick’s component.

A page can also be based on a Page Template. In this case, its content is more structured, as content blocks belong to one of the Template’s Slots.

Page Types

Developer can define multiple Page Types in code through the pageTypes configuration. In the starter templates, you can edit Page Types in the pageTypes.ts file.

Each Page Type has:

  • name (required): A unique string representing the page type
  • pluralName (required): Used by the content administration interface
  • defaultLocked: Boolean, default false
  • defaultStatus: types.PageStatus.Published or types.PageStatus.Draft
  • getDefaultContent: A function returning the default content (array of brick’s names, stories or full content)
  • isEntity: Boolean, default false. If true, pages of this type appear in the “Entities” tab (useful for reusable fragments like Header, Footer, etc.).
  • allowedBlockTypes: Array of allowed bricks. If not provided, all bricks are allowed.
  • getExternalData: Async function (receiving the page object as an argument) that resolves to an object, fetching data from an external API. The returned data is available in the externalData object on the page and can be consumed directly (usePageValues) or from a single brick via the mapExternalDataToProps function in the brick’s schema.
  • getDefaultMeta: Function (receiving the page object and externalData object as arguments) to return default meta values for a new page (e.g. set Schema.org data on a product from a headless commerce structured data).
  • template: An array of Slots defining a page template (see next section).

Page Template

Sometimes you want to restrict editors’ freedom when composing a page. You might want fixed sections, blocks that can’t be removed, areas where editors can use only a subset of bricks, or even non-editable sections. Templates serve this purpose.

A template is an array of slots, where each slot has these properties:

  • slotName (required): The name of the slot, unique within this pageType
  • label (required): A label displayed in the editing interface
  • allowedBlockTypes: Array of strings with the names of allowed bricks
  • getDefaultContent: Function that returns the default content for the slot, with the same signature as getDefaultContent at pageType level
  • min: Minimum number of blocks (applied when there is only one type in allowedBlockTypes)
  • max: maximum number of blocks
  • editable: if false the slot is not editable at all