This presentation explored practical strategies for building and maintaining custom blocks using Advanced Custom Fields. Drawing from real-world implementation experience, the talk focused on sustainable architecture, editor usability, and block construction patterns that scale.

WordCamp Phoenix 2024, Phoenix, Arizona
February 2024

---

Summary

Why ACF Blocks

This session examined how Advanced Custom Fields Pro made block development approachable during the early Gutenberg transition. When core blocks were still evolving and documentation was limited, ACF provided a stable and familiar way to capture structured content while remaining compatible with the new editor.

Rather than rebuilding everything in React, we adopted ACF Blocks as a bridge between traditional PHP theme development and the modern block paradigm.

Pre-flight considerations

Several foundational practices improved long-term maintainability:

• Register blocks using the modern block.json approach
• Define explicit save locations for ACF JSON field groups
• Keep field sets intentionally simple and avoid unnecessary complexity
• Use accordion layouts to keep the editor interface clear

Simple block interfaces consistently produced better editorial experiences.

Working with the Block Editor

The presentation emphasized leaning into native WordPress capabilities rather than recreating them. Using <InnerBlocks> allowed custom blocks to feel more like core blocks, reducing the need for excessive field configurations. Understanding the $block object and integrating the WordPress Style Engine ensured block supports such as spacing, color, and typography behaved as expected.

Development tools such as Query Monitor also proved invaluable for debugging and understanding how block data flows through render templates.

Patterns that worked for us

• Using ACF blocks as layout wrappers, including CSS grid implementations
• Adding classes to inner blocks via the WordPress HTML API
• Passing ACF field values into custom WP_Query objects
• Sending structured field data to JavaScript for dynamic visualizations

Key outcomes

• A scalable internal block library built on stable patterns
• A development approach aligned with evolving WordPress standards
• Cleaner editorial interfaces that encourage structured content

Core lessons

• Keep interfaces simple and let structure guide design
• Adopt new WordPress paradigms early, but do so pragmatically
• Prefer native editor capabilities over complex custom field stacks
• Build blocks as reusable components, not one-off solutions