Support

Account

Home Forums Add-ons Flexible Content Field Hide Layout Option in Flexible Content Reply To: Hide Layout Option in Flexible Content

  • Hi jrstaatsiii,

    Here’s an example what i’ve done. I’ve added some comments in the code.

    Basically, I’m using acf/input/admin_head to add some css and js in the head-tag.

    My ACF layouts are named block__text-img, block__quote and block__list. I use javascript to add a class to the body tag (”has-template-X), then i use css to hide layout options.

    
    function acf_admin_head_layout() {
    
        ?>
    
        <style type="text/css">
    
            /* Remove borders on li since we not removing li's  */
            .acf-fc-popup li {
                border:0 !important;
            }
    
            /* WordPress Template "home"
             * - hide ACF layouts named "block__quote", "block__text-img" and "block__list"
             */
            .has-template-home .acf-fc-popup a[data-layout="block__quote"],     
            .has-template-home .acf-fc-popup a[data-layout="block__text-img"],  
            .has-template-home .acf-fc-popup a[data-layout="block__list"] {     
                display: none;
            }
    
            /* WordPress default template
             * - hide ACF layout named "block__text-img"
             */
            .has-template-default .acf-fc-popup a[data-layout="block__text-img"] {
                display: none;
            }
    
        </style>
    
        <script type="text/javascript">
    
            (function($) {
    
                
                $(document).ready(function(){
    
                    <?php 
    
                    global $post;
                    
                    // Set a javascript variabel "$template_name" based on selected template in WP
                    // The variable is then used in window.UpdateACFView to add a CSS class
                    // name to the body-tag. Since standard/custom post types doesn't have 
                    // page templates we need to set this variable on the first page load
                    
                    if ($post->post_type == "faq") : // set 'post' for standard post
                        echo 'var $template_name = "post-type/faq";';                   
                    else :
                        // Just get the template name
                        echo 'var $template_name = $("#page_template").val();';
                    endif; 
                    
                    ?>
    
                    // Add classes to body 
                    window.UpdateACFView = function($template_name) {
    
                        if ($template_name == "pages/home.php") {   
                            $('body').addClass('has-template-home');                            
                        }
    
                        if ($template_name == "default") {   
                            $('body').addClass('has-template-default');                            
                        }
    
                    }
                    
                    window.UpdateACFView($template_name); 
    
                });
    
                // When a user change the template in the dropdown we need to remove all our custom classes on the body-tag
                // and then, when ajax is completed, trigger window.UpdateACFView in order to set the correct body-class
                $(document).on('change', '#page_template', function(){
    
                    var $template_name = $('#page_template').val();
    
                    $(document).on('ajaxComplete', function(){
                        $('body').removeClass('has-template-home has-template-default'); // Clear all custom classes
                        window.UpdateACFView($template_name); 
                        $(document).off('ajaxComplete');
                    });
                });
                
            })(jQuery);  
    
        </script>  
    
        <?php
    }
    add_action('acf/input/admin_head', 'acf_admin_head_layout');