Example uses:
Quote
, CallToAction
, Slider
, Content
, Gallery
, or others.Text
, Select
, or Checkbox
.Break
, a Presentation
, or a BreakoutSession
.
Admin panel screenshot of a Blocks field type with Call to Action and Number block examples
Option | Description |
---|---|
name * | To be used as the property name when stored and retrieved from the database. |
label | Used as a heading in the Admin panel and to name the generated GraphQL type. |
blocks * | Array of block configs to be made available to this field. |
validate | Provide a custom validation function that will be executed on both the Admin panel and the backend. More |
saveToJWT | If this field is top-level and nested in a config supporting Authentication, include its data in the user JWT. |
hooks | Provide field-level hooks to control logic for this field. More |
access | Provide field-level access control to denote what users can see and do with this field's data. More |
hidden | Restrict this field's visibility from all APIs entirely. Will still be saved to the database, but will not appear in any API response or the Admin panel. |
defaultValue | Provide an array of block data to be used for this field's default value. |
localized | Enable localization for this field. Requires localization to be enabled in the Base config. If enabled, a separate, localized set of all data within this field will be kept, so there is no need to specify each nested field as localized . |
unique | Enforce that each entry in the Collection has a unique value for this field. |
labels | Customize the block row labels appearing in the Admin dashboard. |
admin | Admin-specific configuration. See the default field admin config for more details. |
* An asterisk denotes that a property is required.
Blocks are defined as separate configs of their own.
Option | Description |
---|---|
slug * | Identifier for this block type. Will be saved on each block as the blockType property. |
fields * | Array of fields to be stored in this block. |
labels | Customize the block labels that appear in the Admin dashboard. Also used to name corresponding GraphQL schema types. Auto-generated from slug if not defined. |
imageURL | Provide a custom image thumbnail to help editors identify this block in the Admin UI. |
imageAltText | Customize this block's image thumbnail alt text. |
In addition to the field data that you define on each block, Payload will store two additional properties on each block:
blockType
The blockType
is saved as the slug of the block that has been selected.
blockName
The Admin panel provides each block with a blockName
field which optionally allows editors to label their blocks for better editability and readability.
collections/ExampleCollection.js
const QuoteBlock = {slug: 'Quote', // requiredimageURL: 'https://google.com/path/to/image.jpg',imageAltText: 'A nice thumbnail image to show what this block looks like',fields: [ // required{name: 'quoteHeader',type: 'text',required: true,},{name: 'quoteText',type: 'text',},]};const ExampleCollection = {slug: 'example-collection',fields: [{name: 'layout', // requiredtype: 'blocks', // requiredminRows: 1,maxRows: 20,blocks: [ // requiredQuoteBlock]}]}