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.
