Skip to content

[BACKEND] Design and create Pages collection with block-based layout builder #77

Description

@sswez02

Is your feature request related to a problem? Please describe.

Static pages (Home, About, Get Involved, Support Us, Contact) currently have hardcoded content. We need a way for the admin/client to manage the layout and content of these pages dynamically, using reusable components like heroes, text sections, and spacers, without needing a developer to make changes.

Describe the solution you'd like

  • Design a schema for a Pages or Media collection that uses Payload's Blocks field to let the admin build page layouts from reusable components
  • The collection should support at minimum these block types: hero (image/video + text + CTA button), rich text section, image gallery, spacer/divider, and call to action
  • Create the collection in src/collections/ and register it in payload.config.ts
  • Verify by running pnpm dev, going to /admin, logging in, and building a test page layout with a few blocks
  • No predefined schema is provided for this ticket. You are designing the schema. Refer to the Payload Blocks docs and Payload Schema doc for patterns

Describe alternatives you've considered

Could hardcode each page's layout in the frontend, but that means a developer is needed every time the client wants to update content or rearrange sections. A block-based page builder gives the client full control.

Additional context

Think of this as the client's content management tool for every public-facing page. Each page entry in the collection has a slug (e.g. "home", "about", "support-us") and a layout field which is an array of blocks the admin can add, reorder, and configure.

Start by reading:

https://payloadcms.com/docs/fields/blocks
https://payloadcms.com/docs/fields/array
Look at how other Payload templates structure their page builders (the official Payload website template is a good reference)

Before writing any code, document your proposed schema (which blocks, which fields per block) in a comment on this issue for review, or you can directly edit the Payload Schema document.

Suggested branch name: feat/pages-collection
Suggested commit message: feat: add pages collection with block-based layout

BEFORE MERGING

  • Integration test written for services
  • Schemas annotated if adding new models
  • Code generation run (hint: pnpm generate:types)
  • Appropriate mocks created where possible
  • PR Reviewed (For non-trivial changes)
  • Changes tested after rebasing on master or merging in master (hint: git fetch origin master:master, then git rebase master or git merge master)
  • All required PR checks passing

Metadata

Metadata

Assignees

Labels

No labels
No labels

Fields

No fields configured for Feature.

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions