Dynamic Preview

  • Resolved codinit

    (@codinit)


    3 months, 4 weeks ago

    Hello everyone,

    thank you very much for the great plugin! Unfortunately I still have difficulties with the Dynamic Preview:

    In addition to the styles of the individual layouts, I use a main.css, which contains general styles for e.g. font sizes, fonts etc.. I have integrated this main.css as follows:

    add_action('acfe/flexible/enqueue/name=content', 'my_acf_flexible_enqueue', 20, 2);
    function my_acf_flexible_enqueue($field, $is_preview){
        wp_enqueue_style('main-styles', get_stylesheet_directory_uri() . '/assets/css/main.css');
    }

    However, these font sizes are now overwritten by load-styles.php, so that the preview looks very different from the actual frontend. For example, this is what the overwriting from the load-styles.php of my h2 looks like:

    #poststuff .stuffbox>h3, #poststuff h2, #poststuff h3.hndle {
      font-size: 14px;
      padding: 8px 12px;
      margin: 0;
      line-height: 1.4;
    }

    How can I configure the Dynamic Preview as accurately as possible without WordPress default styles overwriting my styles? Do I have to specifically dequeue WP styles?

    Many thanks in advance and best regards

    Lukas

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

    (@hwk-fr)

    Hello,

    Thanks for the feedback!

    I’m glad to hear you enjoy ACF Extended! ??

    Unfortunately, there is no ideal solution for the WP Admin CSS compatibility with the Flexible Content. As you pointed out, the most common issue come from the #poststuff h2 css rule added by WP which is too broad. As far as I can tell, it’s the only rule that really mess with generic tags.

    I wouldn’t recommend to dequeue wp css files tho, as it might have unwanted side effects. The solution right now is to add a special rule for the preview mode to override, and reset, the h2 to your convenience like this:

    -.preview h2{
        font-size: 18px !important;
        // reset h2 in preview
    }

    Note that you can also enqueue a different stylesheet specifically for the preview mode to reset it, using the $is_preview argument provided in your acfe/flexible/enqueue/name=content hook.

    In the future, there will a feature to enable an “isolated mode” for the Preview Mode, which will embed the preview inside an iframe, and get rid of any intrusive CSS rules.

    You’ll find another thread discussing this topic here, with more technical details. It also include some proof of concept implementation for the “iframe mode”, if you want to try it.

    Hope it helps!

    Have a nice day!

    Regards.

    Thread Starter codinit

    (@codinit)

    Thank you very much! I implemented your iframe-Snippet and it works great.

    Plugin Author Konrad Chmielewski

    (@hwk-fr)

    Awesome!

    Have a nice day!

    Regards.

Viewing 3 replies - 1 through 3 (of 3 total)
  • You must be logged in to reply to this topic.