AgilePress Content Block for ACF

by AgilePress

Description

AgilePress Content Block for ACF is a versatile tool developed by AgilePress that allows you to create dynamic HTML content with Advanced Custom Fields integration. It supports four powerful syntaxes for different ACF field types:

Simple fields: Use {field_name} for text, number, and other simple fields
Group fields: Use {group_name:sub_field_name} to access fields within ACF groups
Repeaters & Galleries: Use {{repeater_name}} HTML content with {sub_field} tags {{/repeater_name}} to loop through repeater fields and image galleries
Conditionals: Use {{#if field}}...{{/if}} for conditional content display with support for = and != comparisons

This block is perfect for:

Displaying custom field data in formatted HTML
Creating dynamic templates with ACF fields
Building complex layouts that pull data from custom fields
Looping through repeater fields and image galleries
Accessing nested group field data
Showing/hiding content based on field values
Integrating ACF data seamlessly into your content

The block provides an intuitive sidebar editor where you can write HTML and insert ACF field tags. On the frontend, these tags are automatically replaced with the actual values from your Advanced Custom Fields.

Requirements:

Advanced Custom Fields (free or PRO version)
WordPress 6.1 or higher
PHP 7.0 or higher

Usage Examples

Example 1 – Simple field display:

<div class="location">
  <p>Latitude: {latitude}</p>
  <p>Longitude: {longitude}</p>
</div>

Example 2 – Group field access:

<div class="contact">
  <h3>{contact_info:name}</h3>
  <p>Email: <a href="mailto:{contact_info:email}">{contact_info:email}</a></p>
  <p>Phone: {contact_info:phone}</p>
</div>

Example 3 – Repeater field loop:

<ul class="team-members">
  {{team_member}}
    <li>
      <h4>{name}</h4>
      <p>{position}</p>
      <p>{bio}</p>
    </li>
  {{/team_member}}
</ul>

Example 4 – Gallery field loop:

<div class="gallery">
  {{project_images}}
    <figure>
      <img src="{url}" alt="{alt}" width="{width}" height="{height}" />
      <figcaption>{caption}</figcaption>
    </figure>
  {{/project_images}}
</div>

Example 5 – Conditional display:

<article class="post">
  {{#if featured}}
    <span class="badge">Featured</span>
  {{/if}}

  <h2>{title}</h2>

  {{#if status = published}}
    <p class="published-date">Published: {date}</p>
  {{#elseif status = draft}}
    <p class="draft-notice">This is a draft</p>
  {{#else}}
    <p class="pending-notice">Pending review</p>
  {{/if}}

  {{#if author_name != Anonymous}}
    <p>By {author_name}</p>
  {{/if}}
</article>

Example 6 – Complex combination:

<article class="project">
  <header>
    {{#if is_featured}}
      <span class="featured-badge">Featured Project</span>
    {{/if}}

    <h2>{project_title}</h2>
    <p class="meta">
      Location: {location:city}, {location:country}<br>
      Date: {project_date}
    </p>
  </header>

  <div class="gallery">
    {{project_gallery}}
      <figure>
        <img src="{url}" alt="{alt}" loading="lazy" />
        <figcaption>{caption}</figcaption>
      </figure>
    {{/project_gallery}}
  </div>

  {{#if features}}
    <div class="features">
      <h3>Project Features</h3>
      <ul>
        {{features}}
          <li>
            <strong>{feature_name}:</strong> {feature_value}
          </li>
        {{/features}}
      </ul>
    </div>
  {{/if}}

  <footer>
    {{#if client_type = commercial}}
      <p><strong>Commercial Project</strong></p>
    {{/if}}

    <p>Client: {client_info:company_name}</p>

    {{#if client_info:email != none}}
      <p>Contact: {client_info:email}</p>
    {{/if}}
  </footer>
</article><h3>Additional Information</h3>

Security:
All field values are properly escaped using WordPress security functions (esc_html(), esc_url(), wp_kses_post()) to prevent XSS attacks and ensure safe output.

Performance:
The block uses WordPress native functions and ACF’s optimized field retrieval methods. Field values are processed server-side during render, ensuring optimal frontend performance.

Compatibility:

WordPress 6.1+ (tested up to 6.9)
PHP 7.0+ (tested up to 8.3)
ACF free version 5.0+
ACF PRO 5.0+
Classic and Block themes

Developer Notes:
The block follows WordPress coding standards and uses

Installation

Make sure you have Advanced Custom Fields (free or PRO) installed and activated
Upload the plugin files to the /wp-content/plugins/agilepress-content-block-for-acf directory, or install the plugin through the WordPress plugins screen directly
Activate the plugin through the ‘Plugins’ screen in WordPress
Add the block to any post or page by searching for “AgilePress Content Block for ACF”
Start using ACF field tags in your HTML content via the sidebar settings

Faq

How do I use simple ACF field tags?

Simply wrap your ACF field name in single curly braces. For example, if you have a field named “title”, use {title} in your HTML content.

How do I access fields within an ACF group?

Use the colon syntax: {group_name:sub_field_name}. For example, if you have a group called “location” with a field “latitude”, use {location:latitude}.

How do I loop through repeater fields?

Use double curly braces: {{repeater_name}} your HTML with {sub_field} tags {{/repeater_name}}. The content between the opening and closing tags will be repeated for each row.

Example:

{{team_members}}
  <div>{name} - {position}</div>
{{/team_members}}

How do I use conditionals?

Use the {{#if}}...{{/if}} syntax. You can check if a field exists, equals a value, or doesn’t equal a value:

{{#if field}}
  Content if field exists and is not empty
{{/if}}

{{#if status = active}}
  Content if status equals "active"
{{/if}}

{{#if status != draft}}
  Content if status is not "draft"
{{/if}}

{{#if featured}}
  Featured content
{{#elseif popular}}
  Popular content
{{#else}}
  Regular content
{{/if}}

How do I display image galleries?

Gallery fields work the same as repeaters. Use {{gallery_field}} with image sub-fields like {url}, {alt}, {caption} to loop through all images.

Example:

{{gallery}}
  <img src="{url}" alt="{alt}" />
{{/gallery}}

What types of ACF fields are supported?

The block supports:

Simple fields: text, textarea, number, email, url, wysiwyg, etc.
Group fields: access sub-fields using colon notation {group:subfield}
Repeater fields: loop through rows with {{repeater}}...{{/repeater}}
Gallery fields: loop through images (exposes {url}, {alt}, {caption}, {width}, {height}, etc.)
Image fields: automatically extracts the URL
Link fields: extracts url, title, and target
True/False fields: use with conditionals for show/hide logic

Do I need Advanced Custom Fields installed?

Yes, this block requires Advanced Custom Fields (free or PRO version) to be installed and activated. Without ACF, the block will display a message asking you to install it.

Can I use HTML tags?

Yes! You can use any HTML markup along with your ACF field tags. The block preserves your HTML structure while replacing the field tags with actual values. All HTML is sanitized using WordPress security functions.

Can I nest repeaters or conditionals?

Currently, nested repeaters and nested conditionals are not supported. However, you can use repeaters and conditionals at the same level and combine them with group fields for complex layouts.

Does this work with ACF PRO features?

Yes, the block works with both ACF free and PRO versions. It supports all standard field types including those exclusive to PRO like repeaters, flexible content (as repeaters), and gallery fields.

Where can I get support?

For support, please visit the plugin’s support forum on WordPress.org or contact AgilePress directly.

Reviews

Changelog

1.1.0

Enhanced conditional syntax documentation
Improved syntax guide clarity in the editor
Updated documentation for if/elseif/else structure
Minor bug fixes and improvements

1.0.0

Initial public release
Support for simple ACF field tags using {field_name} syntax
Support for group fields using {group:subfield} syntax
Support for repeater and gallery loops using {{field}}...{{/field}} syntax
Support for conditional blocks using {{#if}}...{{/if}} syntax
Conditional comparisons with = and != operators
Support for {{#elseif}} and {{#else}} in conditionals
HTML content editor with comprehensive syntax guide
Real-time preview in the editor with syntax highlighting
Security: All output properly escaped following WordPress standards
Compatibility: Works with ACF free and PRO versions
Tested with WordPress 6.8 and PHP 8.x