Dynamic Render IframePRO

#Dynamic Preview Iframe

Render Flexible Content Layout Previews in isolated iframes, preventing the WP Admin styles to conflict with layouts CSS/JS. This effectively turns layouts into isolated components which greatly helps integration.

Additionally, it makes previews compatible with responsive @media css queries. To help you with this task, new responsive icons allow to change the container size on-the-fly, which also includes a “distraction-free” mode.

#Feature Usage

To enable the Dynamic Preview Iframe, you must first enable the “Advanced Flexible Content” switch and then the “Dynamic Render & Preview” features in the Flexible Content field settings.

#Hooks Compatibility

The Dynamic Preview Iframe is compatible with all Dynamic Render hooks out-of-the box. Which means the iframe will automatically output the Layout PHP template set in the Flexible Content UI, or returned with the acfe/flexible/render/template filter (see documentation).

The same logic is applied to the layouts stylsheets and scripts files. If you need to enqueue additional styles/scripts files, please use the acfe/flexible/enqueue action (see documentation).

Note: Since iframes are isolated from the rest of the page, it means jQuery is not available in iframes by default. If you need to use it, make sure to add jquery as a dependency of your wp_enqueue_script() (see documentation).

#Responsive View

To enable the Responsive Icons feature, you must first enable the “Dynamic Preview Iframe” in the Field settings.

You can customize the responsive icons to fit your project’s needs using the acfe/flexible/responsive filter. It is possible to edit or add as many screens/icons as you wish.

Usage example:

/**
 * @array  $responsive  The responsive configuration
 * @array  $field       Field settings
 */
filter('acfe/flexible/responsive',                         $responsive, $field);
filter('acfe/flexible/responsive/name=my_flexible',        $responsive, $field);
filter('acfe/flexible/responsive/key=field_5ff71ef3542c2', $responsive, $field);

add_filter('acfe/flexible/responsive/name=my_flexible', 'my_flexible_responsive', 10, 2);
function my_flexible_responsive($responsive, $field){

    /**
     * default:
     *
     * $responsive = array(
     *     'fullscreen' => array(
     *         'label' => __('Fullscreen', 'acfe'),
     *         'icon'      => 'dashicons dashicons-fullscreen-alt',
     *         'icon_off'  => 'dashicons dashicons-fullscreen-exit-alt',
     *         'order'     => 'before', // before | after
     *         'separator' => true,     // true | false
     *     ),
     *     'sizes' => array(
     *         array(
     *             'label' => __('Desktop', 'acfe'),
     *             'icon'  => 'dashicons dashicons-desktop',
     *             'width' => '1200px',
     *         ),
     *         array(
     *             'label' => __('Tablet', 'acfe'),
     *             'icon'  => 'dashicons dashicons-tablet',
     *             'width' => '768px',
     *         ),
     *         array(
     *             'label' => __('Mobile', 'acfe'),
     *             'icon'  => 'dashicons dashicons-smartphone',
     *             'width' => '480px',
     *         ),
     *     ),
     * );
     * 
     */

    // disable fullscreen icon
    $responsive['fullscreen'] = false;

    // do not show responsive icons
    // return false;
    
    // return
    return $responsive;

}