Dynamic render: dequeue load-style & acfe-admin.min.css

Hello,

Thanks for the feedback!

Unfortunately it is not possible to enqueue/dequeue stylesheets for specific parts of an HTML page.

Stylesheets are always applied to the whole page, and since Dynamic Preview is rendered directly in the page, any HTML elements from your Layout PHP will inherit from the page stylesheets.

You could try dequeue WP / ACFE CSS files in the admin, but you’ll end-up with broken Admin UI, since these files contain CSS rules for the page.

For example, any element with the class .card will inherit css properties from /wp-admin/css/forms.css:

.card {
position: relative;
margin-top: 20px;
padding: 0.7em 2em 1em;
min-width: 255px;
max-width: 520px;
border: 1px solid #c3c4c7;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04);
background: #fff;
box-sizing: border-box;
}

To avoid that issue you could add some CSS reset rules for your layouts. But that would require to chase each potential CSS rules added by WP.

The other solution would be to make sure that you prefix all your elements class with a unique namespace, for example .sababaa-card.

For the <h2> element, unfortunately WordPress add some strong rule, using an id in /wp-admin/css/edit.css:

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

So you’ll have to either reset it using an !important declaration, or use your own id, or the id defined by ACF in the metabox: <div id="acf-group_63ca7cb29e9d0" class="postbox acf-postbox"> to overwrite the rule. Example:

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

// or:

#acf-group_63ca7cb29e9d0 -.preview h2{
    font-size: 18px;
    // reset h2 in preview
}

Hope it helps!

Have a nice day!

Regards.

Hello,

Thank you for your time!

You confirm my fears, I thought the CSS preview was “outside” the admin CSS. I will not check every class for every preview block i will create.

I will find others solutions, it’s ok!

Regards

Hello,

An another possible workaround: you could render an <iframe> with the srcdoc attribute (see documentation) to pass your layout content of your layout.php file, when in preview mode.

The iframe will isolate the HTML render from the rest of the admin page, and fix any inherited CSS rules from the admin page. Just make sure to correctly generate the layouts/flexible content css files & script with <link rel="stylesheet"> and <script src=""> within the iframe content too.

You could achieve that automatically using the acfe/flexible/render/before_template and acfe/flexible/render/after_template (see documentation).

Kinda hacky, but it works. Here is a video demo of the proof of concept.

Code used:

add_action('acfe/flexible/render/before_template/name=flexible_content', 'my_fc_before_template', 10, 3);
function my_fc_before_template($field, $layout, $is_preview){
    
    // only in preview mode
    if($is_preview){
        ob_start();
    }
    
}

add_action('acfe/flexible/render/after_template/name=flexible_content', 'my_fc_after_template', 10, 3);
function my_fc_after_template($field, $layout, $is_preview){
    
    // only in preview mode
    if($is_preview){
        
        // vars
        $enqueue = '';
        $html = ob_get_clean(); // retrive the html buffer started in 'before_template'
        
        // get style path from layout settings
        $style_file = acf_maybe_get($layout, 'acfe_flexible_render_style');
        
        if(!empty($style_file)){
            
            $style_file = acfe_locate_file_url($style_file);
            $enqueue .= '<link rel="stylesheet" href="' . $style_file . '" />';
            
        }
        
        // get script path from layout settings
        $script_file = acf_maybe_get($layout, 'acfe_flexible_render_script');
        if(!empty($script_file)){
            
            $script_file = acfe_locate_file_url($script_file);
            $enqueue .= '<script src="' . $script_file . '"></script>';
            
        }
        
        // generate iframe html
        $iframe_html = htmlentities($enqueue . $html);
        
        ?><iframe srcdoc="<?php echo $iframe_html; ?>"onload="this.style.height=(this.contentWindow.document.body.scrollHeight+20)+'px';" style="width: 100%; border: 0; margin: 0; padding: 0;"></iframe><?php
        
    }
    
}

Have a nice day!

Regards.

Hello,

Amazing hack that isolate the css, i will test it.

I heard about shadow DOM too to isolate like iframe maybe it’s will give you ideas.

Regards.