Update to Select2 4.0.3 (#650)

* Update select2 dist to 4.0.3

Removes the old select2 3.5.2 files, and add select2 4.0.3, including
all the i18n files (we're not using these yet, but we could be).

* Update Select2 field init calls for 4.0.3

Updates the select initialization syntax to work with the latest Select2
plugin version. Replaces the old initSelection methods with templating
methods on the ajax data adapter.

Should be completely functional except for the initial selection.

* Update sortable attribute for new selectors

Updates the sortable property of multiple select boxes to account for
the new selectors used in Select2 4.0.3

* Update model on updates to select element

Make sure to save these attributes, even when the field is multiple.
This is necessary because otherwise a select field updates its value as
an array.

* Coerce select field value to string when saving to model

The shortcode attribute kind of has to be a string, so we should make
sure it's set as a string when saving to the model.

* Get preselection & sorting working with all select2 fields

Selecting terms in, reordering, saving changes to, and reopening with
preselected results now work for user, post, and term selection fields -
both singular and multiple.

* Refactor all select2 fields to use a common base class

Working on getting rid of a lot of code duplication by makins all of
these select2-powered fields inherit from a common base class.

* Remove inline styles

We can easily enough just build these styles into our stylesheet, so
there's no need to do this nonsense, printing the same styles on the
page three separate times.

* Remove blank option on term select field

Left over from when I was trying a different approach to this field.

* Select2 v4 styles

* Select2 input changed - check if is array not is object

* Select2 callback Return empty results not null

* Tidy SCSS

css/sass/_select2-fields.scss

@@ -0,0 +1,50 @@
+.edit-shortcode-form {
+	.select2-container {
+		min-width: 300px;
+	}
+
+	.select2-container a {
+		transition: none;
+		-webkit-transition: none;
+	}
+
+	.select2-drop {
+		z-index: 160001;
+	}
+
+	.select2 li {
+		margin: 0;
+	}
+
+	.select2-selection__rendered {
+		vertical-align: top;
+	}
+
+	.select2-container .select2-search--inline .select2-search__field {
+		margin-top: 7px;
+	}
+
+	.select2-container--default .select2-selection--multiple {
+		border-radius: 0;
+		border-color: #ddd;
+		box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.07);
+		background-color: #fff;
+		color: #333;
+		outline: none;
+	}
+
+	.select2-container--default.select2-container--focus .select2-selection--multiple {
+		border-color: #5b9dd9;
+		box-shadow: 0 0 2px rgba(30,140,190,.8);
+	}
+
+}
+
+.select2-container {
+	z-index: 160000; // Make sure Select2 UI is visible above media modal
+	max-width: 300px;
+}
+
+.select2-results li {
+	margin: 0;
+}

css/sass/shortcode-ui.scss

@@ -159,3 +159,4 @@
 }
 
 @import 'field-image';
+@import 'select2-fields';

inc/class-shortcode-ui.php

