Changing the Template Path to a Plugin for ACF Extended Block Types UI

ACF Extended give us a Block Types UI for creating custom Gutenberg blocks with ACF, making it easier than writing all the code out ourselves. The problem is, it wants us to store the templates files, the styles & scripts inside a theme.

Although the description says that the URL for render template can be either relative path or a full path to any file, the theme directory is used by default. We need to change this so we can use a custom plugin to be used with Oxygen sites.

I was in contact with the developers and they have put in the feature request to include a filter for changing this, so Oxygen users can then store the files for the blocks inside a custom plugin. When that happens, this post will be updated with information on how to use the filter inside a plugin, until then there is another way..

Update: a filter was included, but only to change the field display setting, we still need to manually add the path to our custom plugin into the UI.

So there are now two steps..

1. Update the field setting display, so we’re no longer seeing the theme in the block type UI.
2. Enter the path to our template files from the plugin directory into the UI

Updating the field setting display

Inside our custom plugin, we can use the acfe prepend filters to just prepend with the content_url.

// Prepend the template paths to wp-content instead of the theme
add_filter( 'acfe/block_type/prepend/template', 'my_acfe_template_path' );
add_filter( 'acfe/block_type/prepend/style', 'my_acfe_template_path' );
add_filter( 'acfe/block_type/prepend/script', 'my_acfe_template_path' );
function my_acfe_template_path($prepend) {
    
    // path to /wp-content/
    $prepend = content_url() . '/';
    
    return $prepend;
    
}

This will visibily change the path inside the UI, so it no longer includes the theme.

Now we can add our plugin directory into the UI for the render and the same for enqueuing CSS files or JS.

All done.