Page Types

Page types are a way to group similar pages and apply specific configurations to them.

A Page Type can define:

• A Template. See Page Templates
• Allowed / excluded block types
• Default status for new pages: locked or unlocked, draft or published
• Default content, language and featured image
• Featured image aspect ratio
• Custom fields, if any
• The getExternalData function to get data from external APIs
• Categories to organize the pages
• A Slug Prefix enforced by the editor

In React Bricks configuration, pageTypes is an array of pageType objects.

For starter projects, you’ll find a pageTypes.ts file in the /react-bricks directory.

Usage Example

const pageTypes: types.IPageType[] = [
  ...{
    name: 'post',
    pluralName: 'posts',
    defaultLocked: false,
    defaultStatus: types.PageStatus.Draft,
    getDefaultContent: () => ['title'],
    allowedBlockTypes: ['title', 'paragraph', 'image', 'video', 'code'],
  },
]

Properties

Each pageType object has the following shape:

interface IPageType {
  name: string
  pluralName: string
  isEntity?
  allowedBlockTypes?: string[]
  excludedBlockTypes?: string[]
  defaultLocked?: boolean
  defaultStatus?: PageStatus
  defaultFeaturedImage?: string
  getDefaultContent?: () => (string | IBrickStory | IContentBlock)[]
  customFields?: Array<ISideEditPropPage | ISideGroup>
  getExternalData?: (page: Page) => Promise<Props>
  getDefaultMeta?: (page: PageFromList, externalData: Props) => Partial<IMeta> // New in 4.5
  metaImageAspectRatio?: number
  categories?: ICategory[]
  slugPrefix?: {
    default: string
    translations?: {
      [key: string]: string
    }
  }
  template?: Array<TemplateSlot> // New in 4.5
}

Properties definition

Property	Definition
name	The unique name for this page type (e.g., “product”).
pluralName	The plural name used in the editing interface (e.g., “Products”).
isEntity	Boolean (default false). If true, pages of this type will be organized under the “Entities” tab in the left sidebar. This provides a useful logical separation for editors to understand which pages are meant as reusable fragments or entities and are not true pages.
allowedBlockTypes	Array of block type names allowed for this page type. By default, all block types are allowed.
excludedBlockTypes	Array of block type names not allowed for this page type. Useful when most block types are allowed. React Bricks will exclude blocks found in this list or not found in allowedBlockTypes if provided.
defaultLocked	The default lock status for new pages. Set to true for pages with a fixed structure.
defaultStatus	The default visibility status (draft or published) for new pages of this type.
defaultFeaturedImage	The default URL for the featured image of this pageType, used if no featured image is provided via the Document sidebar.
getDefaultContent	Function that returns the default content for a new page of this type. It can return strings (brick names), IBrickStory objects, or IContentBlock objects.
customFields	Array of custom fields or groups of custom fields for this page type, editable via the sidebar’s “Document” tab. See Custom fields
getExternalData	Function that takes a Page as argument and returns a promise resolving to an object with string keys. See External content
getDefaultMeta	Function that takes a Page and External Data as arguments and returns a object with type IMeta (or partial) with meta data, Open Graph data, X (Twitter) card data, Schema.org data. Useful for populating meta from an external API, like a headless commerce system.
metaImageAspectRatio	Aspect ratio for cropping the featured image in the page meta.
categories	Array of objects with interface ICategory to organize pages within this pageType. Editors can select a category from this list, and pages will be organized accordingly in the left sidebar menu.
slugPrefix	Prefix to apply to the slug of each page in this pageType, with its default value and values for each locale.
template	A Page Template, defined as a set of Slots. See Page Template.

Usage Example with Template

const pageTypes: types.IPageType[] = [
  ...{
    name: 'product',
    pluralName: 'products',
    defaultStatus: types.PageStatus.Published,
    template: [
      {
        slotName: 'heading',
        label: 'Heading',
        min: 1,
        max: 1,
        allowedBlockTypes: ['hero-unit'],
        editable: true,
        getDefaultContent: () => [
          // Default content defined with a story
          { brickName: 'hero-unit', storyName: 'gradient-hero-unit' },
        ],
      },
      {
        slotName: 'content',
        label: 'Content',
        min: 0,
        max: 4,
        allowedBlockTypes: [
          'text-image',
          'call-to-action',
          'customers',
          'paragraph',
        ],
        editable: true,
        getDefaultContent: () => ['text-image', 'customers'],
      },
      {
        slotName: 'footer',
        label: 'Footer',
        min: 1,
        max: 1,
        allowedBlockTypes: ['call-to-action'],
        editable: false,
        // no default content => you'll get 1 block
        // of type call-to-action because of min: 1
      },
    ],
  },
]

Render a list of pages with <List>

Using the <List> components, it’s possible to easily render a list of pages of a certain pageType without calling the fetchPages function (or using the usePages hook).

Properties

Here’s the List component interface:

interface ListProps {
  of: string
  where?: {
    tag?: string
    language?: string
    filterBy?: {
      [key: string]: any
    }
  }
  sort?: string
  page?: number
  pageSize?: number
  children: ({
    items,
    pagination,
  }: types.PagesFromListWithPagination) => React__default.ReactElement
}

Properties definition

Property	Definition
of	The page type of the pages to fetch.
where	Filter by tag, language or custom fields
sort	Sort (minus sign before the field name to sort descending)
page	The page number (for pagination)
pageSize	The page size (for pagination)
children	The children should be a function with an object as argument, from which you can get items and pagination to render each item of the list.

Usage example

<List
  of="blogPost"
  where={{
    language: 'fr',
    tag: 'cms',
    filterBy: { myCustomField: 'foo' },
  }}
  sort="-publishedAt"
  page={1}
  pageSize={20}
>
  {({ items, pagination }) => {
    return (
      <>
        {items.map((post) => {
          return (
            <PostListItem
              key={post.id}
              title={post.meta.title || ''}
              href={post.slug}
              content={post.meta.description || ''}
              author={post.author}
              date={post.publishedAt || ''}
              featuredImg={post.meta.image}
            />
          )
        })}
      </>
    )
  }}
</List>