This PR introduces support for conditionally setting allowable block types via a new `field.filterOptions` property on the blocks field. Closes the following feature requests: https://github.com/payloadcms/payload/discussions/5348, https://github.com/payloadcms/payload/discussions/4668 (partly) ## Example ```ts fields: [ { name: 'enabledBlocks', type: 'text', admin: { description: "Change the value of this field to change the enabled blocks of the blocksWithDynamicFilterOptions field. If it's empty, all blocks are enabled.", }, }, { name: 'blocksWithFilterOptions', type: 'blocks', filterOptions: ['block1', 'block2'], blocks: [ { slug: 'block1', fields: [ { type: 'text', name: 'block1Text', }, ], }, { slug: 'block2', fields: [ { type: 'text', name: 'block2Text', }, ], }, { slug: 'block3', fields: [ { type: 'text', name: 'block3Text', }, ], }, ], }, { name: 'blocksWithDynamicFilterOptions', type: 'blocks', filterOptions: ({ siblingData: _siblingData, data }) => { const siblingData = _siblingData as { enabledBlocks: string } if (siblingData?.enabledBlocks !== data?.enabledBlocks) { // Just an extra assurance that the field is working as intended throw new Error('enabledBlocks and siblingData.enabledBlocks must be identical') } return siblingData?.enabledBlocks?.length ? [siblingData.enabledBlocks] : true }, blocks: [ { slug: 'block1', fields: [ { type: 'text', name: 'block1Text', }, ], }, { slug: 'block2', fields: [ { type: 'text', name: 'block2Text', }, ], }, { slug: 'block3', fields: [ { type: 'text', name: 'block3Text', }, ], }, ], }, ] ``` https://github.com/user-attachments/assets/e38a804f-22fa-4fd2-a6af-ba9b0a5a04d2 # Rationale ## Why not `block.condition`? - Individual blocks are often reused in multiple contexts, where the logic for when they should be available may differ. It’s more appropriate for the blocks field (typically tied to a single collection) to determine availability. - Hiding existing blocks when they no longer satisfy a condition would cause issues - for example, reordering blocks would break or cause block data to disappear. Instead, this implementation ensures consistency by throwing a validation error if a block is no longer allowed. This aligns with the behavior of `filterOptions` in relationship fields, rather than `condition`. ## Why not call it `blocksFilterOptions`? Although the type differs from relationship fields, this property is named `filterOptions` (and not `blocksFilterOptions`) for consistency across field types. For example, the Select field also uses `filterOptions` despite its type being unique. --- - To see the specific tasks where the Asana app for GitHub is being used, see below: - https://app.asana.com/0/0/1211334752795631
167 lines
4.4 KiB
TypeScript
167 lines
4.4 KiB
TypeScript
import type { CollectionConfig, Config } from 'payload'
|
|
|
|
import { fileURLToPath } from 'node:url'
|
|
import path from 'path'
|
|
|
|
const filename = fileURLToPath(import.meta.url)
|
|
const dirname = path.dirname(filename)
|
|
|
|
import ArrayFields from './collections/Array/index.js'
|
|
import { BlockFields } from './collections/Blocks/index.js'
|
|
import CheckboxFields from './collections/Checkbox/index.js'
|
|
import CodeFields from './collections/Code/index.js'
|
|
import CollapsibleFields from './collections/Collapsible/index.js'
|
|
import ConditionalLogic from './collections/ConditionalLogic/index.js'
|
|
import { CustomRowID } from './collections/CustomID/CustomRowID.js'
|
|
import { CustomTabID } from './collections/CustomID/CustomTabID.js'
|
|
import { CustomID } from './collections/CustomID/index.js'
|
|
import DateFields from './collections/Date/index.js'
|
|
import EmailFields from './collections/Email/index.js'
|
|
import GroupFields from './collections/Group/index.js'
|
|
import IndexedFields from './collections/Indexed/index.js'
|
|
import JSONFields from './collections/JSON/index.js'
|
|
import NumberFields from './collections/Number/index.js'
|
|
import PointFields from './collections/Point/index.js'
|
|
import RadioFields from './collections/Radio/index.js'
|
|
import RelationshipFields from './collections/Relationship/index.js'
|
|
import RowFields from './collections/Row/index.js'
|
|
import SelectFields from './collections/Select/index.js'
|
|
import SelectVersionsFields from './collections/SelectVersions/index.js'
|
|
import TabsFields from './collections/Tabs/index.js'
|
|
import { TabsFields2 } from './collections/Tabs2/index.js'
|
|
import TextFields from './collections/Text/index.js'
|
|
import UIFields from './collections/UI/index.js'
|
|
import Uploads from './collections/Upload/index.js'
|
|
import Uploads2 from './collections/Upload2/index.js'
|
|
import UploadsMulti from './collections/UploadMulti/index.js'
|
|
import UploadsMultiPoly from './collections/UploadMultiPoly/index.js'
|
|
import UploadsPoly from './collections/UploadPoly/index.js'
|
|
import UploadRestricted from './collections/UploadRestricted/index.js'
|
|
import Uploads3 from './collections/Uploads3/index.js'
|
|
import { seed } from './seed.js'
|
|
|
|
export const collectionSlugs: CollectionConfig[] = [
|
|
{
|
|
slug: 'users',
|
|
admin: {
|
|
useAsTitle: 'email',
|
|
},
|
|
auth: true,
|
|
fields: [
|
|
{
|
|
name: 'canViewConditionalField',
|
|
type: 'checkbox',
|
|
defaultValue: true,
|
|
},
|
|
],
|
|
},
|
|
SelectVersionsFields,
|
|
ArrayFields,
|
|
BlockFields,
|
|
CheckboxFields,
|
|
CodeFields,
|
|
CollapsibleFields,
|
|
ConditionalLogic,
|
|
CustomID,
|
|
CustomTabID,
|
|
CustomRowID,
|
|
DateFields,
|
|
EmailFields,
|
|
RadioFields,
|
|
GroupFields,
|
|
RowFields,
|
|
IndexedFields,
|
|
JSONFields,
|
|
NumberFields,
|
|
PointFields,
|
|
RelationshipFields,
|
|
SelectFields,
|
|
TabsFields2,
|
|
TabsFields,
|
|
TextFields,
|
|
Uploads,
|
|
Uploads2,
|
|
Uploads3,
|
|
UploadsMulti,
|
|
UploadsPoly,
|
|
UploadsMultiPoly,
|
|
UploadRestricted,
|
|
UIFields,
|
|
]
|
|
|
|
export const baseConfig: Partial<Config> = {
|
|
collections: collectionSlugs,
|
|
blocks: [
|
|
{
|
|
slug: 'ConfigBlockTest',
|
|
fields: [
|
|
{
|
|
name: 'deduplicatedText',
|
|
type: 'text',
|
|
},
|
|
],
|
|
},
|
|
{
|
|
slug: 'localizedTextReference',
|
|
fields: [
|
|
{
|
|
name: 'text',
|
|
type: 'text',
|
|
localized: true,
|
|
},
|
|
],
|
|
},
|
|
{
|
|
slug: 'localizedTextReference2',
|
|
fields: [
|
|
{
|
|
name: 'text',
|
|
type: 'text',
|
|
localized: true,
|
|
},
|
|
],
|
|
},
|
|
],
|
|
custom: {
|
|
client: {
|
|
'new-value': 'client available',
|
|
},
|
|
server: {
|
|
'new-server-value': 'only available on server',
|
|
},
|
|
},
|
|
admin: {
|
|
importMap: {
|
|
baseDir: path.resolve(dirname),
|
|
},
|
|
components: {
|
|
afterNavLinks: ['/components/AfterNavLinks.js#AfterNavLinks'],
|
|
},
|
|
custom: {
|
|
client: {
|
|
'new-value': 'client available',
|
|
},
|
|
},
|
|
timezones: {
|
|
supportedTimezones: ({ defaultTimezones }) => [
|
|
...defaultTimezones,
|
|
{ label: '(GMT-6) Monterrey, Nuevo Leon', value: 'America/Monterrey' },
|
|
],
|
|
defaultTimezone: 'America/Monterrey',
|
|
},
|
|
},
|
|
localization: {
|
|
defaultLocale: 'en',
|
|
fallback: true,
|
|
locales: ['en', 'es'],
|
|
},
|
|
onInit: async (payload) => {
|
|
if (process.env.SEED_IN_CONFIG_ONINIT !== 'false') {
|
|
await seed(payload)
|
|
}
|
|
},
|
|
typescript: {
|
|
outputFile: path.resolve(dirname, 'payload-types.ts'),
|
|
},
|
|
}
|