first

wp-content/themes/generatepress/inc/customizer/controls/class-color-control.php

@@ -0,0 +1,44 @@
+<?php
+/**
+ * Customize API: ColorAlpha class
+ *
+ * @package GeneratePress
+ */
+
+/**
+ * Customize Color Control class.
+ *
+ * @since 1.0.0
+ *
+ * @see WP_Customize_Control
+ */
+class GeneratePress_Customize_Color_Control extends WP_Customize_Color_Control {
+	/**
+	 * Type.
+	 *
+	 * @access public
+	 * @since 1.0.0
+	 * @var string
+	 */
+	public $type = 'generate-color-control';
+
+	/**
+	 * Refresh the parameters passed to the JavaScript via JSON.
+	 *
+	 * @since 3.4.0
+	 * @uses WP_Customize_Control::to_json()
+	 */
+	public function to_json() {
+		parent::to_json();
+		$this->json['choices'] = $this->choices;
+	}
+
+	/**
+	 * Empty JS template.
+	 *
+	 * @access public
+	 * @since 1.0.0
+	 * @return void
+	 */
+	public function content_template() {}
+}

wp-content/themes/generatepress/inc/customizer/controls/class-deprecated.php

@@ -0,0 +1,303 @@
+<?php
+/**
+ * Where old Customizer controls retire.
+ *
+ * @package GeneratePress
+ */
+
+if ( ! defined( 'ABSPATH' ) ) {
+	exit; // Exit if accessed directly.
+}
+
+if ( class_exists( 'WP_Customize_Control' ) && ! class_exists( 'Generate_Customize_Width_Slider_Control' ) ) {
+	/**
+	 * Create our container width slider control
+	 *
+	 * @deprecated 1.3.47
+	 */
+	class Generate_Customize_Width_Slider_Control extends WP_Customize_Control {
+		/**
+		 * Render content.
+		 */
+		public function render_content() {}
+	}
+}
+
+if ( class_exists( 'WP_Customize_Control' ) && ! class_exists( 'GenerateLabelControl' ) ) {
+	/**
+	 * Heading area
+	 *
+	 * @since 0.1
+	 * @depreceted 1.3.41
+	 **/
+	class GenerateLabelControl extends WP_Customize_Control { // phpcs:ignore
+		/**
+		 * Render content.
+		 */
+		public function render_content() {}
+	}
+}
+
+if ( ! class_exists( 'Generate_Google_Font_Dropdown_Custom_Control' ) ) {
+	/**
+	 * A class to create a dropdown for all google fonts
+	 */
+	class Generate_Google_Font_Dropdown_Custom_Control extends WP_Customize_Control { // phpcs:ignore
+		/**
+		 * Set type.
+		 *
+		 * @var $type
+		 */
+		public $type = 'gp-customizer-fonts';
+
+		/**
+		 * Enqueue scripts.
+		 */
+		public function enqueue() {
+			wp_enqueue_script( 'generatepress-customizer-fonts', trailingslashit( get_template_directory_uri() ) . 'inc/js/typography-controls.js', array( 'customize-controls' ), GENERATE_VERSION, true );
+			wp_localize_script( 'generatepress-customizer-fonts', 'gp_customize', array( 'nonce' => wp_create_nonce( 'gp_customize_nonce' ) ) );
+		}
+
+		/**
+		 * Send variables to json.
+		 */
+		public function to_json() {
+			parent::to_json();
+
+			$number_of_fonts = apply_filters( 'generate_number_of_fonts', 200 );
+			$this->json['link'] = $this->get_link();
+			$this->json['value'] = $this->value();
+			$this->json['default_fonts_title'] = __( 'Default fonts', 'generatepress' );
+			$this->json['google_fonts_title'] = __( 'Google fonts', 'generatepress' );
+			$this->json['description'] = __( 'Font family', 'generatepress' );
+			$this->json['google_fonts'] = apply_filters( 'generate_typography_customize_list', generate_get_all_google_fonts( $number_of_fonts ) );
+			$this->json['default_fonts'] = generate_typography_default_fonts();
+		}
+
+		/**
+		 * Render content.
+		 */
+		public function content_template() {
+			?>
+			<label>
+				<span class="customize-control-title">{{ data.label }}</span>
+				<select {{{ data.link }}}>
+					<optgroup label="{{ data.default_fonts_title }}">
+						<# for ( var key in data.default_fonts ) { #>
+							<# var name = data.default_fonts[ key ].split(',')[0]; #>
+							<option value="{{ data.default_fonts[ key ] }}"  <# if ( data.default_fonts[ key ] === data.value ) { #>selected="selected"<# } #>>{{ name }}</option>
+						<# } #>
+					</optgroup>
+					<optgroup label="{{ data.google_fonts_title }}">
+						<# for ( var key in data.google_fonts ) { #>
+							<option value="{{ data.google_fonts[ key ].name }}"  <# if ( data.google_fonts[ key ].name === data.value ) { #>selected="selected"<# } #>>{{ data.google_fonts[ key ].name }}</option>
+						<# } #>
+					</optgroup>
+				</select>
+				<p class="description">{{ data.description }}</p>
+			</label>
+			<?php
+		}
+	}
+}
+
+if ( ! class_exists( 'Generate_Select_Control' ) ) {
+	/**
+	 * A class to create a dropdown for font weight
+	 */
+	class Generate_Select_Control extends WP_Customize_Control { // phpcs:ignore
+		/**
+		 * Set type.
+		 *
+		 * @var $type
+		 */
+		public $type = 'gp-typography-select';
+
+		/**
+		 * Set choices.
+		 *
+		 * @var $choices
+		 */
+		public $choices = array();
+
+		/**
+		 * Send variables to json.
+		 */
+		public function to_json() {
+			parent::to_json();
+
+			foreach ( $this->choices as $name => $choice ) {
+				$this->choices[ $name ] = $choice;
+			}
+
+			$this->json['choices'] = $this->choices;
+			$this->json['link'] = $this->get_link();
+			$this->json['value'] = $this->value();
+
+		}
+
+		/**
+		 * Render content.
+		 */
+		public function content_template() {
+			?>
+			<# if ( ! data.choices )
+				return;
+			#>
+			<label>
+				<select {{{ data.link }}}>
+					<# jQuery.each( data.choices, function( label, choice ) { #>
+						<option value="{{ choice }}" <# if ( choice === data.value ) { #> selected="selected"<# } #>>{{ choice }}</option>
+					<# } ) #>
+				</select>
+				<# if ( data.label ) { #>
+					<p class="description">{{ data.label }}</p>
+				<# } #>
+			</label>
+			<?php
+		}
+	}
+}
+
+if ( ! class_exists( 'Generate_Hidden_Input_Control' ) ) {
+	/**
+	 * Create our hidden input control
+	 */
+	class Generate_Hidden_Input_Control extends WP_Customize_Control { // phpcs:ignore
+		/**
+		 * Set type.
+		 *
+		 * @var $type
+		 */
+		public $type = 'gp-hidden-input';
+
+		/**
+		 * Set ID
+		 *
+		 * @var $id
+		 */
+		public $id = '';
+
+		/**
+		 * Send variables to json.
+		 */
+		public function to_json() {
+			parent::to_json();
+			$this->json['link'] = $this->get_link();
+			$this->json['value'] = $this->value();
+			$this->json['id'] = $this->id;
+		}
+
+		/**
+		 * Render content.
+		 */
+		public function content_template() {
+			?>
+			<input name="{{ data.id }}" type="text" {{{ data.link }}} value="{{{ data.value }}}" class="gp-hidden-input" />
+			<?php
+		}
+	}
+}
+
+if ( ! class_exists( 'Generate_Font_Weight_Custom_Control' ) ) {
+	/**
+	 * A class to create a dropdown for font weight
+	 *
+	 * @deprecated since 1.3.40
+	 */
+	class Generate_Font_Weight_Custom_Control extends WP_Customize_Control { // phpcs:ignore
+
+		/**
+		 * Construct.
+		 *
+		 * @param object $manager The manager.
+		 * @param int    $id The ID.
+		 * @param array  $args The args.
+		 * @param array  $options The options.
+		 */
+		public function __construct( $manager, $id, $args = array(), $options = array() ) {
+			parent::__construct( $manager, $id, $args );
+		}
+
+		/**
+		 * Render the content of the category dropdown
+		 */
+		public function render_content() {
+			?>
+			<label>
+				<select <?php $this->link(); ?>>
+					<?php
+					printf( '<option value="%s" %s>%s</option>', 'normal', selected( $this->value(), 'normal', false ), 'normal' );
+					printf( '<option value="%s" %s>%s</option>', 'bold', selected( $this->value(), 'bold', false ), 'bold' );
+					printf( '<option value="%s" %s>%s</option>', '100', selected( $this->value(), '100', false ), '100' );
+					printf( '<option value="%s" %s>%s</option>', '200', selected( $this->value(), '200', false ), '200' );
+					printf( '<option value="%s" %s>%s</option>', '300', selected( $this->value(), '300', false ), '300' );
+					printf( '<option value="%s" %s>%s</option>', '400', selected( $this->value(), '400', false ), '400' );
+					printf( '<option value="%s" %s>%s</option>', '500', selected( $this->value(), '500', false ), '500' );
+					printf( '<option value="%s" %s>%s</option>', '600', selected( $this->value(), '600', false ), '600' );
+					printf( '<option value="%s" %s>%s</option>', '700', selected( $this->value(), '700', false ), '700' );
+					printf( '<option value="%s" %s>%s</option>', '800', selected( $this->value(), '800', false ), '800' );
+					printf( '<option value="%s" %s>%s</option>', '900', selected( $this->value(), '900', false ), '900' );
+					?>
+				</select>
+				<p class="description"><?php echo esc_html( $this->label ); ?></p>
+			</label>
+			<?php
+		}
+	}
+}
+
+if ( ! class_exists( 'Generate_Text_Transform_Custom_Control' ) ) {
+	/**
+	 * A class to create a dropdown for text-transform
+	 *
+	 * @deprecated since 1.3.40
+	 */
+	class Generate_Text_Transform_Custom_Control extends WP_Customize_Control { // phpcs:ignore
+
+		/**
+		 * Construct.
+		 *
+		 * @param object $manager The manager.
+		 * @param int    $id The ID.
+		 * @param array  $args The args.
+		 * @param array  $options The options.
+		 */
+		public function __construct( $manager, $id, $args = array(), $options = array() ) {
+			parent::__construct( $manager, $id, $args );
+		}
+
+		/**
+		 * Render the content of the category dropdown
+		 */
+		public function render_content() {
+			?>
+			<label>
+				<select <?php $this->link(); ?>>
+					<?php
+					printf( '<option value="%s" %s>%s</option>', 'none', selected( $this->value(), 'none', false ), 'none' );
+					printf( '<option value="%s" %s>%s</option>', 'capitalize', selected( $this->value(), 'capitalize', false ), 'capitalize' );
+					printf( '<option value="%s" %s>%s</option>', 'uppercase', selected( $this->value(), 'uppercase', false ), 'uppercase' );
+					printf( '<option value="%s" %s>%s</option>', 'lowercase', selected( $this->value(), 'lowercase', false ), 'lowercase' );
+					?>
+				</select>
+				<p class="description"><?php echo esc_html( $this->label ); ?></p>
+			</label>
+			<?php
+		}
+	}
+}
+
+if ( ! class_exists( 'Generate_Customize_Slider_Control' ) ) {
+	/**
+	 * Create our container width slider control
+	 *
+	 * @deprecated 1.3.47
+	 */
+	class Generate_Customize_Slider_Control extends WP_Customize_Control { // phpcs:ignore
+		/**
+		 * Render content.
+		 */
+		public function render_content() {}
+	}
+}

wp-content/themes/generatepress/inc/customizer/controls/class-range-control.php

