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 and language

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
allowedBlockTypes?: string[]
excludedBlockTypes?: string[]
defaultLocked?: boolean
defaultStatus?: PageStatus
defaultLanguage?: string
defaultFeaturedImage?: string
getDefaultContent?: () => string[]
}

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").
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 an array of brick names. The default content for the page will consist in the concatenation of the default content for each brick.

Usage example

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