payloadcms / payloadcms/payload
reordering blocks using a beforeChange hook mixes up block types in the admin UI and can lead to corrupted documents
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 44.8k
- Forks
- 4.2k
- Avg merge
- 2d 21h
- Merged PRs (30d)
- 53
Description
Describe the Bug
I have a use case where I need to reorder blocks based on dates using a beforeChange hook.
However when reordering the blocks the UI seem to mix up blocks types and contents.
In the reproduction repo I have setup a very simple Pages example that sorts blocks in descending order and can reproduce the main issue.
In a more complex example I have managed to corrupt blocks data after the third save with an incorrect state in the admin UI.
Link to the code that reproduces this issue
https://github.com/ioExpander/payload-issue-blocksReorder.git
Reproduction Steps
pnpm install && pnpm dev
create .env file using .env.example
create admin account
create and save an empty page, then follow instructions to add blocks
Add block one, title "one" order "1", save the Page document
Add block two, title "two" order "2", save the page document
The blocks are saved but the admin UI is confused between blocks types (ie : block 01 is of type one but has block two contents)
Adding block `three, title "three" order "3" etc will continue producing the same bug.
Which area(s) are affected? (Select all that apply)
area: ui
Environment Info
Binaries:
Node: 20.19.0
npm: 10.8.2
Yarn: 1.22.22
pnpm: 10.6.4
Relevant Packages:
payload: 3.33.0
next: 15.3.0
@payloadcms/email-nodemailer: 3.33.0
@payloadcms/graphql: 3.33.0
@payloadcms/next/utilities: 3.33.0
@payloadcms/payload-cloud: 3.33.0
@payloadcms/richtext-lexical: 3.33.0
@payloadcms/translations: 3.33.0
@payloadcms/ui/shared: 3.33.0
react: 19.1.0
react-dom: 19.1.0
Operating System:
Platform: linux
Arch: x64
Version: #32~22.04.1-Ubuntu SMP Thu Apr 3 20:26:27 UTC 2025
Available memory (MB): 7938
Available CPU cores: 2
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with the linked reproduction repository and follow the documented save sequence using the beforeChange hook and reordered blocks. Inspect the admin UI state after each save, especially how block types and contents are matched. Done means blocks remain aligned with their types and contents after repeated saves and reordering.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- nextjs, react, typescript
- Domain
- backend, frontend
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100