Automatic Slug Generation Issue in Payload CMS 3.0 (Website Template)

[danielkoller]

Link to reproduction

No response

Payload Version

3.0.0-beta.67

Node Version

22.5.1

Next.js Version

15.0.0-canary.58

Describe the Bug

I've encountered a minor issue with Payload CMS 3.0 (Website Template): Slugs are not automatically generated when publishing new Posts or Pages, even when a title is set. Manual slug creation works, but the automatic generation feature is not functioning as expected.

I'm using localization, and initially thought this might be the cause. However, the issue persists even after adding titles in multiple languages. I haven't made any modifications to the pages/posts collection beyond adding localized content.

Is this a known issue with localization in Payload CMS 3.0, or could there be a configuration problem? Any insights would be appreciated.

Reproduction Steps

Steps to reproduce:

1. Create a new Post or Page
2. Set a title (in one or multiple locales)
3. Publish the content
4. Observe: No slug is automatically generated

Expected behavior: Slugs should auto-generate based on the title upon publishing.

Adapters and Plugins

db-postgres

[r1tsuu]

Hey @danielkoller

There's no automatic slug generation in Payload out of the box. But you can easily add one with hooks! You can take an example of a slug field from the website template https://github.com/payloadcms/payload/blob/main/templates/website/src/payload/fields/slug.ts uage: https://github.com/payloadcms/payload/blob/main/templates/website/src/payload/collections/Pages/index.ts

It's a bit more tough to as well add a real time slug update on the UI (without saving), but shortly: you can implement the same logic in a custom TextField component.

[danielkoller]

Hey @r1tsuu - thanks a lot for your reply. :)

I kickstarted the new website with the website template and use the exact same setup from your links with said hooks.

I am totally fine without not having the real time slug updates. I am just confused why my generated slug is always "null". :)

[r1tsuu]

Hey @r1tsuu - thanks a lot for your reply. :)

I kickstarted the new website with the website template and use the exact same setup from your links with said hooks.

I am totally fine without not having the real time slug updates. I am just confused why my generated slug is always "null". :)

You're right, I've just tested it and it doesn't work. I did debugging and that's because for some reason operation argument is always update.

const formatSlug =
  (fallback: string): FieldHook =>
  ({ data, operation, originalDoc, value }) => {
    if (typeof value === 'string') {
      return format(value)
    }

    // actually always 'update', never reaches.
    if (operation === 'create') {
      const fallbackData = data?.[fallback] || originalDoc?.[fallback]

      if (fallbackData && typeof fallbackData === 'string') {
        return format(fallbackData)
      }
    }

    return value
  }

[r1tsuu]

You can remove the check temporary, but it needs to be addressed

[danielkoller]

@r1tsuu Will do. Thanks for the quick help!

[r1tsuu]

The problem here is with autosave. As soon as you click "create" button, it will be created as draft So at the point when you've filled the content, the value of operation can't be "create" no more

[paulpopus]

Fixing in a release soon, checking if the update is create or if data doesn't have slug.

I think I wanna add a slick custom component for this down the line

[github-actions[bot]]

This issue has been automatically locked. Please open a new issue if this issue persists with any additional detail.