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
allowedBlockTypes?: string[]
excludedBlockTypes?: string[]
defaultLocked?: boolean
defaultStatus?: PageStatus
defaultLanguage?: string
defaultFeaturedImage?: string
getDefaultContent?: () => string[]
customFields?: Array<ISideEditPropPage | ISideGroup>
getExternalData?: (page: Page) => Promise<Props>
metaImageAspectRatio?: number
categories?: ICategory[] // from 3.3.0-beta
}
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"). |
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 an array of brick names. The default content for the page will consist in the concatenation of the default content for each brick. |
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 |
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. |
Usage example​
const pageSchema = [
{
name: 'product',
pluralName: 'products',
defaultLocked: false,
defaultStatus: types.PageStatus.Published,
getDefaultContent: () => ['hero-unit', 'features', 'call-to-action'],
},
]