@@ -197,8 +197,16 @@ public function get_shortcode( $shortcode_tag ) {
 	public function action_admin_enqueue_scripts( $editor_supports ) {
 		add_editor_style( trailingslashit( $this->plugin_url ) . 'css/shortcode-ui-editor-styles.css' );
 
-		wp_register_script( 'select2', trailingslashit( $this->plugin_url ) . 'lib/select2/select2.min.js', array( 'jquery', 'jquery-ui-sortable' ), '3.5.2' );
-		wp_register_style( 'select2', trailingslashit( $this->plugin_url ) . 'lib/select2/select2.css', null, '3.5.2' );
+		$min = '';
+
+		wp_register_script( 'select2',
+			trailingslashit( $this->plugin_url ) . "lib/select2/js/select2{$min}.js",
+			array( 'jquery', 'jquery-ui-sortable' ), '4.0.3'
+		);
+		wp_register_style( 'select2',
+			trailingslashit( $this->plugin_url ) . 'lib/select2/css/select2.css',
+			null, '4.0.3'
+		);
 	}
 
 	/**

inc/fields/class-field-post-select.php

@@ -54,27 +54,10 @@ public function action_shortcode_ui_loaded_editor() {
 
 		?>
 
-		<style>
-
-			.edit-shortcode-form .select2-container {
-				min-width: 300px;
-			}
-
-			.edit-shortcode-form .select2-container a {
-				transition: none;
-				-webkit-transition: none;
-			}
-
-			.wp-admin .select2-drop {
-				z-index: 160001;
-			}
-
-		</style>
-
 		<script type="text/html" id="tmpl-shortcode-ui-field-post-select">
 			<div class="field-block shortcode-ui-field-post-select shortcode-ui-attribute-{{ data.attr }}">
 				<label for="{{ data.id }}">{{{ data.label }}}</label>
-				<input type="text" name="{{ data.attr }}" id="{{ data.id }}" value="{{ data.value }}" class="shortcode-ui-post-select" />
+				<select id="{{ data.id }}" name="{{ data.name }}" class="shortcode-ui-post-select" ></select>
 				<# if ( typeof data.description == 'string' && data.description.length ) { #>
 					<p class="description">{{{ data.description }}}</p>
 				<# } #>
@@ -98,7 +81,7 @@ public function action_wp_ajax_shortcode_ui_post_field() {
 		$nonce               = isset( $_GET['nonce'] ) ? sanitize_text_field( $_GET['nonce'] ) : null;
 		$requested_shortcode = isset( $_GET['shortcode'] ) ? sanitize_text_field( $_GET['shortcode'] ) : null;
 		$requested_attr      = isset( $_GET['attr'] ) ? sanitize_text_field( $_GET['attr'] ) : null;
-		$response            = array( 'posts' => array(), 'found_posts' => 0, 'posts_per_page' => 0 );
+		$response            = array( 'items' => array(), 'found_items' => 0, 'items_per_page' => 0 );
 
 		$shortcodes = Shortcode_UI::get_instance()->get_shortcodes();
 
@@ -136,8 +119,8 @@ public function action_wp_ajax_shortcode_ui_post_field() {
 			$query_args['s'] = sanitize_text_field( $_GET['s'] );
 		}
 
-		if ( ! empty( $_GET['post__in'] ) ) {
-			$post__in = is_array( $_GET['post__in'] ) ? $_GET['post__in'] : explode( ',', $_GET['post__in'] );
+		if ( ! empty( $_GET['include'] ) ) {
+			$post__in = is_array( $_GET['include'] ) ? $_GET['include'] : explode( ',', $_GET['include'] );
 			$query_args['post__in'] = array_map( 'intval', $post__in );
 			$query_args['orderby']  = 'post__in';
 			$query_args['ignore_sticky_posts'] = true;
@@ -146,11 +129,11 @@ public function action_wp_ajax_shortcode_ui_post_field() {
 		$query = new WP_Query( $query_args );
 
 		foreach ( $query->posts as $post_id ) {
-			array_push( $response['posts'], array( 'id' => $post_id, 'text' => html_entity_decode( get_the_title( $post_id ) ) ) );
+			array_push( $response['items'], array( 'id' => $post_id, 'text' => html_entity_decode( get_the_title( $post_id ) ) ) );
 		}
 
-		$response['found_posts']    = $query->found_posts;
-		$response['posts_per_page'] = $query->query_vars['posts_per_page'];
+		$response['found_items']    = $query->found_posts;
+		$response['items_per_page'] = $query->query_vars['posts_per_page'];
 
 		wp_send_json_success( $response );
 

inc/fields/class-field-term-select.php

@@ -67,27 +67,10 @@ public function action_shortcode_ui_loaded_editor() {
 
 		?>
 
-		<style>
-
-			.edit-shortcode-form .select2-container {
-				min-width: 300px;
-			}
-
-			.edit-shortcode-form .select2-container a {
-				transition: none;
-				-webkit-transition: none;
-			}
-
-			.wp-admin .select2-drop {
-				z-index: 160001;
-			}
-
-		</style>
-
 		<script type="text/html" id="tmpl-shortcode-ui-field-term-select">
 			<div class="field-block shortcode-ui-field-term-select shortcode-ui-attribute-{{ data.attr }}">
 				<label for="{{ data.id }}">{{{ data.label }}}</label>
-				<input type="text" name="{{ data.attr }}" id="{{ data.id }}" value="{{ data.value }}" class="shortcode-ui-term-select" />
+				<select name="{{ data.attr }}" id="{{ data.id }}" class="shortcode-ui-term-select"></select>
 				<# if ( typeof data.description == 'string' && data.description.length ) { #>
 					<p class="description">{{{ data.description }}}</p>
 				<# } #>
@@ -113,7 +96,7 @@ public function action_wp_ajax_shortcode_ui_term_field() {
 		$requested_attr      = isset( $_GET['attr'] ) ? sanitize_text_field( $_GET['attr'] ) : null;
 		$page                = isset( $_GET['page'] ) ? absint( $_GET['page'] ) : null;
 		$search              = isset( $_GET['s'] ) ? sanitize_text_field( $_GET['s'] ) : '';
-		$response            = array( 'terms' => array(), 'found_terms' => 0, 'terms_per_page' => 10, 'page' => $page );
+		$response            = array( 'items' => array(), 'found_items' => 0, 'items_per_page' => 10, 'page' => $page );
 
 		if ( ! wp_verify_nonce( $nonce, 'shortcode_ui_field_term_select' ) ) {
 			wp_send_json_error( $response );
@@ -145,8 +128,8 @@ public function action_wp_ajax_shortcode_ui_term_field() {
 		$args['hide_empty'] = false;
 		$args['number']     = 10;
 
-		if ( ! empty( $_GET['tag__in'] ) ) {
-			$term__in = is_array( $_GET['tag__in'] ) ? $_GET['tag__in'] : explode( ',', $_GET['tag__in'] );
+		if ( ! empty( $_GET['include'] ) ) {
+			$term__in = is_array( $_GET['include'] ) ? $_GET['include'] : explode( ',', $_GET['include'] );
 			$args['number'] = count( $term__in );
 			$args['include'] = array_map( 'intval', $term__in );
 			$args['orderby']  = 'tag__in';
@@ -165,17 +148,17 @@ public function action_wp_ajax_shortcode_ui_term_field() {
 			wp_send_json_error();
 		}
 
-		$response['found_terms'] = absint( $num_results );
+		$response['found_items'] = absint( $num_results );
 
 		if ( isset( $page ) ) {
 			$args['page']   = $page;
-			$args['offset'] = ( $page - 1 ) * $response['terms_per_page'];
+			$args['offset'] = ( $page - 1 ) * $response['items_per_page'];
 		}
 
 		$results = get_terms( $args );
 
 		foreach ( $results as $result ) {
-			array_push( $response['terms'], array( 'id' => $result->term_id, 'text' => html_entity_decode( $result->name ) ) );
+			array_push( $response['items'], array( 'id' => $result->term_id, 'text' => html_entity_decode( $result->name ) ) );
 		}
 
 		wp_send_json_success( $response );

inc/fields/class-field-user-select.php

@@ -37,6 +37,7 @@ private function setup_actions() {
 		add_filter( 'shortcode_ui_fields',             array( $this, 'filter_shortcode_ui_fields' ) );
 		add_action( 'enqueue_shortcode_ui',            array( $this, 'action_enqueue_shortcode_ui' ) );
 		add_action( 'wp_ajax_shortcode_ui_user_field', array( $this, 'action_wp_ajax_shortcode_ui_user_field' ) );
+		add_action( 'wp_ajax_shortcode_ui_user_field_preselect', array( $this, 'action_wp_ajax_shortcode_ui_user_field_preselect' ) );
 		add_action( 'shortcode_ui_loaded_editor',      array( $this, 'action_shortcode_ui_loaded_editor' ) );
 	}
 
@@ -71,27 +72,10 @@ public function action_enqueue_shortcode_ui() {
 	public function action_shortcode_ui_loaded_editor() {
 		?>
 
-		<style>
-
-			.edit-shortcode-form .select2-container {
-				min-width: 300px;
-			}
-
-			.edit-shortcode-form .select2-container a {
-				transition: none;
-				-webkit-transition: none;
-			}
-
-			.wp-admin .select2-drop {
-				z-index: 160001;
-			}
-
-		</style>
-
 		<script type="text/html" id="tmpl-shortcode-ui-field-user-select">
 			<div class="field-block shortcode-ui-field-user-select shortcode-ui-attribute-{{ data.attr }}">
 				<label for="{{ data.id }}">{{{ data.label }}}</label>
-				<input type="text" name="{{ data.attr }}" id="{{ data.id }}" value="{{ data.value }}" class="shortcode-ui-user-select" />
+				<select name="{{ data.attr }}" id="{{ data.id }}" class="shortcode-ui-user-select"></select>
 				<# if ( typeof data.description == 'string' && data.description.length ) { #>
 					<p class="description">{{{ data.description }}}</p>
 				<# } #>
@@ -117,7 +101,7 @@ public function action_wp_ajax_shortcode_ui_user_field() {
 		$requested_attr      = isset( $_GET['attr'] ) ? sanitize_text_field( wp_unslash( $_GET['attr'] ) ) : null;
 		$page                = isset( $_GET['page'] ) ? sanitize_text_field( wp_unslash( $_GET['page'] ) ) : null;
 		$search_str          = isset( $_GET['s'] ) ? sanitize_text_field( wp_unslash( $_GET['s'] ) ) : null;
-		$response            = array( 'users' => array(), 'found_users' => 0, 'users_per_page' => 0 );
+		$response            = array( 'items' => array(), 'found_items' => 0, 'items_per_page' => 0 );
 
 		$include = null;
 		if ( isset( $_GET['include'] ) ) {
@@ -146,6 +130,7 @@ public function action_wp_ajax_shortcode_ui_user_field() {
 		// Include selected users to be displayed.
 		if ( $include ) {
 			$query_args['include'] = $include;
+			$query_args['orderby'] = 'include';
 		}
 
 		// Supports WP_User_Query query args.
@@ -166,15 +151,16 @@ public function action_wp_ajax_shortcode_ui_user_field() {
 		$query = new WP_User_Query( $query_args );
 
 		foreach ( $query->get_results() as $user ) {
-			array_push( $response['users'], array(
+			array_push( $response['items'], array(
 				'id'   => $user->ID,
 				'text' => html_entity_decode( $user->display_name ),
 			) );
 		}
 
-		$response['found_users']    = $query->get_total();
-		$response['users_per_page'] = $query->query_vars['number'];
+		$response['found_items']    = $query->get_total();
+		$response['items_per_page'] = $query->query_vars['number'];
 
 		wp_send_json_success( $response );
 	}
+
 }