Feature request: Split the JS/CSS of flexible content field

Hello!

Thanks for the suggestion! I understand why you want to split static files, however, I would like to avoid to clutter the ACF UI with too much fields & settings to flexible content & layouts.

But don’t worry, there’s solutions already available!

You can use the following hooks in order to override script/style/template files when in preview mode. This way, you can set your front-end files in the ACF administration, and add some PHP to override it for the preview mode.

This hook will manually override the script file for my_layout:

add_filter('acfe/flexible/layout/render/script/layout=my_layout', 'acf_flexible_layout_render_script', 10, 4);
function acf_flexible_layout_render_script($script, $field, $layout, $is_preview){

    // Ajax preview
    if($is_preview)
        $script = get_stylesheet_directory_uri() . '/layouts/my-layout/script-preview.js';
        
    return $script;
    
}

Note that you can do the same for style & template files, check the FAQ “How to change the Flexible Content: Layout Render Paths in PHP?”

Here is the a hook that will automatically add -preview to all your scripts files set in the ACF administration, for all layouts of the flexible content my_flexible:

add_filter('acfe/flexible/render/script/name=my_flexible', 'acf_flexible_layout_render_script', 10, 4);
function acf_flexible_layout_render_script($script, $field, $layout, $is_preview){
    
    // Preview check
    if(!$is_preview)
        return $script;
    
    // Script file not set in the ACF administration, return to default
    if(strpos($script, '.js') === false)
        return $script;
    
    $path = explode('.js', $script);
    
    // Add '-preview.js' to the file
    $script = $path[0] . '-preview.js';
    
    return $script;

}

This way you can set /layouts/my-layout/script.js in the administration, and it will automatically append -preview when preview mode is being loaded ??

Hope it helps!

Regards.

Oh that gave me an idea! I can automatically use the script/style/template files (if they are set via the administration), and try to find the same file ending with -preview.

If such file is found, then ACF Extended will use it in preview mode! This way everything is automatic, and you don’t have to add extra code to your theme!

I write down the idea and will add it to the plugin ??

Regards.

Yeah that is exactly what i meant ??
Again, thanks for the fast reply ??