Merge branch 'master' into release-v0.7.1

Gruntfile.js

@@ -73,7 +73,7 @@ module.exports = function( grunt ) {
 				src: './'
 			},
 			options: {
-				bin: "vendor/bin/phpcs --extensions=php --ignore=\"*/vendor/*,*/node_modules/*,dev.php\"",
+				bin: "vendor/bin/phpcs --extensions=php --ignore=\"*/php-tests/*,*/vendor/*,*/node_modules/*,dev.php\"",
 				standard: "phpcs.ruleset.xml"
 			}
 		},

README.md

@@ -31,6 +31,16 @@ New in 0.4.0 is the ability to [attach javascript functions to event attribute u
 
 Shortcake doesn't support custom key=>value pairs as shortcode attributes because it isn't a great user experience.
 
+### After upgrading to Shortcake 0.7.x, some of the shortcode UI fields (post select, user select, etc) don't work as expected. What can I do? ###
+
+In version 0.7.0, we updated to the most recent branch of the Select2 library, which provides the enhanced select fields in these field types. This causes a known conflict with plugins that enqueue older versions of Select2. (Popular plugins with known conflicts include WooCommerce and Advanced Custom Fields Pro, among others.)
+
+If you find that you're experiencing conflicts with these plugins, you can set a flag to load select2 in a distinct namespace by defining the constant `SELECT2_NOCONFLICT` in your wp-config.php (or anywhere that's defined before the 'init' hook.)
+
+
+	define( 'SELECT2_NOCONFLICT', true );
+
+
 ## Running tests ##
 
 We have test coverage for PHP using PHPunit, and JavaScript using Jasmine.

css/sass/_field-image.scss

@@ -7,9 +7,14 @@
 	}
 
 	.shortcake-attachment-preview {
-		float: left;
+		display: inline-block;
+		vertical-align: top;
 		margin: 0 20px 20px 0;
 		width: 150px;
+
+		div.filename{
+			word-wrap: break-word;
+		}
 	}
 
 	.shortcode-ui-field-attachment .description {

inc/class-shortcode-ui.php

@@ -37,6 +37,14 @@ class Shortcode_UI {
 	 */
 	private static $instance;
 
+	/**
+	 * Select2 library handle.
+	 *
+	 * @access public
+	 * @var string
+	 */
+	public static $select2_handle = 'select2';
+
 	/**
 	 * Get instance of Shortcake controller.
 	 *
@@ -199,12 +207,17 @@ public function action_admin_enqueue_scripts( $editor_supports ) {
 
 		$min = ( defined( 'SCRIPT_DEBUG' ) && SCRIPT_DEBUG ) ? '' : '.min';
 
-		wp_register_script( 'select2',
+		wp_register_script( self::$select2_handle,
 			trailingslashit( $this->plugin_url ) . "lib/select2/js/select2.full{$min}.js",
 			array( 'jquery', 'jquery-ui-sortable' ), '4.0.3'
 		);
 
-		wp_register_style( 'select2',
+		if ( 'select2' !== self::$select2_handle ) {
+			 wp_add_inline_script( self::$select2_handle, 'var existingSelect2 = jQuery.fn.select2 || null; if (existingSelect2) { delete jQuery.fn.select2; }', 'before' );
+			 wp_add_inline_script( self::$select2_handle, 'jQuery.fn[ shortcodeUIData.select2_handle ] = jQuery.fn.select2; if (existingSelect2) { delete jQuery.fn.select2; jQuery.fn.select2 = existingSelect2; }', 'after' );
+		}
+
+		wp_register_style( self::$select2_handle,
 			trailingslashit( $this->plugin_url ) . "lib/select2/css/select2{$min}.css",
 			null, '4.0.3'
 		);
@@ -248,18 +261,20 @@ public function enqueue() {
 			'strings'         => array(
 				'media_frame_title'                 => __( 'Insert Post Element', 'shortcode-ui' ),
 				'media_frame_menu_insert_label'     => __( 'Insert Post Element', 'shortcode-ui' ),
-				'media_frame_menu_update_label'     => __( '%s Details', 'shortcode-ui' ), // Substituted in JS
+				/* Translators: Ignore placeholder. This is replaced with the Shortcode name string in JS */
+				'media_frame_menu_update_label'     => __( '%s Details', 'shortcode-ui' ),
 				'media_frame_toolbar_insert_label'  => __( 'Insert Element', 'shortcode-ui' ),
 				'media_frame_toolbar_update_label'  => __( 'Update', 'shortcode-ui' ),
 				'media_frame_no_attributes_message' => __( 'There are no attributes to configure for this Post Element.', 'shortcode-ui' ),
 				'mce_view_error'                    => __( 'Failed to load preview', 'shortcode-ui' ),
 				'search_placeholder'                => __( 'Search', 'shortcode-ui' ),
 				'insert_content_label'              => __( 'Insert Content', 'shortcode-ui' ),
 			),
-			'nonces'     => array(
+			'nonces'          => array(
 				'preview'        => wp_create_nonce( 'shortcode-ui-preview' ),
 				'thumbnailImage' => wp_create_nonce( 'shortcode-ui-get-thumbnail-image' ),
 			),
+			'select2_handle'  => self::$select2_handle,
 		) );
 
 		// add templates to the footer, instead of where we're at now

