Search code examples
wordpressvisual-composerwpbakery

WPBakery Page Builder - Checkboxes won't retain values from v6.xx


For the last few years I have been developing a custom theme and various plugins that add options to WPBakery Page Builder elements and create new custom elements, etc.

Everything has worked perfectly up to Page Builder v5.7. But then when v6.0.x came out, suddenly every Checkbox option I have added to every element, be it a custom element or one of Page Builder's standard elements, has a problem: As soon as I click the element in the Page Editor to open it's settings, all checkboxes clear and become unticked regardless of their default or saved values.

If I tick a checkbox and save settings, when I view the front end of the site the option has indeed saved and is working as it should be; but when I open the element's settings window again, they all clear.

I have looked at all my code and compared it to other plugin's code and all of WPBakery's documentation, etc, and I can't see a problem anywhere. I thought it might be a bug with Page Builder v6.0.x and I have sent them a support ticket, but they haven't been able to give me an answer. Other people's plugins seem to be working though, along with all of Page Builder's own built-in elements, which leads me to believe that it must be something to do with my code.

Here is an example:

// After VC Init
add_action( 'vc_after_init', 'gd_after_init_actions' );

// ADD OPTIONS TO VISUAL COMPOSER ELEMENTS //
function gd_after_init_actions() {
  // ADD FULL WIDTH CHECKBOX TO SINGLE IMAGE ELEMENTS //
  $single_image_attributes = array(
    'type' => 'checkbox',
    'class' => 'full_width_image',
    'param_name' => 'full_width_image',
    'value' => array('Force Full Width' => true),
    'weight' => 1
  );
  vc_add_param('vc_single_image', $single_image_attributes);
}

This adds a "Force Full Width" checkbox to Page Builder's standard "Single Image" element. The checkbox appears perfectly and if I check it, save and then view the front end of the site, the checkbox does indeed work; the checkbox value has saved and the image is stretched to full width. But then if I go back to the back end and click on the Single Image element to edit it's settings again, the checkbox becomes unchecked and it's saved value is lost.

Similarly, with plugins in which I am adding options with vc_map(), here is a sample:

function vc_before_init_actions(){

    // Stop all if VC is not enabled
    if ( !defined( 'WPB_VC_VERSION' ) ) {
        return;
    }

    // ELEMENT CLASS //
    class vcResponsiveYouTubeVideo extends WPBakeryShortCode {

        // ELEMENT INIT //
        function __construct() {
            add_action( 'init', array( $this, 'vc_youtube_video_mapping' ) );
            add_shortcode( 'vc_youtube', array( $this, 'vc_youtube_video_html' ) );
        }

        // ELEMENT MAPPING //
        public function vc_youtube_video_mapping() {

            // Map the block with vc_map()
            $youtubeIcon = plugins_url('responsive-youtube-icon.png',__FILE__ );
            vc_map(
                array(
                    'name' => __('Responsive YouTube Video', 'text-domain'),
                    'base' => 'vc_youtube',
                    'category' => __('Custom Elements', 'text-domain'),
                    'icon' => $youtubeIcon,
                    'params' => array(
                        array(
                            'type' => 'checkbox',
                            'param_name' => 'lightbox',
                            'value' => array('Pop up video in lightbox' => true),
                            'admin_label' => false,
                            'weight' => 0,
                            'group' => 'Custom Group'
                        ),
                    )
                )
            );
        }
[etc...]
}

This is just a snippet of the code and there is much more to it, but this is just the part pertaining to one of the checkbox options that I have in this particular plugin. Just like the previous example, if I check it and save the options, it works, but then if I come back into the element's settings, it clears.

Even checkboxes that are set to be checked by default:

array(
    'type' => 'checkbox',
    'param_name' => 'branding',
    'value' => array('Keep YouTube Branding in Control Bar' => true),
    'std' => true,
    'admin_label' => false,
    'weight' => 0,
    'group' => 'Custom Group'
),

This checkbox still clears as soon as I click open the settings window.

I've done a fair bit of testing and it appears this issue exists (so far) only with Checkboxes. All the other inputs I've created, such as textfields, colorpickers, dropdowns, etc, all save fine and retain their values when I re-open the settings window.

Does anyone any have ideas on this?


Solution

  • we found an issue, it caused because we added strict compare for key-value pairs for checkboxes, but in your mapping value is boolean true, however shortcode saves this as string "1" and when edit form is opening then strict compare fails.

    For BC we will fix this in our next release, there is a patch:

    Index: include/params/default_params.php
    IDEA additional info:
    Subsystem: com.intellij.openapi.diff.impl.patch.CharsetEP
    <+>UTF-8
    ===================================================================
    --- include/params/default_params.php   (revision afcb0ccf521c36ce176651964792d18c1f9b1bfc)
    +++ include/params/default_params.php   (date 1559032145000)
    @@ -85,7 +85,9 @@
        $values = isset( $settings['value'] ) && is_array( $settings['value'] ) ? $settings['value'] : array( esc_html__( 'Yes', 'js_composer' ) => 'true' );
        if ( ! empty( $values ) ) {
            foreach ( $values as $label => $v ) {
    -           $checked = in_array( $v, $current_value, true ) ? 'checked' : '';
    +           // NOTE!! Don't use strict compare here for BC!
    +           // @codingStandardsIgnoreLine
    +           $checked = in_array( $v, $current_value ) ? 'checked' : '';
                $output .= ' <label class="vc_checkbox-label"><input id="' . $settings['param_name'] . '-' . $v . '" value="' . $v . '" class="wpb_vc_param_value ' . $settings['param_name'] . ' ' . $settings['type'] . '" type="checkbox" name="' . $settings['param_name'] . '" ' . $checked . '>' . $label . '</label>';
            }
        }