feat(plugin-seo)!: support overriding default fields via a function instead and fixes bugs regarding localized labels (#8958)

## The SEO plugin now takes in a function to override or add in new
fields
- `fieldOverrides` has been removed
- `fields` is now a function that takes in `defaultFields` and expects
an array of fields in return

This makes it a lot easier for end users to override and extend existing
fields and add new ones. This change also brings this plugin inline with
the pattern that we use in our other plugins.

```ts
// before
seoPlugin({
  fieldOverrides: {
    title: {
      required: true,
    },
  },
  fields: [
    {
      name: 'customField',
      type: 'text',
    }
  ]
})

// after
seoPlugin({
  fields: ({ defaultFields }) => {
    const modifiedFields = defaultFields.map((field) => {
     // Override existing fields
      if ('name' in field && field.name === 'title') {
        return {
          ...field,
          required: true,
        }
      }
      return field
    })

    return [
      ...modifiedFields,

     // Add a new field
      {
        name: 'ogTitle',
        type: 'text',
        label: 'og:title',
      },
    ]
  },
})
```



## Also fixes
- Localization labels not showing up on default fields
- The inability to add before and after inputs to default fields
https://github.com/payloadcms/payload/issues/8893
This commit is contained in:
Paul
2024-10-31 00:03:39 -06:00
committed by GitHub
parent 2c6635fe20
commit b417c1f61a
10 changed files with 116 additions and 78 deletions

View File

@@ -3,6 +3,7 @@ import path from 'path'
const filename = fileURLToPath(import.meta.url)
const dirname = path.dirname(filename)
import type { GenerateDescription, GenerateTitle, GenerateURL } from '@payloadcms/plugin-seo/types'
import type { Field } from 'payload'
import type { Page } from 'plugin-seo/payload-types.js'
import { seoPlugin } from '@payloadcms/plugin-seo'
@@ -68,18 +69,34 @@ export default buildConfigWithDefaults({
plugins: [
seoPlugin({
collections: ['pages'],
fieldOverrides: {
title: {
required: true,
},
fields: ({ defaultFields }) => {
const modifiedFields = defaultFields.map((field) => {
if ('name' in field && field.name === 'title') {
return {
...field,
required: true,
admin: {
...field.admin,
components: {
...field.admin.components,
afterInput: '/components/AfterInput.js#AfterInput',
beforeInput: '/components/BeforeInput.js#BeforeInput',
},
},
} as Field
}
return field
})
return [
...modifiedFields,
{
name: 'ogTitle',
type: 'text',
label: 'og:title',
},
]
},
fields: [
{
name: 'ogTitle',
type: 'text',
label: 'og:title',
},
],
generateDescription,
generateTitle,
generateURL,