inc/fields/class-field-attachment.php → inc/fields/class-shortcode-ui-field-attachment.php

@@ -1,12 +1,12 @@
 <?php
 
 /**
- * Primary controller class for Shortcake Attachment Field
+ * Primary controller class for Shortcode UI Attachment Field
  */
-class Shortcake_Field_Attachment {
+class Shortcode_UI_Field_Attachment {
 
 	/**
-	 * Shortcake Attachment Field controller instance.
+	 * Shortcode UI Attachment Field controller instance.
 	 *
 	 * @access private
 	 * @var object
@@ -35,11 +35,11 @@ class Shortcake_Field_Attachment {
 	);
 
 	/**
-	 * Get instance of Shortcake Attachment Field controller.
+	 * Get instance of Shortcode UI Attachment Field controller.
 	 *
 	 * Instantiates object on the fly when not already loaded.
 	 *
-	 * @return object
+	 * @return Shortcode_UI_Field_Attachment
 	 */
 	public static function get_instance() {
 		if ( ! isset( self::$instance ) ) {
@@ -69,7 +69,7 @@ public function filter_shortcode_ui_fields( $fields ) {
 	}
 
 	/**
-	 * Add localization data needed for Shortcake Attachment Field
+	 * Add localization data needed for Shortcode UI Attachment Field
 	 */
 	public function action_enqueue_shortcode_ui() {
 

inc/fields/class-field-color.php → inc/fields/class-shortcode-ui-field-color.php

@@ -1,12 +1,12 @@
 <?php
 
 /**
- * Primary controller class for Shortcake Color Field
+ * Primary controller class for Shortcode UI Color Field
  */
-class Shortcake_Field_Color {
+class Shortcode_UI_Field_Color {
 
 	/**
-	 * Shortcake Color Field controller instance.
+	 * Shortcode UI Color Field controller instance.
 	 *
 	 * @access private
 	 * @var object
@@ -35,7 +35,7 @@ class Shortcake_Field_Color {
 	);
 
 	/**
-	 * Get instance of Shortcake Color Field controller.
+	 * Get instance of Shortcode UI Color Field controller.
 	 *
 	 * Instantiates object on the fly when not already loaded.
 	 *

inc/fields/class-field-post-select.php → inc/fields/class-shortcode-ui-field-post-select.php

@@ -15,6 +15,10 @@ class Shortcode_UI_Field_Post_Select {
 		),
 	);
 
+	/**
+	 * Setup the instance.
+	 * @return Shortcode_UI_Field_Post_Select
+	 */
 	public static function get_instance() {
 		if ( ! isset( self::$instance ) ) {
 			self::$instance = new self;
@@ -38,8 +42,8 @@ public function filter_shortcode_ui_fields( $fields ) {
 
 	public function action_enqueue_shortcode_ui() {
 
-		wp_enqueue_script( 'select2' );
-		wp_enqueue_style( 'select2' );
+		wp_enqueue_script( Shortcode_UI::$select2_handle );
+		wp_enqueue_style( Shortcode_UI::$select2_handle );
 
 		wp_localize_script( 'shortcode-ui', 'shortcodeUiPostFieldData', array(
 			'nonce' => wp_create_nonce( 'shortcode_ui_field_post_select' ),
@@ -81,7 +85,12 @@ 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( 'items' => array(), 'found_items' => 0, 'items_per_page' => 0 );
+
+		$response            = array(
+			'items'          => array(),
+			'found_items'    => 0,
+			'items_per_page' => 0,
+		);
 
 		$shortcodes = Shortcode_UI::get_instance()->get_shortcodes();
 
@@ -129,7 +138,12 @@ public function action_wp_ajax_shortcode_ui_post_field() {
 		$query = new WP_Query( $query_args );
 
 		foreach ( $query->posts as $post_id ) {
-			array_push( $response['items'], 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_items']    = $query->found_posts;

inc/fields/class-field-term-select.php → inc/fields/class-shortcode-ui-field-term-select.php

@@ -52,8 +52,8 @@ public function filter_shortcode_ui_fields( $fields ) {
 	 */
 	public function action_enqueue_shortcode_ui() {
 
-		wp_enqueue_script( 'select2' );
-		wp_enqueue_style( 'select2' );
+		wp_enqueue_script( Shortcode_UI::$select2_handle );
+		wp_enqueue_style( Shortcode_UI::$select2_handle );
 
 		wp_localize_script( 'shortcode-ui', 'shortcodeUiTermFieldData', array(
 			'nonce' => wp_create_nonce( 'shortcode_ui_field_term_select' ),
@@ -96,7 +96,13 @@ 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( 'items' => array(), 'found_items' => 0, 'items_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 );
@@ -158,7 +164,12 @@ public function action_wp_ajax_shortcode_ui_term_field() {
 		$results = get_terms( $args );
 
 		foreach ( $results as $result ) {
-			array_push( $response['items'], 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 → inc/fields/class-shortcode-ui-field-user-select.php

@@ -58,8 +58,8 @@ public function filter_shortcode_ui_fields( $fields ) {
 	 */
 	public function action_enqueue_shortcode_ui() {
 
-		wp_enqueue_script( 'select2' );
-		wp_enqueue_style( 'select2' );
+		wp_enqueue_script( Shortcode_UI::$select2_handle );
+		wp_enqueue_style( Shortcode_UI::$select2_handle );
 
 		wp_localize_script( 'shortcode-ui', 'shortcodeUiUserFieldData', array(
 			'nonce' => wp_create_nonce( 'shortcode_ui_field_user_select' ),
@@ -101,7 +101,12 @@ 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( 'items' => array(), 'found_items' => 0, 'items_per_page' => 0 );
+
+		$response = array(
+			'items'          => array(),
+			'found_items'    => 0,
+			'items_per_page' => 0,
+		);
 
 		$include = null;
 		if ( isset( $_GET['include'] ) ) {
@@ -151,10 +156,12 @@ 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['items'], array(
-				'id'   => $user->ID,
-				'text' => html_entity_decode( $user->display_name ),
-			) );
+			array_push( $response['items'],
+				array(
+					'id'   => $user->ID,
+					'text' => html_entity_decode( $user->display_name ),
+				)
+			);
 		}
 
 		$response['found_items']    = $query->get_total();

js-tests/build/specs.js

@@ -1166,13 +1166,27 @@ var shortcodeViewConstructor = {
 
 		if ( currentShortcode ) {
 
-			var wp_media_frame = wp.media.frames.wp_media_frame = wp.media({
-				frame : "post",
-				state : 'shortcode-ui',
-				currentShortcode : currentShortcode,
-			});
+			var frame = wp.media.editor.get( window.wpActiveEditor );
+
+			if ( frame ) {
+				frame.mediaController.setActionUpdate( currentShortcode );
+				frame.open();
+			} else {
+				frame = wp.media.editor.open( window.wpActiveEditor, {
+					frame : "post",
+					state : 'shortcode-ui',
+					currentShortcode : currentShortcode,
+				});
+			}
 
-			wp_media_frame.open();
+			// Make sure to reset state when closed.
+			frame.once( 'close submit', function() {
+				frame.state().props.set('currentShortcode', false);
+				var menuItem = frame.menu.get().get('shortcode-ui');
+				menuItem.options.text = shortcodeUIData.strings.media_frame_title;
+				menuItem.render();
+				frame.setState( 'insert' );
+			} );
 
 			/* Trigger render_edit */
 			/*