4c8cafd6a6
If you have multiple blocks that are used in multiple places, this can quickly blow up the size of your Payload Config. This will incur a performance hit, as more data is
1. sent to the client (=> bloated `ClientConfig` and large initial html) and
2. processed on the server (permissions are calculated every single time you navigate to a page - this iterates through all blocks you have defined, even if they're duplicative)
This can be optimized by defining your block **once** in your Payload Config, and just referencing the block slug whenever it's used, instead of passing the entire block config. To do this, the block can be defined in the `blocks` array of the Payload Config. The slug can then be passed to the `blockReferences` array in the Blocks Field - the `blocks` array has to be empty for compatibility reasons.
```ts
import { buildConfig } from 'payload'
import { lexicalEditor, BlocksFeature } from '@payloadcms/richtext-lexical'
// Payload Config
const config = buildConfig({
// Define the block once
blocks: [
{
slug: 'TextBlock',
fields: [
{
name: 'text',
type: 'text',
},
],
},
],
collections: [
{
slug: 'collection1',
fields: [
{
name: 'content',
type: 'blocks',
// Reference the block by slug
blockReferences: ['TextBlock'],
blocks: [], // Required to be empty, for compatibility reasons
},
],
},
{
slug: 'collection2',
fields: [
{
name: 'editor',
type: 'richText',
editor: lexicalEditor({
BlocksFeature({
// Same reference can be reused anywhere, even in the lexical editor, without incurred performance hit
blocks: ['TextBlock'],
})
})
},
],
},
],
})
```
## v4.0 Plans
In 4.0, we will remove the `blockReferences` property, and allow string block references to be passed directly to the blocks `property`. Essentially, we'd remove the `blocks` property and rename `blockReferences` to `blocks`.
The reason we opted to a new property in this PR is to avoid breaking changes. Allowing strings to be passed to the `blocks` property will prevent plugins that iterate through fields / blocks from compiling.
## PR Changes
- Testing: This PR introduces a plugin that automatically converts blocks to block references. This is done in the fields__blocks test suite, to run our existing test suite using block references.
- Block References support: Most changes are similar. Everywhere we iterate through blocks, we have to now do the following:
1. Check if `field.blockReferences` is provided. If so, only iterate through that.
2. Check if the block is an object (= actual block), or string
3. If it's a string, pull the actual block from the Payload Config or from `payload.blocks`.
The exception is config sanitization and block type generations. This PR optimizes them so that each block is only handled once, instead of every time the block is referenced.
## Benchmarks
60 Block fields, each block field having the same 600 Blocks.
### Before:
**Initial HTML:** 195 kB
**Generated types:** takes 11 minutes, 461,209 lines
https://github.com/user-attachments/assets/11d49a4e-5414-4579-8050-e6346e552f56
### After:
**Initial HTML:** 73.6 kB
**Generated types:** takes 2 seconds, 35,810 lines
https://github.com/user-attachments/assets/3eab1a99-6c29-489d-add5-698df67780a3
### After Permissions Optimization (follow-up PR)
Initial HTML: 73.6 kB
https://github.com/user-attachments/assets/a909202e-45a8-4bf6-9a38-8c85813f1312
## Future Plans
1. This PR does not yet deduplicate block references during permissions calculation. We'll optimize that in a separate PR, as this one is already large enough
2. The same optimization can be done to deduplicate fields. One common use-case would be link field groups that may be referenced in multiple entities, outside of blocks. We might explore adding a new `fieldReferences` property, that allows you to reference those same `config.blocks`.
416 lines
9.0 KiB
TypeScript
416 lines
9.0 KiB
TypeScript
import type { BlocksField, CollectionConfig } from 'payload'
|
|
|
|
import { slateEditor } from '@payloadcms/richtext-slate'
|
|
|
|
import { blockFieldsSlug, textFieldsSlug } from '../../slugs.js'
|
|
import { getBlocksFieldSeedData } from './shared.js'
|
|
|
|
export const getBlocksField = (prefix?: string): BlocksField => ({
|
|
name: 'blocks',
|
|
type: 'blocks',
|
|
blocks: [
|
|
{
|
|
slug: prefix ? `${prefix}Content` : 'content',
|
|
interfaceName: prefix ? `${prefix}ContentBlock` : 'ContentBlock',
|
|
admin: {
|
|
components: {
|
|
Label: './collections/Blocks/components/CustomBlockLabel.tsx',
|
|
},
|
|
},
|
|
fields: [
|
|
{
|
|
name: 'text',
|
|
type: 'text',
|
|
required: true,
|
|
},
|
|
{
|
|
name: 'richText',
|
|
type: 'richText',
|
|
editor: slateEditor({}),
|
|
},
|
|
],
|
|
},
|
|
{
|
|
slug: prefix ? `${prefix}Number` : 'number',
|
|
interfaceName: prefix ? `${prefix}NumberBlock` : 'NumberBlock',
|
|
fields: [
|
|
{
|
|
name: 'number',
|
|
type: 'number',
|
|
required: true,
|
|
},
|
|
],
|
|
},
|
|
{
|
|
slug: prefix ? `${prefix}SubBlocks` : 'subBlocks',
|
|
interfaceName: prefix ? `${prefix}SubBlocksBlock` : 'SubBlocksBlock',
|
|
fields: [
|
|
{
|
|
type: 'collapsible',
|
|
fields: [
|
|
{
|
|
name: 'subBlocks',
|
|
type: 'blocks',
|
|
blocks: [
|
|
{
|
|
slug: 'textRequired',
|
|
fields: [
|
|
{
|
|
name: 'text',
|
|
type: 'text',
|
|
required: true,
|
|
},
|
|
],
|
|
},
|
|
{
|
|
slug: 'number',
|
|
interfaceName: 'NumberBlock',
|
|
fields: [
|
|
{
|
|
name: 'number',
|
|
type: 'number',
|
|
required: true,
|
|
},
|
|
],
|
|
},
|
|
],
|
|
},
|
|
],
|
|
label: 'Collapsible within Block',
|
|
},
|
|
],
|
|
},
|
|
{
|
|
slug: prefix ? `${prefix}Tabs` : 'tabs',
|
|
interfaceName: prefix ? `${prefix}TabsBlock` : 'TabsBlock',
|
|
fields: [
|
|
{
|
|
type: 'tabs',
|
|
tabs: [
|
|
{
|
|
fields: [
|
|
{
|
|
type: 'collapsible',
|
|
fields: [
|
|
{
|
|
// collapsible
|
|
name: 'textInCollapsible',
|
|
type: 'text',
|
|
},
|
|
],
|
|
label: 'Collapsible within Block',
|
|
},
|
|
{
|
|
type: 'row',
|
|
fields: [
|
|
{
|
|
// collapsible
|
|
name: 'textInRow',
|
|
type: 'text',
|
|
},
|
|
],
|
|
},
|
|
],
|
|
label: 'Tab with Collapsible',
|
|
},
|
|
],
|
|
},
|
|
],
|
|
},
|
|
],
|
|
defaultValue: getBlocksFieldSeedData(prefix),
|
|
required: true,
|
|
})
|
|
|
|
const BlockFields: CollectionConfig = {
|
|
slug: blockFieldsSlug,
|
|
fields: [
|
|
getBlocksField(),
|
|
{
|
|
...getBlocksField(),
|
|
name: 'duplicate',
|
|
},
|
|
{
|
|
...getBlocksField('localized'),
|
|
name: 'collapsedByDefaultBlocks',
|
|
admin: {
|
|
initCollapsed: true,
|
|
},
|
|
localized: true,
|
|
},
|
|
{
|
|
...getBlocksField('localized'),
|
|
name: 'disableSort',
|
|
admin: {
|
|
isSortable: false,
|
|
},
|
|
localized: true,
|
|
},
|
|
{
|
|
...getBlocksField('localized'),
|
|
name: 'localizedBlocks',
|
|
localized: true,
|
|
},
|
|
{
|
|
name: 'i18nBlocks',
|
|
type: 'blocks',
|
|
blocks: [
|
|
{
|
|
slug: 'textInI18nBlock',
|
|
fields: [
|
|
{
|
|
name: 'text',
|
|
type: 'text',
|
|
},
|
|
],
|
|
graphQL: {
|
|
singularName: 'I18nText',
|
|
},
|
|
labels: {
|
|
plural: {
|
|
en: 'Texts en',
|
|
es: 'Texts es',
|
|
},
|
|
singular: {
|
|
en: 'Text en',
|
|
es: 'Text es',
|
|
},
|
|
},
|
|
},
|
|
],
|
|
label: {
|
|
en: 'Block en',
|
|
es: 'Block es',
|
|
},
|
|
labels: {
|
|
plural: {
|
|
en: 'Blocks en',
|
|
es: 'Blocks es',
|
|
},
|
|
singular: {
|
|
en: 'Block en',
|
|
es: 'Block es',
|
|
},
|
|
},
|
|
},
|
|
{
|
|
name: 'blocksWithLocalizedArray',
|
|
type: 'blocks',
|
|
blocks: [
|
|
{
|
|
slug: 'localizedArray',
|
|
fields: [
|
|
{
|
|
name: 'array',
|
|
type: 'array',
|
|
localized: true,
|
|
fields: [
|
|
{
|
|
name: 'text',
|
|
type: 'text',
|
|
},
|
|
],
|
|
},
|
|
],
|
|
},
|
|
],
|
|
},
|
|
{
|
|
name: 'blocksWithSimilarConfigs',
|
|
type: 'blocks',
|
|
blocks: [
|
|
{
|
|
slug: 'block-a',
|
|
fields: [
|
|
{
|
|
name: 'items',
|
|
type: 'array',
|
|
fields: [
|
|
{
|
|
name: 'title',
|
|
type: 'text',
|
|
required: true,
|
|
},
|
|
],
|
|
},
|
|
],
|
|
},
|
|
{
|
|
slug: 'block-b',
|
|
fields: [
|
|
{
|
|
name: 'items',
|
|
type: 'array',
|
|
fields: [
|
|
{
|
|
name: 'title2',
|
|
type: 'text',
|
|
required: true,
|
|
},
|
|
],
|
|
},
|
|
],
|
|
},
|
|
{
|
|
slug: 'group-block',
|
|
fields: [
|
|
{
|
|
name: 'group',
|
|
type: 'group',
|
|
fields: [
|
|
{
|
|
name: 'text',
|
|
type: 'text',
|
|
},
|
|
],
|
|
},
|
|
],
|
|
},
|
|
],
|
|
},
|
|
{
|
|
name: 'blocksWithSimilarGroup',
|
|
type: 'blocks',
|
|
admin: {
|
|
description:
|
|
'The purpose of this field is to test validateExistingBlockIsIdentical works with similar blocks with group fields',
|
|
},
|
|
blocks: [
|
|
{
|
|
slug: 'group-block',
|
|
fields: [
|
|
{
|
|
name: 'group',
|
|
type: 'group',
|
|
fields: [
|
|
{
|
|
name: 'text',
|
|
type: 'text',
|
|
},
|
|
],
|
|
},
|
|
],
|
|
},
|
|
{
|
|
slug: 'block-b',
|
|
fields: [
|
|
{
|
|
name: 'items',
|
|
type: 'array',
|
|
fields: [
|
|
{
|
|
name: 'title2',
|
|
type: 'text',
|
|
required: true,
|
|
},
|
|
],
|
|
},
|
|
],
|
|
},
|
|
],
|
|
},
|
|
{
|
|
name: 'blocksWithMinRows',
|
|
type: 'blocks',
|
|
blocks: [
|
|
{
|
|
slug: 'blockWithMinRows',
|
|
fields: [
|
|
{
|
|
name: 'blockTitle',
|
|
type: 'text',
|
|
},
|
|
],
|
|
},
|
|
],
|
|
minRows: 2,
|
|
},
|
|
{
|
|
name: 'customBlocks',
|
|
type: 'blocks',
|
|
blocks: [
|
|
{
|
|
slug: 'block-1',
|
|
fields: [
|
|
{
|
|
name: 'block1Title',
|
|
type: 'text',
|
|
},
|
|
],
|
|
},
|
|
{
|
|
slug: 'block-2',
|
|
fields: [
|
|
{
|
|
name: 'block2Title',
|
|
type: 'text',
|
|
},
|
|
],
|
|
},
|
|
],
|
|
},
|
|
{
|
|
name: 'ui',
|
|
type: 'ui',
|
|
admin: {
|
|
components: {
|
|
Field: '/collections/Blocks/components/AddCustomBlocks/index.js#AddCustomBlocks',
|
|
},
|
|
},
|
|
},
|
|
{
|
|
name: 'relationshipBlocks',
|
|
type: 'blocks',
|
|
blocks: [
|
|
{
|
|
slug: 'relationships',
|
|
fields: [
|
|
{
|
|
name: 'relationship',
|
|
type: 'relationship',
|
|
relationTo: textFieldsSlug,
|
|
},
|
|
],
|
|
},
|
|
],
|
|
},
|
|
{
|
|
name: 'blockWithLabels',
|
|
type: 'blocks',
|
|
labels: {
|
|
singular: ({ t }) => t('authentication:account'),
|
|
plural: ({ t }) => t('authentication:generate'),
|
|
},
|
|
blocks: [
|
|
{
|
|
labels: {
|
|
singular: ({ t }) => t('authentication:account'),
|
|
plural: ({ t }) => t('authentication:generate'),
|
|
},
|
|
slug: 'text',
|
|
fields: [
|
|
{
|
|
name: 'text',
|
|
type: 'text',
|
|
},
|
|
],
|
|
},
|
|
],
|
|
},
|
|
{
|
|
name: 'deduplicatedBlocks',
|
|
type: 'blocks',
|
|
blockReferences: ['ConfigBlockTest'],
|
|
blocks: [],
|
|
},
|
|
{
|
|
name: 'deduplicatedBlocks2',
|
|
type: 'blocks',
|
|
blockReferences: ['ConfigBlockTest'],
|
|
blocks: [],
|
|
},
|
|
],
|
|
}
|
|
|
|
export default BlockFields
|