Built-in blocks

Every site has these blocks. Sites can also have blocks from block registries and blocks of their own. Each built-in block also has a version for the site's app, if it has one, which draws it natively on phones.

Block	What it's for
Section	A full-width band of the page with a background, centering its content; with a picture behind it, a color over it and a height, it's WordPress's Cover (see Sections as covers)
Columns	Equal-width columns that stack on phones
Row	Blocks side by side, such as a group of buttons
Space	Empty vertical space
Separator	A line between parts of the page: short, full width or dots
Media and text	A picture or uploaded video beside other blocks, on either side, which stack on phones
Details	A summary that opens to show the blocks inside it, with no JavaScript
Synced block	One of the site's synced blocks, kept once and shown wherever it's placed, so changing it changes every page
Heading	A heading, from page title (H1) down to H4, with a link name for links to it (see Headings and On this page)
Text	Formatted text: paragraphs, lists, links
Button	A link styled as a button
Questions and answers	Questions that each open to show their answer, which search engines are told about too (see Questions and answers)
Pullquote	A quote shown large, set off from the text around it, with who said it
Table	A table of text, which can be bold, italic or a link, with an optional row of headings, a footer, a caption and stripes (see Table)
Preformatted text	Text shown exactly as it's typed, spaces and line breaks included, in a fixed-width font
Verse	Poetry or lyrics, with their lines and spaces as typed, in the page's own font
Image	An image with an optional caption, and a description for people who can't see it, unless it's only decoration
Gallery	Pictures in two to four columns, each with an optional caption, cropped to squares or not, which open larger when clicked (see Gallery)
Video	A video from the media library, YouTube, Vimeo or another site's player
Social post	A post from Bluesky, Mastodon, Instagram or X, or a track or playlist from Spotify or SoundCloud (see Social posts)
Audio	A sound file from the media library, such as a homily, with the browser's own player
File	A link to a file from the media library, such as a PDF, with an optional download button
Document viewer	A PDF from the media library shown on the page, such as a bulletin or a newsletter, with a link to open it (see Documents)
Form	A form whose answers a form service emails to you, or a Google form (see Forms)
Newsletter signup	An email box that signs visitors up to a newsletter on Mailchimp, Buttondown, Kit or another service whose signup form is HTML, or through the site's form service (see Newsletter signup)
Code	Code with syntax highlighting, an optional title and a copy button
Contact details	The address, phone number and email address from Site Settings
Donate button	A button to your giving page, such as a Stripe payment link or a PayPal donate button, with an optional heading and text (see Giving and sharing)
Share buttons	Links that share the page on Facebook, X, Bluesky, LinkedIn or WhatsApp, or by email (see Giving and sharing)
Menu	One of the site's menus, with dropdowns for submenus. Colors puts it in a bar of the theme's primary or secondary color, its dropdowns see-through in the same color, Show the pages under each submenu link opens a submenu link's own pages as a third level, so a section's pages need no menu entries of their own, and Show the links behind a menu button (☰) puts every link, every level of them, under a menu button on phones, on phones and small tablets, on phones and tablets, always or never (see Menus on phones)
Announcement bar	A bar across the page with a short message and a link, between a first and last day, which visitors can close (see Announcement bar)
Site name and logo	The site's logo and name, linking home, with the site's description under the name if you like
Search	A search box for the whole site, with results as you type
Dark mode switch	Lets visitors choose light or dark colors, on sites with dark mode
Collection navigation	Links to every item in a collection, grouped by one of its choice fields
Page list	The site's pages, or the ones under an address, nested by their addresses
Breadcrumbs	The way from the home page to the page shown, such as Home › News › The parish fair (see Breadcrumbs)
Collection list	A collection's items as a list or cards, with a heading, on pages of their own and a page for each choice (see Showing collections)
Collection loop	Blocks you design, shown once for each of a collection's items
Calendar	Events coming up, or a month at a time, from a collection of events or another calendar (see Calendars and events)
Entry field	One of the item's fields, in a collection's page design only
Add to calendar	Links that add the item's event to visitors' calendars, in a page design only
Previous and next	Links to the items before and after this one, in a page design only
On this page	Links to the page's headings, or to the headings of an item's Markdown text (see Headings and On this page)

