Support

Account

Home Forums ACF PRO Flexible Content, Help Creating Dynamic Script to Detect Adjacent Flex Content

Solved

Flexible Content, Help Creating Dynamic Script to Detect Adjacent Flex Content

  • I am a long time ACF user and absolutely love the platform. Essentially, I have created my own page builder using flexible content fields. Which is working great thus far! I am running into a formatting issue though..

    The over-arching problem here is that when I use two identical flexible content blocks adjacent to one another, I get double the margin between those two blocks.

    The name of the flexible content field I am working with is named, “text_block”.
    I would like to try and create a dynamic PHP script that detects when another “text_block” is adjacent to the current “text_block” and adjust the class responsible for setting margin.

    Why not just decrease the margin using CSS? You might ask… Well I really wanted a good amount of margin when this block was used alone and never expected for the user to string multiple “text_block”s together. Now there are some hundreds of pages already built with multiple “text_block”s strung together and this double spacing issue. So this seems like my best solution.

    if( get_row_layout() == 'text_block' ):
    
        global $post;
        $post_id = $post->ID;
    
        $layouts = get_post_meta($post_id, 'flex_templates');
    
        $flat_results = array_flatten($layouts);
    
        $search_block = array_search('text_block', $flat_results);
    
        if($search_block === false){
            echo "Not found";
        }else{
            $after = ($search_block + 1) < count($flat_results) ? $flat_results[$search_block + 1] : "";
        }
        if($after == 'text_block') {
            echo '<div id="text-block" class="text-center mt-5 mb-0 text-after">';
        } else {
            echo '<div id="text-block" class="text-center my-5">';
        }

    So basically I get the $post_id, use that to grab the multidimensional array responsible for my flexible content on the page.

    After that I flatten the multidimensional array with a custom function so I can run array_search to easily find “text_block” within that array. This finds the first instance of “text_block”.

    If a “text_block” was found, I look at the next item in the array to see if it is also a “text_block”. If the adjacent block is a “text_block” I adjust the bottom margin to 0.

    This kind of works.. It just doesn’t add any margin back to the last “text_block” in the chain.

    Any suggestions to tweak or optimize my code?

  • I think that your question “Why not just decrease the margin using CSS?… is a valid one.

    If these text blocks are stacked on top of each other this can easily be solved using CSS, although it may require adjustments to other CSS. In this case I would use a top margin instead of a bottom margin and then.

    
    /* assuming your container has a class of "text_block" */
    .text_block+.text_block {
      margin-top: 0;
    }
    

    To do it the way you’re doing it, before applying the margin bottom of 0 you also need to look at the next element of your array. If it is not a text-block as well then do not apply the margin bottom of 0. I don’t know much about array_search, but you would check here I think.

    
    
        if($after == 'text_block') {
            // check to see if the next block is a text block
            // if it is then do not apply these classes
            echo '<div id="text-block" class="text-center mt-5 mb-0 text-after">';
        } else {
            echo '<div id="text-block" class="text-center my-5">';
        }
    
  • John, thanks for your help! You saved my day for sure.

    I think I would have needed to create a loop to make my other method work?
    It seems arrary_search stops after it finds the first result. So I would have had to loop through the array until it stopped returning matches? I enjoy working with PHP quite a bit, but I am still learning some of the more advanced techniques.

    I had no idea about the adjacent sibling combinator in CSS. That is exactly what I needed and I used this to solve my problem.

    On another note, do you have any ideas on how to speed up the ‘Edit Field Group’ page? When I start adding lots of flexible content blocks and fields in this area it gets pretty slow. I am already using acf-json.

    Thanks again!

  • Unfortunately, there really isn’t a way to make some things go faster.

    If you’re talking about the field group editor, This shouldn’t get too slow. Each “Field” in the field group is a “Post” so it can take some time to load them and save them.

    If you’re talking about the speed when editing a post, this is something that you’ll need to account for. Loading is not generally a problem, but saving can be a problem. You will find other topics on this. ACF uses the standard WP functions for saving meta data. This means that every field adds additional db queries. With enough data the admin page for a post will eventually time out.

Viewing 4 posts - 1 through 4 (of 4 total)

The topic ‘Flexible Content, Help Creating Dynamic Script to Detect Adjacent Flex Content’ is closed to new replies.