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
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. array( '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. array( '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'. ),