Support

Account

Forum Replies Created

  • I want to add to this that the minimum required fields in the flexible layout fields also doesn’t work.

    Currently only found the bug in the following layout, haven’t tested much further:

    Block > Repeater > Flexible layout with min. fields of 2

  • I have spend multiple hours trying to figure a way around this and to my likings I haven’t found an ideal solution. The problem is Innerblocks isn’t really an ACF function but a WordPress function.

    Although I don’t really understand your question the closest I’ve come to a workable pagebuilder with container+columns is this way:

    This is a content container block

    $allowed_blocks = [ 'acf/contentpartial' ];
    <div id="<?php echo esc_attr($id); ?>" class="<?php echo esc_attr($className); ?>">
        <?php if($container == 'container-fluid'): echo '<div class="container">';  endif; ?>
            <div class="row">
                    <InnerBlocks 
                    allowedBlocks="<?php echo esc_attr( wp_json_encode( $allowed_blocks ) ); ?>"
                    />
    
            </div>
        <?php if($container == 'container-fluid'): echo '</div>'; endif; ?>
    </div>

    In which you load the partial:

    $allowed_blocks = [ 'core/heading', 'core/paragraph','core/list', 'core/button', 'core/image', 'core/shortcode', 'gravityforms/form'];
    $col = get_field('col_grootte');
    ?>
    <div id="<?php echo esc_attr($id); ?>" class="<?php echo esc_attr($className); ?> <?php echo $col; ?> pt-<?php the_field('ruimte_boven'); ?> pb-<?php the_field('ruimte_onder'); ?> editor-reset">
        
        <div class="content-block">
    
            <InnerBlocks allowedBlocks="<?php echo esc_attr( wp_json_encode( $allowed_blocks ) ); ?>" />
    
        </div> 
    
    </div>

    This only problem is that you have to manually select the column size. It can’t be col-6 whenever there are 2 partials automatically.

  • I would suggest building your sidebar as widget. WP recently integrated Gutenberg into the widgets aswel.

    To register a sidebar:

    if (function_exists('register_sidebar'))
    {
       // Define Sidebar Widget Area
       register_sidebar(array(
           'name' => __('Sidebar'),
           'description' => __('Sidebar voor de vervolgpagina\'s'),
           'id' => 'sidebar',
           'before_widget' => '<div id="%1$s" class="%2$s">',
           'after_widget' => '</div>',
           'before_title' => '<h3>',
           'after_title' => '</h3>'
       ));
    }

    Then implement this code in your sidebar area:
    <?php if (!function_exists('dynamic_sidebar') || !dynamic_sidebar('sidebar')) ?>

  • You can manipulate $post in your block and then use the standard post loop:

    $posts = get_posts(array('post_type' => 'YOUR_POSTYPE', 'posts_per_page' => 3 ));

    and then

    if( $posts ): ?>
        <?php foreach( $posts as $post): // variable must be called $post (IMPORTANT) ?>
            <?php setup_postdata($post); ?>
            
            // Your code
    
        <?php endforeach; ?>
        <?php wp_reset_postdata(); // IMPORTANT - reset the $post object so the rest of the page works correctly ?>
    <?php endif; ?>

    If you want to give the user the option to change, let’s say the ammount of posts, then you can set the value of a field as variable in your array:

    $number_of_posts = get_field('your field');
    $posts = get_posts(array('post_type' => 'YOUR_POSTYPE', 'posts_per_page' => $number_of_posts ));
  • Sounds like a typo somewhere. Can you give the code of one of the broken blocks?

  • @prebyter ‘s code gave me a good base to change the UI a bit. I expanded the code a little more for any UI flaws that come with it. My max items next to eachother is set to 4, with max repeater items set to 8.

    /* 
     * ACF "repeat-horizontal" class, display repeaters in horizontal columns 
     */
    .repeat-horizontal .acf-repeater tbody {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
    }
    .repeat-horizontal .acf-repeater tr.acf-row:not(.acf-clone) {
        width: 100%;
        flex-grow: 1;
        flex-shrink: 0;
        flex-basis: 21%; /* 21% because 25% gives CSS bugs when content pushes width and not 20 because we want the max to be 4 */
        border-bottom: 1px solid #eee;
    }
    .repeat-horizontal .acf-repeater tr.acf-row:not(.acf-clone) td.acf-fields {
        width: 100% !important; /* important is necessary because it gets overwritten on drag&drop  */
    }
    .repeat-horizontal .acf-repeater .acf-row-handle,
    .repeat-horizontal .acf-repeater .acf-fields{
        border-width: 0px 0px 0px 1px;
    }
    .repeat-horizontal .acf-repeater .acf-row-handle.order{
        min-width: 10px; /* to stop breaking layout if we keep the max rows bellow 10 */
    }
    .repeat-horizontal .acf-repeater .acf-row:last-child .acf-row-handle{
        border-width: 0px;
    }
    .repeat-horizontal .acf-repeater .acf-row-handle .acf-icon{
        position: relative;
        margin: 10px 0;
    }
    .repeat-horizontal .acf-repeater .acf-row:hover .acf-row-handle .acf-icon{
        display: none; /* remove standard annoying hover */
    }
    .repeat-horizontal .acf-repeater .acf-row-handle.remove:hover .acf-icon{
        display: block; /* re-apply hover on set block */
    }
Viewing 6 posts - 1 through 6 (of 6 total)