The blocks from Separator to File in the list match WordPress's own blocks of the same names, and Synced block matches WordPress's synced patterns, so moving from WordPress keeps them as they are, and exporting to WordPress makes them WordPress's again.

Blocks use the site's colors, fonts and corner rounding. Every block's Style setting changes its look, as Tailwind classes that override the block's own styles: Space inside on a Section replaces its default padding (see A block's look). Every part of a block also has a name, which the site's theme can give classes to (see Named parts).

Video

The Video block shows a video from one of four places, chosen in Video from:

• The media library: an MP4 or WebM video uploaded to the site, up to 25 MB, with an optional picture shown before it plays and captions as a WebVTT (.vtt) file. Uploaded videos are kept in the site's repository for good, even after they're replaced, so longer ones are better on YouTube or Vimeo, as are any on a site published with Cloudflare Pages.
• YouTube: paste the video's address in any form YouTube gives it (a watch address, a youtu.be link, a Short, a live stream, or the embed code), or just its ID. A start time in the address, such as t=1m30s, is kept. It plays in YouTube's privacy-enhanced player, which sets no cookies until it's played.
• Vimeo: paste the video's address, including an unlisted video's, or its embed code. It plays with Vimeo's "do not track" on.
• Another site's player: paste the player's embed address, or the whole embed code the other site gives. It's shown in a sandbox, with only what players need, and only from a secure (https://) address on another site.

