Skip to main content

Page Types

Page types are a way to group similar pages together.

Page of the same type share:

  • 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

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? // since 3.3.0
  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>
  metaImageAspectRatio?: number
  categories?: ICategory[] // since 3.3.0
}

Properties definition​

PropertyDefinition
nameThe unique name for this page type (for example "product").
pluralNameThe plural name is used in the editing interface (for example "Products").
isEntityBoolean (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.
allowedBlockTypesArray 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.
excludedBlockTypesArray 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.
defaultLockedThe 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.
defaultStatusThe default visibility status (draft / published) for new pages of this type.
defaultLanguageThe default ISO 639-1 language for this pageType. It is used in the <html> tag to identify the document language. Defaults to "en".
defaultFeaturedImageThe default URL for the featured image of this pageType, if no featured image is provided for a Page via the Document sidebar.
getDefaultContentFunction 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).
customFieldsArray 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
getExternalDataFunction that gets the Page as argument and should return a promise that resolves to an object with string keys. See External content
metaImageAspectRatioAspect ratio to use for the cropping of the featured image in the page meta
categoriesArray 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.

Usage example​

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