Flexible Content Dynamic Preview – Change Style Render Path

  • Resolved rose18

    (@rose18)


    3 years ago

    Hello,

    I am using the Dynamic Preview and would like to change the style Render Path.
    I did follow this article (https://www.acf-extended.com/features/fields/flexible-content/dynamic-render). It sort of works in loading the correct css file, but it’s loading 4 times (screenshot https://snipboard.io/lgziKs.jpg). It’s basically loading the same css file for each flexible layout.

    Right now, all of my ACF flexible content layout CSS styles are compiled into a single css file called ‘admin-only-acfe.css’. I placed this code in my functions.php file:

    add_filter('acfe/flexible/render/style', 'sp_acf_layout_style', 10, 4);
function sp_acf_layout_style($file, $field, $layout, $is_preview){
    $file = get_stylesheet_directory() . '/assets/admin-only-acfe.css';
    return $file;
}

    Is there a way to load that css file ‘admin-only-acfe.css’ once, since all the flexible layout styles are in that file, instead of loading it for each layout?

    Thank you!

Viewing 5 replies - 1 through 5 (of 5 total)
  • Plugin Author Konrad Chmielewski

    (@hwk-fr)

    Hello,

    Thanks for the feedback!

    Each layouts stylesheets files should be unique, because those files are enqueued using a unique handle generated using the layout name. As you can see on your screenshot, each handles are unique, this is why it is included multiple times even if the file is the same.

    In your case, if you have a unique CSS file and want to include it only once, you should not use the “CSS Style” file path in the layouts settings, and enqueue your file using the acfe/flexible/enqueue hook. See documentation. Usage example:

    add_action('acfe/flexible/enqueue/name=my_flexible', 'my_acf_flexible_enqueue', 10, 3);
function my_acf_flexible_enqueue($field, $layout, $is_preview){

    wp_enqueue_style('my-style', get_stylesheet_directory_uri() . '/assets/my-style.css');

}

    Hope it helps!

    Have a nice day!

    Regards.

    Thread Starter rose18

    (@rose18)

    Thank!
    I did try using that method, but I am getting a fatal error on the page editor.
    Please find it below.

    Fatal error: Uncaught ArgumentCountError: Too few arguments to function sp_acfe_flexible_enqueue(), 2 passed in /XXXX/site/wp-includes/class-wp-hook.php on line 303 and exactly 3 expected in /XXXX/site/wp-content/mu-plugins/modified_vendor_hooks.php:105 Stack trace: #0 /XXXX/site/wp-includes/class-wp-hook.php(303): sp_acfe_flexible_enqueue(Array, true) #1 //XXXX/site/wp-includes/class-wp-hook.php(327): WP_Hook->apply_filters('', Array) #2 /XXXX/site/wp-includes/plugin.php(470): WP_Hook->do_action(Array) #3 /XXXX/site/wp-content/plugins/acf-extended/includes/fields/field-flexible-content-preview.php(227): do_action('acfe/flexible/e...', Array, true) #4 /XXXX/site/wp-includes/class-wp-hook.php(303): acfe_field_flexible_content_preview->render_field(A in /XXXX/site/wp-content/mu-plugins/modified_vendor_hooks.php on line 105

    This is the code that I am using:

    function sp_acfe_flexible_enqueue($field, $layout, $is_preview){
          wp_enqueue_style('sp-acfe-block-style', get_stylesheet_directory_uri() . '/assets/admin-acfe-blocks.css');
    
}

    Thanks!

    Plugin Author Konrad Chmielewski

    (@hwk-fr)

    Hello,

    The error “Too few arguments to function …, 2 passed in…” means there is a problem in hooks arguments number.

    Sorry there is a mistake in the documentation. When using that hook to target the whole Flexible Content, there are only 2 arguments:

    add_action('acfe/flexible/enqueue/name=my_flexible', 'my_acf_flexible_enqueue', 10, 2);
function my_acf_flexible_enqueue($field, $is_preview){

    wp_enqueue_style('my-style', get_stylesheet_directory_uri() . '/assets/my-style.css');

}

    See the 10, 2 in the hook, and the $field, $is_preview arguments in the function.

    You have access to the third $layout argument only when targeting a specific layout in a Flexible Content. Example:

    add_action('acfe/flexible/enqueue/layout=my_layout', 'my_acf_layout_enqueue', 10, 3);
function my_acf_layout_enqueue($field, $layout, $is_preview){

    wp_enqueue_style('my-style', get_stylesheet_directory_uri() . '/assets/my-style.css');

}

    In your case you should use the first example. I just updated the documentation to fix it, thanks for the report!

    Regards.

    Thread Starter rose18

    (@rose18)

    Thank you! It works now!

    Plugin Author Konrad Chmielewski

    (@hwk-fr)

    I’m glad to hear it!

    Have a nice day!

    Regards.

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Flexible Content Dynamic Preview – Change Style Render Path’ is closed to new replies.