Create entire content block in Advanced Custom Fields - php

Question

I am new to ACF and am trying to understand how to create entire sections of content.
I can't seem to find any answers to this, though I am perhaps not phrasing the question correctly because of my limited understanding.
I have created my first website using ACF and Gutenberg where I have a separate php template for each block of content, which is then registered as a Gutenberg block. This works perfectly in that the content blocks can contain entire blocks of html/php and are always available but only appear on the page when they are chosen, making it very user friendly.
What I am struggling to understand is how you can insert an entire section WITHOUT Gutenberg - say using a shortcode.
At the moment if I have a structure like so:
<section class="reusable-block">
<div class="title-box">
<?php if( get_field('main_heading') ): ?>
<h1 class="hero-heading"><?php the_field('main_heading'); ?></h1>
<?php endif; ?>
</div>
</section>
If I use the shortcode [acf field="main_heading"] It will obviously output the contents of that field but how do I enter a shortcode that would enter the entire section on a needs basis across any page?
If I hard code it into the page template then the fields are always visible on the WordPress backend page, regardless fo wether they are being used, though if that's the way it has to be then I'll work with.
Unfortunately I need to use ACF with a page builder for a current project (I do not have a choice on this). This is the reason I cannot use Gutenberg and register blocks and will need to use shortcodes.
In short, is there a way to create an entire ACF block that would then contain html and acf fields, and even better that could be built in a separate PHP file as you would when using this in conjunction with Gutenberg.
I have watched about 3 courses online and read lots of resources, but this one thing still seems to allude me.

Answer 1

You already mentioned one possibility yourself: creating a custom shortcode for this.
Therefore, you either need to create a new plugin, or, append this to your (child) theme's functions.php:
function shortcodeHeadingBlock($attr, $content = null) {
if (! class_exists('ACF') ) { // will not work without ACF
return '';
}
$opts = shortcode_atts([
'field' => 'main_heading',
], $attr);
ob_start();
?>
<section class="reusable-block">
<div class="title-box">
<?php if( get_field($opts['field']) ): ?>
<h1 class="hero-heading"><?php the_field($opts['field']); ?></h1>
<?php endif; ?>
</div>
</section>
<?php
return ob_get_clean();
}
function setupShortcodes() {
add_shortcode('headingblock', 'shortcodeHeadingBlock');
}
add_action('plugins_loaded', 'setupShortcodes');
After this, you can use the shortcode
[headingblock]
anywhere across your page where shortcodes are interpreted. The shortcode first checks if the ACF-class is available which implies that the ACF functions should be available, too.
The shortcode also has an optional field attribute that defaults to 'main_heading', meaning you can also do
[headingblock field="another_acf_field_name"].
It then returns your code template and inserts the desired ACF field.
Just in case your .title-box CSS isn't available in the admin interface, you might have to enqueue it separately using the admin_enqueue_scripts hook. Regarding CSS, you will also have to make sure the full selector for .title-box doesn't contain additional classes/objects that might no longer apply when the shortcode places it into other places on the page.