Image Advanced Order Not Saving

This topic has 3 replies, 2 voices, and was last updated 3 months, 2 weeks ago by Johannes Gross.

Creator

Topic

August 28, 2019 at 3:49 AM #15888

Resolved

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.

Creator

Topic

Viewing 3 replies - 1 through 3 (of 3 total)

Author

Replies

August 28, 2019 at 10:31 AM #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.

August 29, 2019 at 8:19 AM #15906

Johannes Gross

Participant

Thank you!

August 31, 2019 at 4:46 AM #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
    }
}

Newsletter