Using ACF Extended with Roots Sage

My normal toolset for WordPress development is Roots Bedrock (makes a WordPress friendly composer setup), Roots Sage (a wonderful starter theme with MVC in mind), and Advanced Custom Fields. Recently, our agency thought we’d try out ACF Extended. I was super excited to try out the flexible content field dynamic render function.

The dynamic render functionality is designed with turning each flexible content block into a component with its own files (js, scss, blade). Most of us who have been flexible content fields may have been employing that strategy already. With a few bits of code, and a decision on how you intend to layout the files, enabling dynamic render is rather easy.

First, decide where you will keep your blade files and scss files. If you intend to isolate your js, then decide this as well. I chose to store my blocks in resources/views/partials/flexible-fields/. I store my scss files in resources/assets/styles/layoutes/builder-fields/.

Here is the code to add to your filters/helpers file. Our agency has a special app file for ACF related filters and hooks.

add_filter('acfe/flexible/render/template', function ($acfe_flexible_render_template, $field, $layout, $is_preview) {
    return get_stylesheet_directory() . '/../index.php';
}, 10, 4);

add_action('acfe/flexible/render/before_template', function ($field, $layout, $is_preview) {
    $values = [];

    foreach ($layout['sub_fields'] as $field) {
        $values[ $field['name'] ] = get_sub_field($field['name']);
    }

    echo template('partials.flexible-fields.' . str_replace('_', '-', $layout['name']), $values);
}, 10, 3);

I’ll be updating this article as I keep using it. For now it is really for my reference.