Custom Fields
Re-Envisioned
Support MB Blocks Image Advanced Order Not Saving

  • Creator
    Topic
  • #15888
    Resolved Johannes Gross
    Participant

    The Image Advanced field in the block editor saves only the initial order the images have been added. Changing the order afterwards (by dragging them) does not get saved. When opening the Code Editor mode in the block editor, I can change the order of the IDs which will then get saved. But it is not working from the GUI.
    Here is my code:

     function create_meta_box($meta_boxes) {
            $meta_boxes[] = array(
                'id'         => 'twt-gallery-block',
                'title'      => 'TWT Gallery',
                'type'            => 'block',
                'icon'            => 'layout',
                'category'        => 'layout',
                'render_callback' => array($this, 'render_block'),
                'supports' => array(
                    'anchor' => true,
                    'customClassName' => true,
                ),
                'fields' => array(
                    array(
                        'name' => 'Images',
                        'id'   => 'images',
                        'type' => 'image_advanced',
                    ),
                    array(
                        'name' => 'Row Height (px)',
                        'placeholder' => '300',
                        'id'   => 'row_height',
                        'type' => 'number',
                    ),
                    array(
                        'name' => 'Displayed At Start',
                        'placeholder' => '20',
                        'id'   => 'displayed_at_start',
                        'type' => 'number',
                    ),
                    array(
                        'name' => 'Load More Increments',
                        'placeholder' => '10',
                        'id'   => 'load_more_increments',
                        'type' => 'number',
                    ),
                    array(
                        'name' => 'Last Row',
                        'id'   => 'last_row',
                        'type' => 'select',
                        'options' => array(
                            'justify' => 'justify',
                            'nojustify' => 'don\'t justify'
                        )
                    ),
                )
            );
            return $meta_boxes;
        }
    
        function render_block($attr, $is_preview = false, $post_id = null) {
            if ( empty( $attr['data'] ) ) {
                return;
            }
    
            // Unique HTML ID if available.
            $id = 'twt-gallery-' . ( $attr['id'] ?? '' );
            if ( ! empty( $attr['anchor'] ) ) {
                $id = $attr['anchor'];
            }
    
            // Custom CSS class name.
            $class = 'twt-jg-c ' . ( $attr['className'] ?? '' );
            if ( ! empty( $attr['align'] ) ) {
                $class .= " align{$attr['align']}";
            }
    
            if($is_preview) {
                ?>
                " class="" style="background:#eee;min-height:100px;padding:10px">
                    <strong>TWT Gallery</strong>
                    '.wp_get_attachment_image($attr['data']['images'][0], 'medium');
                    }
                    ?>
                
                <?php
            } elseif(isset($attr['data']['images'])) {
                $gallery_attr = array();
                if(isset($attr['data']['row_height'])) {
                    $gallery_attr['row_height'] = $attr['data']['row_height'];
                }
                if(isset($attr['data']['displayed_at_start'])) {
                    $gallery_attr['limit'] = $attr['data']['displayed_at_start'];
                }
                if(isset($attr['data']['load_more_increments'])) {
                    $gallery_attr['increment'] = $attr['data']['load_more_increments'];
                }
                if(isset($attr['data']['last_row'])) {
                    $gallery_attr['last_row'] = $attr['data']['last_row'];
                }
                $gallery_attr['id'] = $id;
                $gallery_attr['class'] = $class;
                echo $this->render_gallery($attr['data']['images'], $gallery_attr, $post_id);
            }
        }

    Thank you for checking into this.

Viewing 3 replies - 1 through 3 (of 3 total)
  • Author
    Replies
  • #15892
    Anh Tran
    Keymaster

    Hi Johannes,

    Thanks for your feedback. I’ve fixed this bug and will release new version for Meta Box and MB Blocks tomorrow.

    #15906
    Johannes Gross
    Participant

    Thank you!

    #15933
    Johannes Gross
    Participant

    Again, thanks for fixing the Image Advanced field. This is now working great.
    However, today I noticed that in a cloneable group block, the order does not save (e.g. changes back when reloading).

    Here is the code I am using:

    add_action('rwmb_meta_boxes', 'twt_metabox_io_blocks');
    function twt_metabox_io_blocks($meta_boxes) {
        $meta_boxes[] = array(
            'id'         => 'twt-people-block',
            'title'      => 'TWT People Block',
            'type'            => 'block',
            'icon'            => 'admin-users',
            'category'        => 'formatting',
            'context'         => 'side',
            'render_callback' => 'render_twt_people_block',
            'supports' => array(
                'anchor' => true,
                'customClassName' => true,
            ),
            'fields' => array(
                array(
                    'name' => '',
                    'id'   => 'people',
                    'type' => 'group',
                    'clone'  => true,
                    'sort_clone' => true,
                    'fields' => array(
                        array(
                            'name' => 'Photo',
                            'desc' => 'Ideal size: 200px x 200px',
                            'id'   => 'image',
                            'type' => 'single_image',
                        ),
                        array(
                            'name' => 'Caption (e.g. Person\'s Name)',
                            'id'   => 'caption',
                            'type' => 'textarea',
                            'rows' => 2
                        ),
                    )
                )
            )
        );
        return $meta_boxes;
    }
    function render_twt_people_block($attr, $is_preview = false, $post_id = null) {
        if ( empty( $attr['data'] ) ) {
            return;
        }
    
        // Unique HTML ID if available.
        $id = 'twt_people-' . ( $attr['id'] ?? '' );
        if ( ! empty( $attr['anchor'] ) ) {
            $id = $attr['anchor'];
        }
    
        // Custom CSS class name.
        $class = $attr['className'] ?? '';
        if ( ! empty( $attr['align'] ) ) {
            $class .= " align{$attr['align']}";
        }
    
        if(isset($attr['data']['people'])) {
    ?>
    ">
        
        
                    
                        
                            
                            
                                
                            
                        
                    
                    <?php
                }
        ?>
        </div>
    </div>
    <?php
        }
    }
    

    I know the caption field is kind of redundant… 😉

    Thanks for checking into it…

Viewing 3 replies - 1 through 3 (of 3 total)
  • You must be logged in to reply to this topic.