Ensure frontend preview link gets customize_theme param in theme switches

westonruter · westonruter · commit 9ca3ff2f90df · 2017-03-15T23:28:13.000-07:00
The 'customize_theme' param is used on the frontend, whereas just 'theme' is used in the admin.
diff --git a/js/compat/customize-snapshots.js b/js/compat/customize-snapshots.js
@@ -500,6 +500,34 @@
 
 			snapshot.updateCountdown();
 			snapshot.editContainer.find( '.reset-time' ).toggle( scheduled );
+		},
+
+		/**
+		 * Parse query string.
+		 *
+		 * Polyfill for function was introduced into core in 4.7 as wp.customize.utils.parseQueryString.
+		 *
+		 * @param {string} queryString Query string.
+		 * @returns {object} Parsed query string.
+		 */
+		parseQueryString: function parseQueryString( queryString ) {
+			var queryParams = {};
+			_.each( queryString.split( '&' ), function( pair ) {
+				var parts, key, value;
+				parts = pair.split( '=', 2 );
+				if ( ! parts[0] ) {
+					return;
+				}
+				key = decodeURIComponent( parts[0].replace( /\+/g, ' ' ) );
+				key = key.replace( / /g, '_' ); // What PHP does.
+				if ( _.isUndefined( parts[1] ) ) {
+					value = null;
+				} else {
+					value = decodeURIComponent( parts[1].replace( /\+/g, ' ' ) );
+				}
+				queryParams[ key ] = value;
+			} );
+			return queryParams;
 		}
 	} );
 
diff --git a/js/customize-snapshots.js b/js/customize-snapshots.js
@@ -351,11 +351,19 @@
 			snapshot.previewLink.toggle( api.state( 'snapshot-saved' ).get() );
 			snapshot.previewLink.attr( 'target', snapshot.data.uuid );
 			setPreviewLinkHref = _.debounce( function() {
+				var queryVars;
 				if ( api.state( 'snapshot-exists' ).get() ) {
 					snapshot.previewLink.attr( 'href', snapshot.getSnapshotFrontendPreviewUrl() );
 				} else {
 					snapshot.previewLink.attr( 'href', snapshot.frontendPreviewUrl.get() );
 				}
+
+				// Add the customize_theme param to the frontend URL if the theme is not active.
+				if ( ! api.state( 'activated' ).get() ) {
+					queryVars = snapshot.parseQueryString( snapshot.previewLink.prop( 'search' ).substr( 1 ) );
+					queryVars.customize_theme = api.settings.theme.stylesheet;
+					snapshot.previewLink.prop( 'search', $.param( queryVars ) );
+				}
 			} );
 			snapshot.frontendPreviewUrl.bind( setPreviewLinkHref );
 			setPreviewLinkHref();
@@ -1178,23 +1186,29 @@
 		 * @return {void}.
 		 */
 		removeParamFromClose: function removeParamFromClose( targetParam ) {
-			var closeButton, queryString, updatedParams;
+			var snapshot = this, closeButton, queryString, updatedParams;
 			closeButton = $( '.customize-controls-close' );
 			queryString = closeButton.prop( 'search' ).substr( 1 );
 
 			if ( ! queryString.length ) {
 				return;
 			}
 
-			updatedParams = _.filter(
-				queryString.split( '&' ),
-				function( paramPair ) {
-					return 0 !== paramPair.indexOf( targetParam + '=' );
-				}
-			);
+			updatedParams = snapshot.parseQueryString( queryString );
+			delete updatedParams[ targetParam ];
+			closeButton.prop( 'search', $.param( updatedParams ) );
+		},
 
-			closeButton.prop( 'search', updatedParams.join( '&' ) );
-		}
+		/**
+		 * Parse query string.
+		 *
+		 * @since 4.7.0
+		 * @access public
+		 *
+		 * @param {string} queryString Query string.
+		 * @returns {object} Parsed query string.
+		 */
+		parseQueryString: api.utils.parseQueryString
 	} );
 
 	if ( 'undefined' !== typeof _customizeSnapshotsSettings ) {
diff --git a/php/class-post-type.php b/php/class-post-type.php
@@ -900,7 +900,7 @@ public function set_customizer_state_query_vars( $post_id, $query_vars ) {
 		}
 		if ( isset( $query_vars['previewing_theme'] ) ) {
 			$theme = $this->snapshot_manager->customize_manager->get_stylesheet();
-			$stored_query_vars['theme'] = $query_vars['previewing_theme'] ? $theme: '';
+			$stored_query_vars['theme'] = $query_vars['previewing_theme'] ? $theme : '';
 		}
 		update_post_meta( $post_id, '_preview_url_query_vars', $stored_query_vars );
 		return $stored_query_vars;
@@ -928,7 +928,7 @@ public function get_frontend_view_link( $post ) {
 
 		if ( isset( $preview_url_query_vars['theme'] ) && $current_theme !== $preview_url_query_vars['theme'] ) {
 			$args = array_merge( $args, array(
-				'theme' => $preview_url_query_vars['theme'],
+				'customize_theme' => $preview_url_query_vars['theme'],
 			) );
 		}
 

Original file line number	Diff line number	Diff line change
`@@ -900,7 +900,7 @@ public function set_customizer_state_query_vars( $post_id, $query_vars ) {`
`900`	`900`	`}`
`901`	`901`	`if ( isset( $query_vars['previewing_theme'] ) ) {`
`902`	`902`	`$theme = $this->snapshot_manager->customize_manager->get_stylesheet();`
`903`		`- $stored_query_vars['theme'] = $query_vars['previewing_theme'] ? $theme: '';`
	`903`	`+ $stored_query_vars['theme'] = $query_vars['previewing_theme'] ? $theme : '';`
`904`	`904`	`}`
`905`	`905`	`update_post_meta( $post_id, '_preview_url_query_vars', $stored_query_vars );`
`906`	`906`	`return $stored_query_vars;`
`@@ -928,7 +928,7 @@ public function get_frontend_view_link( $post ) {`
`928`	`928`
`929`	`929`	`if ( isset( $preview_url_query_vars['theme'] ) && $current_theme !== $preview_url_query_vars['theme'] ) {`
`930`	`930`	`$args = array_merge( $args, array(`
`931`		`- 'theme' => $preview_url_query_vars['theme'],`
	`931`	`+ 'customize_theme' => $preview_url_query_vars['theme'],`
`932`	`932`	`) );`
`933`	`933`	`}`
`934`	`934`