@@ -0,0 +1,209 @@
+<?php
+/**
+ * The range slider Customizer control.
+ *
+ * @package GeneratePress
+ */
+
+if ( ! defined( 'ABSPATH' ) ) {
+	exit; // Exit if accessed directly.
+}
+
+if ( class_exists( 'WP_Customize_Control' ) && ! class_exists( 'Generate_Range_Slider_Control' ) ) {
+	/**
+	 * Create a range slider control.
+	 * This control allows you to add responsive settings.
+	 *
+	 * @since 1.3.47
+	 */
+	class Generate_Range_Slider_Control extends WP_Customize_Control {
+		/**
+		 * The control type.
+		 *
+		 * @access public
+		 * @var string
+		 */
+		public $type = 'generatepress-range-slider';
+
+		/**
+		 * The control description.
+		 *
+		 * @access public
+		 * @var string
+		 */
+		public $description = '';
+
+		/**
+		 * The control sub-description.
+		 *
+		 * @access public
+		 * @var string
+		 */
+		public $sub_description = '';
+
+		/**
+		 * Refresh the parameters passed to the JavaScript via JSON.
+		 *
+		 * @see WP_Customize_Control::to_json()
+		 */
+		public function to_json() {
+			parent::to_json();
+
+			$devices = array( 'desktop', 'tablet', 'mobile' );
+			foreach ( $devices as $device ) {
+				$this->json['choices'][ $device ]['min']  = ( isset( $this->choices[ $device ]['min'] ) ) ? $this->choices[ $device ]['min'] : '0';
+				$this->json['choices'][ $device ]['max']  = ( isset( $this->choices[ $device ]['max'] ) ) ? $this->choices[ $device ]['max'] : '100';
+				$this->json['choices'][ $device ]['step'] = ( isset( $this->choices[ $device ]['step'] ) ) ? $this->choices[ $device ]['step'] : '1';
+				$this->json['choices'][ $device ]['edit'] = ( isset( $this->choices[ $device ]['edit'] ) ) ? $this->choices[ $device ]['edit'] : false;
+				$this->json['choices'][ $device ]['unit'] = ( isset( $this->choices[ $device ]['unit'] ) ) ? $this->choices[ $device ]['unit'] : false;
+			}
+
+			foreach ( $this->settings as $setting_key => $setting_id ) {
+				$this->json[ $setting_key ] = array(
+					'link'  => $this->get_link( $setting_key ),
+					'value' => $this->value( $setting_key ),
+					'default' => isset( $setting_id->default ) ? $setting_id->default : '',
+				);
+			}
+
+			$this->json['desktop_label'] = __( 'Desktop', 'generatepress' );
+			$this->json['tablet_label'] = __( 'Tablet', 'generatepress' );
+			$this->json['mobile_label'] = __( 'Mobile', 'generatepress' );
+			$this->json['reset_label'] = __( 'Reset', 'generatepress' );
+
+			$this->json['description'] = $this->description;
+			$this->json['sub_description'] = $this->sub_description;
+		}
+
+		/**
+		 * Enqueue control related scripts/styles.
+		 *
+		 * @access public
+		 */
+		public function enqueue() {
+			wp_enqueue_script(
+				'generatepress-range-slider',
+				trailingslashit( get_template_directory_uri() ) . 'inc/customizer/controls/js/slider-control.js',
+				array(
+					'jquery',
+					'customize-base',
+					'jquery-ui-slider',
+				),
+				GENERATE_VERSION,
+				true
+			);
+
+			wp_enqueue_style(
+				'generatepress-range-slider-css',
+				trailingslashit( get_template_directory_uri() ) . 'inc/customizer/controls/css/slider-customizer.css',
+				array(),
+				GENERATE_VERSION
+			);
+		}
+
+		/**
+		 * An Underscore (JS) template for this control's content (but not its container).
+		 *
+		 * Class variables for this control class are available in the `data` JS object;
+		 * export custom variables by overriding {@see WP_Customize_Control::to_json()}.
+		 *
+		 * @see WP_Customize_Control::print_template()
+		 *
+		 * @access protected
+		 */
+		protected function content_template() {
+			?>
+			<div class="generatepress-range-slider-control">
+				<div class="gp-range-title-area">
+					<# if ( data.label || data.description ) { #>
+						<div class="gp-range-title-info">
+							<# if ( data.label ) { #>
+								<span class="customize-control-title">{{{ data.label }}}</span>
+							<# } #>
+
+							<# if ( data.description ) { #>
+								<p class="description">{{{ data.description }}}</p>
+							<# } #>
+						</div>
+					<# } #>
+
+					<div class="gp-range-slider-controls">
+						<span class="gp-device-controls">
+							<# if ( 'undefined' !== typeof ( data.desktop ) ) { #>
+								<span class="generatepress-device-desktop dashicons dashicons-desktop" data-option="desktop" title="{{ data.desktop_label }}"></span>
+							<# } #>
+
+							<# if ( 'undefined' !== typeof (data.tablet) ) { #>
+								<span class="generatepress-device-tablet dashicons dashicons-tablet" data-option="tablet" title="{{ data.tablet_label }}"></span>
+							<# } #>
+
+							<# if ( 'undefined' !== typeof (data.mobile) ) { #>
+								<span class="generatepress-device-mobile dashicons dashicons-smartphone" data-option="mobile" title="{{ data.mobile_label }}"></span>
+							<# } #>
+						</span>
+
+						<span title="{{ data.reset_label }}" class="generatepress-reset dashicons dashicons-image-rotate"></span>
+					</div>
+				</div>
+
+				<div class="gp-range-slider-areas">
+					<# if ( 'undefined' !== typeof ( data.desktop ) ) { #>
+						<label class="range-option-area" data-option="desktop" style="display: none;">
+							<div class="wrapper <# if ( '' !== data.choices['desktop']['unit'] ) { #>has-unit<# } #>">
+								<div class="generatepress-slider" data-step="{{ data.choices['desktop']['step'] }}" data-min="{{ data.choices['desktop']['min'] }}" data-max="{{ data.choices['desktop']['max'] }}"></div>
+
+								<div class="gp_range_value <# if ( '' == data.choices['desktop']['unit'] && ! data.choices['desktop']['edit'] ) { #>hide-value<# } #>">
+									<input <# if ( data.choices['desktop']['edit'] ) { #>style="display:inline-block;"<# } else { #>style="display:none;"<# } #> type="number" step="{{ data.choices['desktop']['step'] }}" class="desktop-range value" value="{{ data.desktop.value }}" min="{{ data.choices['desktop']['min'] }}" max="{{ data.choices['desktop']['max'] }}" {{{ data.desktop.link }}} data-reset_value="{{ data.desktop.default }}" />
+									<span <# if ( ! data.choices['desktop']['edit'] ) { #>style="display:inline-block;"<# } else { #>style="display:none;"<# } #> class="value">{{ data.desktop.value }}</span>
+
+									<# if ( data.choices['desktop']['unit'] ) { #>
+										<span class="unit">{{ data.choices['desktop']['unit'] }}</span>
+									<# } #>
+								</div>
+							</div>
+						</label>
+					<# } #>
+
+					<# if ( 'undefined' !== typeof ( data.tablet ) ) { #>
+						<label class="range-option-area" data-option="tablet" style="display:none">
+							<div class="wrapper <# if ( '' !== data.choices['tablet']['unit'] ) { #>has-unit<# } #>">
+								<div class="generatepress-slider" data-step="{{ data.choices['tablet']['step'] }}" data-min="{{ data.choices['tablet']['min'] }}" data-max="{{ data.choices['tablet']['max'] }}"></div>
+
+								<div class="gp_range_value <# if ( '' == data.choices['tablet']['unit'] && ! data.choices['desktop']['edit'] ) { #>hide-value<# } #>">
+									<input <# if ( data.choices['tablet']['edit'] ) { #>style="display:inline-block;"<# } else { #>style="display:none;"<# } #> type="number" step="{{ data.choices['tablet']['step'] }}" class="tablet-range value" value="{{ data.tablet.value }}" min="{{ data.choices['tablet']['min'] }}" max="{{ data.choices['tablet']['max'] }}" {{{ data.tablet.link }}} data-reset_value="{{ data.tablet.default }}" />
+									<span <# if ( ! data.choices['tablet']['edit'] ) { #>style="display:inline-block;"<# } else { #>style="display:none;"<# } #> class="value">{{ data.tablet.value }}</span>
+
+									<# if ( data.choices['tablet']['unit'] ) { #>
+										<span class="unit">{{ data.choices['tablet']['unit'] }}</span>
+									<# } #>
+								</div>
+							</div>
+						</label>
+					<# } #>
+
+					<# if ( 'undefined' !== typeof ( data.mobile ) ) { #>
+						<label class="range-option-area" data-option="mobile" style="display:none;">
+							<div class="wrapper <# if ( '' !== data.choices['mobile']['unit'] ) { #>has-unit<# } #>">
+								<div class="generatepress-slider" data-step="{{ data.choices['mobile']['step'] }}" data-min="{{ data.choices['mobile']['min'] }}" data-max="{{ data.choices['mobile']['max'] }}"></div>
+
+								<div class="gp_range_value <# if ( '' == data.choices['mobile']['unit'] && ! data.choices['desktop']['edit'] ) { #>hide-value<# } #>">
+									<input <# if ( data.choices['mobile']['edit'] ) { #>style="display:inline-block;"<# } else { #>style="display:none;"<# } #> type="number" step="{{ data.choices['mobile']['step'] }}" class="mobile-range value" value="{{ data.mobile.value }}" min="{{ data.choices['mobile']['min'] }}" max="{{ data.choices['mobile']['max'] }}" {{{ data.mobile.link }}} data-reset_value="{{ data.mobile.default }}" />
+									<span <# if ( ! data.choices['mobile']['edit'] ) { #>style="display:inline-block;"<# } else { #>style="display:none;"<# } #> class="value">{{ data.mobile.value }}</span>
+
+									<# if ( data.choices['mobile']['unit'] ) { #>
+										<span class="unit">{{ data.choices['mobile']['unit'] }}</span>
+									<# } #>
+								</div>
+							</div>
+						</label>
+					<# } #>
+				</div>
+
+				<# if ( data.sub_description ) { #>
+					<p class="description sub-description">{{{ data.sub_description }}}</p>
+				<# } #>
+			</div>
+			<?php
+		}
+	}
+}

wp-content/themes/generatepress/inc/customizer/controls/class-react-control.php

@@ -0,0 +1,53 @@
+<?php
+/**
+ * Customize API: ColorAlpha class
+ *
+ * @package GeneratePress
+ */
+
+/**
+ * Customize Color Control class.
+ *
+ * @since 1.0.0
+ *
+ * @see WP_Customize_Control
+ */
+class GeneratePress_Customize_React_Control extends WP_Customize_Control {
+	/**
+	 * Type.
+	 *
+	 * @access public
+	 * @since 1.0.0
+	 * @var string
+	 */
+	public $type = 'generate-react-control';
+
+	/**
+	 * Refresh the parameters passed to the JavaScript via JSON.
+	 *
+	 * @since 3.4.0
+	 * @uses WP_Customize_Control::to_json()
+	 */
+	public function to_json() {
+		parent::to_json();
+		$this->json['choices'] = $this->choices;
+	}
+
+	/**
+	 * Empty JS template.
+	 *
+	 * @access public
+	 * @since 1.0.0
+	 * @return void
+	 */
+	public function content_template() {}
+
+	/**
+	 * Empty PHP template.
+	 *
+	 * @access public
+	 * @since 1.0.0
+	 * @return void
+	 */
+	public function render_content() {}
+}

wp-content/themes/generatepress/inc/customizer/controls/class-typography-control.php

