Hi, I'm trying to make a very simple setup with rows and columns in my Payload CMS project.
However, I'm facing an error where, if I add more columns than 1 column, I'll get an error.
Here is the code that I'm using for created row and columns.
import type { Block, Field } from 'payload/types'
import { invertBackground } from '../../fields/invertBackground'
import richText from '../../fields/richText'
import { CallToAction } from '../CallToAction'
import { MediaBlock } from '../MediaBlock'
const columnFields: Field[] = [
{
name: 'size',
type: 'select',
defaultValue: 'oneThird',
options: [
{
value: 'oneThird',
label: 'One Third',
},
{
value: 'half',
label: 'Half',
},
{
value: 'twoThirds',
label: 'Two Thirds',
},
{
value: 'full',
label: 'Full',
},
],
},
{
name: 'row',
type: 'blocks',
maxRows: 1,
blocks: [
CallToAction,
MediaBlock,
{
slug: 'richText',
fields: [
richText({}, { elements: ['textAlign'] }),
{
name: 'verticalAlign',
type: 'select',
defaultValue: 'top',
options: [
{
value: 'top',
label: 'Top',
},
{
value: 'center',
label: 'Center',
},
{
value: 'bottom',
label: 'Bottom',
},
],
},
],
},
],
},
]
export const Content: Block = {
slug: 'content',
fields: [
invertBackground,
{
name: 'columns',
type: 'array',
fields: columnFields,
},
],
}
I've attached my error as file.
Is there some kind of limitation that I'm missing in regards to the use of the field type "blocks"?
Furthermore, if my approach to field and columns is bad - plz enlighten me🙏
This may also be relevant, this is the "content" component that pages collection is using. In this particular case im using the block "Content" to create field and columns.
{
label: 'Content',
fields: [
{
name: 'layout',
type: 'blocks',
required: true,
blocks: [CallToAction, Content, MediaBlock, Archive, ContactForm],
},
],
},
I don't know if this gives any more content to the issue. But this is a more "visual" representation of the issue.
Step 1 (screenshot 1). I've added a content field to the pages collection. I've chosen the "Content" type field, which is my case allows me to do the columns and rows. I've also added a single column with a row. I can save this as draft without any issues.
Step 2 (screenshot 2). I've replicated step one (added another column with a row). Now when i press save draft, I get the error as stated above.
I've just tested another style of layout for pagebuilding. I happen to get the same type of error, so i guess the issue is not related to the exact structure that was stated in in original question.
Looks like the fix was simply updating all Payload related dependencies. Found [this](
https://github.com/payloadcms/payload/issues/3991) issue - which made me tripple check all deps.
Star
Discord
online
Get dedicated engineering support directly from the Payload team.