Give 1.8.13 Tab Improvements & Conditional Field Changes

Give 1.8.13 introduces subtle improvements to the tabbed interface when editing a donation form. The improvements are summarized below along with a new requirement that developers should be aware in order to produce a seamless tabbed experience.

Added Unique Tab URLs

Each tab now has a unique URL denoted by a give-tab query parameter that updates on each tab change. This means that tabs can be navigated to directly, bookmarked, and most importantly, maintained after a page reload. For example, the URL of the Form Display tab would be structured as follows:

Added Active Tab Persistence

Because each tab now has a unique URL, the active tab can be maintained after save. For example, if the active tab is Form Display when the form is published or updated, then the page will reload with Form Display as the active tab. The result is a more seamless experience, especially for users who save and refresh the screen often during the initial form build.

Tab detection is made possible by a $_GET['give-tab'] parameter that is detected server-side and included in the redirect after save.

Removed Conditional Fields Flicker

In previous versions of Give, conditional fields that should be hidden by default would flicker upon page load. This flicker occurred because conditional fields were being hidden via JavaScript after page load. As of Give 1.8.13, a give-hidden class is applied to conditional fields via PHP so that they are hidden by default, thus preventing any chance of flicker.

Developers Note This Important Change to Conditional Fields

When registering conditional settings in the future, developers should ensure that the 'wrapper_class' => 'give-hidden' is used in order to hide the conditional field by default. An example use case is provided below.

 * Below are two field settings. If Custom Amount is enabled, then Minimum
 * Amount becomes visible. Note the use of 'wrapper_class' in the
 * conditional field to ensure Minimum Amount is hidden by default.

// Regular field.
    'name'        => __( 'Custom Amount', 'give' ),
    'description' => __( '...', 'give' ),
    'id'          => $prefix . 'custom_amount',
    'type'        => 'radio_inline',
    'default'     => 'disabled',
    'options'     => array(
        'enabled'  => __( 'Enabled', 'give' ),
        'disabled' => __( 'Disabled', 'give' ),

// Conditional field.
    'name'          => __( 'Minimum Amount', 'give' ),
    'description'   => __( '...', 'give' ),
    'id'            => $prefix . 'custom_amount_minimum',
    'type'          => 'text_small',
    'data_type'     => 'price',
    'attributes'    => array(
        'placeholder' => $price_placeholder,
        'value'       => $custom_amount_minimum,
        'class'       => 'give-money-field',
    'wrapper_class' => 'give-hidden', // Note the use of 'wrapper_class'.

Kevin Hoffman

Kevin is a WordPress Engineer at WordImpress where he is part of the team behind plugins such as Give and WP Business Reviews. He an active volunteer and speaker in the WordPress community where he co-organizes WordCamp Pittsburgh.


Leave a Comment