Transform ACF's flexible layouts list into a nice and UX popup.

acf-custom-flexible.php

/**
 * Main class for acf flexible customization
 *
 * 3 steps to reproduce :
 * 1 - Copy this class into your project
 * 2 - change classes depending on your ACF layouts
 * 3 - make awesome screenshots
 *
 * @see credits to   : https://hwk.fr/blog/acf-transformer-la-selection-des-layouts-du-contenu-flexible-en-modal
 * @see final result : https://gist.github.com/MaximeCulea/cc55df7f8822499162d8343e0c3698e9#gistcomment-2562697
 * 
 * @author Maxime CULEA
 */
class bea_acf_customize_flexible {
	function __construct() {
		add_action( 'acf/input/admin_footer', [ $this, 'flexible_content_layout_popup_class' ] );
		add_action( 'acf/input/admin_footer', [ $this, 'flexible_content_layout_no_popup' ] );
		add_action( 'acf/input/admin_footer', [ $this, 'add_background_div' ] );
		add_action( 'acf/input/admin_footer', [ $this, 'css' ] );
	}

	// Ajouter une class à une popup en particulier
	function flexible_content_layout_popup_class() { ?>
		<script type="text/javascript">
            jQuery(document).ready(function ($) {

                try {
                    // ACF Flexible Content: Ajouter une class à la modal de sélection de Layouts
                    var flexible_content_position = acf.fields.flexible_content.position_popup;
                    acf.fields.flexible_content.position_popup = function ($popup, $bouton) {
                        // Si le nom du champ flexible = 'mon_flexible'
                        if (this.$field.attr('data-name') == 'content')
                            $popup.addClass('acf-fc-popup-modal');
                        // Continuer l'exécution normalement
                        return flexible_content_position.apply(this, arguments);
                    }
                } catch (e) {
                }
            });
		</script>
	<?php }

	// Ne pas afficher de popup si il n’y a qu’un seul Layout
	function flexible_content_layout_no_popup() { ?>
		<script type="text/javascript">
            jQuery(document).ready(function ($) {
                try {
                    // ACF Flexible Content: Supprimer la popup si il n'y a qu'un seul Layout
                    var flexible_content_open = acf.fields.flexible_content._open;
                    acf.fields.flexible_content._open = function (e) {
                        var $popup = $(this.$el.children('.tmpl-popup').html());
                        // On compte le nombre de layouts
                        if ($popup.find('a').length == 1) {
                            acf.fields.flexible_content.add($popup.find('a').attr('data-layout'));
                            return false;
                        }
                        // Si plus d'un layout, continuer l'exécution normalement
                        return flexible_content_open.apply(this, arguments);
                    }
                } catch (e) {
                }
            });
		</script>
	<?php }

	// Transform text into div for better display
	function add_background_div() { ?>
		<script type="text/javascript">
            jQuery(document).ready(function ($) {
                $('a[data-name="add-layout"]').on('click', function(){
                    setTimeout(function() {
                        $(".acf-fc-popup-modal a").each(function () {
                            var html = "<div>" + $(this).text() + "</div>";
                            $(this).html(html);
                        });
                    }, 0);
                });
            });
		</script>
	<?php }

