Creating ACF blocks with a plugin does not find the render_template

• joakimpau

• November 6, 2019 at 8:37 am

Hi there everyone.

I have been using ACF for a very long time now, and now I wanted to create a plugin for myself that uses all the blocks I normaly create from scratch all the time.

I have been creating blocks in the theme, and that is working excelent.
But now that I’m creating a plugin, I’m having some issues on the “render_template” part.

In my plugin root folder, I have the root php file for my core stuff.
In this Php file I “require” my acf-blocks php file where I create all my blocks.

@require "blocks/gw-blocks.php";

In my acf-blocks.php file I use this code:

function register_acf_block_types() {

	// Register content block
	acf_register_block_type(array(
		'name'				=> 'testimonial',
		'title'				=> __('Clean Testimonial'),
		'description'		=> __('A testimonial displaying an image and person information'),
		'render_template'	=> 'block/testimonial.php',
		'category'			=> 'formatting',
		'icon'				=> 'media-text',
		'keywords'			=> array( 'text', 'content', 'image', 'testimonial' ),
	));
}

if( function_exists( 'acf_register_block_type' ) ) {
	add_action( 'acf/init', 'register_acf_block_types' );
}

render_template here is looking for the folder blocks and the file testimonial.php inside that. My testimonial.php is in the same folder as acf-blocks.php that creates the blocks.

But when I require from the root php file, then I have to assume that the blocks are created on root, and therefor has to target the folder first and then the blocks.

This is my folder setup:

PLUGIN NAME
**Blocks
**** testimonial.php
**** acf-blocks.php
**CSS
**JS
**inc
*acf-blocks-plugin.php

** = Folder
**** = files inside folder
* root files

I have tried to use these as render template:

"block/testimonial.php"
"testimonial.php"
"/block/testimonial.php"
"plugin_dir_path( __FILE__ ) . "block/testimonial.php"
"plugin_dir_path( __FILE__ ) . "/block/testimonial.php"

None of these are working.
I can select the block on the page without any problem, but there is just not anything showing. Not even my placeholder test on the fields.

This is my testimonial.php file:

<?php

/**
 * Testimonial block
 */

$id = 'gweb-testimonial-' . $block['id'];
if( !empty($block['anchor']) ) {
	$id = $block['anchor'];
}

// Create class attribute allowing for custom "ClassName" and "align" values.
$className = 'gweb-testimonial';
if( !empty($block['className']) ) {
	$className .= ' ' . $block['className'];
}

if( !empty($block['align']) ) {
	$className .= ' align' . $block['align'];
}

// Load values and assign defaults

$name			= get_field('name') ?: "Name of the person...";
$title			= get_field('title') ?: "Title of the person...";
$email			= get_field('email') ?: "Person's Email";
$areaCode		= get_field('area_code') ?: "00";
$phoneNumber	= get_field('phone_number') ?: "999 9999 999";
$person			= get_field('person');
$background		= get_field('background_color');
$leftRight		= get_field('left_or_right');

?>

<div class="<?php echo esc_attr($className); ?>" id="<?php echo esc_attr($id); ?>" style="background-color: #<?php echo $background; ?>">

	<?php if($leftRight === 'left') : ?>
		<img src="<?php echo $person; ?>" alt="">
	<?php endif; ?>

		<div class="person">
			<h2><?php echo $name; ?></h2>
			<h4><?php echo $title; ?></h4>

			<div class="contact_info">
				<a href="mailto: <?php echo $email; ?>"><?php echo $email; ?></a>
				<a href="tel: +<?php echo $areaCode; ?> <?php echo $phoneNumber; ?>">+<?php echo $areaCode . " " . $phoneNumber; ?></a>
			</div>
		</div>

	<?php if($leftRight === 'right') : ?>
		<img src="<?php echo $person; ?>" alt="">
	<?php endif; ?>

</div>

So I would realy appreciate any help I can get on this matter so that I can start using my plugin to get the work load a little lighter in the future.

And yes, I have ACF Pro

Best Regars
– JP

• joakimpau

• November 9, 2019 at 6:23 am

Nobody? I still have not found the answer anywhere to what may cause this.
I have checked the path, and the path is correct.

