GCM Docs

Appearance

Blocks catalog ​

Blocks are the building units of a page. You drag them from the palette on the left of the Puck editor onto the canvas, set their props on the right, and the public site renders them. Every block is church-aware — it pulls live data from the rest of your GCM account where it makes sense, so you don't double-enter content.

Block palette

The palette is grouped into four sections: Layout, Church, Media, and Content feeds. Below is the working catalog with a one-line "when to use it" for each.

Layout blocks ​

These are the structural primitives — they don't care about your data, they just hold things in place.

  • Hero banner — the big top-of-page block with a headline, subhead, background image or video, and one or two CTA buttons. Drop this at the top of every landing-type page. If you only put one block on the page, make it this one.
  • Rich text — a TipTap-powered prose block. Headings, lists, links, blockquotes, inline images. Use it for about pages, statement of faith, mission, anywhere you'd write paragraphs.
  • Image / video — single asset with a caption. The video variant supports YouTube, Vimeo, and uploaded MP4. For a slideshow, use Image slider under Media instead.
  • Columns — splits the row into 2, 3, or 4 columns. Useful for "three pillars" sections, side-by-side images and text.
  • Grid — denser layout primitive (4-12 cells, configurable gap). Reach for this when Columns isn't enough.
  • Section — a wrapper with its own background colour, padding, and optional divider shape at the top/bottom. Use it to break the page into visually distinct bands.
  • Spacer / divider — vertical whitespace or a horizontal rule. Small but indispensable for breathing room.
  • Custom HTML — raw HTML/CSS escape hatch. Only use it if no other block does what you need. Custom HTML is not sanitised on render, so don't paste anything you didn't write.

Church blocks ​

These pull live data from the rest of your GCM account.

  • Service times — renders the meeting schedule from your Calendar module. No re-entry — when you change a recurring service time, the website updates.
  • Giving button — links to your hosted /give page. Use this anywhere you want a CTA. For a full donation form on the page, use Native giving form.
  • Native giving form — embeds the donation form directly into the page. Visitors give without leaving.
  • Visitor form embed / Native visitor form — embed the visitor connect card. Embed loads it in an iframe (lighter); native renders inline (better UX). See Visitor form for what fields appear.
  • Event list — upcoming events from the Calendar module, configurable count and category filter.
  • Events calendar — a full month-view calendar. Heavier; use it on a dedicated /events page, not on a homepage.
  • Contact form — sends submissions to a configured email address. For more control (custom fields, routing), use Form block below with a form built in the Forms module.
  • Form block — embeds any form from the Forms module. Pick the form from a dropdown — the block does the rest.
  • Staff directory — members tagged with role staff or pastor. Includes name, role, photo, optional contact link.
  • Ministry showcase / Groups showcase — cards driven by your Ministries / Groups modules.
  • Location map — Leaflet map with a pin at an address you type. Geocoding runs on save.
  • Sermon player — embed a single sermon (audio or video) with TipTap notes. Pick the sermon from a dropdown. For a list of sermons, use Sermon feed below.
  • Birthday celebrations — this week's member birthdays. Most churches use this on a members-only page.

Media blocks ​

  • Photo gallery — masonry or grid layout, lightbox on click.
  • Image slider — horizontal carousel, autoplay optional.
  • Testimonials — quote cards with author name and photo.
  • Social links — row of icon buttons (Facebook, Instagram, YouTube, X, TikTok, WhatsApp). Pulls URLs from Settings.
  • Newsletter signup — single-field email capture. Submissions land in your CRM as visitor records tagged newsletter.

Content feeds ​

These are list/grid blocks driven by data you publish in the Content tab.

  • Blog feed — your published blog posts in grid, magazine, or list layout. Configurable per-page count, optional category filter.
  • Sermon feed — your published sermons, same three layouts. This is what most homepages use to surface the latest message.
  • FAQ — accordion of question/answer pairs. Configure the items inline; no separate content type.
  • CTA banner — full-width promotional band with a headline and one button. Lighter than a Hero.
  • Scripture quote — formatted Bible reference with the verse text and an attribution line.
  • Stats counter — animated counters ("450 members served", "12 ministries"). The counts can be hardcoded or pulled live from your account.
  • Feature grid — icon + title + description cards. Useful for "what we believe" or "what we offer" sections.
  • Countdown timer — counts down to an event date.
  • Timeline — vertical timeline of milestones.
  • Video embed — paste a YouTube or Vimeo URL.

Floating widgets ​

These aren't in the block palette — they're configured under Settings → Floating widgets and appear on every page automatically.

  • WhatsApp button — green floating bubble that opens WhatsApp with a pre-filled message. Configure the phone number and default text.
  • Language switcher — small EN / ES toggle in the corner. Only useful if your site has translations.

Choosing a block — quick rules ​

  • "I need a big top-of-page intro" → Hero banner.
  • "I need to write paragraphs" → Rich text.
  • "I want visitors to see upcoming events" → Event list.
  • "I want them to give without leaving the page" → Native giving form.
  • "I want them to hear last Sunday's message" → Sermon feed (or Sermon player for a specific one).
  • "I want a contact form that does just one thing" → Contact form. Anything more → Form block.
  • "I want a list of posts/articles" → Blog feed.

When in doubt, drag a block onto the canvas and see what it renders — every block ships with sane defaults, and the right-hand panel shows you which props matter.

Where blocks come from ​

Every block is a React component in src/features/website-builder/blocks/ registered in puck-config.tsx. New blocks get added regularly. If something here doesn't show up in your palette, your build may be behind — refresh the page or check with support.

See also: Creating a page, Branding, Publishing + drafts.