How to Build a Gutenberg Block That Shows ACF Fields

Advanced Custom Fields is often where the real data of a site lives: a product’s specs, an event’s date and venue, a team member’s role. The block editor, on the other hand, is where pages are designed. This tutorial connects the two: a Gutenberg block that displays ACF fields of the current post, and hides itself when a field is empty.

First: post fields or block fields?

There are two kinds of data, and mixing them up causes most of the confusion:

• Post fields (ACF field groups on a post type) belong to the post. An “Event” has one date, whatever template shows it.
• Block fields (block attributes) belong to one instance of a block. Two testimonial blocks on the same page have two different quotes.

If the data describes the post (price, date, specs), keep it in ACF and let the block read it. If it only makes sense inside that one block, make it a block attribute.

Step 1: the ACF fields

Create a field group, for example “Event details”, with:

• event_date (Date Picker)
• event_venue (Text)
• event_link (URL)

Assign it to your post type (for example Posts or a custom “Events” type). ACF’s free version is enough for these field types.

Step 2: the block

With FanCoolo WP, create a new block called “Event details”. You don’t need block attributes for this one, because the data comes from the post. In the Content tab, read the fields with ACF’s get_field():

<?php
$post_id = get_the_ID();
$date    = function_exists( 'get_field' ) ? get_field( 'event_date', $post_id ) : '';
$venue   = function_exists( 'get_field' ) ? get_field( 'event_venue', $post_id ) : '';
$link    = function_exists( 'get_field' ) ? get_field( 'event_link', $post_id ) : '';

// Render nothing when the post has no event data.
if ( ! $date && ! $venue ) {
    return;
}
?>
<div <?php echo get_block_wrapper_attributes( [ 'class' => 'event-details' ] ); ?>>
  <?php if ( $date ) : ?><p class="event-details__date"><?php echo esc_html( $date ); ?></p><?php endif; ?>
  <?php if ( $venue ) : ?><p class="event-details__venue"><?php echo esc_html( $venue ); ?></p><?php endif; ?>
  <?php if ( $link ) : ?><a class="event-details__link" href="<?php echo esc_url( $link ); ?>">Get tickets</a><?php endif; ?>
</div>

The function_exists() check keeps the page working even if ACF is ever deactivated. Everything is escaped (esc_html, esc_url) because it’s printed into HTML.

Step 3: use it in a template

Because the block reads from the current post, the natural place for it is a template, not a single page. In a block theme go to Appearance → Editor → Templates → Single (or your custom post type’s template) and insert the “Event details” block where the details should appear. Every event now shows its own data, and posts without event data show nothing.

FanCoolo also includes an Extra Field block for this kind of template work: it shows a live preview in the Site Editor and skips rendering when the field is empty.

Step 4: style it

Add SCSS in the block’s Style tab. It’s loaded in the editor and on the front end, so the template preview matches the live site.

Mixing both kinds of data

Blocks can combine the two: read the event data from ACF, and add a block attribute such as “Show ticket button” (a toggle) so editors decide per template. In FanCoolo, add the toggle in the Attributes tab and read it with $attributes['showTicketButton'] next to your get_field() calls.