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​
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 |
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'],
},
]