@@ -0,0 +1,243 @@
+<?php
+/**
+ * The typography Customizer control.
+ *
+ * @package GeneratePress
+ */
+
+if ( ! defined( 'ABSPATH' ) ) {
+	exit; // Exit if accessed directly.
+}
+
+if ( class_exists( 'WP_Customize_Control' ) && ! class_exists( 'Generate_Typography_Customize_Control' ) ) {
+	/**
+	 * Create the typography elements control.
+	 *
+	 * @since 2.0
+	 */
+	class Generate_Typography_Customize_Control extends WP_Customize_Control {
+		/**
+		 * Set the type.
+		 *
+		 * @var string $type
+		 */
+		public $type = 'gp-customizer-typography';
+
+		/**
+		 * Enqueue scripts.
+		 */
+		public function enqueue() {
+			wp_enqueue_script(
+				'generatepress-typography-selectWoo',
+				trailingslashit( get_template_directory_uri() ) . 'inc/customizer/controls/js/selectWoo.min.js',
+				array(
+					'customize-controls',
+					'jquery',
+				),
+				GENERATE_VERSION,
+				true
+			);
+
+			wp_enqueue_style(
+				'generatepress-typography-selectWoo',
+				trailingslashit( get_template_directory_uri() ) . 'inc/customizer/controls/css/selectWoo.min.css',
+				array(),
+				GENERATE_VERSION
+			);
+
+			wp_enqueue_script(
+				'generatepress-typography-customizer',
+				trailingslashit( get_template_directory_uri() ) . 'inc/customizer/controls/js/typography-customizer.js',
+				array(
+					'customize-controls',
+					'generatepress-typography-selectWoo',
+				),
+				GENERATE_VERSION,
+				true
+			);
+
+			wp_enqueue_style(
+				'generatepress-typography-customizer',
+				trailingslashit( get_template_directory_uri() ) . 'inc/customizer/controls/css/typography-customizer.css',
+				array(),
+				GENERATE_VERSION
+			);
+		}
+
+		/**
+		 * Send variables to json.
+		 */
+		public function to_json() {
+			parent::to_json();
+
+			$this->json['default_fonts_title'] = __( 'System fonts', 'generatepress' );
+			$this->json['google_fonts_title'] = __( 'Google fonts', 'generatepress' );
+			$this->json['default_fonts'] = generate_typography_default_fonts();
+			$this->json['family_title'] = esc_html__( 'Font family', 'generatepress' );
+			$this->json['weight_title'] = esc_html__( 'Font weight', 'generatepress' );
+			$this->json['transform_title'] = esc_html__( 'Text transform', 'generatepress' );
+			$this->json['category_title'] = '';
+			$this->json['variant_title'] = esc_html__( 'Variants', 'generatepress' );
+
+			foreach ( $this->settings as $setting_key => $setting_id ) {
+				$this->json[ $setting_key ] = array(
+					'link'  => $this->get_link( $setting_key ),
+					'value' => $this->value( $setting_key ),
+					'default' => isset( $setting_id->default ) ? $setting_id->default : '',
+					'id' => isset( $setting_id->id ) ? $setting_id->id : '',
+				);
+
+				if ( 'weight' === $setting_key ) {
+					$this->json[ $setting_key ]['choices'] = $this->get_font_weight_choices();
+				}
+
+				if ( 'transform' === $setting_key ) {
+					$this->json[ $setting_key ]['choices'] = $this->get_font_transform_choices();
+				}
+			}
+		}
+
+		/**
+		 * Render content.
+		 */
+		public function content_template() {
+			?>
+			<# if ( '' !== data.label ) { #>
+				<span class="customize-control-title">{{ data.label }}</span>
+			<# } #>
+			<# if ( 'undefined' !== typeof ( data.family ) ) { #>
+				<div class="generatepress-font-family">
+					<label>
+						<select {{{ data.family.link }}} data-category="{{{ data.category.id }}}" data-variants="{{{ data.variant.id }}}" style="width:100%;">
+							<optgroup label="{{ data.default_fonts_title }}">
+								<# for ( var key in data.default_fonts ) { #>
+									<# var name = data.default_fonts[ key ].split(',')[0]; #>
+									<option value="{{ data.default_fonts[ key ] }}"  <# if ( data.default_fonts[ key ] === data.family.value ) { #>selected="selected"<# } #>>{{ name }}</option>
+								<# } #>
+							</optgroup>
+							<optgroup label="{{ data.google_fonts_title }}">
+								<# for ( var key in generatePressTypography.googleFonts ) { #>
+									<option value="{{ generatePressTypography.googleFonts[ key ].name }}"  <# if ( generatePressTypography.googleFonts[ key ].name === data.family.value ) { #>selected="selected"<# } #>>{{ generatePressTypography.googleFonts[ key ].name }}</option>
+								<# } #>
+							</optgroup>
+						</select>
+						<# if ( '' !== data.family_title ) { #>
+							<p class="description">{{ data.family_title }}</p>
+						<# } #>
+					</label>
+				</div>
+			<# } #>
+
+			<# if ( 'undefined' !== typeof ( data.variant ) ) { #>
+				<#
+				var id = data.family.value.split(' ').join('_').toLowerCase();
+				var font_data = generatePressTypography.googleFonts[id];
+				var variants = '';
+				if ( typeof font_data !== 'undefined' ) {
+					variants = font_data.variants;
+				}
+
+				if ( null === data.variant.value ) {
+					data.variant.value = data.variant.default;
+				}
+				#>
+				<div id={{{ data.variant.id }}}" class="generatepress-font-variant" data-saved-value="{{ data.variant.value }}">
+					<label>
+						<select name="{{{ data.variant.id }}}" multiple class="typography-multi-select" style="width:100%;" {{{ data.variant.link }}}>
+							<# _.each( variants, function( label, choice ) { #>
+								<option value="{{ label }}">{{ label }}</option>
+							<# } ) #>
+						</select>
+
+						<# if ( '' !== data.variant_title ) { #>
+							<p class="description">{{ data.variant_title }}</p>
+						<# } #>
+					</label>
+				</div>
+			<# } #>
+
+			<# if ( 'undefined' !== typeof ( data.category ) ) { #>
+				<div class="generatepress-font-category">
+					<label>
+							<input name="{{{ data.category.id }}}" type="hidden" {{{ data.category.link }}} value="{{{ data.category.value }}}" class="gp-hidden-input" />
+						<# if ( '' !== data.category_title ) { #>
+							<p class="description">{{ data.category_title }}</p>
+						<# } #>
+					</label>
+				</div>
+			<# } #>
+
+			<div class="generatepress-weight-transform-wrapper">
+				<# if ( 'undefined' !== typeof ( data.weight ) ) { #>
+					<div class="generatepress-font-weight">
+						<label>
+							<select {{{ data.weight.link }}}>
+
+								<# _.each( data.weight.choices, function( label, choice ) { #>
+
+									<option value="{{ choice }}" <# if ( choice === data.weight.value ) { #> selected="selected" <# } #>>{{ label }}</option>
+
+								<# } ) #>
+
+							</select>
+							<# if ( '' !== data.weight_title ) { #>
+								<p class="description">{{ data.weight_title }}</p>
+							<# } #>
+						</label>
+					</div>
+				<# } #>
+
+				<# if ( 'undefined' !== typeof ( data.transform ) ) { #>
+					<div class="generatepress-font-transform">
+						<label>
+							<select {{{ data.transform.link }}}>
+
+								<# _.each( data.transform.choices, function( label, choice ) { #>
+
+									<option value="{{ choice }}" <# if ( choice === data.transform.value ) { #> selected="selected" <# } #>>{{ label }}</option>
+
+								<# } ) #>
+
+							</select>
+							<# if ( '' !== data.transform_title ) { #>
+								<p class="description">{{ data.transform_title }}</p>
+							<# } #>
+						</label>
+					</div>
+				<# } #>
+			</div>
+			<?php
+		}
+
+		/**
+		 * Build font weight choices.
+		 */
+		public function get_font_weight_choices() {
+			return array(
+				'normal' => esc_html( 'normal' ),
+				'bold' => esc_html( 'bold' ),
+				'100' => esc_html( '100' ),
+				'200' => esc_html( '200' ),
+				'300' => esc_html( '300' ),
+				'400' => esc_html( '400' ),
+				'500' => esc_html( '500' ),
+				'600' => esc_html( '600' ),
+				'700' => esc_html( '700' ),
+				'800' => esc_html( '800' ),
+				'900' => esc_html( '900' ),
+			);
+		}
+
+		/**
+		 * Build text transform choices.
+		 */
+		public function get_font_transform_choices() {
+			return array(
+				'none' => esc_html( 'none' ),
+				'capitalize' => esc_html( 'capitalize' ),
+				'uppercase' => esc_html( 'uppercase' ),
+				'lowercase' => esc_html( 'lowercase' ),
+			);
+		}
+	}
+}

wp-content/themes/generatepress/inc/customizer/controls/class-upsell-control.php

@@ -0,0 +1,80 @@
+<?php
+/**
+ * The upsell Customizer controll.
+ *
+ * @package GeneratePress
+ */
+
+if ( ! defined( 'ABSPATH' ) ) {
+	exit; // Exit if accessed directly.
+}
+
+if ( class_exists( 'WP_Customize_Control' ) && ! class_exists( 'Generate_Customize_Misc_Control' ) ) {
+	/**
+	 * Create our in-section upsell controls.
+	 * Escape your URL in the Customizer using esc_url().
+	 *
+	 * @since 0.1
+	 */
+	class Generate_Customize_Misc_Control extends WP_Customize_Control {
+		/**
+		 * Set description.
+		 *
+		 * @var public $description
+		 */
+		public $description = '';
+
+		/**
+		 * Set URL.
+		 *
+		 * @var public $url
+		 */
+		public $url = '';
+
+		/**
+		 * Set type.
+		 *
+		 * @var public $type
+		 */
+		public $type = 'addon';
+
+		/**
+		 * Set label.
+		 *
+		 * @var public $label
+		 */
+		public $label = '';
+
+		/**
+		 * Enqueue scripts.
+		 */
+		public function enqueue() {
+			wp_enqueue_style(
+				'generate-customizer-controls-css',
+				trailingslashit( get_template_directory_uri() ) . 'inc/customizer/controls/css/upsell-customizer.css',
+				array(),
+				GENERATE_VERSION
+			);
+		}
+
+		/**
+		 * Send variables to json.
+		 */
+		public function to_json() {
+			parent::to_json();
+			$this->json['url'] = esc_url( $this->url );
+		}
+
+		/**
+		 * Render content.
+		 */
+		public function content_template() {
+			?>
+			<p class="description" style="margin-top: 5px;">{{{ data.description }}}</p>
+			<span class="get-addon">
+				<a href="{{{ data.url }}}" class="button button-primary" target="_blank">{{ data.label }}</a>
+			</span>
+			<?php
+		}
+	}
+}

wp-content/themes/generatepress/inc/customizer/controls/class-upsell-section.php

@@ -0,0 +1,95 @@
+<?php
+/**
+ * The upsell Customizer section.
+ *
+ * @package GeneratePress
+ */
+
+if ( ! defined( 'ABSPATH' ) ) {
+	exit; // Exit if accessed directly.
+}
+
+if ( class_exists( 'WP_Customize_Section' ) && ! class_exists( 'GeneratePress_Upsell_Section' ) ) {
+	/**
+	 * Create our upsell section.
+	 * Escape your URL in the Customizer using esc_url().
+	 *
+	 * @since unknown
+	 */
+	class GeneratePress_Upsell_Section extends WP_Customize_Section {
+		/**
+		 * Set type.
+		 *
+		 * @var public $type
+		 */
+		public $type = 'gp-upsell-section';
+
+		/**
+		 * Set pro URL.
+		 *
+		 * @var public $pro_url
+		 */
+		public $pro_url = '';
+
+		/**
+		 * Set pro text.
+		 *
+		 * @var public $pro_text
+		 */
+		public $pro_text = '';
+
+		/**
+		 * Set ID.
+		 *
+		 * @var public $id
+		 */
+		public $id = '';
+
+		/**
+		 * Send variables to json.
+		 */
+		public function json() {
+			$json = parent::json();
+			$json['pro_text'] = $this->pro_text;
+			$json['pro_url']  = esc_url( $this->pro_url );
+			$json['id'] = $this->id;
+			return $json;
+		}
+
+		/**
+		 * Render content.
+		 */
+		protected function render_template() {
+			?>
+			<li id="accordion-section-{{ data.id }}" class="generate-upsell-accordion-section control-section-{{ data.type }} cannot-expand accordion-section">
+				<h3><a href="{{{ data.pro_url }}}" target="_blank">{{ data.pro_text }}</a></h3>
+			</li>
+			<?php
+		}
+	}
+}
+
+if ( ! function_exists( 'generate_customizer_controls_css' ) ) {
+	add_action( 'customize_controls_enqueue_scripts', 'generate_customizer_controls_css' );
+	/**
+	 * Add CSS for our controls
+	 *
+	 * @since 1.3.41
+	 */
+	function generate_customizer_controls_css() {
+		wp_enqueue_style(
+			'generate-customizer-controls-css',
+			trailingslashit( get_template_directory_uri() ) . 'inc/customizer/controls/css/upsell-customizer.css',
+			array(),
+			GENERATE_VERSION
+		);
+
+		wp_enqueue_script(
+			'generatepress-upsell',
+			trailingslashit( get_template_directory_uri() ) . 'inc/customizer/controls/js/upsell-control.js',
+			array( 'customize-controls' ),
+			GENERATE_VERSION,
+			true
+		);
+	}
+}

wp-content/themes/generatepress/inc/customizer/controls/css/slider-customizer.css

