Reply To: Hide Layout Option in Flexible Content

• petercarsater

• June 21, 2016 at 6:50 pm

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');