	function css() {
		echo '<style type="text/css">
			.acf-fc-popup{
			    width:80%;
			    max-width:1200px;
			    height:80%;
			    max-height:1200px;
			    top:50% !important;
			    left:50% !important;
			    -webkit-transform:translate(-50%, -50%);
			        -ms-transform:translate(-50%, -50%);
			            transform:translate(-50%, -50%);
			    border-radius:0;
			    position: fixed !important;
			    background: none !important;
			    padding:0;
			    -webkit-box-sizing:border-box;
			    box-sizing:border-box;
			}
			.acf-fc-popup *{
			    -webkit-box-sizing:border-box;
			    box-sizing:border-box;
			}
			.acf-fc-popup::before,
			.acf-fc-popup::after{
			    border-color:transparent !important;
			}
			.acf-fc-popup:before{
			    top: -100% !important;
			    right: 0 !important;
			    bottom: 0 !important;
			    left: -100% !important;
			    position: fixed;
			    background: rgba(0,0,0,0.8);
			    height: 200vh;
			    width: 200vw;
			    margin: 0 !important;
			    padding: 0;
			    content: "";
			}
			.acf-fc-popup ul{
			    overflow:auto;
			    height:100%;
			    width:100%;
			    background:#f4f4f4;
			    border:#ccc;
			    padding:15px;
			    position:relative;
			    -webkit-box-shadow:0 0 8px rgba(0, 0, 0, 0.5);
			            box-shadow:0 0 8px rgba(0, 0, 0, 0.5);
			    padding-top: 93px !important;
			}
			.acf-fc-popup ul:before{
			    position: absolute;
			    top: 31px;
			    content: "Ajouter une strate";
			    font-size: 23px;
			    font-weight: 400;
			    color: #333;
			    left: 30px;
			}
			.acf-fc-popup ul:after{
			    position: absolute;
			    top: 62px;
			    content: "Cliquez sur une strate pour l\'ajouter au contenu de la page.";
			    font-size: 13px;
			    color: #666;
			    left: 30px;
			    font-style: italic;
			}
			.acf-fc-popup ul li{
			    width: 33.33333%;
			    padding: 1%;
			    float: left;
			}
			@media only screen and (max-width:960px){
			    .acf-fc-popup ul li{
			        width: 50%;
			    }
			}
			@media only screen and (max-width:782px){
			    .acf-fc-popup{
			        width:95%;
			        height:88%;
			    }
			    .acf-fc-popup ul li{
			        width: 100%;
			    }
			}
			.acf-fc-popup ul li a{
			    background-repeat: round;
			    width: 100%;
			    height: 150px;
			    border: 1px solid #ddd;
			}
			.acf-fc-popup ul li a i{
			    font-size: 22px;
			    vertical-align: text-top;
			    margin-right: 10px;
			}
			.acf-fc-popup a {
				color: #fff;
				font-size: 18px;
				padding: 10px 12px;
			}
			.acf-fc-popup a:hover {
				background-repeat: round;
				box-shadow: 3px 3px 2px 1px rgba(87, 87, 88, 0.1);
			}
			.acf-fc-popup div + .acf-fc-popup a:hover {
				color: #eee;
			}
			.acf-fc-popup div {
			    background-color: white;
			    position: absolute;
			    padding: 5px 10px;
			    border-radius: 5px;
			    color: black;
			    font-size: 13px;
			    text-transform: uppercase;
			    box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.3);
		    	}
			
			/** 
			 * Provide an image for each layout
			 * Images are into 366*150 or bigger 732*300
			 */
			.acf-fc-popup ul li a[data-layout=text]{
				background-image: url(' . get_theme_file_uri() . '/assets/img/acf-flexible/text.png);
			}
			.acf-fc-popup ul li a[data-layout=numbers]{
				background-image: url(' . get_theme_file_uri() . '/assets/img/acf-flexible/numbers.png);
			}
			.acf-fc-popup ul li a[data-layout=visual]{
				background-image: url(' . get_theme_file_uri() . '/assets/img/acf-flexible/visual.png);
			}
			.acf-fc-popup ul li a[data-layout=featured]{
				background-image: url(' . get_theme_file_uri() . '/assets/img/acf-flexible/featured.png);
			}
			.acf-fc-popup ul li a[data-layout=video]{
				background-image: url(' . get_theme_file_uri() . '/assets/img/acf-flexible/video.png);
			}
			.acf-fc-popup ul li a[data-layout=push_2]{
				background-image: url(' . get_theme_file_uri() . '/assets/img/acf-flexible/push-2.png);
			}
			.acf-fc-popup ul li a[data-layout=testimonies]{
				background-image: url(' . get_theme_file_uri() . '/assets/img/acf-flexible/testimonies.png);
			}
			.acf-fc-popup ul li a[data-layout=push_3]{
				background-image: url(' . get_theme_file_uri() . '/assets/img/acf-flexible/push-3.png);
			}
			.acf-fc-popup ul li a[data-layout=celebrities]{
				background-image: url(' . get_theme_file_uri() . '/assets/img/acf-flexible/celebrities.png);
			}
			.acf-fc-popup ul li a[data-layout=partners]{
				background-image: url(' . get_theme_file_uri() . '/assets/img/acf-flexible/partners.png);
			}
			.acf-fc-popup ul li a[data-layout=push_2_light]{
				background-image: url(' . get_theme_file_uri() . '/assets/img/acf-flexible/push-2-light.png);
			}
			.acf-fc-popup ul li a[data-layout=form]{
				background-image: url(' . get_theme_file_uri() . '/assets/img/acf-flexible/form.png);
			}
		</style>';
	}
}
new bea_acf_customize_flexible();

Which is doing something like this 👇

Now see https://wordpress.org/plugins/acf-beautiful-flexible/