@@ -0,0 +1,142 @@
+.customize-control-generatepress-range-slider .generatepress-slider {
+	position: relative;
+	width: calc(100% - 60px);
+	height: 6px;
+	background-color: rgba(0,0,0,.10);
+	cursor: pointer;
+	-webkit-transition: background .5s;
+	-moz-transition: background .5s;
+	transition: background .5s;
+}
+
+.customize-control-generatepress-range-slider .has-unit .generatepress-slider {
+	width: calc(100% - 90px);
+}
+
+.customize-control-generatepress-range-slider .gp_range_value.hide-value {
+	display: none;
+}
+
+.customize-control-generatepress-range-slider .gp_range_value.hide-value + .generatepress-slider {
+	width: 100%;
+}
+
+.customize-control-generatepress-range-slider .generatepress-slider .ui-slider-handle {
+	height: 16px;
+	width: 16px;
+	background-color: #3498D9;
+	display: inline-block;
+	position: absolute;
+	top: 50%;
+	-webkit-transform: translateY(-50%) translateX(-4px);
+	transform: translateY(-50%) translateX(-4px);
+	border-radius: 50%;
+	cursor: pointer;
+}
+
+.gp-range-title-area {
+	display: flex;
+}
+
+.gp-range-slider-controls {
+	margin-left: auto;
+}
+
+.customize-control-generatepress-range-slider .wrapper {
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+	-webkit-box-pack: justify;
+	-ms-flex-pack: justify;
+	justify-content: space-between;
+	-webkit-box-align: center;
+	-ms-flex-align: center;
+	align-items: center;
+}
+
+.customize-control-generatepress-range-slider .gp_range_value {
+	font-size: 14px;
+	padding: 0;
+	font-weight: 400;
+	width: 50px;
+	display: -webkit-box;
+	display: -ms-flexbox;
+	display: flex;
+}
+
+.customize-control-generatepress-range-slider .has-unit .gp_range_value {
+	width: 80px;
+}
+
+.customize-control-generatepress-range-slider .gp_range_value span.value {
+    font-size: 12px;
+    width: calc(100% - 2px);
+    text-align: center;
+    min-height: 30px;
+    background: #FFF;
+    line-height: 30px;
+    border: 1px solid #DDD;
+}
+
+.customize-control-generatepress-range-slider .has-unit .gp_range_value span.value {
+	width: calc(100% - 32px);
+	display: block;
+}
+
+.customize-control-generatepress-range-slider .gp_range_value .unit {
+    width: 29px;
+    text-align: center;
+    font-size: 12px;
+    line-height: 30px;
+	background: #fff;
+	border: 1px solid #ddd;
+	margin-left: 1px;
+}
+
+.customize-control-generatepress-range-slider .generatepress-range-slider-reset span {
+    font-size: 16px;
+    line-height: 22px;
+}
+
+.customize-control-generatepress-range-slider .gp_range_value input {
+    font-size: 12px;
+    padding: 0px;
+    text-align: center;
+    min-height: 30px;
+	height: auto;
+	border-radius: 0;
+	border-color: #ddd;
+}
+
+.customize-control-generatepress-range-slider .has-unit .gp_range_value input {
+    width: calc(100% - 30px);
+}
+
+.customize-control-generatepress-range-slider .gp-range-title-area .dashicons {
+	cursor: pointer;
+	font-size: 11px;
+	width: 20px;
+	height: 20px;
+	line-height: 20px;
+	color: #222;
+	text-align: center;
+	position: relative;
+	top: 2px;
+}
+
+.customize-control-generatepress-range-slider .gp-range-title-area .dashicons:hover {
+	background: #fafafa;
+}
+
+.customize-control-generatepress-range-slider .gp-range-title-area .dashicons.selected {
+	background: #fff;
+	color: #222;
+}
+
+.customize-control-generatepress-range-slider .gp-device-controls > span:first-child:last-child {
+	display: none;
+}
+
+.customize-control-generatepress-range-slider .sub-description {
+	margin-top: 10px;
+}

wp-content/themes/generatepress/inc/customizer/controls/css/typography-customizer.css

@@ -0,0 +1,47 @@
+.generatepress-font-family {
+	margin-bottom: 12px;
+}
+
+.generatepress-weight-transform-wrapper {
+	display: -webkit-box;
+	display: -ms-flexbox;
+	display: flex;
+	-webkit-box-pack: justify;
+	-ms-flex-pack: justify;
+	justify-content: space-between;
+}
+
+.generatepress-font-weight,
+.generatepress-font-transform {
+    width: calc(50% - 5px);
+}
+
+span.select2-container.select2-container--default.select2-container--open li.select2-results__option {
+	margin:0;
+}
+
+span.select2-container.select2-container--default.select2-container--open{
+	z-index:999999;
+}
+
+.select2-selection__rendered li {
+    margin-bottom: 0;
+}
+
+.select2-container--default .select2-selection--single,
+.select2-container--default.select2-container .select2-selection--multiple,
+.select2-dropdown,
+.select2-container--default .select2-selection--multiple .select2-selection__choice {
+	border-color: #ddd;
+	border-radius: 0;
+}
+
+.select2-container--default .select2-results__option[aria-selected=true] {
+	color: rgba(0,0,0,0.4);
+}
+
+#customize-control-font_heading_1_control,
+#customize-control-font_heading_2_control,
+#customize-control-font_heading_3_control {
+	margin-top: 20px;
+}

wp-content/themes/generatepress/inc/customizer/controls/css/upsell-customizer.css

@@ -0,0 +1,54 @@
+.customize-control-addon:before {
+    content: "";
+    height: 1px;
+    width: 50px;
+    background: rgba(0,0,0,.10);
+    display: block;
+    margin-bottom: 10px;
+}
+
+.customize-control-addon {
+	margin-top: 10px;
+}
+
+li#accordion-section-generatepress_upsell_section {
+	border-top: 1px solid #D54E21;
+	border-bottom: 1px solid #D54E21;
+}
+.generate-upsell-accordion-section a {
+	background: #FFF;
+	display: block;
+	padding: 10px 10px 11px 14px;
+	line-height: 21px;
+	color: #D54E21;
+	text-decoration: none;
+}
+
+.generate-upsell-accordion-section a:hover {
+	background:#FAFAFA;
+}
+
+.generate-upsell-accordion-section h3 {
+	margin: 0;
+	position: relative;
+}
+
+.generate-upsell-accordion-section h3 a:after {
+	content: "\f345";
+	color: #D54E21;
+	position: absolute;
+	top: 11px;
+	right: 10px;
+	z-index: 1;
+	float: right;
+	border: none;
+	background: none;
+	font: normal 20px/1 dashicons;
+	speak: never;
+	display: block;
+	padding: 0;
+	text-indent: 0;
+	text-align: center;
+	-webkit-font-smoothing: antialiased;
+	-moz-osx-font-smoothing: grayscale;
+}

wp-content/themes/generatepress/inc/customizer/controls/js/customizer-controls.js

@@ -0,0 +1,297 @@
+( function( api ) {
+	'use strict';
+
+	// Add callback for when the header_textcolor setting exists.
+	api( 'generate_settings[nav_position_setting]', function( setting ) {
+		var isNavFloated, isNavAlignable, setNavDropPointActiveState, setNavAlignmentsActiveState;
+
+		/**
+		 * Determine whether the navigation is floating.
+		 *
+		 * @returns {boolean} Is floating?
+		 */
+		isNavFloated = function() {
+			if ( 'nav-float-right' === setting.get() || 'nav-float-left' === setting.get() ) {
+				return true;
+			}
+
+			return false;
+		};
+
+		/**
+		 * Determine whether the navigation is align-able.
+		 *
+		 * @returns {boolean} Is floating?
+		 */
+		isNavAlignable = function() {
+			if ( 'nav-float-right' === setting.get() || 'nav-float-left' === setting.get() ) {
+				var navAsHeader = api.instance( 'generate_menu_plus_settings[navigation_as_header]' );
+
+				if ( navAsHeader && navAsHeader.get() ) {
+					return true;
+				}
+
+				return false;
+			}
+
+			return true;
+		};
+
+		/**
+		 * Update a control's active state according to the navigation location setting's value.
+		 *
+		 * @param {wp.customize.Control} control
+		 */
+		setNavDropPointActiveState = function( control ) {
+			var setActiveState = function() {
+				control.active.set( isNavFloated() );
+			};
+
+			// FYI: With the following we can eliminate all of our PHP active_callback code.
+			control.active.validate = isNavFloated;
+
+			// Set initial active state.
+			setActiveState();
+
+			/*
+			 * Update activate state whenever the setting is changed.
+			 * Even when the setting does have a refresh transport where the
+			 * server-side active callback will manage the active state upon
+			 * refresh, having this JS management of the active state will
+			 * ensure that controls will have their visibility toggled
+			 * immediately instead of waiting for the preview to load.
+			 * This is especially important if the setting has a postMessage
+			 * transport where changing the setting wouldn't normally cause
+			 * the preview to refresh and thus the server-side active_callbacks
+			 * would not get invoked.
+			 */
+			setting.bind( setActiveState );
+		};
+
+		/**
+		 * Update a control's active state according to the navigation location setting's value.
+		 *
+		 * @param {wp.customize.Control} control
+		 */
+		setNavAlignmentsActiveState = function( control ) {
+			var setActiveState = function() {
+				control.active.set( isNavAlignable() );
+			};
+
+			// FYI: With the following we can eliminate all of our PHP active_callback code.
+			control.active.validate = isNavAlignable;
+
+			// Set initial active state.
+			setActiveState();
+
+			/*
+			 * Update activate state whenever the setting is changed.
+			 * Even when the setting does have a refresh transport where the
+			 * server-side active callback will manage the active state upon
+			 * refresh, having this JS management of the active state will
+			 * ensure that controls will have their visibility toggled
+			 * immediately instead of waiting for the preview to load.
+			 * This is especially important if the setting has a postMessage
+			 * transport where changing the setting wouldn't normally cause
+			 * the preview to refresh and thus the server-side active_callbacks
+			 * would not get invoked.
+			 */
+			setting.bind( setActiveState );
+		};
+
+		api.control( 'generate_settings[nav_drop_point]', setNavDropPointActiveState );
+		api.control( 'generate_settings[nav_layout_setting]', setNavAlignmentsActiveState );
+		api.control( 'generate_settings[nav_inner_width]', setNavAlignmentsActiveState );
+		api.control( 'generate_settings[nav_alignment_setting]', setNavAlignmentsActiveState );
+	} );
+
+	var setOption = function( options ) {
+		if ( options.headerAlignment ) {
+			api.instance( 'generate_settings[header_alignment_setting]' ).set( options.headerAlignment );
+		}
+
+		if ( options.navLocation ) {
+			api.instance( 'generate_settings[nav_position_setting]' ).set( options.navLocation );
+		}
+
+		if ( options.navAlignment ) {
+			api.instance( 'generate_settings[nav_alignment_setting]' ).set( options.navAlignment );
+		}
+
+		if ( options.boxAlignment ) {
+			api.instance( 'generate_settings[container_alignment]' ).set( options.boxAlignment );
+		}
+
+		if ( options.siteTitleFontSize ) {
+			api.instance( 'generate_settings[site_title_font_size]' ).set( options.siteTitleFontSize );
+		}
+
+		if ( 'undefined' !== typeof options.hideSiteTagline ) {
+			api.instance( 'generate_settings[hide_tagline]' ).set( options.hideSiteTagline );
+		}
+
+		if ( options.headerPaddingTop ) {
+			api.instance( 'generate_spacing_settings[header_top]' ).set( options.headerPaddingTop );
+		}
+
+		if ( options.headerPaddingBottom ) {
+			api.instance( 'generate_spacing_settings[header_bottom]' ).set( options.headerPaddingBottom );
+		}
+	};
+
+	api( 'generate_header_helper', function( value ) {
+		var headerAlignment = false,
+			navLocation = false,
+			navAlignment = false,
+			boxAlignment = false,
+			siteTitleFontSize = false,
+			hideSiteTagline = false,
+			headerPaddingTop = false,
+			headerPaddingBottom = false;
+
+		value.bind( function( newval ) {
+			var headerAlignmentSetting = api.instance( 'generate_settings[header_alignment_setting]' );
+			var navLocationSetting = api.instance( 'generate_settings[nav_position_setting]' );
+			var navAlignmentSetting = api.instance( 'generate_settings[nav_alignment_setting]' );
+			var boxAlignmentSetting = api.instance( 'generate_settings[container_alignment]' );
+			var siteTitleFontSizeSetting = api.instance( 'generate_settings[site_title_font_size]' );
+			var hideSiteTaglineSetting = api.instance( 'generate_settings[hide_tagline]' );
+			var headerPaddingTopSetting = api.instance( 'generate_spacing_settings[header_top]' );
+			var headerPaddingBottomSetting = api.instance( 'generate_spacing_settings[header_bottom]' );
+
+			if ( ! headerAlignmentSetting._dirty ) {
+				headerAlignment = headerAlignmentSetting.get();
+			}
+
+			if ( ! navLocationSetting._dirty ) {
+				navLocation = navLocationSetting.get();
+			}
+
+			if ( ! navAlignmentSetting._dirty ) {
+				navAlignment = navAlignmentSetting.get();
+			}
+
+			if ( ! boxAlignmentSetting._dirty ) {
+				boxAlignment = boxAlignmentSetting.get();
+			}
+
+			if ( ! siteTitleFontSizeSetting._dirty ) {
+				siteTitleFontSize = siteTitleFontSizeSetting.get();
+			}
+
+			if ( ! hideSiteTaglineSetting._dirty ) {
+				hideSiteTagline = hideSiteTaglineSetting.get();
+			}
+
+			if ( ! headerPaddingTopSetting._dirty ) {
+				headerPaddingTop = headerPaddingTopSetting.get();
+			}
+
+			if ( ! headerPaddingBottomSetting._dirty ) {
+				headerPaddingBottom = headerPaddingBottomSetting.get();
+			}
+
+			var options = {
+				headerAlignment: generatepress_defaults.header_alignment_setting,
+				navLocation: generatepress_defaults.nav_position_setting,
+				navAlignment: generatepress_defaults.nav_alignment_setting,
+				boxAlignment: generatepress_defaults.container_alignment,
+				siteTitleFontSize: generatepress_typography_defaults.site_title_font_size,
+				hideSiteTagline: generatepress_defaults.hide_tagline,
+				headerPaddingTop: generatepress_spacing_defaults.header_top,
+				headerPaddingBottom: generatepress_spacing_defaults.header_bottom,
+			};
+
+			if ( 'current' === newval ) {
+				options = {
+					headerAlignment: headerAlignment,
+					navLocation: navLocation,
+					navAlignment: navAlignment,
+					boxAlignment: boxAlignment,
+					siteTitleFontSize: siteTitleFontSize,
+					hideSiteTagline: hideSiteTagline,
+					headerPaddingTop: headerPaddingTop,
+					headerPaddingBottom: headerPaddingBottom,
+				};
+
+				setOption( options );
+			}
+
+			if ( 'default' === newval ) {
+				setOption( options );
+			}
+
+			if ( 'classic' === newval ) {
+				var options = {
+					headerAlignment: 'left',
+					navLocation: 'nav-below-header',
+					navAlignment: 'left',
+					boxAlignment: 'boxes',
+					siteTitleFontSize: '45',
+					hideSiteTagline: '',
+					headerPaddingTop: '40',
+					headerPaddingBottom: '40',
+				};
+
+				setOption( options );
+			}
+
+			if ( 'nav-before' === newval ) {
+				options['headerAlignment'] = 'left';
+				options['navLocation'] = 'nav-above-header';
+				options['navAlignment'] = 'left';
+
+				setOption( options );
+			}
+
+			if ( 'nav-after' === newval ) {
+				options['headerAlignment'] = 'left';
+				options['navLocation'] = 'nav-below-header';
+				options['navAlignment'] = 'left';
+
+				setOption( options );
+			}
+
+			if ( 'nav-before-centered' === newval ) {
+				options['headerAlignment'] = 'center';
+				options['navLocation'] = 'nav-above-header';
+				options['navAlignment'] = 'center';
+
+				setOption( options );
+			}
+
+			if ( 'nav-after-centered' === newval ) {
+				options['headerAlignment'] = 'center';
+				options['navLocation'] = 'nav-below-header';
+				options['navAlignment'] = 'center';
+
+				setOption( options );
+			}
+
+			if ( 'nav-left' === newval ) {
+				options['headerAlignment'] = 'left';
+				options['navLocation'] = 'nav-float-left';
+				options['navAlignment'] = 'right';
+
+				setOption( options );
+			}
+		} );
+	} );
+
+	api( 'generate_settings[use_dynamic_typography]', function( value ) {
+		var fontManager = api.control( 'generate_settings[font_manager]' );
+		var typographyManager = api.control( 'generate_settings[typography]' );
+
+		value.bind( function( newval ) {
+			if ( newval ) {
+				if ( fontManager.setting.get().length === 0 ) {
+					fontManager.setting.set( generatepressCustomizeControls.mappedTypographyData.fonts );
+				}
+
+				if ( typographyManager.setting.get().length === 0 ) {
+					typographyManager.setting.set( generatepressCustomizeControls.mappedTypographyData.typography );
+				}
+			}
+		} );
+	} );
+}( wp.customize ) );

