feat(ui): live preview conditions #14012
Merged
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
📦 esbuild Bundle Analysis for payloadThis analysis was generated by esbuild-bundle-analyzer. 🤖
Largest pathsThese visualization shows top 20 largest paths in the bundle.Meta file: packages/next/meta_index.json, Out file: esbuild/index.js
Meta file: packages/payload/meta_index.json, Out file: esbuild/index.js
Meta file: packages/payload/meta_shared.json, Out file: esbuild/exports/shared.js
Meta file: packages/richtext-lexical/meta_client.json, Out file: esbuild/exports/client_optimized/index.js
Meta file: packages/ui/meta_client.json, Out file: esbuild/exports/client_optimized/index.js
Meta file: packages/ui/meta_shared.json, Out file: esbuild/exports/shared_optimized/index.js
DetailsNext to the size is how much the size has increased or decreased compared with the base branch of this PR.
|
jacobsfletch
changed the title
jacobsfletch
changed the title
jacobsfletch
changed the title
paulpopus
approved these changes
Oct 2, 2025
This was referenced Oct 2, 2025
Merged
jacobsfletch
added a commit
that referenced
this pull request
Oct 3, 2025
Follow-up to #14012. Once live preview conditions have passed, it is jarring for the live preview window to suddenly appear. It should be that, despite preferences, if the live preview window did not _load_ active, then it should not become active until the user explicitly toggles it on. This is especially poor UX while creating a new doc. If the conditional URL is based on a field that has't been filled yet, upon filling that field (with autosave), live preview suddenly appears and the entire page shifts mid-edit. Before: https://github.com/user-attachments/assets/0da75306-eed3-4a77-bc58-d8a8dd0254bf After: https://github.com/user-attachments/assets/c7918601-959d-4ac5-b168-066afc3d879d --- - To see the specific tasks where the Asana app for GitHub is being used, see below: - https://app.asana.com/0/0/1211534009142634
denolfe
pushed a commit
that referenced
this pull request
Oct 7, 2025
Discussion #8859. Requires #14012. Exports a new `slugField`. This is a wrapper around the text field that you can drop into any field schema. A slug is a unique, indexed, URL-friendly string that identifies a particular document, often used to construct the URL of a webpage. Slugs are a fundamental concept for seemingly every project. Traditionally, you'd build this field from scratch, but there are many edge cases and nice-to-haves to makes this difficult to maintain by hand. For example, it needs to automatically generate based on the value of another field, provide UI to lock and re-generate the slug on-demand, etc. Fixes #13938. When autosave is enabled, the slug is only ever generated once after the initial create, leading to single character, or incomplete slugs. For example, it is expected that "My Title" → "my-title, however ends up as "m". This PR overhauls the field to feel a lot more natural. Now, we only generate the slug through: 1. The `create` operation, unless the user has modified the slug manually 2. The `update` operation, if: a. Autosave is _not_ enabled and there is no slug b. Autosave _is_ enabled, the doc is unpublished, and the user has not modified the slug manually The slug should stabilize after all above criteria have been met, because the URL is typically derived from the slug. This is to protect modifying potentially live URLs, breaking links, etc. without explicit intent. This fix, along with all the other features, is now standardized behind the new `slugField`: ```ts import type { CollectionConfig } from 'payload' import { slugField } from 'payload' export const MyCollection: CollectionConfig = { // ... fields: [ // ... slugField() ] } ``` In the future we could also make this field smart enough to auto increment itself when its generated slug is not unique. --- - To see the specific tasks where the Asana app for GitHub is being used, see below: - https://app.asana.com/0/0/1211513433305005
|
🚀 This is included in version v3.59.0 |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Supports live preview conditions. This is essentially access control for live preview, where you may want to restrict who can use it based on certain criteria, such as the current user or document data.
To do this, simply return null or undefined from your live preview url functions:
This is also useful for pages which derive their URL from document data, e.g. a slug field, do not attempt to render the live preview window until the URL is fully formatted.
For example, if you have a page in your front-end with the URL structure of
/posts/[slug], the slug field is required before the page can properly load. However, if the slug is not a required field, or when drafts and/or autosave is enabled, the slug field might not yet have data, leading to/posts/undefinedor similar.