ACF custom block get_field() shows null on front-end? - php

Question

I built a custom block using ACF acf_register_block_type(); function
it works fine in the WordPress dashboard (block editor), it shows the field data and all good..
but in the front-end (view page) the fields are NULL
any help on how to display field data in the front-end??
functions.php code:
add_action('acf/init', 'my_acf_init_block_types');
function my_acf_init_block_types()
{
// Check function exists.
if (function_exists('acf_register_block_type')) {
// register a hero block.
acf_register_block_type(array(
'name' => 'banner',
'title' => __('Banner'),
'description' => __('A custom hero block.'),
'render_callback' => 'my_acf_block_render_callback',
'category' => 'home-sections',
'icon' => 'cover-image',
'keywords' => array('basic', 'banner')
));
}
}
function my_acf_block_render_callback($block)
{
// convert name ("acf/hero") into path friendly slug ("hero")
$slug = str_replace('acf/', '', $block['name']);
// include a template part from within the "template-parts/block" folder
if (file_exists(get_theme_file_path("/template-parts/blocks/content-{$slug}.php"))) {
include(get_theme_file_path("/template-parts/blocks/content-{$slug}.php"));
}
}
function wpdocs_mytheme_block_styles()
{
wp_enqueue_style('admin-css', get_stylesheet_directory_uri() . '/build/css/styles.min.css', '', '0.0.3');
wp_enqueue_script('admin-js', get_template_directory_uri() . '/build/js/scripts.min.js', array('jquery'), '0.0.3', true);
}
add_action('enqueue_block_editor_assets', 'wpdocs_mytheme_block_styles')
banner.php code:
<?php
$title = get_field('main_title');
$img = get_field('background_image');
$button = get_field('button');
?>
<section id="banner-section" style=" background-image:linear-gradient( rgba(67, 74, 122, 0.5), rgba(67, 74, 122, 0.5) ), url('<?= $img['url']; ?>');">
<div class="container">
<div class="row justify-content-center">
<div class="col-12 col-lg-10 text-center">
<h1 class="basic-slider-heading"> <?php echo $title ?> </h1>
<?php
if ($button) :
$button_url = $button['url'];
$button_title = $button['title'];
$button_target = $button['target'] ? $button['target'] : '_self';
?>
<button class="btn btn-shadow-malibu btn-bg-malibu-gradient bg-malibu-accent">
<?= $button_title ?>
</button>
<?php endif; ?>
</div>
</div>
</div>
</section>
var_dump( get_field('main_title'));
Note: I'm using WordPress v5.7.2 and ACF PRO v5.9.8

Answer 1

This is the documentation of get_field: https://www.advancedcustomfields.com/resources/get_field/
Note that there is an optional second parameter
$post_id (mixed) (Optional) The post ID where the value is saved. Defaults to the current post.
So, if your function works at a place and not at the other, then there are environmental differences between the two pages. It is possible that on the UI no post is being technically selected, in which case you need to pass the id of the post whose field you intend to get.