wp-content/themes/generatepress/inc/customizer/controls/js/customizer-live-preview.js

@@ -0,0 +1,522 @@
+/**
+ * Theme Customizer enhancements for a better user experience.
+ *
+ * Contains handlers to make Theme Customizer preview reload changes asynchronously.
+ *
+ * @param id
+ * @param selector
+ * @param property
+ * @param default_value
+ * @param get_value
+ */
+function generatepress_colors_live_update( id, selector, property, default_value, get_value ) {
+	default_value = typeof default_value !== 'undefined' ? default_value : 'initial';
+	get_value = typeof get_value !== 'undefined' ? get_value : '';
+
+	wp.customize( 'generate_settings[' + id + ']', function( value ) {
+		value.bind( function( newval ) {
+			default_value = ( '' !== get_value ) ? wp.customize.value( 'generate_settings[' + get_value + ']' )() : default_value;
+			newval = ( '' !== newval ) ? newval : default_value;
+
+			if ( jQuery( 'style#' + id ).length ) {
+				jQuery( 'style#' + id ).html( selector + '{' + property + ':' + newval + ';}' );
+			} else {
+				jQuery( 'head' ).append( '<style id="' + id + '">' + selector + '{' + property + ':' + newval + '}</style>' );
+				setTimeout( function() {
+					jQuery( 'style#' + id ).not( ':last' ).remove();
+				}, 1000 );
+			}
+		} );
+	} );
+}
+
+function generatepress_classes_live_update( id, classes, selector, prefix ) {
+	classes = typeof classes !== 'undefined' ? classes : '';
+	prefix = typeof prefix !== 'undefined' ? prefix : '';
+	wp.customize( 'generate_settings[' + id + ']', function( value ) {
+		value.bind( function( newval ) {
+			jQuery.each( classes, function( i, v ) {
+				jQuery( selector ).removeClass( prefix + v );
+			} );
+			jQuery( selector ).addClass( prefix + newval );
+		} );
+	} );
+}
+
+function generatepress_typography_live_update( id, selector, property, unit, media, settings ) {
+	settings = typeof settings !== 'undefined' ? settings : 'generate_settings';
+	wp.customize( settings + '[' + id + ']', function( value ) {
+		value.bind( function( newval ) {
+			// Get our unit if applicable
+			unit = typeof unit !== 'undefined' ? unit : '';
+
+			var isTablet = ( 'tablet' == id.substring( 0, 6 ) ) ? true : false,
+				isMobile = ( 'mobile' == id.substring( 0, 6 ) ) ? true : false;
+
+			if ( isTablet ) {
+				if ( '' == wp.customize( settings + '[' + id + ']' ).get() ) {
+					var desktopID = id.replace( 'tablet_', '' );
+					newval = wp.customize( settings + '[' + desktopID + ']' ).get();
+				}
+			}
+
+			if ( isMobile ) {
+				if ( '' == wp.customize( settings + '[' + id + ']' ).get() ) {
+					var desktopID = id.replace( 'mobile_', '' );
+					newval = wp.customize( settings + '[' + desktopID + ']' ).get();
+				}
+			}
+
+			if ( 'buttons_font_size' == id && '' == wp.customize( 'generate_settings[buttons_font_size]' ).get() ) {
+				newval = wp.customize( 'generate_settings[body_font_size]' ).get();
+			}
+
+			// We're using a desktop value
+			if ( ! isTablet && ! isMobile ) {
+				var tabletValue = ( typeof wp.customize( settings + '[tablet_' + id + ']' ) !== 'undefined' ) ? wp.customize( settings + '[tablet_' + id + ']' ).get() : '',
+					mobileValue = ( typeof wp.customize( settings + '[mobile_' + id + ']' ) !== 'undefined' ) ? wp.customize( settings + '[mobile_' + id + ']' ).get() : '';
+
+				// The tablet setting exists, mobile doesn't
+				if ( '' !== tabletValue && '' == mobileValue ) {
+					media = generatepress_live_preview.desktop + ', ' + generatepress_live_preview.mobile;
+				}
+
+				// The tablet setting doesn't exist, mobile does
+				if ( '' == tabletValue && '' !== mobileValue ) {
+					media = generatepress_live_preview.desktop + ', ' + generatepress_live_preview.tablet;
+				}
+
+				// The tablet setting doesn't exist, neither does mobile
+				if ( '' == tabletValue && '' == mobileValue ) {
+					media = generatepress_live_preview.desktop + ', ' + generatepress_live_preview.tablet + ', ' + generatepress_live_preview.mobile;
+				}
+			}
+
+			// Check if media query
+			media_query = typeof media !== 'undefined' ? 'media="' + media + '"' : '';
+
+			jQuery( 'head' ).append( '<style id="' + id + '" ' + media_query + '>' + selector + '{' + property + ':' + newval + unit + ';}</style>' );
+			setTimeout( function() {
+				jQuery( 'style#' + id ).not( ':last' ).remove();
+			}, 1000 );
+
+			setTimeout( "jQuery('body').trigger('generate_spacing_updated');", 1000 );
+		} );
+	} );
+}
+
+( function( $ ) {
+	// Update the site title in real time...
+	wp.customize( 'blogname', function( value ) {
+		value.bind( function( newval ) {
+			$( '.main-title a' ).html( newval );
+		} );
+	} );
+
+	//Update the site description in real time...
+	wp.customize( 'blogdescription', function( value ) {
+		value.bind( function( newval ) {
+			$( '.site-description' ).html( newval );
+		} );
+	} );
+
+	wp.customize( 'generate_settings[logo_width]', function( value ) {
+		value.bind( function( newval ) {
+			$( '.site-header .header-image' ).css( 'width', newval + 'px' );
+
+			if ( '' == newval ) {
+				$( '.site-header .header-image' ).css( 'width', '' );
+			}
+		} );
+	} );
+
+	/**
+	 * Container width
+	 */
+	wp.customize( 'generate_settings[container_width]', function( value ) {
+		value.bind( function( newval ) {
+			if ( jQuery( 'style#container_width' ).length ) {
+				jQuery( 'style#container_width' ).html( 'body .grid-container, .wp-block-group__inner-container{max-width:' + newval + 'px;}' );
+			} else {
+				jQuery( 'head' ).append( '<style id="container_width">body .grid-container, .wp-block-group__inner-container{max-width:' + newval + 'px;}</style>' );
+				setTimeout( function() {
+					jQuery( 'style#container_width' ).not( ':last' ).remove();
+				}, 100 );
+			}
+			jQuery( 'body' ).trigger( 'generate_spacing_updated' );
+		} );
+	} );
+
+	/**
+	 * Live update for typography options.
+	 * We only want to run this if GP Premium isn't already doing it.
+	 */
+	if ( 'undefined' === typeof gp_premium_typography_live_update ) {
+		/**
+		 * Body font size, weight and transform
+		 */
+		generatepress_typography_live_update( 'body_font_size', 'body, button, input, select, textarea', 'font-size', 'px' );
+		generatepress_typography_live_update( 'body_line_height', 'body', 'line-height', '' );
+		generatepress_typography_live_update( 'paragraph_margin', 'p, .entry-content > [class*="wp-block-"]:not(:last-child)', 'margin-bottom', 'em' );
+		generatepress_typography_live_update( 'body_font_weight', 'body, button, input, select, textarea', 'font-weight' );
+		generatepress_typography_live_update( 'body_font_transform', 'body, button, input, select, textarea', 'text-transform' );
+
+		/**
+		 * H1 font size, weight and transform
+		 */
+		generatepress_typography_live_update( 'heading_1_font_size', 'h1', 'font-size', 'px', generatepress_live_preview.desktop );
+		generatepress_typography_live_update( 'mobile_heading_1_font_size', 'h1', 'font-size', 'px', generatepress_live_preview.mobile );
+		generatepress_typography_live_update( 'heading_1_weight', 'h1', 'font-weight' );
+		generatepress_typography_live_update( 'heading_1_transform', 'h1', 'text-transform' );
+		generatepress_typography_live_update( 'heading_1_line_height', 'h1', 'line-height', 'em' );
+
+		/**
+		 * H2 font size, weight and transform
+		 */
+		generatepress_typography_live_update( 'heading_2_font_size', 'h2', 'font-size', 'px', generatepress_live_preview.desktop );
+		generatepress_typography_live_update( 'mobile_heading_2_font_size', 'h2', 'font-size', 'px', generatepress_live_preview.mobile );
+		generatepress_typography_live_update( 'heading_2_weight', 'h2', 'font-weight' );
+		generatepress_typography_live_update( 'heading_2_transform', 'h2', 'text-transform' );
+		generatepress_typography_live_update( 'heading_2_line_height', 'h2', 'line-height', 'em' );
+
+		/**
+		 * H3 font size, weight and transform
+		 */
+		generatepress_typography_live_update( 'heading_3_font_size', 'h3', 'font-size', 'px' );
+		generatepress_typography_live_update( 'heading_3_weight', 'h3', 'font-weight' );
+		generatepress_typography_live_update( 'heading_3_transform', 'h3', 'text-transform' );
+		generatepress_typography_live_update( 'heading_3_line_height', 'h3', 'line-height', 'em' );
+	}
+
+	/**
+	 * Top bar width
+	 */
+	wp.customize( 'generate_settings[top_bar_width]', function( value ) {
+		value.bind( function( newval ) {
+			if ( 'full' == newval ) {
+				$( '.top-bar' ).removeClass( 'grid-container' ).removeClass( 'grid-parent' );
+				if ( 'contained' == wp.customize.value( 'generate_settings[top_bar_inner_width]' )() ) {
+					$( '.inside-top-bar' ).addClass( 'grid-container' ).addClass( 'grid-parent' );
+				}
+			}
+			if ( 'contained' == newval ) {
+				$( '.top-bar' ).addClass( 'grid-container' ).addClass( 'grid-parent' );
+				$( '.inside-top-bar' ).removeClass( 'grid-container' ).removeClass( 'grid-parent' );
+			}
+		} );
+	} );
+
+	/**
+	 * Inner top bar width
+	 */
+	wp.customize( 'generate_settings[top_bar_inner_width]', function( value ) {
+		value.bind( function( newval ) {
+			if ( 'full' == newval ) {
+				$( '.inside-top-bar' ).removeClass( 'grid-container' ).removeClass( 'grid-parent' );
+			}
+			if ( 'contained' == newval ) {
+				$( '.inside-top-bar' ).addClass( 'grid-container' ).addClass( 'grid-parent' );
+			}
+		} );
+	} );
+
+	/**
+	 * Top bar alignment
+	 */
+	generatepress_classes_live_update( 'top_bar_alignment', [ 'left', 'center', 'right' ], '.top-bar', 'top-bar-align-' );
+
+	/**
+	 * Header layout
+	 */
+	wp.customize( 'generate_settings[header_layout_setting]', function( value ) {
+		value.bind( function( newval ) {
+			if ( 'fluid-header' == newval ) {
+				$( '.site-header' ).removeClass( 'grid-container' ).removeClass( 'grid-parent' );
+				if ( 'contained' == wp.customize.value( 'generate_settings[header_inner_width]' )() ) {
+					$( '.inside-header' ).addClass( 'grid-container' ).addClass( 'grid-parent' );
+				}
+			}
+			if ( 'contained-header' == newval ) {
+				$( '.site-header' ).addClass( 'grid-container' ).addClass( 'grid-parent' );
+				$( '.inside-header' ).removeClass( 'grid-container' ).removeClass( 'grid-parent' );
+			}
+		} );
+	} );
+
+	/**
+	 * Inner Header layout
+	 */
+	wp.customize( 'generate_settings[header_inner_width]', function( value ) {
+		value.bind( function( newval ) {
+			if ( 'full-width' == newval ) {
+				$( '.inside-header' ).removeClass( 'grid-container' ).removeClass( 'grid-parent' );
+			}
+			if ( 'contained' == newval ) {
+				$( '.inside-header' ).addClass( 'grid-container' ).addClass( 'grid-parent' );
+			}
+		} );
+	} );
+
+	/**
+	 * Header alignment
+	 */
+	generatepress_classes_live_update( 'header_alignment_setting', [ 'left', 'center', 'right' ], 'body', 'header-aligned-' );
+
+	/**
+	 * Navigation width
+	 */
+	wp.customize( 'generate_settings[nav_layout_setting]', function( value ) {
+		value.bind( function( newval ) {
+			var navLocation = wp.customize.value( 'generate_settings[nav_position_setting]' )();
+
+			if ( $( 'body' ).hasClass( 'sticky-enabled' ) ) {
+				wp.customize.preview.send( 'refresh' );
+			} else {
+				var mainNavigation = $( '.main-navigation' );
+
+				if ( 'fluid-nav' == newval ) {
+					mainNavigation.removeClass( 'grid-container' ).removeClass( 'grid-parent' );
+					if ( 'full-width' !== wp.customize.value( 'generate_settings[nav_inner_width]' )() ) {
+						$( '.main-navigation .inside-navigation' ).addClass( 'grid-container' ).addClass( 'grid-parent' );
+					}
+				}
+				if ( 'contained-nav' == newval ) {
+					if ( ! mainNavigation.hasClass( 'has-branding' ) && generatepress_live_preview.isFlex && ( 'nav-float-right' === navLocation || 'nav-float-left' === navLocation ) ) {
+						return;
+					}
+
+					mainNavigation.addClass( 'grid-container' ).addClass( 'grid-parent' );
+				}
+			}
+		} );
+	} );
+
+	/**
+	 * Inner navigation width
+	 */
+	wp.customize( 'generate_settings[nav_inner_width]', function( value ) {
+		value.bind( function( newval ) {
+			if ( 'full-width' == newval ) {
+				$( '.main-navigation .inside-navigation' ).removeClass( 'grid-container' ).removeClass( 'grid-parent' );
+			}
+			if ( 'contained' == newval ) {
+				$( '.main-navigation .inside-navigation' ).addClass( 'grid-container' ).addClass( 'grid-parent' );
+			}
+		} );
+	} );
+
+	/**
+	 * Navigation alignment
+	 */
+	wp.customize( 'generate_settings[nav_alignment_setting]', function( value ) {
+		value.bind( function( newval ) {
+			var classes = [ 'left', 'center', 'right' ];
+			var selector = 'body';
+			var prefix = 'nav-aligned-';
+
+			if ( generatepress_live_preview.isFlex ) {
+				selector = '.main-navigation:not(.slideout-navigation)';
+				prefix = 'nav-align-';
+			}
+
+			jQuery.each( classes, function( i, v ) {
+				jQuery( selector ).removeClass( prefix + v );
+			} );
+
+			if ( generatepress_live_preview.isFlex && generatepress_live_preview.isRTL ) {
+				jQuery( selector ).addClass( prefix + newval );
+			} else if ( 'nav-align-left' !== prefix + newval ) {
+				jQuery( selector ).addClass( prefix + newval );
+			}
+		} );
+	} );
+
+	/**
+	 * Footer width
+	 */
+	wp.customize( 'generate_settings[footer_layout_setting]', function( value ) {
+		value.bind( function( newval ) {
+			if ( 'fluid-footer' == newval ) {
+				$( '.site-footer' ).removeClass( 'grid-container' ).removeClass( 'grid-parent' );
+			}
+			if ( 'contained-footer' == newval ) {
+				$( '.site-footer' ).addClass( 'grid-container' ).addClass( 'grid-parent' );
+			}
+		} );
+	} );
+
+	/**
+	 * Inner footer width
+	 */
+	wp.customize( 'generate_settings[footer_inner_width]', function( value ) {
+		value.bind( function( newval ) {
+			if ( 'full-width' == newval ) {
+				if ( $( '.footer-widgets-container' ).length ) {
+					$( '.footer-widgets-container' ).removeClass( 'grid-container' ).removeClass( 'grid-parent' );
+				} else {
+					$( '.inside-footer-widgets' ).removeClass( 'grid-container' ).removeClass( 'grid-parent' );
+				}
+				$( '.inside-site-info' ).removeClass( 'grid-container' ).removeClass( 'grid-parent' );
+			}
+			if ( 'contained' == newval ) {
+				if ( $( '.footer-widgets-container' ).length ) {
+					$( '.footer-widgets-container' ).addClass( 'grid-container' ).addClass( 'grid-parent' );
+				} else {
+					$( '.inside-footer-widgets' ).addClass( 'grid-container' ).addClass( 'grid-parent' );
+				}
+				$( '.inside-site-info' ).addClass( 'grid-container' ).addClass( 'grid-parent' );
+			}
+		} );
+	} );
+
+	/**
+	 * Footer bar alignment
+	 */
+	generatepress_classes_live_update( 'footer_bar_alignment', [ 'left', 'center', 'right' ], '.site-footer', 'footer-bar-align-' );
+
+	jQuery( 'body' ).on( 'generate_spacing_updated', function() {
+		var containerAlignment = wp.customize( 'generate_settings[container_alignment]' ).get(),
+			containerWidth = wp.customize( 'generate_settings[container_width]' ).get(),
+			containerLayout = wp.customize( 'generate_settings[content_layout_setting]' ).get(),
+			contentLeft = generatepress_live_preview.contentLeft,
+			contentRight = generatepress_live_preview.contentRight;
+
+		if ( ! generatepress_live_preview.isFlex && 'text' === containerAlignment ) {
+			if ( typeof wp.customize( 'generate_spacing_settings[content_left]' ) !== 'undefined' ) {
+				contentLeft = wp.customize( 'generate_spacing_settings[content_left]' ).get();
+			}
+
+			if ( typeof wp.customize( 'generate_spacing_settings[content_right]' ) !== 'undefined' ) {
+				contentRight = wp.customize( 'generate_spacing_settings[content_right]' ).get();
+			}
+
+			var newContainerWidth = Number( containerWidth ) + Number( contentLeft ) + Number( contentRight );
+
+			if ( jQuery( 'style#wide_container_width' ).length ) {
+				jQuery( 'style#wide_container_width' ).html( 'body:not(.full-width-content) #page{max-width:' + newContainerWidth + 'px;}' );
+			} else {
+				jQuery( 'head' ).append( '<style id="wide_container_width">body:not(.full-width-content) #page{max-width:' + newContainerWidth + 'px;}</style>' );
+				setTimeout( function() {
+					jQuery( 'style#wide_container_width' ).not( ':last' ).remove();
+				}, 100 );
+			}
+		}
+
+		if ( generatepress_live_preview.isFlex && 'boxes' === containerAlignment ) {
+			var topBarPaddingLeft = jQuery( '.inside-top-bar' ).css( 'padding-left' ),
+				topBarPaddingRight = jQuery( '.inside-top-bar' ).css( 'padding-right' ),
+				headerPaddingLeft = jQuery( '.inside-header' ).css( 'padding-left' ),
+				headerPaddingRight = jQuery( '.inside-header' ).css( 'padding-right' ),
+				footerWidgetPaddingLeft = jQuery( '.footer-widgets-container' ).css( 'padding-left' ),
+				footerWidgetPaddingRight = jQuery( '.footer-widgets-container' ).css( 'padding-right' ),
+				footerBarPaddingLeft = jQuery( '.inside-footer-bar' ).css( 'padding-left' ),
+				footerBarPaddingRight = jQuery( '.inside-footer-bar' ).css( 'padding-right' );
+
+			if ( typeof wp.customize( 'generate_spacing_settings[top_bar_left]' ) !== 'undefined' ) {
+				topBarPaddingLeft = wp.customize( 'generate_spacing_settings[top_bar_left]' ).get() + 'px';
+			}
+
+			if ( typeof wp.customize( 'generate_spacing_settings[top_bar_right]' ) !== 'undefined' ) {
+				topBarPaddingRight = wp.customize( 'generate_spacing_settings[top_bar_right]' ).get() + 'px';
+			}
+
+			if ( typeof wp.customize( 'generate_spacing_settings[header_left]' ) !== 'undefined' ) {
+				headerPaddingLeft = wp.customize( 'generate_spacing_settings[header_left]' ).get() + 'px';
+			}
+
+			if ( typeof wp.customize( 'generate_spacing_settings[header_right]' ) !== 'undefined' ) {
+				headerPaddingRight = wp.customize( 'generate_spacing_settings[header_right]' ).get() + 'px';
+			}
+
+			if ( typeof wp.customize( 'generate_spacing_settings[footer_widget_container_left]' ) !== 'undefined' ) {
+				footerWidgetPaddingLeft = wp.customize( 'generate_spacing_settings[footer_widget_container_left]' ).get() + 'px';
+			}
+
+			if ( typeof wp.customize( 'generate_spacing_settings[footer_widget_container_right]' ) !== 'undefined' ) {
+				footerWidgetPaddingRight = wp.customize( 'generate_spacing_settings[footer_widget_container_right]' ).get() + 'px';
+			}
+
+			if ( typeof wp.customize( 'generate_spacing_settings[footer_left]' ) !== 'undefined' ) {
+				footerBarPaddingLeft = wp.customize( 'generate_spacing_settings[footer_left]' ).get() + 'px';
+			}
+
+			if ( typeof wp.customize( 'generate_spacing_settings[footer_right]' ) !== 'undefined' ) {
+				footerBarPaddingRight = wp.customize( 'generate_spacing_settings[footer_right]' ).get() + 'px';
+			}
+
+			var newTopBarWidth = parseFloat( containerWidth ) + parseFloat( topBarPaddingLeft ) + parseFloat( topBarPaddingRight ),
+				newHeaderWidth = parseFloat( containerWidth ) + parseFloat( headerPaddingLeft ) + parseFloat( headerPaddingRight ),
+				newFooterWidgetWidth = parseFloat( containerWidth ) + parseFloat( footerWidgetPaddingLeft ) + parseFloat( footerWidgetPaddingRight ),
+				newFooterBarWidth = parseFloat( containerWidth ) + parseFloat( footerBarPaddingLeft ) + parseFloat( footerBarPaddingRight );
+
+			if ( jQuery( 'style#box_sizing_widths' ).length ) {
+				jQuery( 'style#box_sizing_widths' ).html( '.inside-top-bar.grid-container{max-width:' + newTopBarWidth + 'px;}.inside-header.grid-container{max-width:' + newHeaderWidth + 'px;}.footer-widgets-container.grid-container{max-width:' + newFooterWidgetWidth + 'px;}.inside-site-info.grid-container{max-width:' + newFooterBarWidth + 'px;}' );
+			} else {
+				jQuery( 'head' ).append( '<style id="box_sizing_widths">.inside-top-bar.grid-container{max-width:' + newTopBarWidth + 'px;}.inside-header.grid-container{max-width:' + newHeaderWidth + 'px;}.footer-widgets-container.grid-container{max-width:' + newFooterWidgetWidth + 'px;}.inside-site-info.grid-container{max-width:' + newFooterBarWidth + 'px;}</style>' );
+				setTimeout( function() {
+					jQuery( 'style#box_sizing_widths' ).not( ':last' ).remove();
+				}, 100 );
+			}
+		}
+
+		if ( generatepress_live_preview.isFlex && 'text' === containerAlignment ) {
+			var headerPaddingLeft = jQuery( '.inside-header' ).css( 'padding-left' ),
+				headerPaddingRight = jQuery( '.inside-header' ).css( 'padding-right' ),
+				menuItemPadding = jQuery( '.main-navigation .main-nav ul li a' ).css( 'padding-left' ),
+				secondaryMenuItemPadding = jQuery( '.secondary-navigation .main-nav ul li a' ).css( 'padding-left' );
+
+			if ( typeof wp.customize( 'generate_spacing_settings[header_left]' ) !== 'undefined' ) {
+				headerPaddingLeft = wp.customize( 'generate_spacing_settings[header_left]' ).get() + 'px';
+			}
+
+			if ( typeof wp.customize( 'generate_spacing_settings[header_right]' ) !== 'undefined' ) {
+				headerPaddingRight = wp.customize( 'generate_spacing_settings[header_right]' ).get() + 'px';
+			}
+
+			if ( typeof wp.customize( 'generate_spacing_settings[menu_item]' ) !== 'undefined' ) {
+				menuItemPadding = wp.customize( 'generate_spacing_settings[menu_item]' ).get() + 'px';
+			}
+
+			if ( typeof wp.customize( 'generate_spacing_settings[secondary_menu_item]' ) !== 'undefined' ) {
+				secondaryMenuItemPadding = wp.customize( 'generate_spacing_settings[secondary_menu_item]' ).get() + 'px';
+			}
+
+			var newNavPaddingLeft = parseFloat( headerPaddingLeft ) - parseFloat( menuItemPadding ),
+				newNavPaddingRight = parseFloat( headerPaddingRight ) - parseFloat( menuItemPadding ),
+				newSecondaryNavPaddingLeft = parseFloat( headerPaddingLeft ) - parseFloat( secondaryMenuItemPadding ),
+				newSecondaryNavPaddingRight = parseFloat( headerPaddingRight ) - parseFloat( secondaryMenuItemPadding );
+
+			if ( jQuery( 'style#navigation_padding' ).length ) {
+				jQuery( 'style#navigation_padding' ).html( '.nav-below-header .main-navigation .inside-navigation.grid-container, .nav-above-header .main-navigation .inside-navigation.grid-container{padding: 0 ' + newNavPaddingRight + 'px 0 ' + newNavPaddingLeft + 'px;}' );
+				jQuery( 'style#secondary_navigation_padding' ).html( '.secondary-nav-below-header .secondary-navigation .inside-navigation.grid-container, .secondary-nav-above-header .secondary-navigation .inside-navigation.grid-container{padding: 0 ' + newSecondaryNavPaddingRight + 'px 0 ' + newSecondaryNavPaddingLeft + 'px;}' );
+			} else {
+				jQuery( 'head' ).append( '<style id="navigation_padding">.nav-below-header .main-navigation .inside-navigation.grid-container, .nav-above-header .main-navigation .inside-navigation.grid-container{padding: 0 ' + newNavPaddingRight + 'px 0 ' + newNavPaddingLeft + 'px;}</style>' );
+				jQuery( 'head' ).append( '<style id="secondary_navigation_padding">.secondary-nav-below-header .secondary-navigation .inside-navigation.grid-container, .secondary-nav-above-header .secondary-navigation .inside-navigation.grid-container{padding: 0 ' + newSecondaryNavPaddingRight + 'px 0 ' + newSecondaryNavPaddingLeft + 'px;}</style>' );
+				setTimeout( function() {
+					jQuery( 'style#navigation_padding' ).not( ':last' ).remove();
+					jQuery( 'style#secondary_navigation_padding' ).not( ':last' ).remove();
+				}, 100 );
+			}
+		}
+	} );
+
+	wp.customize( 'generate_settings[global_colors]', function( value ) {
+		value.bind( function( newval ) {
+			var globalColors = '';
+
+			newval.forEach( function( item ) {
+				globalColors += '--' + item.slug + ':' + item.color + ';';
+			} );
+
+			if ( $( 'style#global_colors' ).length ) {
+				$( 'style#global_colors' ).html( ':root{' + globalColors + '}' );
+			} else {
+				$( 'head' ).append( '<style id="global_colors">:root{' + globalColors + '}</style>' );
+
+				setTimeout( function() {
+					$( 'style#global_colors' ).not( ':last' ).remove();
+				}, 100 );
+			}
+		} );
+	} );
+}( jQuery ) );