• Mark Howells-Mead

• March 21, 2020 at 2:21 am

I have a possibly related issue: if I use acf_register_block_type on the acf/init hook, the block doesn’t render in the frontend. If I use the init hook, it works. This appears to be a new problem, as my code was working fine in December.

• philby

• March 21, 2020 at 7:21 am

Not sure if this is helpful, but here’s a setup I’ve been using:
*acf-blocks-plugin.php
**blocs/blockname/blockname.php
**blocs/blockname/blockname_template.php
**blocs/blockname/blockname_style.css

In *acf-blocks-plugin.php I’m calling

// Get plugin Path directory
if ( !defined( 'FP_PLUGIN_PATH' ) ) {
    define( 'FP_PLUGIN_PATH', plugin_dir_path( __FILE__ ) );
}
if ( !defined( 'FP_PLUGIN_URI' ) ) {
    define( 'FP_PLUGIN_URI', plugin_dir_url( __FILE__ ) );
}

and then

add_action('acf/init', 'fp_acf_init');
function fp_acf_init() {

	// check function exists
	if( function_exists('acf_register_block_type') ) {

		// register the Product Select block
        include( FP_PLUGIN_PATH . 'blocks/prodselect/prodselect-block.php');

		// register the Product Image Select block --> Images with lightbox
        include( FP_PLUGIN_PATH . 'blocks/prodimage/prodimage-block.php');

Inside a **blocs/blockname/blockname.php there’s the usual ACF block code

// register the products filter block
acf_register_block_type(array(
	'name'				=> 'fp_blocklink',
(…)
	'post_types' 		=> array( 'post', 'page', 'fp_produkt'  ),
	'render_template'   => FP_PLUGIN_PATH . '/blocks/blocklink/blocklink-template.php',
    'enqueue_style'     => FP_PLUGIN_URI . 'blocks/blocklink/blocklink-style.css',
));

I’m not really sure the enqueue_style makes much sense, TBH, but the rest seems to be working OK so far.

• tnchuntic

• July 2, 2020 at 12:19 am

Thanks @philby for the solution :). I can confirmed that code is working.

Register code below:

// register pricing table
acf_register_block_type(array(
               ...
               ...
               'render_template' => plugin_dir_path(__FILE__) . '/template-parts/blocks/pricing-table/pricing-table.php',
               ...
               ...
));

• jave.web

• September 1, 2023 at 4:13 am

acf_register_block_type says “(String) The path to a template file used to render the block HTML. This can either be a relative path to a file within the active theme or a full path to any file.” – so you were probably referencing a file in theme, not in your plugin by accident 🙂

However if you use the block.json for the registering config as was recommended later, there’s this: renderTemplate (string) The path to a template file used to render the block HTML. This can either be a relative path to a file based on where your block.json file is located, or an absolute path.

So either way, an absolute path in PHP should always work, because you leave no room for magic, however I recommend using the block.json in a similar way as WP does to be consistent – however **keep in mind** renderTemplate does NOT contain the ‘file:’ prefix! (like WP render’s does) so instead of

`
“renderTemplate”: “file:./render.php” // as you would do in WP render: …
`

you have to do

`
“renderTemplate”: “render.php”
`

and this file would be placed in the SAME directory as the block.json, so if block.json is in .../wp-content/themes/yourtheme/blocks/your-block/block.json, then the rendering file will be in .../wp-content/themes/yourtheme/blocks/your-block/render.php

In .../wp-content/themes/yourtheme/functions.php you would register such block just with this:

`
add_action(‘init’, function () {
register_block_type( __DIR__ . ‘/blocks/your-block’ );
// or if you want to be more specific, then
// register_block_type( __DIR__ . ‘/blocks/your-block/block.json’ );
});
`

PHP note: __DIR__ is a special constant referencing AN ABSOLUTE PATH to the folder of the current code’s file (of the __FILE__). So for /system/wp-content/themes/yourtheme/functions.php it’s /system/wp-content/themes/yourtheme – this has been available since 5.3…

If you don’t know how to setup block.json – see Create Your First ACF Block – Registering Blocks with block.json