Introducing Flexible Content: Dynamic Layout Preview

This week, one of the most anticipated feature is coming to ACF Extended. The Dynamic Layout Preview, which will allow developers to display layout preview just like they would do using the new Block Types for Gutenberg editor.

Flexible Content Render

In order to use the Dynamic Layout Preview, you’ll have to activate the Flexible Content Render first. Basically, this setting will add new options for each layouts:

  • Template file path. ie: /layouts/hero/template.php
  • Javascript file path. ie: /layouts/hero/script.js
  • CSS Style file path. ie: /layouts/hero/style.css

Once correctly setup, you’ll be able to use the shiny new the_flexible() & get_flexible() functions from ACF Extended! You will no more have to struggle with multiple if & elseif statements on the front-end, the plugin will take care of everything and include the corresponding template/script/style files.

Displaying Flexible Content on the front-end

The classic way

if(have_rows('flexible_content_field_name')):

    while(have_rows('flexible_content_field_name')): the_row();

        if(get_row_layout() == 'paragraph'):

            the_sub_field('text');

        elseif(get_row_layout() == 'download'): 

            $file = get_sub_field('file');

        endif;

    endwhile;

endif;

With Flexible Content Render

if(has_flexible('flexible_content_field_name')):
    
    the_flexible('flexible_content_field_name');
    
endif;

Template file: /layouts/hero/template.php

<?php

/**
 * Hero Layout Render Template.
 *
 * @array   $layout Layout settings (without values)
 * @array   $field Flexible content field settings
 * @bool    $is_preview True during AJAX preview
 */

?>

<div class="layout-hero <?php echo ($is_preview) ? 'is-preview' : ''; ?>">

    <h1>Hero</h1>
    
    <h3><?php the_sub_field('text'); ?></h3>
    
</div>

Style file: /layouts/hero/style.css

/**
 * Hero Layout
 */
.layout-hero{
    background:#fafafa;
    padding:50px 0;
    text-align:center;
}

.layout-hero h1{
    font-size:50px;
    font-weight:700;
}

.layout-hero h3{
    font-size:32px;
    font-weight:600;
}

/**
 * Preview mode
 */
.layout-hero.is-preview{
    
}

Displaying Layout Thumbnail as Preview

Due to the scope of the new Dynamic Layout Preview feature, we had to remove the legacy Thumbnail as Preview mode. But no panic, you can still easily display the Layout Thumbnail. Here is a code example you can put in the /layouts/hero/template.php file:

<?php

/**
 * Hero Layout Render Template. Thumbnail as Preview Mode
 *
 * @array   $layout Layout settings (without values)
 * @array   $field Flexible content field settings
 * @bool    $is_preview True during AJAX preview
 */

$thumbnail_src = false;
if(isset($layout['acfe_flexible_thumbnail']) && !empty($layout['acfe_flexible_thumbnail']))
    $thumbnail_src = wp_get_attachment_url($layout['acfe_flexible_thumbnail']);
 
if($is_preview){

    echo '<img src="' . $thumbnail_src . '" style="max-width:100%; height:auto;" />';
    
}else{
    
    // Front End Render
    
}