Page Types

Page types are a way to group similar pages together.

Page of the same type share:

A Template, if it is defined. 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 external content, if you set it
Categories to organize the pages
Slug Prefix: if set, a slug prefix, which is enforced by the editor

The pageTypes in React Bricks configuration is an array of pageType objects.

If you are using a starter project, you should find a pageTypes.ts file in the /react-bricks directory.

Properties

Each pageType object has the following shape:

interface IPageType {
  name: string
  pluralName: string
  isEntity?
  allowedBlockTypes?: string[]
  excludedBlockTypes?: string[]
  defaultLocked?: boolean
  defaultStatus?: PageStatus
  defaultLanguage?: string
  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 (for example "product").
`pluralName`	The plural name is used in the editing interface (for example "Products").
`isEntity`	Boolean (default false). If true the pages of this pageType will be organized under the "Entities" tab on the left sidebar. It's just "cosmetics", but it is a useful logical separation for editors.
`allowedBlockTypes`	Array with the names of the block types allowed for this page type. All the other blocks will not be allowed. By default all block types are allowed.
`excludedBlockTypes`	Array with the names of the block types not allowed for this page type. It is convenient if almost all block types are allowed. React Bricks will exclude all blocks: - Found in the `excludedBlockTypes` list - Not found in the `allowedBlockTypes` list, if this is provided.
`defaultLocked`	The default lock status for new pages. For example, if you want the products to have a fixed structure, you may provide the default content and set the `defaultLocked` flag to true.
`defaultStatus`	The default visibility status (draft / published) for new pages of this type.
`defaultLanguage`	The default ISO 639-1 language for this pageType. It is used in the `<html>` tag to identify the document language. Defaults to "en".
`defaultFeaturedImage`	The default URL for the featured image of this pageType, if no featured image is provided for a Page via the Document sidebar.
`getDefaultContent`	Function that returns the default content for a new page of this type. If the function returns a string for a block, it should be a brick name: the default content for that brick will be used to populate the block. In case of an IBrickStory, a particular story of the brick is used to populate the block. In case of IContentBlock you can provide the exact content block (id, type and props).
`customFields`	Array of custom fields or groups of custom fields on a Page for this page type, modified via the sidebar's "Document" tab. See Custom fields
`getExternalData`	Function that gets the Page as argument and should return a promise that resolves to an object with string keys. See External content
`getDefaultMeta`	Function that gets the Page and External Data as arguments and should return a object with of type IMeta (or partial of it) with meta data, Open Graph data, X (Twitter) card data, Schema.org data. Useful to populate meta from an external API, like a headless commerce.
`metaImageAspectRatio`	Aspect ratio to use for the cropping of the featured image in the page meta
`categories`	Array of objects with interface `ICategory` to organize pages inside of this pageType. The editors will be able to 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 value for each locale.
`template`	A Page Template, defined as a set of Slots. See Page Template.

Usage example

const pageSchema = [
  {
    name: 'product',
    pluralName: 'products',
    defaultLocked: false,
    defaultStatus: types.PageStatus.Published,
    getDefaultContent: () => ['hero-unit', 'features', 'call-to-action'],
  },
]

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>

Page Types

Properties​

Properties definition​

Usage example​

Render a list of pages with <List>​

Properties​

Properties definition​

Usage example​

Properties

Properties definition

Usage example

Render a list of pages with `<List>`

Properties

Properties definition

Usage example