wp-content/themes/generatepress/inc/customizer/controls/js/postMessage.js

@@ -0,0 +1,341 @@
+/* global gpPostMessageFields */
+/* eslint max-depth: off */
+var gpPostMessage = {
+
+	/**
+	 * The fields.
+	 *
+	 * @since 1.0.0
+	 */
+	fields: {},
+
+	/**
+	 * A collection of methods for the <style> tags.
+	 *
+	 * @since 1.0.0
+	 */
+	styleTag: {
+
+		/**
+		 * Add a <style> tag in <head> if it doesn't already exist.
+		 *
+		 * @since 1.0.0
+		 *
+		 * @param {string} id - The field-ID.
+		 *
+		 * @return {void}
+		 */
+		add( id ) {
+			id = id.replace( /[^\w\s]/gi, '-' );
+			if ( null === document.getElementById( 'gp-postmessage-' + id ) || 'undefined' === typeof document.getElementById( 'gp-postmessage-' + id ) ) {
+				jQuery( 'head' ).append( '<style id="gp-postmessage-' + id + '"></style>' );
+			}
+		},
+
+		/**
+		 * Add a <style> tag in <head> if it doesn't already exist,
+		 * by calling the this.add method, and then add styles inside it.
+		 *
+		 * @since 1.0.0
+		 *
+		 * @param {string} id - The field-ID.
+		 * @param {string} styles - The styles to add.
+		 *
+		 * @return {void}
+		 */
+		addData( id, styles ) {
+			id = id.replace( '[', '-' ).replace( ']', '' );
+			gpPostMessage.styleTag.add( id );
+			jQuery( '#gp-postmessage-' + id ).text( styles );
+		},
+	},
+
+	/**
+	 * Common utilities.
+	 *
+	 * @since 1.0.0
+	 */
+	util: {
+
+		/**
+		 * Processes the value and applies any replacements and/or additions.
+		 *
+		 * @since 1.0.0
+		 *
+		 * @param {Object} output - The output (js_vars) argument.
+		 * @param {mixed}  value - The value.
+		 * @param {string} controlType - The control-type.
+		 *
+		 * @return {string|false} - Returns false if value is excluded, otherwise a string.
+		 */
+		processValue( output, value ) {
+			var self = this,
+				settings = window.parent.wp.customize.get(),
+				excluded = false;
+
+			if ( 'object' === typeof value ) {
+				_.each( value, function( subValue, key ) {
+					value[ key ] = self.processValue( output, subValue );
+				} );
+				return value;
+			}
+			output = _.defaults( output, {
+				prefix: '',
+				units: '',
+				suffix: '',
+				value_pattern: '$',
+				pattern_replace: {},
+				exclude: [],
+			} );
+
+			if ( 1 <= output.exclude.length ) {
+				_.each( output.exclude, function( exclusion ) {
+					if ( value == exclusion ) {
+						excluded = true;
+					}
+				} );
+			}
+
+			if ( excluded ) {
+				return false;
+			}
+
+			value = output.value_pattern.replace( new RegExp( '\\$', 'g' ), value );
+			_.each( output.pattern_replace, function( id, placeholder ) {
+				if ( ! _.isUndefined( settings[ id ] ) ) {
+					value = value.replace( placeholder, settings[ id ] );
+				}
+			} );
+			return output.prefix + value + output.units + output.suffix;
+		},
+
+		/**
+		 * Make sure urls are properly formatted for background-image properties.
+		 *
+		 * @since 1.0.0
+		 *
+		 * @param {string} url - The URL.
+		 *
+		 * @return {string} - Returns the URL.
+		 */
+		backgroundImageValue( url ) {
+			return ( -1 === url.indexOf( 'url(' ) ) ? 'url(' + url + ')' : url;
+		},
+	},
+
+	/**
+	 * A collection of utilities for CSS generation.
+	 *
+	 * @since 1.0.0
+	 */
+	css: {
+
+		/**
+		 * Generates the CSS from the output (js_vars) parameter.
+		 *
+		 * @since 1.0.0
+		 *
+		 * @param {Object} output - The output (js_vars) argument.
+		 * @param {mixed}  value - The value.
+		 * @param {string} controlType - The control-type.
+		 *
+		 * @return {string} - Returns CSS as a string.
+		 */
+		fromOutput( output, value, controlType ) {
+			var styles = '',
+				mediaQuery = false,
+				processedValue;
+
+			try {
+				value = JSON.parse( value );
+			} catch ( e ) {} // eslint-disable-line no-empty
+
+			if ( output.js_callback && 'function' === typeof window[ output.js_callback ] ) {
+				value = window[ output.js_callback[ 0 ] ]( value, output.js_callback[ 1 ] );
+			}
+
+			// Apply the gpPostMessageStylesOutput filter.
+			styles = wp.hooks.applyFilters( 'gpPostMessageStylesOutput', styles, value, output, controlType );
+
+			if ( '' === styles ) {
+				switch ( controlType ) {
+					case 'kirki-multicolor':
+					case 'kirki-sortable':
+						styles += output.element + '{';
+						_.each( value, function( val, key ) {
+							if ( output.choice && key !== output.choice ) {
+								return;
+							}
+							processedValue = gpPostMessage.util.processValue( output, val );
+
+							if ( '' === processedValue ) {
+								if ( 'background-color' === output.property ) {
+									processedValue = 'unset';
+								} else if ( 'background-image' === output.property ) {
+									processedValue = 'none';
+								}
+							}
+
+							if ( false !== processedValue ) {
+								styles += output.property ? output.property + '-' + key + ':' + processedValue + ';' : key + ':' + processedValue + ';';
+							}
+						} );
+						styles += '}';
+						break;
+					default:
+						if ( 'kirki-image' === controlType ) {
+							value = ( ! _.isUndefined( value.url ) ) ? gpPostMessage.util.backgroundImageValue( value.url ) : gpPostMessage.util.backgroundImageValue( value );
+						}
+						if ( _.isObject( value ) ) {
+							styles += output.element + '{';
+							_.each( value, function( val, key ) {
+								var property;
+								if ( output.choice && key !== output.choice ) {
+									return;
+								}
+								processedValue = gpPostMessage.util.processValue( output, val );
+								property = output.property ? output.property : key;
+
+								if ( '' === processedValue ) {
+									if ( 'background-color' === property ) {
+										processedValue = 'unset';
+									} else if ( 'background-image' === property ) {
+										processedValue = 'none';
+									}
+								}
+
+								if ( false !== processedValue ) {
+									styles += property + ':' + processedValue + ';';
+								}
+							} );
+							styles += '}';
+						} else {
+							processedValue = gpPostMessage.util.processValue( output, value );
+							if ( '' === processedValue ) {
+								if ( 'background-color' === output.property ) {
+									processedValue = 'unset';
+								} else if ( 'background-image' === output.property ) {
+									processedValue = 'none';
+								}
+							}
+
+							if ( false !== processedValue ) {
+								styles += output.element + '{' + output.property + ':' + processedValue + ';}';
+							}
+						}
+						break;
+				}
+			}
+
+			// Get the media-query.
+			if ( output.media_query && 'string' === typeof output.media_query && ! _.isEmpty( output.media_query ) ) {
+				mediaQuery = output.media_query;
+				if ( -1 === mediaQuery.indexOf( '@media' ) ) {
+					mediaQuery = '@media ' + mediaQuery;
+				}
+			}
+
+			// If we have a media-query, add it and return.
+			if ( mediaQuery ) {
+				return mediaQuery + '{' + styles + '}';
+			}
+
+			// Return the styles.
+			return styles;
+		},
+	},
+
+	/**
+	 * A collection of utilities to change the HTML in the document.
+	 *
+	 * @since 1.0.0
+	 */
+	html: {
+
+		/**
+		 * Modifies the HTML from the output (js_vars) parameter.
+		 *
+		 * @since 1.0.0
+		 *
+		 * @param {Object} output - The output (js_vars) argument.
+		 * @param {mixed}  value - The value.
+		 *
+		 * @return {void}
+		 */
+		fromOutput( output, value ) {
+			if ( output.js_callback && 'function' === typeof window[ output.js_callback ] ) {
+				value = window[ output.js_callback[ 0 ] ]( value, output.js_callback[ 1 ] );
+			}
+
+			if ( _.isObject( value ) || _.isArray( value ) ) {
+				if ( ! output.choice ) {
+					return;
+				}
+				_.each( value, function( val, key ) {
+					if ( output.choice && key !== output.choice ) {
+						return;
+					}
+					value = val;
+				} );
+			}
+			value = gpPostMessage.util.processValue( output, value );
+
+			if ( output.attr ) {
+				jQuery( output.element ).attr( output.attr, value );
+			} else {
+				jQuery( output.element ).html( value );
+			}
+		},
+	},
+
+	/**
+	 * A collection of utilities to allow toggling a CSS class.
+	 *
+	 * @since 1.0.0
+	 */
+	toggleClass: {
+
+		/**
+		 * Toggles a CSS class from the output (js_vars) parameter.
+		 *
+		 * @since 1.0.0
+		 *
+		 * @param {Object} output - The output (js_vars) argument.
+		 * @param {mixed}  value - The value.
+		 *
+		 * @return {void}
+		 */
+		fromOutput( output, value ) {
+			if ( 'undefined' === typeof output.class || 'undefined' === typeof output.value ) {
+				return;
+			}
+			if ( value === output.value && ! jQuery( output.element ).hasClass( output.class ) ) {
+				jQuery( output.element ).addClass( output.class );
+			} else {
+				jQuery( output.element ).removeClass( output.class );
+			}
+		},
+	},
+};
+
+jQuery( document ).ready( function() {
+	var styles;
+	_.each( gpPostMessageFields, function( field ) {
+		wp.customize( field.settings, function( value ) {
+			value.bind( function( newVal ) {
+				styles = '';
+				_.each( field.js_vars, function( output ) {
+					output.function = ( ! output.function || 'undefined' === typeof gpPostMessage[ output.function ] ) ? 'css' : output.function;
+					field.type = ( field.choices && field.choices.parent_type ) ? field.choices.parent_type : field.type;
+
+					if ( 'css' === output.function ) {
+						styles += gpPostMessage.css.fromOutput( output, newVal, field.type );
+					} else {
+						gpPostMessage[ output.function ].fromOutput( output, newVal, field.type );
+					}
+				} );
+				gpPostMessage.styleTag.addData( field.settings, styles );
+			} );
+		} );
+	} );
+} );

