A component for displaying a block of content on a page. This should be used inside the PageLayout component.
It should be provided with a column prop to determine which column it should appear in, and a blockId prop
to identify the block.
Example
<PageBlock column="main" blockId="my-block"> <div>My Block</div></PageBlock>function PageBlock(props: Readonly<PageBlockProps>): voidParameters
Readonly<PageBlockProps>Props used to configure the PageBlock component.
type PageBlockProps = { children?: React.ReactNode; column: 'main' | 'side' | 'full'; blockId?: string; title?: React.ReactNode | string; description?: React.ReactNode | string; className?: string; layout?: 'card' | 'bare';}React.ReactNodeThe content of the block.
'main' | 'side' | 'full'Which column this block should appear in
stringThe ID of the block, e.g. "gift-cards" or "related-products".
React.ReactNode | stringThe title of the block, e.g. "Gift Cards" or "Related Products".
React.ReactNode | stringAn optional description of the block.
stringAn optional set of CSS classes to apply to the block.
'card' | 'bare'v3.8.0'card'The visual treatment of the block. The default 'card' wraps the content
in a Card. Use 'bare' for content that provides its own surface — such as
a DataTable — to avoid a box-in-box appearance. In the bare layout the
title and description are rendered as a heading above the content.
Status: Developer Preview
A component for displaying a block of content on a page that takes up the full width of the page. This should be used inside the PageLayout component.
function FullWidthPageBlock(props: Readonly<Pick<PageBlockProps, 'children' | 'className' | 'blockId'>>): voidParameters
Readonly<Pick<PageBlockProps, 'children' | 'className' | 'blockId'>>A component for displaying an auto-generated form for custom fields on a page. This is a special form of PageBlock that automatically generates a form corresponding to the custom fields for the given entity type.
Example
<CustomFieldsPageBlock column="main" entityType="Product" control={form.control} />function CustomFieldsPageBlock(props: Readonly<{ column: 'main' | 'side'; entityType: string; control: Control<any, any>;}>): voidParameters
Readonly<{ column: 'main' | 'side'; entityType: string; control: Control<any, any>; }>