Context-Aware WordPress Customizer Previews

customize-controls.js

/**
 * Scripts within the customizer controls window.
 *
 * Contextually shows the color hue control and informs the preview
 * when users open or close the front page sections section.
 */
( function( $ ) {

	wp.customize.bind( 'ready', function() {

		// Detect when the Login Designer panel is expanded (or closed) so we can preview the login form easily.
		wp.customize.panel( 'login_designer', function( section ) {

			section.expanded.bind( function( isExpanding ) {

				// Value of isExpanding will = true if you're entering the section, false if you're leaving it.
				if ( isExpanding ) {

					// Only send the previewer to the login designer page, if we're not already on it.
					var current_url = wp.customize.previewer.previewUrl();
					var current_url = current_url.includes( login_designer_controls.login_designer_page );

					if ( ! current_url ) {
						wp.customize.previewer.send( 'login-designer-open-designer', { expanded: isExpanding } );
					}

				} else {
					// Head back to the home page, if we leave the Login Designer panel.
					wp.customize.previewer.send( 'login-designer-back-to-home', { home_url: wp.customize.settings.url.home } );
				}
			} );

		} );

	} );

} )( jQuery );

customizer-preview.js

/**
 * This file adds some LIVE to the Theme Customizer live preview. To leverage
 * this, set your custom settings to 'postMessage' and then add your handling
 * here. This javascript will grab settings from customizer controls, and
 * then make any necessary changes to the page using jQuery.
 */

( function( $ ) {

	// Switch to the /login-designer/ page, where we can live-preview Customizer options for Login Designer.
	wp.customize.bind( 'preview-ready', function() {

		wp.customize.preview.bind( 'login-designer-open-designer', function( data ) {
			// When the section is expanded, open the login designer page specified via localization.
			if ( true === data.expanded ) {
				wp.customize.preview.send( 'url', login_designer_script.login_designer_page );
			}
		});

		wp.customize.preview.bind( 'login-designer-back-to-home', function( data ) {
			// Go back to home, if the section is closed.
			wp.customize.preview.send( 'url', data.home_url );
		});
	});
	
} )( jQuery );

customizer.php

<?php
/**
 * Live-preview changes.
 */
function logindesigner_customize_preview_js() {
	wp_enqueue_script( 'logindesigner-customize-preview', get_theme_file_uri( '/assets/js/customize-preview.js' ), array( 'customize-preview' ), '@@pkg.version', true );
}
add_action( 'customize_preview_init', 'logindesigner_customize_preview_js' );

/**
 * Customizer controls.
 */
function logindesigner_panel_js() {
	wp_enqueue_script( 'login-designer-customize-controls', get_theme_file_uri( '/assets/js/customize-controls.js' ), array(), '@@pkg.version', true );

	// If you need to pass a URL for the preview window, you can send it via localization.
	// Get the Login Designer page value from options.
	$page = Login_Designer()->get_login_designer_page();

	// Localization.
	$localize = array(
		'login_designer_page'   => get_permalink( $page ),
	);
	$localize = apply_filters( 'login_designer_controls_localization', $localize );

	wp_localize_script( 'login-designer-customize-controls', 'login_designer_controls', $localize );
}
add_action( 'customize_controls_enqueue_scripts', 'logindesigner_panel_js' );