Blocks Reference

Lesson 5 of 15 5 min read
  • JNext lesson
  • KPrevious lesson
  • FSearch lessons
  • EscClear search

All 29 blocks are listed below, organized by category. Each block is registered under the acf-blocks category in the editor inserter.

Content Blocks

Accordion (acf/accordion)

Collapsible content sections using native HTML <details> and <summary> elements. No JavaScript required for the toggle behavior. Supports an optional FAQ schema toggle that outputs FAQPage JSON-LD structured data.

  • Keywords: accordion, faq, toggle
  • Supports: wide/full alignment, InnerBlocks (jsx), anchor
  • Style variations: default
  • Schema: FAQPage (when enabled)

Callout (acf/callout)

Highlighted content boxes for tips, warnings, notes, or quotes. Comes with multiple visual styles.

  • Keywords: callout, notice, alert
  • Style variations: default, dark, testimonial, dashed-light, dashed-dark, highlight

Hero (acf/hero)

Full-width hero section with headline, subheading, and call-to-action buttons. Supports InnerBlocks for flexible content. Falls back to legacy ACF fields if InnerBlocks content is empty.

  • Keywords: hero, banner, header
  • Supports: wide/full alignment, InnerBlocks (jsx)

CTA (acf/cta)

Call-to-action block with heading, description, and button. Supports InnerBlocks.

  • Keywords: cta, call to action, button
  • Supports: InnerBlocks (jsx)

Section Block (acf/section-block)

A container block that wraps InnerBlocks content. Configurable background color, background image, background video, and overlay. Supports custom HTML tag selection. Outputs scoped inline CSS for per-instance styling.

  • Keywords: section, container, wrapper
  • Supports: wide/full alignment, InnerBlocks (jsx)
  • Editor script: Custom InnerBlocks edit component via editor.js

Opinion Box (acf/opinion-box)

Editorial content box with author attribution. Suitable for author opinions, editor’s picks, or expert commentary.

  • Keywords: opinion, editorial, author
  • Supports: InnerBlocks (jsx)

Tabs (acf/tabs)

Tabbed content interface. Content is organized into named tabs that users can switch between.

  • Keywords: tabs, tabbed content
  • Style variations: default
  • Supports: InnerBlocks (jsx)

Thread Builder (acf/thread-builder)

Builds discussion-style thread layouts, similar to social media threads.

  • Keywords: thread, discussion, conversation

Product and E-Commerce Blocks

Product Review (acf/product-review)

Comprehensive product review with star rating, pros/cons, pricing, and a verdict. Outputs Product schema with Review, Offer, positiveNotes, and negativeNotes.

  • Keywords: review, product, rating
  • Style variations: default
  • Schema: Product with Review

Product Box (acf/product-box)

Single product highlight with image, description, pricing, and CTA buttons.

  • Keywords: product, box, showcase
  • Style variations: default, no-image

Product Cards (acf/product-cards)

Grid of product cards for showcasing multiple products.

  • Keywords: products, cards, grid
  • Supports: InnerBlocks (jsx)

Compare Block (acf/compare)

Side-by-side product comparison with nested repeater fields for features. Supports comparing multiple products with rows of feature data.

  • Keywords: compare, comparison, versus
  • Style variations: default

PL Block (acf/pl-block)

Product list with pricing details. Designed for “best of” lists with ranked products.

  • Keywords: product list, pricing, list
  • Supports: InnerBlocks (jsx)

Coupon Code (acf/cb-coupon-code)

Displays promotional/discount codes with a click-to-copy feature. Uses the Clipboard API with an execCommand fallback. The copy function is injected once per page regardless of how many coupon blocks appear.

  • Keywords: coupon, discount, code

Media and Display Blocks

Video (acf/video)

Video embeds supporting YouTube, Vimeo, and self-hosted files. Configurable aspect ratio, autoplay, loop, mute, and controls.

  • Keywords: video, youtube, vimeo
  • Supports: InnerBlocks (jsx)

Gallery (acf/gallery)

Image gallery with lightbox support.

  • Keywords: gallery, images, photos
  • Supports: InnerBlocks (jsx)

Stats Block (acf/stats)

Statistics display for showcasing numbers and metrics.

  • Keywords: stats, numbers, metrics
  • Style variations: default
  • Supports: InnerBlocks (jsx)

Star Rating (acf/star-rating)

Interactive star rating with AJAX submission. Visitors can submit ratings that are stored as aggregate post meta. Rated state persists in localStorage to prevent duplicate submissions. Outputs AggregateRating schema with a configurable @type (Article, BlogPosting, CreativeWork, etc.).

  • Keywords: rating, stars, score
  • Style variations: default
  • Schema: AggregateRating
  • AJAX: acf_star_rating_submit (public, both logged-in and anonymous users)
  • Frontend JS: star-rating-block.js

Code Block (acf/code-block)

Syntax-highlighted code display with language selection, filename, and theme options (light/dark).

  • Keywords: code, syntax, programming

Changelog (acf/changelog)

Version changelog display with entries grouped by version number and date. Each entry has typed items (added, changed, fixed, removed, etc.).

  • Keywords: changelog, version, release
  • Style variations: default, timeline

Checklist (acf/checklist)

Interactive checklist with optional progress bar. Supports checked/unchecked states and strikethrough styling.

  • Keywords: checklist, todo, list
  • Style variations: default, card, minimal

Navigation and Organization Blocks

Table of Contents (acf/toc)

Auto-generated table of contents that links to headings in the post content. Automatically adds id attributes to headings that lack them. Supports sticky positioning and active-section highlighting via IntersectionObserver. Outputs ItemList / SiteNavigationElement schema.

  • Keywords: toc, table of contents, navigation
  • Style variations: default
  • Schema: ItemList, SiteNavigationElement
  • Content filter: Adds IDs to headings via the_content
  • Frontend JS: IntersectionObserver for active highlight (inline, when enabled)

Feature Grid (acf/feature-grid)

Grid layout for displaying features with icons, titles, and descriptions.

  • Keywords: features, grid, icons
  • Style variations: default, card, dark, minimal, bordered, gradient
  • Supports: InnerBlocks (jsx)

Post Display (acf/post-display)

Displays selected posts using the ACF relationship field. Supports multiple layout styles with per-instance inline CSS.

  • Keywords: posts, display, related
  • Style variations: default, dark, card, minimal, bordered

URL Preview (acf/url-preview)

Link preview cards similar to social media embeds. Enter a URL in the editor, click “Fetch”, and the block populates title, description, and image from the page’s Open Graph metadata. Images can be imported to the WordPress media library.

  • Keywords: url, preview, link, embed
  • Supports: InnerBlocks (jsx)
  • AJAX: acf_url_preview_fetch (admin only, requires edit_posts)
  • AJAX: acf_url_preview_import_image (admin only, requires upload_files)

Team and Form Blocks

Team Member (acf/team-member)

Team member profile cards with photo, name, role, and bio.

  • Keywords: team, member, profile
  • Supports: InnerBlocks (jsx)

Email Form (acf/email-form)

Email capture form supporting two modes: native form POST to a custom form_action URL, or webhook POST to a REST endpoint. The form submission is handled via inline JavaScript.

  • Keywords: email, form, subscribe
  • Supports: InnerBlocks (jsx)

Testimonial (acf/testimonial)

Customer testimonial display with author name, photo, company, and rating.

  • Keywords: testimonial, quote, review
  • Style variations: default

Pros/Cons (acf/pros-cons)

Side-by-side pros and cons list.

  • Keywords: pros, cons, advantages