wp-content/themes/generatepress/inc/customizer/controls/js/slider-control.js

@@ -0,0 +1,134 @@
+wp.customize.controlConstructor['generatepress-range-slider'] = wp.customize.Control.extend({
+
+	ready: function() {
+
+		'use strict';
+
+		var control = this,
+		    value,
+		    thisInput,
+		    inputDefault,
+		    changeAction,
+			controlClass = '.customize-control-generatepress-range-slider',
+			footerActions = jQuery( '#customize-footer-actions' );
+		
+		// Set up the sliders
+		jQuery( '.generatepress-slider' ).each( function() {
+			var _this = jQuery( this );
+			var _input = _this.closest( 'label' ).find( 'input[type="number"]' );
+			var _text = _input.next( '.value' );
+			_this.slider({
+				value: _input.val(),
+				min: _this.data( 'min' ),
+				max: _this.data( 'max' ),
+				step: _this.data( 'step' ),
+				slide: function( event, ui ) {
+					_input.val( ui.value ).change();
+					_text.text( ui.value );
+				}
+			});
+		});
+		
+		// Update the range value based on the input value
+		jQuery( controlClass + ' .gp_range_value input[type=number]' ).on( 'input', function() {
+			value = jQuery( this ).attr( 'value' );
+			if ( '' == value ) {
+				value = -1;
+			}
+			jQuery( this ).closest( 'label' ).find( '.generatepress-slider' ).slider( 'value', parseFloat(value)).change();
+		});
+
+		// Handle the reset button
+		jQuery( controlClass + ' .generatepress-reset' ).on( 'click', function() {
+			var icon = jQuery( this ),
+				visible_area = icon.closest( '.gp-range-title-area' ).next( '.gp-range-slider-areas' ).children( 'label:visible' ),
+				input = visible_area.find( 'input[type=number]' ),
+				slider_value = visible_area.find( '.generatepress-slider' ),
+				visual_value = visible_area.find( '.gp_range_value' ),
+				reset_value = input.attr( 'data-reset_value' );
+			
+			input.val( reset_value ).change();
+			visual_value.find( 'input' ).val( reset_value );
+			visual_value.find( '.value' ).text( reset_value );
+			
+			if ( '' == reset_value ) {
+				reset_value = -1;
+			}
+			
+			slider_value.slider( 'value', parseFloat( reset_value ) );
+		});
+		
+		// Figure out which device icon to make active on load
+		jQuery( controlClass + ' .generatepress-range-slider-control' ).each( function() {
+			var _this = jQuery( this );
+			_this.find( '.gp-device-controls' ).children( 'span:first-child' ).addClass( 'selected' );
+			_this.find( '.range-option-area:first-child' ).show();
+		});
+		
+		// Do stuff when device icons are clicked
+		jQuery( controlClass + ' .gp-device-controls > span' ).on( 'click', function( event ) {
+			var device = jQuery( this ).data( 'option' );
+			
+			jQuery( controlClass + ' .gp-device-controls span' ).each( function() {
+				var _this = jQuery( this );
+				if ( device == _this.attr( 'data-option' ) ) {
+					_this.addClass( 'selected' );
+					_this.siblings().removeClass( 'selected' );
+				}
+			});
+			
+			jQuery( controlClass + ' .gp-range-slider-areas label' ).each( function() {
+				var _this = jQuery( this );
+				if ( device == _this.attr( 'data-option' ) ) {
+					_this.show();
+					_this.siblings().hide();
+				}
+			});
+			
+			// Set the device we're currently viewing
+			wp.customize.previewedDevice.set( jQuery( event.currentTarget ).data( 'option' ) );
+		} );
+		
+		// Set the selected devices in our control when the Customizer devices are clicked
+		footerActions.find( '.devices button' ).on( 'click', function() {
+			var device = jQuery( this ).data( 'device' );
+			jQuery( controlClass + ' .gp-device-controls span' ).each( function() {
+				var _this = jQuery( this );
+				if ( device == _this.attr( 'data-option' ) ) {
+					_this.addClass( 'selected' );
+					_this.siblings().removeClass( 'selected' );
+				}
+			});
+			
+			jQuery( controlClass + ' .gp-range-slider-areas label' ).each( function() {
+				var _this = jQuery( this );
+				if ( device == _this.attr( 'data-option' ) ) {
+					_this.show();
+					_this.siblings().hide();
+				}
+			});
+		});
+		
+		// Apply changes when desktop slider is changed
+		control.container.on( 'input change', '.desktop-range',
+			function() {
+				control.settings['desktop'].set( jQuery( this ).val() );
+			}
+		);
+		
+		// Apply changes when tablet slider is changed
+		control.container.on( 'input change', '.tablet-range',
+			function() {
+				control.settings['tablet'].set( jQuery( this ).val() );
+			}
+		);
+		
+		// Apply changes when mobile slider is changed
+		control.container.on( 'input change', '.mobile-range',
+			function() {
+				control.settings['mobile'].set( jQuery( this ).val() );
+			}
+		);
+	}
+
+});

