Flexible Content Dynamic Preview

Hello @robswebdev,

The problem is that the WordPress administration already have many CSS rules for various elements (including fonts, text, titles…). For example, the following rule is applied to all h2 & h3 in the admin:

h2, h3 {
    color: #23282d;
    font-size: 1.3em;
    margin: 1em 0;
}

To avoid this behavior, you can enqueue a specific CSS file to reset the CSS inside your template (targetting a specific CSS class).

In your layout template, if the main container <div> has the class .is-preview, then you can enqueue a CSS file that reset everything inside .is-preview. You can read more about CSS reset here and here.

To learn how to add is-preview class to your template, please read the following tutorial (you’ll also find a CSS style example that target .is-preview class).

To enqueue a specific CSS file on the administration/preview mode, use the following hook:

// add_action('acfe/flexible/enqueue/name=my_flexible', 'acf_flexible_enqueue', 10, 2);
// add_action('acfe/flexible/enqueue/key=field_xxxxxx', 'acf_flexible_enqueue', 10, 2);

add_action('acfe/flexible/enqueue', 'acf_flexible_enqueue', 10, 2);
function acf_flexible_enqueue($field, $is_preview){

    // Only in Ajax preview
    if($is_preview){

        wp_enqueue_style('my-style-preview', 'https://www.example.com/style-preview.css');

    }

}

Hope it helps!

Have a nice day ??

Regards.

This is working for me by just adding the is-preview class. Thanks for the help. I wonder does this also work with blocks preview as well?? Is there a different class for this?

Thanks, Rob

Hello,

I’m glad to hear that! Yeah, there’s the same problem on Gutenberg Blocks. For example, the default font-family in Gutenberg preview is “serif”:

.editor-styles-wrapper {
    font-family: 'Noto Serif';
}

Here is the official ACF tutorial to add class in the preview. Note that you have to check the same variable $is_preview in the template render, I chose same the same name on purpose.

By the way, If you enjoy this plugin, feel free to add a review, it always helps ??

Have a nice day!

Regards.