Give every video a description for screen readers. It can also have a caption below it, a shape (the video's own, wide, landscape, square, or tall for videos made on phones), and play on its own without sound, start with the sound off, or play again when it ends. Players load only when they're scrolled near, so they don't slow down the top of the page.

Social posts

The Social post block shows a post from Bluesky, Mastodon (or another server that works like Mastodon's), Instagram or X, or a track, album, playlist or episode from Spotify or SoundCloud. Paste the post's address, or the embed code its site gives (such as Embed post in a Bluesky post's menu, or Embed under an Instagram post's ⋯). Short links, such as spotify.link or on.soundcloud.com, can't be followed: open them and paste the address they go to.

Each post is drawn by its own site, in a sandbox, and as tall as that site usually draws one; set Height in pixels if a long post is cut off. Give it a description for screen readers if the post's site isn't enough, and a caption if you like. On a site that asks visitors' consent, posts load only once visitors agree, like videos.

A Bluesky post whose address has its author's handle, such as bsky.app/profile/parish.example.org/post/…, needs the author's ID, which only Bluesky knows: the site looks it up when it's built, and the editor says so until then. Paste the post's embed code instead to see it in the editor too. If Bluesky can't be reached when the site is built, the page links to the post instead.

For other sites' video players, use the Video block's Another site's player.

Documents

The Document viewer shows a PDF from the media library on the page, in the browser's own viewer, as tall as Height in pixels says. Below it, a link opens the document on its own, which phones need: their browsers show only a PDF's first page inside a page. Give it a description for screen readers if its file name isn't clear. Only PDFs can be shown this way; link other files with the File block. PDFs from the media library are shown, including where a storage plugin keeps them; a PDF from another site is only linked, since browsers won't show a PDF in a sealed-off frame and another site could answer for a .pdf address with a page of its own. In the editor, the viewer is a box with the document's name: the site shows the document there.

Giving and sharing

The Donate button links to your giving page, such as a Stripe payment link, a PayPal donate button's address, or Givebutter, Donorbox, Tithe.ly or Pushpay's. People give on that service's secure page, so no card details reach your site, and the button only takes an address that starts with https://. Under the button, it can say where people give ("You'll give on Stripe's secure page."). The page loads nothing from the service until someone clicks.

Share buttons link to share the page on Facebook, X, Bluesky, LinkedIn or WhatsApp, or by email, with the page's title, in the order you list them, as buttons or plain links. They're only links, so the page loads nothing from those sites and they can't follow visitors. They need the Site address in Site Settings, which says where the page is.

Table

Select a Table block to edit its cells in a grid in the block's settings: type in each cell, and add or remove rows and columns. First row is headings makes the first row the columns' headings, and Last row is a footer sets the last row apart, such as for totals. Words in a cell can be bold or italic, or a link: select them, then choose Bold, Italic or Link above the grid (or press Ctrl+B or Ctrl+I), and press Enter for a new line in the same cell. The table scrolls sideways on phones when it's wider than the screen.

Tables made before cells could be formatted keep their text exactly as it was typed, even where it looks like code, such as <b>, and become formatted tables the first time they're changed.

Gallery

With Open pictures larger when clicked, which new Galleries start with, clicking a picture shows it larger over the page, with its caption. The arrow keys, the Previous and Next buttons and swiping move between the Gallery's pictures, and Escape, Close or a click beside the picture closes it. The buttons' names, which screen readers say, are in the block's settings, so you can put them in the page's language. Without JavaScript, or with a key held down, clicking a picture opens its file. Galleries made before this keep showing their pictures as they were until you turn it on. In the site's app, pictures open full screen.

Questions and answers

Each question opens to show its answer, with no JavaScript. Answers are formatted text. Search engines are told about the questions and answers too, as schema.org's FAQPage (every Questions and answers block on a page together), on sites with the Site address. Google shows them in its results only for some well-known government and health sites, so for most sites this changes nothing you'll see in Google, though other search engines and AI tools read it.

Headings and On this page

Every Heading block carries a link name, made from its words, so links can go straight to it: /visit#mass-times for a heading "Mass times". Two headings with the same words get mass-times and mass-times-2. To choose the name yourself, so links keep working when the heading's words change, fill in Link name in the heading's settings.

The On this page block lists the page's Heading blocks, linking to each, with Headings to list choosing only the main ones (H2) or the ones under them (H3) too. On an item's page whose text is Markdown, it lists the headings of the item's text instead. Stay in view as the page scrolls keeps it beside long text, when it's in a column next to it.

Announcement bar

Put an Announcement bar at the top of the header, in the Header & Footer editor, for news every page should carry, such as a change of Mass times. It shows from its First day it shows to its Last day it shows, in the site's time zone; leave either empty for no limit. The site is built again on the days it starts and stops showing, so it appears and goes on time without anyone publishing (see Rebuilding overnight). The editor shows it outside its days too, faded.

With Visitors can close it, the bar has a close button, and a visitor who closes it doesn't see it again in that browser until its message or link changes. Their choice is kept only in their own browser.

Sections as covers

A Section with a background picture can be a cover, like WordPress's Cover block: Color over the background puts a dark, light or primary color over the picture, How strong a color sets how much, so text on the photo can be read, and the text color changes to suit it. Part of the picture to keep in view chooses what stays visible when the picture is cropped, and Height at least makes the section taller, up to the whole screen, with its content in the middle.

Code

The Code block highlights code when the site is built, so visitors' browsers don't have to. It knows Bash, CSS, diffs, HTML, JavaScript, JSON, JSX, Markdown, Python, TSX, TypeScript and YAML, in colors like the page's (light, or dark when the site's dark mode shows it dark), or always light or dark. Which colors those are is a site setting, Code colors. The copy button's label is the block's to set, so sites in other languages can translate it; leave it empty for no button.

Menus on phones

A menu across the page opens its submenus when the pointer is over them, which phones and tablets don't have, and a long menu runs onto several lines on a narrow screen. Show the links behind a menu button (☰) shows a button there instead, which opens every link in a panel, each submenu's links indented under it, with the pages under them where Show the pages under each submenu link is on:

• On phones: screens narrower than 640 pixels.
• On phones and small tablets: narrower than 768 pixels, which suits most headers.
• On phones and tablets: narrower than 1024 pixels, for a long menu.
• Always, at every width.
• Never, for menus that fit on a phone as they are, such as a footer's menu down the page.

A menu across the page that has submenus and never shows the button says so in the editor, since its submenus' links can't be reached on phones. Menu button's name, for screen readers is what screen readers call the button; translate it on a site in several languages. The button needs no JavaScript, so it works for visitors without it too. In apps made with Expo the menu follows the same choice, except that a menu with submenus has the button on phones whatever it's set to, since an app can't open them otherwise.

Dark mode switch

On a site with dark mode, the Dark mode switch lets visitors choose light or dark colors instead of following their computer's setting. Show as chooses:

• A switch between light and dark, with a sun or a moon on it, and the words Light and Dark beside it if Words beside the switch is Show.
• A menu: Light, Dark or Follow my computer, which goes back to following the computer's setting.

The visitor's choice is kept in their browser and put back at the start of every page, before it shows, so pages never flash the other colors first. Every word is the block's to set, so sites in other languages can translate them. On a site without dark mode, the switch isn't shown, and the editor says where to turn dark mode on.

Breadcrumbs

Breadcrumbs show where a page is in the site: the home page, each page above it by address, and the page itself, such as Home › About us › Staff on /about/staff. Addresses with no page of their own are skipped, so /about/history/1900s shows Home › About us › The 1900s when there's no /about/history page. An item's page is under its collection's page (Home › News › The parish fair), and a page a block adds comes after the page it's on (Home › News › Page 2). On a site in several languages, they start from the home page of the page's language. On the home page they show nothing.

What to call the home page is "Home" until you change it; leave it empty to use the home page's title. Between pages chooses ›, / or →, and End with this page chooses whether the page shown comes last, not as a link. They're marked up as schema.org's BreadcrumbList, which search engines can show in their results in place of the page's address. Put them in a collection's page design to show them on every item's page. They need to know the page they're on, so they go on pages and in page designs, not in the header or footer, which Next.js sites share between pages.

Language switch

On a site in several languages, the Language switch links to the page in each of them, each language named in itself: to the page's translation, or to the language's home page where it has none. Show as chooses links side by side or a menu that opens, which needs no JavaScript, except in a Next.js site's header and footer, which are shared by every page, so the browser finds the page's translations. On a site in one language, it isn't shown, and the editor says where to add a language.

Search

The Search block searches the whole site in the visitor's browser, with Pagefind, so no search service is needed. When a site has a Search block, its build makes a search index of every page's main content; headers, footers and "Page not found" are left out. Search only works on the built site, so in the editor the box says so. See Search for details.

Newsletter signup

The Newsletter signup block is an email box and a button that sign visitors up to your newsletter. Choose the Newsletter service and paste its signup form:

• Mailchimp: in Mailchimp, open Audience, then Signup forms, then Embedded forms, and copy the code there.
• Buttondown: your Buttondown username, or the embed code from Buttondown's sharing settings.
• Kit (ConvertKit): open the form in Kit, choose Publish, then HTML, and copy the code there.
• Another service: most email list services give their signup form as HTML in their embed or sharing settings, often under a name such as Embedded form or HTML form. Copy that HTML into the block. The block reads where the form sends signups, its email box, its first name box, its hidden fields and the box that catches spam, and leaves out its other questions, such as which lists to join; the editor says when it leaves any out.
• The site's form service: the one in Site Settings, under Forms (see Forms), which emails you each signup, for a list you keep yourself.

The block keeps only where the form sends signups, so it looks like the rest of the site, and it's a plain form that posts straight to the service: it works without JavaScript, and pages load nothing from the service until someone signs up. The service then shows its own page, such as Mailchimp's "Almost finished" page asking people to confirm by email; with the site's form service, Page visitors see after signing up can be one of the site's pages. Ask for a first name too adds a box for it (Buttondown takes only the address). Button beside the box hides the boxes' labels, which screen readers still read, behind their placeholders. Until the form can sign anyone up, the block isn't shown on the site, and the editor says what's missing.

Some services give no HTML form, only a script or a frame that draws their own, and some forms need questions the block leaves out. For those, add the Custom HTML block from the Blocks screen (see Add blocks), paste the service's embed code into it, and set Make it safe to No: use it exactly as written, since making it safe takes out scripts, frames and forms. The form then looks as the service draws it, and loads the service's code on the page; on a site that asks visitors first, it waits until they agree.

In the site's app, signups through the site's form service are sent from the app itself; with a newsletter service, the button opens the page on the website.

Named parts

Every part of a built-in block has a name, which is on the part as a class, and which Blocks' parts gives classes to and custom CSS can style. Names are never renamed or removed, so a theme that uses one keeps working; new ones may be added. Some parts are in more than one block, such as a list's page links.

• Audio: gf-audio (Audio and caption), gf-audio-player (Player), gf-audio-caption (Caption).
• Add to calendar: gf-add-to-calendar (Add to calendar), gf-add-to-calendar-label (Add to calendar's label), gf-add-to-calendar-links (Calendars' links), gf-add-to-calendar-link (Calendar's link).
• Button: gf-button (Button).
• Calendar: gf-calendar (Calendar), gf-calendar-empty (Nothing to show), gf-calendar-days (Days), gf-calendar-day (Day), gf-calendar-day-heading (Day's date), gf-calendar-events (Day's events), gf-calendar-event (Event), gf-calendar-event-time (Event's time), gf-calendar-event-body (Event's details), gf-calendar-event-title (Event's title), gf-calendar-event-place (Event's place), gf-calendar-event-summary (Event's summary), gf-calendar-month (Month), gf-calendar-month-header (Month's heading and links), gf-calendar-month-link (Previous or next month), gf-calendar-month-title (Month's name), gf-calendar-weekdays (Days of the week), gf-calendar-month-days (Month's days), gf-calendar-month-day (Month's day), gf-calendar-month-blank (Day outside the month), gf-calendar-month-date (Day's number), gf-calendar-month-events (Day's events in a month), gf-calendar-month-event (Event in a month), gf-calendar-subscribe (Subscribe), gf-calendar-subscribe-label (Subscribe's label), gf-calendar-subscribe-links (Subscribe links), gf-calendar-subscribe-link (Subscribe link), gf-add-to-calendar (Add to calendar), gf-add-to-calendar-label (Add to calendar's label), gf-add-to-calendar-links (Calendars' links), gf-add-to-calendar-link (Calendar's link).
• Code: gf-code (Code), gf-code-title (Code's title), gf-code-copy (Copy button).
• Collection list: gf-collection-list (List with its heading), gf-collection-list-header (List's heading and link), gf-collection-list-heading (List's heading), gf-collection-list-more (See all link), gf-collection-list-items (Items), gf-collection-list-empty (Nothing to show), gf-card (Card), gf-card-image (Card's picture), gf-card-body (Card's text), gf-card-date (Card's date), gf-card-title (Card's title), gf-card-summary (Card's summary), gf-list-item (List item), gf-list-item-image (List item's picture), gf-list-item-body (List item's text), gf-list-item-date (List item's date), gf-list-item-title (List item's title), gf-list-item-summary (List item's summary), gf-choices (Choices), gf-choice-link (Choice), gf-page-links (Page links), gf-page-numbers (Page numbers), gf-page-link (Page link).
• Collection loop: gf-collection-loop (Collection loop), gf-collection-loop-items (Items), gf-collection-loop-item (Item), gf-collection-loop-design (Item's design), gf-collection-loop-empty (Nothing to show), gf-choices (Choices), gf-choice-link (Choice), gf-page-links (Page links), gf-page-numbers (Page numbers), gf-page-link (Page link).
• Collection navigation: gf-collection-nav (Collection navigation), gf-collection-nav-heading (Navigation's heading), gf-collection-nav-group (Group), gf-collection-nav-group-label (Group's name), gf-collection-nav-links (Group's links), gf-collection-nav-link (Link).
• Columns: gf-columns (Columns).
• Contact details: gf-contact (Contact details), gf-contact-address (Address), gf-contact-phone (Phone number), gf-contact-email (Email address).
• Details: gf-details (Details), gf-details-summary (Summary), gf-details-content (What it shows).
• Dark mode switch: gf-dark-mode-switch (Dark mode switch), gf-dark-mode-switch-track (Switch's track), gf-dark-mode-switch-thumb (Switch's knob).
• Entry field: gf-entry-field (Entry field), gf-entry-field-link (Field's link), gf-entry-field-image (Each of several images), gf-entry-field-row (Each of a group's rows), gf-code (Code), gf-code-title (Code's title), gf-code-copy (Copy button).
• File: gf-file (File), gf-file-link (File's link), gf-file-button (Download button).
• Form: gf-form (Form), gf-form-embed (Google Form), gf-form-questions (Questions), gf-form-question (Question), gf-form-label (Question's wording), gf-form-hint (Help text), gf-form-input (Answer field), gf-form-choice (Choice), gf-form-check (Checkbox or option), gf-form-required (Required mark), gf-form-submit (Send button).
• Newsletter signup: gf-newsletter (Newsletter signup), gf-newsletter-heading (Heading), gf-newsletter-text (Text), gf-newsletter-form (Form), gf-newsletter-field (Field), gf-newsletter-label (Field's label), gf-newsletter-input (Email box), gf-newsletter-submit (Subscribe button), gf-newsletter-note (Words under the form).
• Gallery: gf-gallery (Gallery), gf-gallery-items (Pictures), gf-gallery-item (Picture and caption), gf-gallery-picture (Picture), gf-gallery-item-caption (Picture's caption), gf-gallery-caption (Gallery's caption), gf-gallery-lightbox (Picture shown larger), gf-gallery-lightbox-picture (Larger picture), gf-gallery-lightbox-caption (Larger picture's caption), gf-gallery-lightbox-button (Close, Previous and Next buttons).
• Questions and answers: gf-faq (Questions and answers), gf-faq-heading (Heading), gf-faq-items (Questions), gf-faq-item (Question and answer), gf-faq-question (Question), gf-faq-answer (Answer).
• Announcement bar: gf-announcement (Announcement bar), gf-announcement-message (Message), gf-announcement-link (Link), gf-announcement-close (Close button).
• Heading: gf-heading (Heading).
• Image: gf-image (Image and caption), gf-image-picture (Picture), gf-image-caption (Caption).
• Language switch: gf-language-switch (Language switch), gf-language-list (Languages), gf-language-link (Language), gf-language-current (Current language).
• Media and text: gf-media-text (Media and text), gf-media-text-media (Picture), gf-media-text-content (Text beside it).
• Menu: gf-menu (Menu), gf-menu-list (Menu's links), gf-menu-item (Menu item), gf-menu-link (Menu link), gf-menu-submenu (Submenu), gf-menu-toggle (Menu button and its links), gf-menu-button (Menu button), gf-menu-panel (Links under the menu button).
• On this page: gf-on-this-page (On this page), gf-on-this-page-heading (Heading), gf-on-this-page-links (Links), gf-on-this-page-link (Link).
• Page list: gf-page-list (Page list), gf-page-list-item (Page), gf-page-list-link (Page's link), gf-page-list-children (Pages under it).
• Preformatted text: gf-preformatted (Preformatted text).
• Previous and next: gf-entry-pager (Previous and next), gf-entry-pager-link (Previous or next link), gf-entry-pager-label (Link's label), gf-entry-pager-title (Link's title).
• Pullquote: gf-pullquote (Pullquote), gf-pullquote-quote (Quote), gf-pullquote-citation (Who said it).
• Row: gf-row (Row).
• Search: gf-search (Search), gf-search-box (Search box), gf-search-input (Search field), gf-search-results (Results), gf-search-result (Result), gf-search-result-title (Result's title), gf-search-result-excerpt (Result's excerpt), gf-search-message (Search message).
• Section: gf-section (Section), gf-section-content (Section's content), gf-section-overlay (Section's overlay).
• Separator: gf-separator (Separator).
• Site name and logo: gf-site-brand (Site name and logo), gf-site-brand-logo (Logo), gf-site-brand-name (Site name), gf-site-brand-text (Name and tagline), gf-site-brand-tagline (Tagline).
• Space: gf-space (Space).
• Document viewer: gf-document (Document and link), gf-document-frame (Viewer), gf-document-caption (Below the viewer), gf-document-link (Link to the document).
• Donate button: gf-donate (Donate), gf-donate-heading (Heading), gf-donate-text (Text), gf-donate-button (Button), gf-donate-note (Where people give).
• Share buttons: gf-share (Share buttons), gf-share-label (Words before the buttons), gf-share-list (Buttons), gf-share-link (Button).
• Table: gf-table (Table and caption), gf-table-grid (Table), gf-table-caption (Caption), gf-table-row (Row), gf-table-header-cell (Heading cell), gf-table-cell (Cell).
• Text: gf-text (Text).
• Verse: gf-verse (Verse).
• Social post: gf-embed (Post and caption), gf-embed-frame (Post), gf-embed-caption (Caption), gf-embed-link (Link to the post).
• Video: gf-video (Video and caption), gf-video-player (Player), gf-video-caption (Caption).