wp-content/themes/generatepress/inc/customizer/controls/js/typography-customizer.js

@@ -0,0 +1,154 @@
+( function( api ) {
+
+	api.controlConstructor['gp-customizer-typography'] = api.Control.extend( {
+		ready: function() {
+			var control = this;
+
+			control.container.on( 'change', '.generatepress-font-family select',
+				function() {
+					var _this = jQuery( this ),
+						_value = _this.val(),
+						_categoryID = _this.attr( 'data-category' ),
+						_variantsID = _this.attr( 'data-variants' );
+
+					// Set our font family
+					control.settings['family'].set( _this.val() );
+
+					// Bail if our controls don't exist
+					if ( 'undefined' == typeof control.settings['category'] || 'undefined' == typeof control.settings['variant'] ) {
+						return;
+					}
+
+					setTimeout( function() {
+						// Send our request to the generate_get_all_google_fonts_ajax function
+						var response = jQuery.getJSON({
+							type: 'POST',
+							url: ajaxurl,
+							data: {
+								action: 'generate_get_all_google_fonts_ajax',
+								gp_customize_nonce: gp_customize.nonce
+							},
+							async: false,
+							dataType: 'json',
+						});
+
+						// Get our response
+						var fonts = response.responseJSON;
+
+						// Create an ID from our selected font
+						var id = _value.split(' ').join('_').toLowerCase();
+
+						// Set our values if we have them
+						if ( id in fonts ) {
+
+							// Get existing variants if this font is already selected
+							var got_variants = false;
+							jQuery( '.generatepress-font-family select' ).not( _this ).each( function( key, select ) {
+								var parent = jQuery( this ).closest( '.generatepress-font-family' );
+
+								if ( _value == jQuery( select ).val() && _this.data( 'category' ) !== jQuery( select ).data( 'category' ) ) {
+									if ( ! got_variants ) {
+										updated_variants = jQuery( parent.next( '.generatepress-font-variant' ).find( 'select' ) ).val();
+										got_variants = true;
+									}
+								}
+							} );
+
+							// We're using a Google font, so show the variants field
+							_this.closest( '.generatepress-font-family' ).next( 'div' ).show();
+
+							// Remove existing variants
+							jQuery( 'select[name="' + _variantsID + '"]' ).find( 'option' ).remove();
+
+							// Populate our select input with available variants
+							jQuery.each( fonts[ id ].variants, function( key, value ) {
+								jQuery( 'select[name="' + _variantsID + '"]' ).append( jQuery( '<option></option>' ).attr( 'value', value ).text( value ) );
+							} );
+
+							// Set our variants
+							if ( ! got_variants ) {
+								control.settings[ 'variant' ].set( fonts[ id ].variants );
+							} else {
+								control.settings[ 'variant' ].set( updated_variants );
+							}
+
+							// Set our font category
+							control.settings[ 'category' ].set( fonts[ id ].category );
+							jQuery( 'input[name="' + _categoryID + '"' ).val( fonts[ id ].category );
+						} else {
+							_this.closest( '.generatepress-font-family' ).next( 'div' ).hide();
+							control.settings[ 'category' ].set( '' )
+							control.settings[ 'variant' ].set( '' )
+							jQuery( 'input[name="' + _categoryID + '"' ).val( '' );
+							jQuery( 'select[name="' + _variantsID + '"]' ).find( 'option' ).remove();
+						}
+					}, 25 );
+				}
+			);
+
+			control.container.on( 'change', '.generatepress-font-variant select',
+				function() {
+					var _this = jQuery( this );
+					var variants = _this.val();
+
+					control.settings['variant'].set( variants );
+
+					jQuery( '.generatepress-font-variant select' ).each( function( key, value ) {
+						var this_control = jQuery( this ).closest( 'li' ).attr( 'id' ).replace( 'customize-control-', '' );
+						var parent = jQuery( this ).closest( '.generatepress-font-variant' );
+						var font_val = api.control( this_control ).settings['family'].get();
+
+						if ( font_val == control.settings['family'].get() && _this.attr( 'name' ) !== jQuery( value ).attr( 'name' ) ) {
+							jQuery( parent.find( 'select' ) ).not( _this ).val( variants ).triggerHandler( 'change' );
+							api.control( this_control ).settings['variant'].set( variants );
+						}
+					} );
+				}
+			);
+
+			control.container.on( 'change', '.generatepress-font-category input',
+				function() {
+					control.settings['category'].set( jQuery( this ).val() );
+				}
+			);
+
+			control.container.on( 'change', '.generatepress-font-weight select',
+				function() {
+					control.settings['weight'].set( jQuery( this ).val() );
+				}
+			);
+
+			control.container.on( 'change', '.generatepress-font-transform select',
+				function() {
+					control.settings['transform'].set( jQuery( this ).val() );
+				}
+			);
+
+		}
+	} );
+
+} )( wp.customize );
+
+jQuery( document ).ready( function( $ ) {
+
+	$( '.generatepress-font-family select' ).select2();
+
+	$( '.generatepress-font-variant' ).each( function( key, value ) {
+		var _this = $( this );
+		var value = _this.data( 'saved-value' );
+
+		if ( value ) {
+			value = value.toString().split( ',' );
+		}
+
+		_this.find( 'select' ).select2().val( value ).trigger( 'change.select2' );
+	} );
+
+	$( ".generatepress-font-family" ).each( function( key, value ) {
+		var _this = $( this );
+		if ( $.inArray( _this.find( 'select' ).val(), typography_defaults ) !== -1 ) {
+			_this.next( '.generatepress-font-variant' ).hide();
+		}
+	} );
+
+} );

wp-content/themes/generatepress/inc/customizer/controls/js/upsell-control.js

@@ -0,0 +1,12 @@
+( function( $, api ) {
+	api.sectionConstructor['gp-upsell-section'] = api.Section.extend( {
+
+		// No events for this type of section.
+		attachEvents: function () {},
+
+		// Always make the section active.
+		isContextuallyActive: function () {
+			return true;
+		}
+	} );
+} )( jQuery, wp.customize );