first

wp-content/themes/generatepress/inc/customizer/class-customize-field.php

@@ -0,0 +1,217 @@
+<?php
+/**
+ * This file handles adding Customizer controls.
+ *
+ * @package GeneratePress
+ */
+
+if ( ! defined( 'ABSPATH' ) ) {
+	exit; // Exit if accessed directly.
+}
+
+/**
+ * Helper functions to add Customizer fields.
+ */
+class GeneratePress_Customize_Field {
+	/**
+	 * Instance.
+	 *
+	 * @access private
+	 * @var object Instance
+	 */
+	private static $instance;
+
+	/**
+	 * Initiator.
+	 *
+	 * @since 1.2.0
+	 * @return object initialized object of class.
+	 */
+	public static function get_instance() {
+		if ( ! isset( self::$instance ) ) {
+			self::$instance = new self();
+		}
+
+		return self::$instance;
+	}
+
+	/**
+	 * Add a wrapper for defined controls.
+	 *
+	 * @param string $id The settings ID for this field.
+	 * @param array  $control_args The args for add_control().
+	 */
+	public static function add_wrapper( $id, $control_args = array() ) {
+		global $wp_customize;
+
+		if ( ! $id ) {
+			return;
+		}
+
+		$control_args['settings'] = isset( $wp_customize->selective_refresh ) ? array() : 'blogname';
+		$control_args['choices']['id'] = str_replace( '_', '-', $id );
+		$control_args['type'] = 'generate-wrapper-control';
+
+		$wp_customize->add_control(
+			new GeneratePress_Customize_React_Control(
+				$wp_customize,
+				$id,
+				$control_args
+			)
+		);
+	}
+
+	/**
+	 * Add a title.
+	 *
+	 * @param string $id The settings ID for this field.
+	 * @param array  $control_args The args for add_control().
+	 */
+	public static function add_title( $id, $control_args = array() ) {
+		global $wp_customize;
+
+		if ( ! $id ) {
+			return;
+		}
+
+		$control_args['settings'] = isset( $wp_customize->selective_refresh ) ? array() : 'blogname';
+		$control_args['type'] = 'generate-title-control';
+		$control_args['choices']['title'] = $control_args['title'];
+		unset( $control_args['title'] );
+
+		$wp_customize->add_control(
+			new GeneratePress_Customize_React_Control(
+				$wp_customize,
+				$id,
+				$control_args
+			)
+		);
+	}
+
+	/**
+	 * Add a Customizer field.
+	 *
+	 * @param string $id The settings ID for this field.
+	 * @param object $control_class A custom control classes if we want one.
+	 * @param array  $setting_args The args for add_setting().
+	 * @param array  $control_args The args for add_control().
+	 */
+	public static function add_field( $id, $control_class, $setting_args = array(), $control_args = array() ) {
+		global $wp_customize;
+
+		if ( ! $id ) {
+			return;
+		}
+
+		$settings = wp_parse_args(
+			$setting_args,
+			array(
+				'type' => 'option',
+				'capability' => 'edit_theme_options',
+				'default' => '',
+				'transport' => 'refresh',
+				'validate_callback' => '',
+				'sanitize_callback' => '',
+			)
+		);
+
+		$wp_customize->add_setting(
+			$id,
+			array(
+				'type' => $settings['type'],
+				'capability' => $settings['capability'],
+				'default' => $settings['default'],
+				'transport' => $settings['transport'],
+				'validate_callback' => $settings['validate_callback'],
+				'sanitize_callback' => $settings['sanitize_callback'],
+			)
+		);
+
+		$control_args['settings'] = $id;
+
+		if ( ! isset( $control_args['type'] ) ) {
+			unset( $control_args['type'] );
+		}
+
+		if ( ! isset( $control_args['defaultValue'] ) && isset( $setting_args['default'] ) ) {
+			$control_args['defaultValue'] = $setting_args['default'];
+		}
+
+		if ( isset( $control_args['output'] ) ) {
+			global $generate_customize_fields;
+
+			$generate_customize_fields[] = array(
+				'js_vars' => $control_args['output'],
+				'settings' => $id,
+			);
+		}
+
+		if ( $control_class ) {
+			$wp_customize->add_control(
+				new $control_class(
+					$wp_customize,
+					$id,
+					$control_args
+				)
+			);
+
+			return;
+		}
+
+		$wp_customize->add_control(
+			$id,
+			$control_args
+		);
+	}
+
+	/**
+	 * Add color field group.
+	 *
+	 * @param string $id The ID for the group wrapper.
+	 * @param string $section_id The section ID.
+	 * @param string $toggle_id The Toggle ID.
+	 * @param array  $fields The color fields.
+	 */
+	public static function add_color_field_group( $id, $section_id, $toggle_id, $fields ) {
+		self::add_wrapper(
+			"generate_{$id}_wrapper",
+			array(
+				'section' => $section_id,
+				'choices' => array(
+					'type' => 'color',
+					'toggleId' => $toggle_id,
+					'items' => array_keys( $fields ),
+				),
+			)
+		);
+
+		foreach ( $fields as $key => $field ) {
+			self::add_field(
+				$key,
+				'GeneratePress_Customize_Color_Control',
+				array(
+					'default' => $field['default_value'],
+					'transport' => 'postMessage',
+					'sanitize_callback' => 'generate_sanitize_rgba_color',
+				),
+				array(
+					'label' => $field['label'],
+					'section' => $section_id,
+					'choices' => array(
+						'alpha' => isset( $field['alpha'] ) ? $field['alpha'] : true,
+						'toggleId' => $toggle_id,
+						'wrapper' => $key,
+						'tooltip' => $field['tooltip'],
+						'hideLabel' => isset( $field['hide_label'] ) ? $field['hide_label'] : false,
+					),
+					'output' => array(
+						array(
+							'element'  => $field['element'],
+							'property' => $field['property'],
+						),
+					),
+				)
+			);
+		}
+	}
+}

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 );

wp-content/themes/generatepress/inc/customizer/customizer-helpers.php

@@ -0,0 +1,28 @@
+<?php
+/**
+ * Load necessary Customizer controls and functions.
+ *
+ * @package GeneratePress
+ */
+
+if ( ! defined( 'ABSPATH' ) ) {
+	exit; // Exit if accessed directly.
+}
+
+// Add fields.
+require_once trailingslashit( dirname( __FILE__ ) ) . 'class-customize-field.php';
+
+// Controls.
+require_once trailingslashit( dirname( __FILE__ ) ) . 'controls/class-react-control.php';
+require_once trailingslashit( dirname( __FILE__ ) ) . 'controls/class-color-control.php';
+require_once trailingslashit( dirname( __FILE__ ) ) . 'controls/class-range-control.php';
+require_once trailingslashit( dirname( __FILE__ ) ) . 'controls/class-typography-control.php';
+require_once trailingslashit( dirname( __FILE__ ) ) . 'controls/class-upsell-section.php';
+require_once trailingslashit( dirname( __FILE__ ) ) . 'controls/class-upsell-control.php';
+require_once trailingslashit( dirname( __FILE__ ) ) . 'controls/class-deprecated.php';
+
+// Helper functions.
+require_once trailingslashit( dirname( __FILE__ ) ) . 'helpers.php';
+
+// Deprecated.
+require_once trailingslashit( dirname( __FILE__ ) ) . 'deprecated.php';

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

@@ -0,0 +1,133 @@
+<?php
+/**
+ * Where old Customizer functions retire.
+ *
+ * @package GeneratePress
+ */
+
+if ( ! defined( 'ABSPATH' ) ) {
+	exit; // Exit if accessed directly.
+}
+
+if ( ! function_exists( 'generate_sanitize_typography' ) ) {
+	/**
+	 * Sanitize typography dropdown.
+	 *
+	 * @since 1.1.10
+	 * @deprecated 1.3.45
+	 * @param string $input The value to check.
+	 */
+	function generate_sanitize_typography( $input ) {
+		// Grab all of our fonts.
+		$fonts = generate_get_all_google_fonts();
+
+		// Loop through all of them and grab their names.
+		$font_names = array();
+		foreach ( $fonts as $k => $fam ) {
+			$font_names[] = $fam['name'];
+		}
+
+		// Get all non-Google font names.
+		$not_google = generate_typography_default_fonts();
+
+		// Merge them both into one array.
+		$valid = array_merge( $font_names, $not_google );
+
+		// Sanitize.
+		if ( in_array( $input, $valid ) ) {
+			return $input;
+		} else {
+			return 'Open Sans';
+		}
+	}
+}
+
+if ( ! function_exists( 'generate_sanitize_font_weight' ) ) {
+	/**
+	 * Sanitize font weight.
+	 *
+	 * @since 1.1.10
+	 * @deprecated 1.3.40
+	 * @param string $input The value to check.
+	 */
+	function generate_sanitize_font_weight( $input ) {
+
+		$valid = array(
+			'normal',
+			'bold',
+			'100',
+			'200',
+			'300',
+			'400',
+			'500',
+			'600',
+			'700',
+			'800',
+			'900',
+		);
+
+		if ( in_array( $input, $valid ) ) {
+			return $input;
+		} else {
+			return 'normal';
+		}
+	}
+}
+
+if ( ! function_exists( 'generate_sanitize_text_transform' ) ) {
+	/**
+	 * Sanitize text transform.
+	 *
+	 * @since 1.1.10
+	 * @deprecated 1.3.40
+	 * @param string $input The value to check.
+	 */
+	function generate_sanitize_text_transform( $input ) {
+
+		$valid = array(
+			'none',
+			'capitalize',
+			'uppercase',
+			'lowercase',
+		);
+
+		if ( in_array( $input, $valid ) ) {
+			return $input;
+		} else {
+			return 'none';
+		}
+	}
+}
+
+if ( ! function_exists( 'generate_typography_customize_preview_css' ) ) {
+	/**
+	 * Hide the hidden input control
+	 *
+	 * @since 1.3.40
+	 */
+	function generate_typography_customize_preview_css() {
+		?>
+		<style>
+			.customize-control-gp-hidden-input {display:none !important;}
+		</style>
+		<?php
+	}
+}
+
+if ( ! function_exists( 'generate_hidden_navigation' ) && function_exists( 'is_customize_preview' ) ) {
+	/**
+	 * Adds a hidden navigation if no navigation is set
+	 * This allows us to use postMessage to position the navigation when it doesn't exist
+	 *
+	 * @since 1.3.40
+	 */
+	function generate_hidden_navigation() {
+		if ( is_customize_preview() && function_exists( 'generate_navigation_position' ) ) {
+			?>
+			<div style="display:none;">
+				<?php generate_navigation_position(); ?>
+			</div>
+			<?php
+		}
+	}
+}

wp-content/themes/generatepress/inc/customizer/fields/back-to-top.php

@@ -0,0 +1,162 @@
+<?php
+/**
+ * This file handles the customizer fields for the back to top button.
+ *
+ * @package GeneratePress
+ */
+
+if ( ! defined( 'ABSPATH' ) ) {
+	exit; // No direct access, please.
+}
+
+GeneratePress_Customize_Field::add_title(
+	'generate_back_to_top_colors_title',
+	array(
+		'section' => 'generate_colors_section',
+		'title' => __( 'Back to Top', 'generatepress' ),
+		'choices' => array(
+			'toggleId' => 'back-to-top-colors',
+		),
+		'active_callback' => function() {
+			if ( generate_get_option( 'back_to_top' ) ) {
+				return true;
+			}
+
+			return false;
+		},
+	)
+);
+
+GeneratePress_Customize_Field::add_wrapper(
+	'generate_back_to_top_background_wrapper',
+	array(
+		'section' => 'generate_colors_section',
+		'choices' => array(
+			'type' => 'color',
+			'toggleId' => 'back-to-top-colors',
+			'items' => array(
+				'back_to_top_background_color',
+				'back_to_top_background_color_hover',
+			),
+		),
+	)
+);
+
+GeneratePress_Customize_Field::add_field(
+	'generate_settings[back_to_top_background_color]',
+	'GeneratePress_Customize_Color_Control',
+	array(
+		'default' => $color_defaults['back_to_top_background_color'],
+		'sanitize_callback' => 'generate_sanitize_rgba_color',
+		'transport' => 'postMessage',
+	),
+	array(
+		'label' => __( 'Background', 'generatepress' ),
+		'section' => 'generate_colors_section',
+		'choices' => array(
+			'alpha' => true,
+			'toggleId' => 'back-to-top-colors',
+			'wrapper' => 'back_to_top_background_color',
+			'tooltip' => __( 'Choose Initial Color', 'generatepress' ),
+		),
+		'output' => array(
+			array(
+				'element'  => 'a.generate-back-to-top',
+				'property' => 'background-color',
+			),
+		),
+	)
+);
+
+GeneratePress_Customize_Field::add_field(
+	'generate_settings[back_to_top_background_color_hover]',
+	'GeneratePress_Customize_Color_Control',
+	array(
+		'default' => $color_defaults['back_to_top_background_color_hover'],
+		'sanitize_callback' => 'generate_sanitize_rgba_color',
+		'transport' => 'postMessage',
+	),
+	array(
+		'label' => __( 'Background Hover', 'generatepress' ),
+		'section' => 'generate_colors_section',
+		'choices' => array(
+			'alpha' => true,
+			'toggleId' => 'back-to-top-colors',
+			'wrapper' => 'back_to_top_background_color_hover',
+			'tooltip' => __( 'Choose Hover Color', 'generatepress' ),
+			'hideLabel' => true,
+		),
+		'output' => array(
+			array(
+				'element'  => 'a.generate-back-to-top:hover, a.generate-back-to-top:focus',
+				'property' => 'background-color',
+			),
+		),
+	)
+);
+
+GeneratePress_Customize_Field::add_wrapper(
+	'generate_back_to_top_text_wrapper',
+	array(
+		'section' => 'generate_colors_section',
+		'choices' => array(
+			'type' => 'color',
+			'toggleId' => 'back-to-top-colors',
+			'items' => array(
+				'back_to_top_text_color',
+				'back_to_top_text_color_hover',
+			),
+		),
+	)
+);
+
+GeneratePress_Customize_Field::add_field(
+	'generate_settings[back_to_top_text_color]',
+	'GeneratePress_Customize_Color_Control',
+	array(
+		'default' => $color_defaults['back_to_top_text_color'],
+		'sanitize_callback' => 'generate_sanitize_hex_color',
+		'transport' => 'postMessage',
+	),
+	array(
+		'label' => __( 'Text', 'generatepress' ),
+		'section' => 'generate_colors_section',
+		'choices' => array(
+			'toggleId' => 'button-colors',
+			'wrapper' => 'back_to_top_text_color',
+			'tooltip' => __( 'Choose Initial Color', 'generatepress' ),
+		),
+		'output' => array(
+			array(
+				'element'  => 'a.generate-back-to-top',
+				'property' => 'color',
+			),
+		),
+	)
+);
+
+GeneratePress_Customize_Field::add_field(
+	'generate_settings[back_to_top_text_color_hover]',
+	'GeneratePress_Customize_Color_Control',
+	array(
+		'default' => $color_defaults['back_to_top_text_color_hover'],
+		'sanitize_callback' => 'generate_sanitize_hex_color',
+		'transport' => 'postMessage',
+	),
+	array(
+		'label' => __( 'Text Hover', 'generatepress' ),
+		'section' => 'generate_colors_section',
+		'choices' => array(
+			'toggleId' => 'back-to-top-colors',
+			'wrapper' => 'back_to_top_text_color_hover',
+			'tooltip' => __( 'Choose Hover Color', 'generatepress' ),
+			'hideLabel' => true,
+		),
+		'output' => array(
+			array(
+				'element'  => 'a.generate-back-to-top:hover, a.generate-back-to-top:focus',
+				'property' => 'color',
+			),
+		),
+	)
+);

wp-content/themes/generatepress/inc/customizer/fields/body.php

@@ -0,0 +1,156 @@
+<?php
+/**
+ * This file handles the customizer fields for the Body.
+ *
+ * @package GeneratePress
+ */
+
+if ( ! defined( 'ABSPATH' ) ) {
+	exit; // No direct access, please.
+}
+
+GeneratePress_Customize_Field::add_title(
+	'generate_body_colors_title',
+	array(
+		'section' => 'generate_colors_section',
+		'title' => __( 'Body', 'generatepress' ),
+		'choices' => array(
+			'toggleId' => 'base-colors',
+		),
+	)
+);
+
+GeneratePress_Customize_Field::add_field(
+	'generate_settings[background_color]',
+	'GeneratePress_Customize_Color_Control',
+	array(
+		'default' => $defaults['background_color'],
+		'sanitize_callback' => 'generate_sanitize_hex_color',
+		'transport' => 'postMessage',
+	),
+	array(
+		'label' => __( 'Background', 'generatepress' ),
+		'section' => 'generate_colors_section',
+		'choices' => array(
+			'toggleId' => 'base-colors',
+		),
+		'output' => array(
+			array(
+				'element'  => 'body',
+				'property' => 'background-color',
+			),
+		),
+	)
+);
+
+GeneratePress_Customize_Field::add_field(
+	'generate_settings[text_color]',
+	'GeneratePress_Customize_Color_Control',
+	array(
+		'default' => $defaults['text_color'],
+		'sanitize_callback' => 'generate_sanitize_hex_color',
+		'transport' => 'postMessage',
+	),
+	array(
+		'label' => __( 'Text', 'generatepress' ),
+		'section' => 'generate_colors_section',
+		'choices' => array(
+			'toggleId' => 'base-colors',
+		),
+		'output' => array(
+			array(
+				'element'  => 'body',
+				'property' => 'color',
+			),
+		),
+	)
+);
+
+GeneratePress_Customize_Field::add_wrapper(
+	'generate_body_link_wrapper',
+	array(
+		'section' => 'generate_colors_section',
+		'choices' => array(
+			'type' => 'color',
+			'toggleId' => 'base-colors',
+			'items' => array(
+				'link_color',
+				'link_color_hover',
+				'link_color_visited',
+			),
+		),
+	)
+);
+
+GeneratePress_Customize_Field::add_field(
+	'generate_settings[link_color]',
+	'GeneratePress_Customize_Color_Control',
+	array(
+		'default' => $defaults['link_color'],
+		'sanitize_callback' => 'generate_sanitize_hex_color',
+		'transport' => 'postMessage',
+	),
+	array(
+		'label' => __( 'Link', 'generatepress' ),
+		'section' => 'generate_colors_section',
+		'choices' => array(
+			'wrapper' => 'link_color',
+			'tooltip' => __( 'Choose Initial Color', 'generatepress' ),
+			'toggleId' => 'base-colors',
+		),
+		'output' => array(
+			array(
+				'element'  => 'a, a:visited',
+				'property' => 'color',
+			),
+		),
+	)
+);
+
+GeneratePress_Customize_Field::add_field(
+	'generate_settings[link_color_hover]',
+	'GeneratePress_Customize_Color_Control',
+	array(
+		'default' => $defaults['link_color_hover'],
+		'sanitize_callback' => 'generate_sanitize_hex_color',
+		'transport' => 'postMessage',
+	),
+	array(
+		'label' => __( 'Link Hover', 'generatepress' ),
+		'section' => 'generate_colors_section',
+		'choices' => array(
+			'wrapper' => 'link_color_hover',
+			'tooltip' => __( 'Choose Hover Color', 'generatepress' ),
+			'toggleId' => 'base-colors',
+			'hideLabel' => true,
+		),
+		'output' => array(
+			array(
+				'element'  => 'a:hover',
+				'property' => 'color',
+			),
+		),
+	)
+);
+
+if ( '' !== generate_get_option( 'link_color_visited' ) ) {
+	GeneratePress_Customize_Field::add_field(
+		'generate_settings[link_color_visited]',
+		'GeneratePress_Customize_Color_Control',
+		array(
+			'default' => $defaults['link_color_visited'],
+			'sanitize_callback' => 'generate_sanitize_hex_color',
+			'transport' => 'refresh',
+		),
+		array(
+			'label' => __( 'Link Color Visited', 'generatepress' ),
+			'section' => 'generate_colors_section',
+			'choices' => array(
+				'wrapper' => 'link_color_visited',
+				'tooltip' => __( 'Choose Visited Color', 'generatepress' ),
+				'toggleId' => 'base-colors',
+				'hideLabel' => true,
+			),
+		)
+	);
+}

wp-content/themes/generatepress/inc/customizer/fields/buttons.php

@@ -0,0 +1,158 @@
+<?php
+/**
+ * This file handles the customizer fields for the Body.
+ *
+ * @package GeneratePress
+ */
+
+if ( ! defined( 'ABSPATH' ) ) {
+	exit; // No direct access, please.
+}
+
+GeneratePress_Customize_Field::add_title(
+	'generate_buttons_colors_title',
+	array(
+		'section' => 'generate_colors_section',
+		'title' => __( 'Buttons', 'generatepress' ),
+		'choices' => array(
+			'toggleId' => 'button-colors',
+		),
+	)
+);
+
+GeneratePress_Customize_Field::add_wrapper(
+	'generate_buttons_background_wrapper',
+	array(
+		'section' => 'generate_colors_section',
+		'choices' => array(
+			'type' => 'color',
+			'toggleId' => 'button-colors',
+			'items' => array(
+				'form_button_background_color',
+				'form_button_background_color_hover',
+			),
+		),
+	)
+);
+
+$buttons_selector = 'button, html input[type="button"], input[type="reset"], input[type="submit"], a.button, a.button:visited, a.wp-block-button__link:not(.has-background)';
+$buttons_hover_selector = 'button:hover, html input[type="button"]:hover, input[type="reset"]:hover, input[type="submit"]:hover, a.button:hover, button:focus, html input[type="button"]:focus, input[type="reset"]:focus, input[type="submit"]:focus, a.button:focus, a.wp-block-button__link:not(.has-background):active, a.wp-block-button__link:not(.has-background):focus, a.wp-block-button__link:not(.has-background):hover';
+
+GeneratePress_Customize_Field::add_field(
+	'generate_settings[form_button_background_color]',
+	'GeneratePress_Customize_Color_Control',
+	array(
+		'default' => $color_defaults['form_button_background_color'],
+		'sanitize_callback' => 'generate_sanitize_rgba_color',
+		'transport' => 'postMessage',
+	),
+	array(
+		'label' => __( 'Background', 'generatepress' ),
+		'section' => 'generate_colors_section',
+		'choices' => array(
+			'alpha' => true,
+			'toggleId' => 'button-colors',
+			'wrapper' => 'form_button_background_color',
+			'tooltip' => __( 'Choose Initial Color', 'generatepress' ),
+		),
+		'output' => array(
+			array(
+				'element'  => $buttons_selector,
+				'property' => 'background-color',
+			),
+		),
+	)
+);
+
+GeneratePress_Customize_Field::add_field(
+	'generate_settings[form_button_background_color_hover]',
+	'GeneratePress_Customize_Color_Control',
+	array(
+		'default' => $color_defaults['form_button_background_color_hover'],
+		'sanitize_callback' => 'generate_sanitize_rgba_color',
+		'transport' => 'postMessage',
+	),
+	array(
+		'label' => __( 'Background Hover', 'generatepress' ),
+		'section' => 'generate_colors_section',
+		'choices' => array(
+			'alpha' => true,
+			'toggleId' => 'button-colors',
+			'wrapper' => 'form_button_background_color_hover',
+			'tooltip' => __( 'Choose Hover Color', 'generatepress' ),
+			'hideLabel' => true,
+		),
+		'output' => array(
+			array(
+				'element'  => $buttons_hover_selector,
+				'property' => 'background-color',
+			),
+		),
+	)
+);
+
+GeneratePress_Customize_Field::add_wrapper(
+	'generate_buttons_text_wrapper',
+	array(
+		'section' => 'generate_colors_section',
+		'choices' => array(
+			'type' => 'color',
+			'toggleId' => 'button-colors',
+			'items' => array(
+				'form_button_text_color',
+				'form_button_text_color_hover',
+			),
+		),
+	)
+);
+
+GeneratePress_Customize_Field::add_field(
+	'generate_settings[form_button_text_color]',
+	'GeneratePress_Customize_Color_Control',
+	array(
+		'default' => $color_defaults['form_button_text_color'],
+		'sanitize_callback' => 'generate_sanitize_hex_color',
+		'transport' => 'postMessage',
+	),
+	array(
+		'label' => __( 'Text', 'generatepress' ),
+		'section' => 'generate_colors_section',
+		'choices' => array(
+			'toggleId' => 'button-colors',
+			'wrapper' => 'form_button_text_color',
+			'tooltip' => __( 'Choose Initial Color', 'generatepress' ),
+		),
+		'output' => array(
+			array(
+				'element'  => $buttons_selector,
+				'property' => 'color',
+			),
+		),
+	)
+);
+
+GeneratePress_Customize_Field::add_field(
+	'generate_settings[form_button_text_color_hover]',
+	'GeneratePress_Customize_Color_Control',
+	array(
+		'default' => $color_defaults['form_button_text_color_hover'],
+		'sanitize_callback' => 'generate_sanitize_hex_color',
+		'transport' => 'postMessage',
+	),
+	array(
+		'label' => __( 'Text Hover', 'generatepress' ),
+		'section' => 'generate_colors_section',
+		'choices' => array(
+			'toggleId' => 'button-colors',
+			'wrapper' => 'form_button_text_color_hover',
+			'tooltip' => __( 'Choose Hover Color', 'generatepress' ),
+			'hideLabel' => true,
+		),
+		'output' => array(
+			array(
+				'element'  => $buttons_hover_selector,
+				'property' => 'color',
+			),
+		),
+	)
+);

wp-content/themes/generatepress/inc/customizer/fields/content.php

@@ -0,0 +1,372 @@
+<?php
+/**
+ * This file handles the customizer fields for the content.
+ *
+ * @package GeneratePress
+ */
+
+if ( ! defined( 'ABSPATH' ) ) {
+	exit; // No direct access, please.
+}
+
+GeneratePress_Customize_Field::add_title(
+	'generate_content_colors_title',
+	array(
+		'section' => 'generate_colors_section',
+		'title' => __( 'Content', 'generatepress' ),
+		'choices' => array(
+			'toggleId' => 'content-colors',
+		),
+	)
+);
+
+$content_colors = '.separate-containers .inside-article, .separate-containers .comments-area, .separate-containers .page-header, .one-container .container, .separate-containers .paging-navigation, .inside-page-header';
+
+GeneratePress_Customize_Field::add_field(
+	'generate_settings[content_background_color]',
+	'GeneratePress_Customize_Color_Control',
+	array(
+		'default' => $color_defaults['content_background_color'],
+		'sanitize_callback' => 'generate_sanitize_rgba_color',
+		'transport' => 'postMessage',
+	),
+	array(
+		'label' => __( 'Background', 'generatepress' ),
+		'section' => 'generate_colors_section',
+		'choices' => array(
+			'alpha' => true,
+			'toggleId' => 'content-colors',
+		),
+		'output' => array(
+			array(
+				'element'  => $content_colors,
+				'property' => 'background-color',
+			),
+		),
+	)
+);
+
+GeneratePress_Customize_Field::add_field(
+	'generate_settings[content_text_color]',
+	'GeneratePress_Customize_Color_Control',
+	array(
+		'default' => $color_defaults['content_text_color'],
+		'sanitize_callback' => 'generate_sanitize_hex_color',
+		'transport' => 'postMessage',
+	),
+	array(
+		'label' => __( 'Text', 'generatepress' ),
+		'section' => 'generate_colors_section',
+		'choices' => array(
+			'toggleId' => 'content-colors',
+		),
+		'output' => array(
+			array(
+				'element'  => $content_colors,
+				'property' => 'color',
+			),
+		),
+	)
+);
+
+GeneratePress_Customize_Field::add_wrapper(
+	'generate_content_link_wrapper',
+	array(
+		'section' => 'generate_colors_section',
+		'choices' => array(
+			'type' => 'color',
+			'toggleId' => 'content-colors',
+			'items' => array(
+				'content_link_color',
+				'content_link_hover_color',
+			),
+		),
+	)
+);
+
+GeneratePress_Customize_Field::add_field(
+	'generate_settings[content_link_color]',
+	'GeneratePress_Customize_Color_Control',
+	array(
+		'default' => $color_defaults['content_link_color'],
+		'sanitize_callback' => 'generate_sanitize_hex_color',
+		'transport' => 'postMessage',
+	),
+	array(
+		'label' => __( 'Link', 'generatepress' ),
+		'section' => 'generate_colors_section',
+		'choices' => array(
+			'wrapper' => 'content_link_color',
+			'tooltip' => __( 'Choose Initial Color', 'generatepress' ),
+			'toggleId' => 'content-colors',
+		),
+		'output' => array(
+			array(
+				'element'  => '.inside-article a:not(.button):not(.wp-block-button__link), .inside-article a:not(.button):not(.wp-block-button__link):visited, .paging-navigation a, .paging-navigation a:visited, .comments-area a, .comments-area a:visited, .page-header a, .page-header a:visited',
+				'property' => 'color',
+			),
+		),
+	)
+);
+
+GeneratePress_Customize_Field::add_field(
+	'generate_settings[content_link_hover_color]',
+	'GeneratePress_Customize_Color_Control',
+	array(
+		'default' => $color_defaults['content_link_hover_color'],
+		'sanitize_callback' => 'generate_sanitize_hex_color',
+		'transport' => 'postMessage',
+	),
+	array(
+		'label' => __( 'Link Hover', 'generatepress' ),
+		'section' => 'generate_colors_section',
+		'choices' => array(
+			'wrapper' => 'content_link_hover_color',
+			'tooltip' => __( 'Choose Hover Color', 'generatepress' ),
+			'toggleId' => 'content-colors',
+			'hideLabel' => true,
+		),
+		'output' => array(
+			array(
+				'element'  => '.inside-article a:not(.button):not(.wp-block-button__link):hover, .paging-navigation a:hover, .comments-area a:hover, .page-header a:hover',
+				'property' => 'color',
+			),
+		),
+	)
+);
+
+GeneratePress_Customize_Field::add_field(
+	'generate_settings[content_title_color]',
+	'GeneratePress_Customize_Color_Control',
+	array(
+		'default' => $color_defaults['content_title_color'],
+		'sanitize_callback' => 'generate_sanitize_hex_color',
+		'transport' => 'postMessage',
+	),
+	array(
+		'label' => __( 'Content Title', 'generatepress' ),
+		'section' => 'generate_colors_section',
+		'choices' => array(
+			'toggleId' => 'content-colors',
+		),
+		'output' => array(
+			array(
+				'element'  => '.entry-header h1,.page-header h1',
+				'property' => 'color',
+			),
+		),
+	)
+);
+
+GeneratePress_Customize_Field::add_wrapper(
+	'generate_archive_content_title_link_wrapper',
+	array(
+		'section' => 'generate_colors_section',
+		'choices' => array(
+			'type' => 'color',
+			'toggleId' => 'content-colors',
+			'items' => array(
+				'blog_post_title_color',
+				'blog_post_title_hover_color',
+			),
+		),
+	)
+);
+
+GeneratePress_Customize_Field::add_field(
+	'generate_settings[blog_post_title_color]',
+	'GeneratePress_Customize_Color_Control',
+	array(
+		'default' => $color_defaults['blog_post_title_color'],
+		'sanitize_callback' => 'generate_sanitize_hex_color',
+		'transport' => 'postMessage',
+	),
+	array(
+		'label' => __( 'Archive Content Title', 'generatepress' ),
+		'section' => 'generate_colors_section',
+		'choices' => array(
+			'wrapper' => 'blog_post_title_color',
+			'tooltip' => __( 'Choose Initial Color', 'generatepress' ),
+			'toggleId' => 'content-colors',
+		),
+		'output' => array(
+			array(
+				'element'  => '.entry-title a,.entry-title a:visited',
+				'property' => 'color',
+			),
+		),
+	)
+);
+
+GeneratePress_Customize_Field::add_field(
+	'generate_settings[blog_post_title_hover_color]',
+	'GeneratePress_Customize_Color_Control',
+	array(
+		'default' => $color_defaults['blog_post_title_hover_color'],
+		'sanitize_callback' => 'generate_sanitize_hex_color',
+		'transport' => 'postMessage',
+	),
+	array(
+		'label' => __( 'Archive Content Title Hover', 'generatepress' ),
+		'section' => 'generate_colors_section',
+		'choices' => array(
+			'wrapper' => 'blog_post_title_hover_color',
+			'tooltip' => __( 'Choose Hover Color', 'generatepress' ),
+			'toggleId' => 'content-colors',
+			'hideLabel' => true,
+		),
+		'output' => array(
+			array(
+				'element'  => '.entry-title a:hover',
+				'property' => 'color',
+			),
+		),
+	)
+);
+
+GeneratePress_Customize_Field::add_field(
+	'generate_settings[entry_meta_text_color]',
+	'GeneratePress_Customize_Color_Control',
+	array(
+		'default' => $color_defaults['entry_meta_text_color'],
+		'sanitize_callback' => 'generate_sanitize_hex_color',
+		'transport' => 'postMessage',
+	),
+	array(
+		'label' => __( 'Entry Meta Text', 'generatepress' ),
+		'section' => 'generate_colors_section',
+		'choices' => array(
+			'toggleId' => 'content-colors',
+		),
+		'output' => array(
+			array(
+				'element'  => '.entry-meta',
+				'property' => 'color',
+			),
+		),
+	)
+);
+
+GeneratePress_Customize_Field::add_wrapper(
+	'generate_entry_meta_link_wrapper',
+	array(
+		'section' => 'generate_colors_section',
+		'choices' => array(
+			'type' => 'color',
+			'toggleId' => 'content-colors',
+			'items' => array(
+				'entry_meta_link_color',
+				'entry_meta_link_color_hover',
+			),
+		),
+	)
+);
+
+GeneratePress_Customize_Field::add_field(
+	'generate_settings[entry_meta_link_color]',
+	'GeneratePress_Customize_Color_Control',
+	array(
+		'default' => $color_defaults['entry_meta_link_color'],
+		'sanitize_callback' => 'generate_sanitize_hex_color',
+		'transport' => 'postMessage',
+	),
+	array(
+		'label' => __( 'Entry Meta Links', 'generatepress' ),
+		'section' => 'generate_colors_section',
+		'choices' => array(
+			'wrapper' => 'entry_meta_link_color',
+			'tooltip' => __( 'Choose Initial Color', 'generatepress' ),
+			'toggleId' => 'content-colors',
+		),
+		'output' => array(
+			array(
+				'element'  => '.entry-meta a',
+				'property' => 'color',
+			),
+		),
+	)
+);
+
+GeneratePress_Customize_Field::add_field(
+	'generate_settings[entry_meta_link_color_hover]',
+	'GeneratePress_Customize_Color_Control',
+	array(
+		'default' => $color_defaults['entry_meta_link_color_hover'],
+		'sanitize_callback' => 'generate_sanitize_hex_color',
+		'transport' => 'postMessage',
+	),
+	array(
+		'label' => __( 'Entry Meta Links Hover', 'generatepress' ),
+		'section' => 'generate_colors_section',
+		'choices' => array(
+			'wrapper' => 'entry_meta_link_color_hover',
+			'tooltip' => __( 'Choose Hover Color', 'generatepress' ),
+			'toggleId' => 'content-colors',
+			'hideLabel' => true,
+		),
+		'output' => array(
+			array(
+				'element'  => '.entry-meta a:hover',
+				'property' => 'color',
+			),
+		),
+	)
+);
+
+$headings = array(
+	array(
+		'slug' => 'h1_color',
+		'label' => __( 'Heading 1 (H1) Color', 'generatepress' ),
+		'selector' => 'h1',
+	),
+	array(
+		'slug' => 'h2_color',
+		'label' => __( 'Heading 2 (H2) Color', 'generatepress' ),
+		'selector' => 'h2',
+	),
+	array(
+		'slug' => 'h3_color',
+		'label' => __( 'Heading 3 (H3) Color', 'generatepress' ),
+		'selector' => 'h3',
+	),
+	array(
+		'slug' => 'h4_color',
+		'label' => __( 'Heading 4 (H4) Color', 'generatepress' ),
+		'selector' => 'h4',
+	),
+	array(
+		'slug' => 'h5_color',
+		'label' => __( 'Heading 5 (H5) Color', 'generatepress' ),
+		'selector' => 'h5',
+	),
+	array(
+		'slug' => 'h6_color',
+		'label' => __( 'Heading 6 (H6) Color', 'generatepress' ),
+		'selector' => 'h6',
+	),
+);
+
+foreach ( $headings as $heading ) {
+	GeneratePress_Customize_Field::add_field(
+		'generate_settings[' . $heading['slug'] . ']',
+		'GeneratePress_Customize_Color_Control',
+		array(
+			'default' => $color_defaults[ $heading['slug'] ],
+			'sanitize_callback' => 'generate_sanitize_hex_color',
+			'transport' => 'postMessage',
+		),
+		array(
+			'label' => $heading['label'],
+			'section' => 'generate_colors_section',
+			'choices' => array(
+				'toggleId' => 'content-colors',
+			),
+			'output' => array(
+				array(
+					'element'  => $heading['selector'],
+					'property' => 'color',
+				),
+			),
+		)
+	);
+}

wp-content/themes/generatepress/inc/customizer/fields/footer-bar.php

@@ -0,0 +1,138 @@
+<?php
+/**
+ * This file handles the customizer fields for the footer bar.
+ *
+ * @package GeneratePress
+ */
+
+if ( ! defined( 'ABSPATH' ) ) {
+	exit; // No direct access, please.
+}
+
+GeneratePress_Customize_Field::add_title(
+	'generate_footer_bar_colors_title',
+	array(
+		'section' => 'generate_colors_section',
+		'title' => __( 'Footer Bar', 'generatepress' ),
+		'choices' => array(
+			'toggleId' => 'footer-bar-colors',
+		),
+	)
+);
+
+GeneratePress_Customize_Field::add_field(
+	'generate_settings[footer_background_color]',
+	'GeneratePress_Customize_Color_Control',
+	array(
+		'default' => $color_defaults['footer_background_color'],
+		'sanitize_callback' => 'generate_sanitize_rgba_color',
+		'transport' => 'postMessage',
+	),
+	array(
+		'label' => __( 'Background', 'generatepress' ),
+		'section' => 'generate_colors_section',
+		'choices' => array(
+			'alpha' => true,
+			'toggleId' => 'footer-bar-colors',
+			'wrapper' => 'footer_background_color',
+			'tooltip' => __( 'Choose Initial Color', 'generatepress' ),
+		),
+		'output' => array(
+			array(
+				'element'  => '.site-info',
+				'property' => 'background-color',
+			),
+		),
+	)
+);
+
+GeneratePress_Customize_Field::add_field(
+	'generate_settings[footer_text_color]',
+	'GeneratePress_Customize_Color_Control',
+	array(
+		'default' => $color_defaults['footer_text_color'],
+		'sanitize_callback' => 'generate_sanitize_hex_color',
+		'transport' => 'postMessage',
+	),
+	array(
+		'label' => __( 'Text', 'generatepress' ),
+		'section' => 'generate_colors_section',
+		'choices' => array(
+			'toggleId' => 'footer-bar-colors',
+			'wrapper' => 'footer_text_color',
+			'tooltip' => __( 'Choose Initial Color', 'generatepress' ),
+		),
+		'output' => array(
+			array(
+				'element'  => '.site-info',
+				'property' => 'color',
+			),
+		),
+	)
+);
+
+GeneratePress_Customize_Field::add_wrapper(
+	'generate_footer_bar_colors_wrapper',
+	array(
+		'section' => 'generate_colors_section',
+		'choices' => array(
+			'type' => 'color',
+			'toggleId' => 'footer-bar-colors',
+			'items' => array(
+				'footer_link_color',
+				'footer_link_hover_color',
+			),
+		),
+	)
+);
+
+GeneratePress_Customize_Field::add_field(
+	'generate_settings[footer_link_color]',
+	'GeneratePress_Customize_Color_Control',
+	array(
+		'default' => $color_defaults['footer_link_color'],
+		'sanitize_callback' => 'generate_sanitize_hex_color',
+		'transport' => 'postMessage',
+	),
+	array(
+		'label' => __( 'Link', 'generatepress' ),
+		'section' => 'generate_colors_section',
+		'choices' => array(
+			'toggleId' => 'footer-bar-colors',
+			'wrapper' => 'footer_link_color',
+			'tooltip' => __( 'Choose Initial Color', 'generatepress' ),
+		),
+		'output' => array(
+			array(
+				'element'  => '.site-info a',
+				'property' => 'color',
+			),
+		),
+	)
+);
+
+GeneratePress_Customize_Field::add_field(
+	'generate_settings[footer_link_hover_color]',
+	'GeneratePress_Customize_Color_Control',
+	array(
+		'default' => $color_defaults['footer_link_hover_color'],
+		'sanitize_callback' => 'generate_sanitize_hex_color',
+		'transport' => 'postMessage',
+	),
+	array(
+		'label' => __( 'Link Hover', 'generatepress' ),
+		'section' => 'generate_colors_section',
+		'choices' => array(
+			'toggleId' => 'footer-bar-colors',
+			'wrapper' => 'footer_link_hover_color',
+			'tooltip' => __( 'Choose Hover Color', 'generatepress' ),
+			'hideLabel' => true,
+		),
+		'output' => array(
+			array(
+				'element'  => '.site-info a:hover',
+				'property' => 'color',
+			),
+		),
+	)
+);

wp-content/themes/generatepress/inc/customizer/fields/footer-widgets.php

@@ -0,0 +1,161 @@
+<?php
+/**
+ * This file handles the customizer fields for the footer widgets.
+ *
+ * @package GeneratePress
+ */
+
+if ( ! defined( 'ABSPATH' ) ) {
+	exit; // No direct access, please.
+}
+
+GeneratePress_Customize_Field::add_title(
+	'generate_footer_widgets_colors_title',
+	array(
+		'section' => 'generate_colors_section',
+		'title' => __( 'Footer Widgets', 'generatepress' ),
+		'choices' => array(
+			'toggleId' => 'footer-widget-colors',
+		),
+	)
+);
+
+GeneratePress_Customize_Field::add_field(
+	'generate_settings[footer_widget_background_color]',
+	'GeneratePress_Customize_Color_Control',
+	array(
+		'default' => $color_defaults['footer_widget_background_color'],
+		'sanitize_callback' => 'generate_sanitize_rgba_color',
+		'transport' => 'postMessage',
+	),
+	array(
+		'label' => __( 'Background', 'generatepress' ),
+		'section' => 'generate_colors_section',
+		'choices' => array(
+			'alpha' => true,
+			'toggleId' => 'footer-widget-colors',
+			'wrapper' => 'footer_widget_background_color',
+			'tooltip' => __( 'Choose Initial Color', 'generatepress' ),
+		),
+		'output' => array(
+			array(
+				'element'  => '.footer-widgets',
+				'property' => 'background-color',
+			),
+		),
+	)
+);
+
+GeneratePress_Customize_Field::add_field(
+	'generate_settings[footer_widget_text_color]',
+	'GeneratePress_Customize_Color_Control',
+	array(
+		'default' => $color_defaults['footer_widget_text_color'],
+		'sanitize_callback' => 'generate_sanitize_hex_color',
+		'transport' => 'postMessage',
+	),
+	array(
+		'label' => __( 'Text', 'generatepress' ),
+		'section' => 'generate_colors_section',
+		'choices' => array(
+			'toggleId' => 'footer-widget-colors',
+			'wrapper' => 'footer_widget_text_color',
+			'tooltip' => __( 'Choose Initial Color', 'generatepress' ),
+		),
+		'output' => array(
+			array(
+				'element'  => '.footer-widgets',
+				'property' => 'color',
+			),
+		),
+	)
+);
+
+GeneratePress_Customize_Field::add_wrapper(
+	'generate_footer_widget_colors_wrapper',
+	array(
+		'section' => 'generate_colors_section',
+		'choices' => array(
+			'type' => 'color',
+			'toggleId' => 'footer-widget-colors',
+			'items' => array(
+				'footer_widget_link_color',
+				'footer_widget_link_hover_color',
+			),
+		),
+	)
+);
+
+GeneratePress_Customize_Field::add_field(
+	'generate_settings[footer_widget_link_color]',
+	'GeneratePress_Customize_Color_Control',
+	array(
+		'default' => $color_defaults['footer_widget_link_color'],
+		'sanitize_callback' => 'generate_sanitize_hex_color',
+		'transport' => 'postMessage',
+	),
+	array(
+		'label' => __( 'Link', 'generatepress' ),
+		'section' => 'generate_colors_section',
+		'choices' => array(
+			'toggleId' => 'footer-widget-colors',
+			'wrapper' => 'footer_widget_link_color',
+			'tooltip' => __( 'Choose Initial Color', 'generatepress' ),
+		),
+		'output' => array(
+			array(
+				'element'  => '.footer-widgets a',
+				'property' => 'color',
+			),
+		),
+	)
+);
+
+GeneratePress_Customize_Field::add_field(
+	'generate_settings[footer_widget_link_hover_color]',
+	'GeneratePress_Customize_Color_Control',
+	array(
+		'default' => $color_defaults['footer_widget_link_hover_color'],
+		'sanitize_callback' => 'generate_sanitize_hex_color',
+		'transport' => 'postMessage',
+	),
+	array(
+		'label' => __( 'Link Hover', 'generatepress' ),
+		'section' => 'generate_colors_section',
+		'choices' => array(
+			'toggleId' => 'footer-widget-colors',
+			'wrapper' => 'footer_widget_link_hover_color',
+			'tooltip' => __( 'Choose Hover Color', 'generatepress' ),
+			'hideLabel' => true,
+		),
+		'output' => array(
+			array(
+				'element'  => '.footer-widgets a:hover',
+				'property' => 'color',
+			),
+		),
+	)
+);
+
+GeneratePress_Customize_Field::add_field(
+	'generate_settings[footer_widget_title_color]',
+	'GeneratePress_Customize_Color_Control',
+	array(
+		'default' => $color_defaults['footer_widget_title_color'],
+		'sanitize_callback' => 'generate_sanitize_hex_color',
+		'transport' => 'postMessage',
+	),
+	array(
+		'label' => __( 'Widget Title', 'generatepress' ),
+		'section' => 'generate_colors_section',
+		'choices' => array(
+			'toggleId' => 'footer-widget-colors',
+		),
+		'output' => array(
+			array(
+				'element'  => '.footer-widgets .widget-title',
+				'property' => 'color',
+			),
+		),
+	)
+);

wp-content/themes/generatepress/inc/customizer/fields/forms.php

@@ -0,0 +1,226 @@
+<?php
+/**
+ * This file handles the customizer fields for the Body.
+ *
+ * @package GeneratePress
+ */
+
+if ( ! defined( 'ABSPATH' ) ) {
+	exit; // No direct access, please.
+}
+
+GeneratePress_Customize_Field::add_title(
+	'generate_forms_colors_title',
+	array(
+		'section' => 'generate_colors_section',
+		'title' => __( 'Forms', 'generatepress' ),
+		'choices' => array(
+			'toggleId' => 'form-colors',
+		),
+	)
+);
+
+GeneratePress_Customize_Field::add_wrapper(
+	'generate_forms_background_wrapper',
+	array(
+		'section' => 'generate_colors_section',
+		'choices' => array(
+			'type' => 'color',
+			'toggleId' => 'form-colors',
+			'items' => array(
+				'form_background_color',
+				'form_background_color_focus',
+			),
+		),
+	)
+);
+
+$forms_selector = 'input[type="text"], input[type="email"], input[type="url"], input[type="password"], input[type="search"], input[type="number"], input[type="tel"], textarea, select';
+$forms_focus_selector = 'input[type="text"]:focus, input[type="email"]:focus, input[type="url"]:focus, input[type="password"]:focus, input[type="search"]:focus, input[type="number"]:focus, input[type="tel"]:focus, textarea:focus, select:focus';
+
+GeneratePress_Customize_Field::add_field(
+	'generate_settings[form_background_color]',
+	'GeneratePress_Customize_Color_Control',
+	array(
+		'default' => $color_defaults['form_background_color'],
+		'sanitize_callback' => 'generate_sanitize_rgba_color',
+		'transport' => 'postMessage',
+	),
+	array(
+		'label' => __( 'Background', 'generatepress' ),
+		'section' => 'generate_colors_section',
+		'choices' => array(
+			'alpha' => true,
+			'toggleId' => 'form-colors',
+			'wrapper' => 'form_background_color',
+			'tooltip' => __( 'Choose Initial Color', 'generatepress' ),
+		),
+		'output' => array(
+			array(
+				'element'  => $forms_selector,
+				'property' => 'background-color',
+			),
+		),
+	)
+);
+
+GeneratePress_Customize_Field::add_field(
+	'generate_settings[form_background_color_focus]',
+	'GeneratePress_Customize_Color_Control',
+	array(
+		'default' => $color_defaults['form_background_color_focus'],
+		'sanitize_callback' => 'generate_sanitize_rgba_color',
+		'transport' => 'postMessage',
+	),
+	array(
+		'label' => __( 'Background Focus', 'generatepress' ),
+		'section' => 'generate_colors_section',
+		'choices' => array(
+			'alpha' => true,
+			'toggleId' => 'form-colors',
+			'wrapper' => 'form_background_color_focus',
+			'tooltip' => __( 'Choose Focus Color', 'generatepress' ),
+			'hideLabel' => true,
+		),
+		'output' => array(
+			array(
+				'element'  => $forms_focus_selector,
+				'property' => 'background-color',
+			),
+		),
+	)
+);
+
+GeneratePress_Customize_Field::add_wrapper(
+	'generate_forms_text_wrapper',
+	array(
+		'section' => 'generate_colors_section',
+		'choices' => array(
+			'type' => 'color',
+			'toggleId' => 'form-colors',
+			'items' => array(
+				'form_text_color',
+				'form_text_color_focus',
+			),
+		),
+	)
+);
+
+GeneratePress_Customize_Field::add_field(
+	'generate_settings[form_text_color]',
+	'GeneratePress_Customize_Color_Control',
+	array(
+		'default' => $color_defaults['form_text_color'],
+		'sanitize_callback' => 'generate_sanitize_hex_color',
+		'transport' => 'postMessage',
+	),
+	array(
+		'label' => __( 'Text', 'generatepress' ),
+		'section' => 'generate_colors_section',
+		'choices' => array(
+			'toggleId' => 'form-colors',
+			'wrapper' => 'form_text_color',
+			'tooltip' => __( 'Choose Initial Color', 'generatepress' ),
+		),
+		'output' => array(
+			array(
+				'element'  => $forms_selector,
+				'property' => 'color',
+			),
+		),
+	)
+);
+
+GeneratePress_Customize_Field::add_field(
+	'generate_settings[form_text_color_focus]',
+	'GeneratePress_Customize_Color_Control',
+	array(
+		'default' => $color_defaults['form_text_color_focus'],
+		'sanitize_callback' => 'generate_sanitize_hex_color',
+		'transport' => 'postMessage',
+	),
+	array(
+		'label' => __( 'Text Focus', 'generatepress' ),
+		'section' => 'generate_colors_section',
+		'choices' => array(
+			'toggleId' => 'form-colors',
+			'wrapper' => 'form_text_color_focus',
+			'tooltip' => __( 'Choose Focus Color', 'generatepress' ),
+			'hideLabel' => true,
+		),
+		'output' => array(
+			array(
+				'element'  => $forms_focus_selector,
+				'property' => 'color',
+			),
+		),
+	)
+);
+
+GeneratePress_Customize_Field::add_wrapper(
+	'generate_forms_border_wrapper',
+	array(
+		'section' => 'generate_colors_section',
+		'choices' => array(
+			'type' => 'color',
+			'toggleId' => 'form-colors',
+			'items' => array(
+				'form_border_color',
+				'form_border_color_focus',
+			),
+		),
+	)
+);
+
+GeneratePress_Customize_Field::add_field(
+	'generate_settings[form_border_color]',
+	'GeneratePress_Customize_Color_Control',
+	array(
+		'default' => $color_defaults['form_border_color'],
+		'sanitize_callback' => 'generate_sanitize_rgba_color',
+		'transport' => 'postMessage',
+	),
+	array(
+		'label' => __( 'Border', 'generatepress' ),
+		'section' => 'generate_colors_section',
+		'choices' => array(
+			'alpha' => true,
+			'toggleId' => 'form-colors',
+			'wrapper' => 'form_border_color',
+			'tooltip' => __( 'Choose Initial Color', 'generatepress' ),
+		),
+		'output' => array(
+			array(
+				'element'  => $forms_selector,
+				'property' => 'border-color',
+			),
+		),
+	)
+);
+
+GeneratePress_Customize_Field::add_field(
+	'generate_settings[form_border_color_focus]',
+	'GeneratePress_Customize_Color_Control',
+	array(
+		'default' => $color_defaults['form_border_color_focus'],
+		'sanitize_callback' => 'generate_sanitize_rgba_color',
+		'transport' => 'postMessage',
+	),
+	array(
+		'label' => __( 'Border Focus', 'generatepress' ),
+		'section' => 'generate_colors_section',
+		'choices' => array(
+			'alpha' => true,
+			'toggleId' => 'form-colors',
+			'wrapper' => 'form_border_color_focus',
+			'tooltip' => __( 'Choose Focus Color', 'generatepress' ),
+			'hideLabel' => true,
+		),
+		'output' => array(
+			array(
+				'element'  => $forms_focus_selector,
+				'property' => 'border-color',
+			),
+		),
+	)
+);

wp-content/themes/generatepress/inc/customizer/fields/header.php

@@ -0,0 +1,180 @@
+<?php
+/**
+ * This file handles the customizer fields for the header.
+ *
+ * @package GeneratePress
+ */
+
+if ( ! defined( 'ABSPATH' ) ) {
+	exit; // No direct access, please.
+}
+
+GeneratePress_Customize_Field::add_title(
+	'generate_header_colors_title',
+	array(
+		'section' => 'generate_colors_section',
+		'title' => __( 'Header', 'generatepress' ),
+		'choices' => array(
+			'toggleId' => 'header-colors',
+		),
+	)
+);
+
+GeneratePress_Customize_Field::add_field(
+	'generate_settings[header_background_color]',
+	'GeneratePress_Customize_Color_Control',
+	array(
+		'default' => $color_defaults['header_background_color'],
+		'transport' => 'postMessage',
+		'sanitize_callback' => 'generate_sanitize_rgba_color',
+	),
+	array(
+		'label' => __( 'Background', 'generatepress' ),
+		'section' => 'generate_colors_section',
+		'choices' => array(
+			'alpha' => true,
+			'toggleId' => 'header-colors',
+		),
+		'output' => array(
+			array(
+				'element'  => '.site-header',
+				'property' => 'background-color',
+			),
+		),
+	)
+);
+
+GeneratePress_Customize_Field::add_field(
+	'generate_settings[header_text_color]',
+	'GeneratePress_Customize_Color_Control',
+	array(
+		'default' => $color_defaults['header_text_color'],
+		'transport' => 'postMessage',
+		'sanitize_callback' => 'generate_sanitize_rgba_color',
+	),
+	array(
+		'label' => __( 'Text', 'generatepress' ),
+		'section' => 'generate_colors_section',
+		'choices' => array(
+			'toggleId' => 'header-colors',
+		),
+		'output' => array(
+			array(
+				'element'  => '.site-header',
+				'property' => 'color',
+			),
+		),
+	)
+);
+
+GeneratePress_Customize_Field::add_wrapper(
+	'generate_header_link_wrapper',
+	array(
+		'section' => 'generate_colors_section',
+		'choices' => array(
+			'type' => 'color',
+			'toggleId' => 'header-colors',
+			'items' => array(
+				'header_link_color',
+				'header_link_hover_color',
+			),
+		),
+	)
+);
+
+GeneratePress_Customize_Field::add_field(
+	'generate_settings[header_link_color]',
+	'GeneratePress_Customize_Color_Control',
+	array(
+		'default' => $color_defaults['header_link_color'],
+		'transport' => 'postMessage',
+		'sanitize_callback' => 'generate_sanitize_rgba_color',
+	),
+	array(
+		'label' => __( 'Link', 'generatepress' ),
+		'section' => 'generate_colors_section',
+		'choices' => array(
+			'toggleId' => 'header-colors',
+			'wrapper' => 'header_link_color',
+			'tooltip' => __( 'Choose Initial Color', 'generatepress' ),
+		),
+		'output' => array(
+			array(
+				'element'  => '.site-header a:not([rel="home"])',
+				'property' => 'color',
+			),
+		),
+	)
+);
+
+GeneratePress_Customize_Field::add_field(
+	'generate_settings[header_link_hover_color]',
+	'GeneratePress_Customize_Color_Control',
+	array(
+		'default' => $color_defaults['header_link_hover_color'],
+		'transport' => 'postMessage',
+		'sanitize_callback' => 'generate_sanitize_rgba_color',
+	),
+	array(
+		'label' => __( 'Link Hover', 'generatepress' ),
+		'section' => 'generate_colors_section',
+		'choices' => array(
+			'toggleId' => 'header-colors',
+			'wrapper' => 'header_link_hover_color',
+			'tooltip' => __( 'Choose Hover Color', 'generatepress' ),
+			'hideLabel' => true,
+		),
+		'output' => array(
+			array(
+				'element'  => '.site-header a:not([rel="home"]):hover',
+				'property' => 'color',
+			),
+		),
+	)
+);
+
+GeneratePress_Customize_Field::add_field(
+	'generate_settings[site_title_color]',
+	'GeneratePress_Customize_Color_Control',
+	array(
+		'default' => $color_defaults['site_title_color'],
+		'transport' => 'postMessage',
+		'sanitize_callback' => 'generate_sanitize_rgba_color',
+	),
+	array(
+		'label' => __( 'Site Title', 'generatepress' ),
+		'section' => 'generate_colors_section',
+		'choices' => array(
+			'toggleId' => 'header-colors',
+		),
+		'output' => array(
+			array(
+				'element'  => '.main-title a, .main-title a:hover',
+				'property' => 'color',
+			),
+		),
+	)
+);
+
+GeneratePress_Customize_Field::add_field(
+	'generate_settings[site_tagline_color]',
+	'GeneratePress_Customize_Color_Control',
+	array(
+		'default' => $color_defaults['site_tagline_color'],
+		'transport' => 'postMessage',
+		'sanitize_callback' => 'generate_sanitize_rgba_color',
+	),
+	array(
+		'label' => __( 'Tagline', 'generatepress' ),
+		'section' => 'generate_colors_section',
+		'choices' => array(
+			'toggleId' => 'header-colors',
+		),
+		'output' => array(
+			array(
+				'element'  => '.site-description',
+				'property' => 'color',
+			),
+		),
+	)
+);

wp-content/themes/generatepress/inc/customizer/fields/primary-navigation.php

@@ -0,0 +1,214 @@
+<?php
+/**
+ * This file handles the customizer fields for the primary navigation.
+ *
+ * @package GeneratePress
+ *
+ * @var array $color_defaults
+ */
+
+if ( ! defined( 'ABSPATH' ) ) {
+	exit; // No direct access, please.
+}
+
+$menu_hover_selectors = '.navigation-search input[type="search"], .navigation-search input[type="search"]:active, .navigation-search input[type="search"]:focus, .main-navigation .main-nav ul li:not([class*="current-menu-"]):hover > a, .main-navigation .main-nav ul li:not([class*="current-menu-"]):focus > a, .main-navigation .main-nav ul li.sfHover:not([class*="current-menu-"]) > a, .main-navigation .menu-bar-item:hover > a, .main-navigation .menu-bar-item.sfHover > a';
+$menu_current_selectors = '.main-navigation .main-nav ul li[class*="current-menu-"] > a';
+$submenu_hover_selectors = '.main-navigation .main-nav ul ul li:not([class*="current-menu-"]):hover > a,.main-navigation .main-nav ul ul li:not([class*="current-menu-"]):focus > a,.main-navigation .main-nav ul ul li.sfHover:not([class*="current-menu-"]) > a';
+$submenu_current_selectors = '.main-navigation .main-nav ul ul li[class*="current-menu-"] > a';
+
+GeneratePress_Customize_Field::add_title(
+	'generate_primary_navigation_colors_title',
+	array(
+		'section' => 'generate_colors_section',
+		'title' => __( 'Primary Navigation', 'generatepress' ),
+		'choices' => array(
+			'toggleId' => 'primary-navigation-colors',
+		),
+	)
+);
+
+// Navigation background group.
+GeneratePress_Customize_Field::add_color_field_group(
+	'primary_navigation_background',
+	'generate_colors_section',
+	'primary-navigation-colors',
+	array(
+		'generate_settings[navigation_background_color]' => array(
+			'default_value' => $color_defaults['navigation_background_color'],
+			'label' => __( 'Navigation Background', 'generatepress' ),
+			'tooltip' => __( 'Choose Initial Color', 'generatepress' ),
+			'element' => '.main-navigation',
+			'property' => 'background-color',
+			'hide_label' => false,
+		),
+		'generate_settings[navigation_background_hover_color]' => array(
+			'default_value' => $color_defaults['navigation_background_hover_color'],
+			'label' => __( 'Navigation Background Hover', 'generatepress' ),
+			'tooltip' => __( 'Choose Hover Color', 'generatepress' ),
+			'element' => $menu_hover_selectors,
+			'property' => 'background-color',
+			'hide_label' => true,
+		),
+		'generate_settings[navigation_background_current_color]' => array(
+			'default_value' => $color_defaults['navigation_background_current_color'],
+			'label' => __( 'Navigation Background Current', 'generatepress' ),
+			'tooltip' => __( 'Choose Current Color', 'generatepress' ),
+			'element' => $menu_current_selectors,
+			'property' => 'background-color',
+			'hide_label' => true,
+		),
+	)
+);
+
+// Navigation text group.
+GeneratePress_Customize_Field::add_color_field_group(
+	'primary_navigation_text',
+	'generate_colors_section',
+	'primary-navigation-colors',
+	array(
+		'generate_settings[navigation_text_color]' => array(
+			'default_value' => $color_defaults['navigation_text_color'],
+			'label' => __( 'Navigation Text', 'generatepress' ),
+			'tooltip' => __( 'Choose Initial Color', 'generatepress' ),
+			'element' => '.main-navigation .main-nav ul li a, .main-navigation .menu-toggle, .main-navigation button.menu-toggle:hover, .main-navigation button.menu-toggle:focus, .main-navigation .mobile-bar-items a, .main-navigation .mobile-bar-items a:hover, .main-navigation .mobile-bar-items a:focus, .main-navigation .menu-bar-items',
+			'property' => 'color',
+			'hide_label' => false,
+		),
+		'generate_settings[navigation_text_hover_color]' => array(
+			'default_value' => $color_defaults['navigation_text_hover_color'],
+			'label' => __( 'Navigation Text Hover', 'generatepress' ),
+			'tooltip' => __( 'Choose Hover Color', 'generatepress' ),
+			'element' => $menu_hover_selectors,
+			'property' => 'color',
+			'hide_label' => true,
+		),
+		'generate_settings[navigation_text_current_color]' => array(
+			'default_value' => $color_defaults['navigation_text_current_color'],
+			'label' => __( 'Navigation Text Current', 'generatepress' ),
+			'tooltip' => __( 'Choose Current Color', 'generatepress' ),
+			'element' => $menu_current_selectors,
+			'property' => 'color',
+			'hide_label' => true,
+		),
+	)
+);
+
+// Sub-Menu background group.
+GeneratePress_Customize_Field::add_color_field_group(
+	'primary_navigation_submenu_background',
+	'generate_colors_section',
+	'primary-navigation-colors',
+	array(
+		'generate_settings[subnavigation_background_color]' => array(
+			'default_value' => $color_defaults['subnavigation_background_color'],
+			'label' => __( 'Sub-Menu Background', 'generatepress' ),
+			'tooltip' => __( 'Choose Initial Color', 'generatepress' ),
+			'element' => '.main-navigation ul ul',
+			'property' => 'background-color',
+			'hide_label' => false,
+		),
+		'generate_settings[subnavigation_background_hover_color]' => array(
+			'default_value' => $color_defaults['subnavigation_background_hover_color'],
+			'label' => __( 'Sub-Menu Background Hover', 'generatepress' ),
+			'tooltip' => __( 'Choose Hover Color', 'generatepress' ),
+			'element' => $submenu_hover_selectors,
+			'property' => 'background-color',
+			'hide_label' => true,
+		),
+		'generate_settings[subnavigation_background_current_color]' => array(
+			'default_value' => $color_defaults['subnavigation_background_current_color'],
+			'label' => __( 'Sub-Menu Background Current', 'generatepress' ),
+			'tooltip' => __( 'Choose Current Color', 'generatepress' ),
+			'element' => $submenu_current_selectors,
+			'property' => 'background-color',
+			'hide_label' => true,
+		),
+	)
+);
+
+// Sub-Menu text group.
+GeneratePress_Customize_Field::add_color_field_group(
+	'primary_navigation_submenu_text',
+	'generate_colors_section',
+	'primary-navigation-colors',
+	array(
+		'generate_settings[subnavigation_text_color]' => array(
+			'default_value' => $color_defaults['subnavigation_text_color'],
+			'label' => __( 'Sub-Menu Text', 'generatepress' ),
+			'tooltip' => __( 'Choose Initial Color', 'generatepress' ),
+			'element' => '.main-navigation .main-nav ul ul li a',
+			'property' => 'color',
+			'hide_label' => false,
+		),
+		'generate_settings[subnavigation_text_hover_color]' => array(
+			'default_value' => $color_defaults['subnavigation_text_hover_color'],
+			'label' => __( 'Sub-Menu Text Hover', 'generatepress' ),
+			'tooltip' => __( 'Choose Hover Color', 'generatepress' ),
+			'element' => $submenu_hover_selectors,
+			'property' => 'color',
+			'hide_label' => true,
+		),
+		'generate_settings[subnavigation_text_current_color]' => array(
+			'default_value' => $color_defaults['subnavigation_text_current_color'],
+			'label' => __( 'Sub-Menu Text Current', 'generatepress' ),
+			'tooltip' => __( 'Choose Current Color', 'generatepress' ),
+			'element' => $submenu_current_selectors,
+			'property' => 'color',
+			'hide_label' => true,
+		),
+	)
+);
+
+GeneratePress_Customize_Field::add_title(
+	'generate_navigation_search_colors_title',
+	array(
+		'section' => 'generate_colors_section',
+		'title' => __( 'Navigation Search', 'generatepress' ),
+		'choices' => array(
+			'toggleId' => 'primary-navigation-search-colors',
+		),
+		'active_callback' => function() {
+			if ( 'enable' === generate_get_option( 'nav_search' ) ) {
+				return true;
+			}
+
+			return false;
+		},
+	)
+);
+
+GeneratePress_Customize_Field::add_field(
+	'generate_settings[navigation_search_background_color]',
+	'GeneratePress_Customize_Color_Control',
+	array(
+		'default' => $color_defaults['navigation_search_background_color'],
+		'transport' => 'refresh',
+		'sanitize_callback' => 'generate_sanitize_rgba_color',
+	),
+	array(
+		'label' => __( 'Background', 'generatepress' ),
+		'section' => 'generate_colors_section',
+		'choices' => array(
+			'alpha' => true,
+			'toggleId' => 'primary-navigation-search-colors',
+		),
+	)
+);
+
+GeneratePress_Customize_Field::add_field(
+	'generate_settings[navigation_search_text_color]',
+	'GeneratePress_Customize_Color_Control',
+	array(
+		'default' => $color_defaults['navigation_search_text_color'],
+		'transport' => 'refresh',
+		'sanitize_callback' => 'generate_sanitize_rgba_color',
+	),
+	array(
+		'label' => __( 'Text', 'generatepress' ),
+		'section' => 'generate_colors_section',
+		'choices' => array(
+			'alpha' => true,
+			'toggleId' => 'primary-navigation-search-colors',
+		),
+	)
+);

wp-content/themes/generatepress/inc/customizer/fields/search-modal.php

@@ -0,0 +1,97 @@
+<?php
+/**
+ * This file handles the customizer fields for the Search Modal.
+ *
+ * @package GeneratePress
+ */
+
+if ( ! defined( 'ABSPATH' ) ) {
+	exit; // No direct access, please.
+}
+
+GeneratePress_Customize_Field::add_title(
+	'generate_search_modal_colors_title',
+	array(
+		'section' => 'generate_colors_section',
+		'title' => __( 'Search Modal', 'generatepress' ),
+		'choices' => array(
+			'toggleId' => 'search-modal-colors',
+		),
+		'active_callback' => function() {
+			if ( generate_get_option( 'nav_search_modal' ) ) {
+				return true;
+			}
+
+			return false;
+		},
+	)
+);
+
+GeneratePress_Customize_Field::add_field(
+	'generate_settings[search_modal_bg_color]',
+	'GeneratePress_Customize_Color_Control',
+	array(
+		'default' => $color_defaults['search_modal_bg_color'],
+		'sanitize_callback' => 'generate_sanitize_rgba_color',
+		'transport' => 'postMessage',
+	),
+	array(
+		'label' => __( 'Field Background', 'generatepress' ),
+		'section' => 'generate_colors_section',
+		'choices' => array(
+			'toggleId' => 'search-modal-colors',
+		),
+		'output' => array(
+			array(
+				'element'  => ':root',
+				'property' => '--gp-search-modal-bg-color',
+			),
+		),
+	)
+);
+
+GeneratePress_Customize_Field::add_field(
+	'generate_settings[search_modal_text_color]',
+	'GeneratePress_Customize_Color_Control',
+	array(
+		'default' => $color_defaults['search_modal_text_color'],
+		'sanitize_callback' => 'generate_sanitize_rgba_color',
+		'transport' => 'postMessage',
+	),
+	array(
+		'label' => __( 'Field Text', 'generatepress' ),
+		'section' => 'generate_colors_section',
+		'choices' => array(
+			'toggleId' => 'search-modal-colors',
+		),
+		'output' => array(
+			array(
+				'element'  => ':root',
+				'property' => '--gp-search-modal-text-color',
+			),
+		),
+	)
+);
+
+GeneratePress_Customize_Field::add_field(
+	'generate_settings[search_modal_overlay_bg_color]',
+	'GeneratePress_Customize_Color_Control',
+	array(
+		'default' => $color_defaults['search_modal_overlay_bg_color'],
+		'sanitize_callback' => 'generate_sanitize_rgba_color',
+		'transport' => 'postMessage',
+	),
+	array(
+		'label' => __( 'Overlay Background', 'generatepress' ),
+		'section' => 'generate_colors_section',
+		'choices' => array(
+			'toggleId' => 'search-modal-colors',
+		),
+		'output' => array(
+			array(
+				'element'  => ':root',
+				'property' => '--gp-search-modal-overlay-bg-color',
+			),
+		),
+	)
+);

wp-content/themes/generatepress/inc/customizer/fields/sidebar-widgets.php

@@ -0,0 +1,161 @@
+<?php
+/**
+ * This file handles the customizer fields for the sidebar widgets.
+ *
+ * @package GeneratePress
+ */
+
+if ( ! defined( 'ABSPATH' ) ) {
+	exit; // No direct access, please.
+}
+
+GeneratePress_Customize_Field::add_title(
+	'generate_sidebar_widgets_colors_title',
+	array(
+		'section' => 'generate_colors_section',
+		'title' => __( 'Sidebar Widgets', 'generatepress' ),
+		'choices' => array(
+			'toggleId' => 'sidebar-widget-colors',
+		),
+	)
+);
+
+GeneratePress_Customize_Field::add_field(
+	'generate_settings[sidebar_widget_background_color]',
+	'GeneratePress_Customize_Color_Control',
+	array(
+		'default' => $color_defaults['sidebar_widget_background_color'],
+		'sanitize_callback' => 'generate_sanitize_rgba_color',
+		'transport' => 'postMessage',
+	),
+	array(
+		'label' => __( 'Background', 'generatepress' ),
+		'section' => 'generate_colors_section',
+		'choices' => array(
+			'alpha' => true,
+			'toggleId' => 'sidebar-widget-colors',
+			'wrapper' => 'sidebar_widget_background_color',
+			'tooltip' => __( 'Choose Initial Color', 'generatepress' ),
+		),
+		'output' => array(
+			array(
+				'element'  => '.sidebar .widget',
+				'property' => 'background-color',
+			),
+		),
+	)
+);
+
+GeneratePress_Customize_Field::add_field(
+	'generate_settings[sidebar_widget_text_color]',
+	'GeneratePress_Customize_Color_Control',
+	array(
+		'default' => $color_defaults['sidebar_widget_text_color'],
+		'sanitize_callback' => 'generate_sanitize_hex_color',
+		'transport' => 'postMessage',
+	),
+	array(
+		'label' => __( 'Text', 'generatepress' ),
+		'section' => 'generate_colors_section',
+		'choices' => array(
+			'toggleId' => 'sidebar-widget-colors',
+			'wrapper' => 'sidebar_widget_text_color',
+			'tooltip' => __( 'Choose Initial Color', 'generatepress' ),
+		),
+		'output' => array(
+			array(
+				'element'  => '.sidebar .widget',
+				'property' => 'color',
+			),
+		),
+	)
+);
+
+GeneratePress_Customize_Field::add_wrapper(
+	'generate_sidebar_widget_colors_wrapper',
+	array(
+		'section' => 'generate_colors_section',
+		'choices' => array(
+			'type' => 'color',
+			'toggleId' => 'sidebar-widget-colors',
+			'items' => array(
+				'sidebar_widget_link_color',
+				'sidebar_widget_link_hover_color',
+			),
+		),
+	)
+);
+
+GeneratePress_Customize_Field::add_field(
+	'generate_settings[sidebar_widget_link_color]',
+	'GeneratePress_Customize_Color_Control',
+	array(
+		'default' => $color_defaults['sidebar_widget_link_color'],
+		'sanitize_callback' => 'generate_sanitize_hex_color',
+		'transport' => 'postMessage',
+	),
+	array(
+		'label' => __( 'Link', 'generatepress' ),
+		'section' => 'generate_colors_section',
+		'choices' => array(
+			'toggleId' => 'sidebar-widget-colors',
+			'wrapper' => 'sidebar_widget_link_color',
+			'tooltip' => __( 'Choose Initial Color', 'generatepress' ),
+		),
+		'output' => array(
+			array(
+				'element'  => '.sidebar .widget a',
+				'property' => 'color',
+			),
+		),
+	)
+);
+
+GeneratePress_Customize_Field::add_field(
+	'generate_settings[sidebar_widget_link_hover_color]',
+	'GeneratePress_Customize_Color_Control',
+	array(
+		'default' => $color_defaults['sidebar_widget_link_hover_color'],
+		'sanitize_callback' => 'generate_sanitize_hex_color',
+		'transport' => 'postMessage',
+	),
+	array(
+		'label' => __( 'Link Hover', 'generatepress' ),
+		'section' => 'generate_colors_section',
+		'choices' => array(
+			'toggleId' => 'sidebar-widget-colors',
+			'wrapper' => 'sidebar_widget_link_hover_color',
+			'tooltip' => __( 'Choose Hover Color', 'generatepress' ),
+			'hideLabel' => true,
+		),
+		'output' => array(
+			array(
+				'element'  => '.sidebar .widget a:hover',
+				'property' => 'color',
+			),
+		),
+	)
+);
+
+GeneratePress_Customize_Field::add_field(
+	'generate_settings[sidebar_widget_title_color]',
+	'GeneratePress_Customize_Color_Control',
+	array(
+		'default' => $color_defaults['sidebar_widget_title_color'],
+		'sanitize_callback' => 'generate_sanitize_hex_color',
+		'transport' => 'postMessage',
+	),
+	array(
+		'label' => __( 'Widget Title', 'generatepress' ),
+		'section' => 'generate_colors_section',
+		'choices' => array(
+			'toggleId' => 'sidebar-widget-colors',
+		),
+		'output' => array(
+			array(
+				'element'  => '.sidebar .widget .widget-title',
+				'property' => 'color',
+			),
+		),
+	)
+);

wp-content/themes/generatepress/inc/customizer/fields/top-bar.php

@@ -0,0 +1,139 @@
+<?php
+/**
+ * This file handles the customizer fields for the top bar.
+ *
+ * @package GeneratePress
+ */
+
+if ( ! defined( 'ABSPATH' ) ) {
+	exit; // No direct access, please.
+}
+
+GeneratePress_Customize_Field::add_title(
+	'generate_top_bar_colors_title',
+	array(
+		'section' => 'generate_colors_section',
+		'title' => __( 'Top Bar', 'generatepress' ),
+		'choices' => array(
+			'toggleId' => 'top-bar-colors',
+		),
+	)
+);
+
+GeneratePress_Customize_Field::add_field(
+	'generate_settings[top_bar_background_color]',
+	'GeneratePress_Customize_Color_Control',
+	array(
+		'default' => $color_defaults['top_bar_background_color'],
+		'transport' => 'postMessage',
+		'sanitize_callback' => 'generate_sanitize_rgba_color',
+	),
+	array(
+		'label' => __( 'Background', 'generatepress' ),
+		'section' => 'generate_colors_section',
+		'settings' => 'generate_settings[top_bar_background_color]',
+		'active_callback' => 'generate_is_top_bar_active',
+		'choices' => array(
+			'alpha' => true,
+			'toggleId' => 'top-bar-colors',
+		),
+		'output' => array(
+			array(
+				'element'  => '.top-bar',
+				'property' => 'background-color',
+			),
+		),
+	)
+);
+
+GeneratePress_Customize_Field::add_field(
+	'generate_settings[top_bar_text_color]',
+	'GeneratePress_Customize_Color_Control',
+	array(
+		'default' => $color_defaults['top_bar_text_color'],
+		'transport' => 'postMessage',
+		'sanitize_callback' => 'generate_sanitize_rgba_color',
+	),
+	array(
+		'label' => __( 'Text', 'generatepress' ),
+		'section' => 'generate_colors_section',
+		'active_callback' => 'generate_is_top_bar_active',
+		'choices' => array(
+			'toggleId' => 'top-bar-colors',
+		),
+		'output' => array(
+			array(
+				'element'  => '.top-bar',
+				'property' => 'color',
+			),
+		),
+	)
+);
+
+GeneratePress_Customize_Field::add_wrapper(
+	'generate_top_bar_link_wrapper',
+	array(
+		'section' => 'generate_colors_section',
+		'choices' => array(
+			'type' => 'color',
+			'toggleId' => 'top-bar-colors',
+			'items' => array(
+				'top_bar_link_color',
+				'top_bar_link_color_hover',
+			),
+		),
+	)
+);
+
+GeneratePress_Customize_Field::add_field(
+	'generate_settings[top_bar_link_color]',
+	'GeneratePress_Customize_Color_Control',
+	array(
+		'default' => $color_defaults['top_bar_link_color'],
+		'transport' => 'postMessage',
+		'sanitize_callback' => 'generate_sanitize_rgba_color',
+	),
+	array(
+		'label' => __( 'Link', 'generatepress' ),
+		'section' => 'generate_colors_section',
+		'active_callback' => 'generate_is_top_bar_active',
+		'choices' => array(
+			'wrapper' => 'top_bar_link_color',
+			'tooltip' => __( 'Choose Initial Color', 'generatepress' ),
+			'toggleId' => 'top-bar-colors',
+		),
+		'output' => array(
+			array(
+				'element'  => '.top-bar a',
+				'property' => 'color',
+			),
+		),
+	)
+);
+
+GeneratePress_Customize_Field::add_field(
+	'generate_settings[top_bar_link_color_hover]',
+	'GeneratePress_Customize_Color_Control',
+	array(
+		'default' => $color_defaults['top_bar_link_color_hover'],
+		'transport' => 'postMessage',
+		'sanitize_callback' => 'generate_sanitize_rgba_color',
+	),
+	array(
+		'label' => __( 'Link Hover', 'generatepress' ),
+		'section' => 'generate_colors_section',
+		'active_callback' => 'generate_is_top_bar_active',
+		'choices' => array(
+			'wrapper' => 'top_bar_link_color_hover',
+			'tooltip' => __( 'Choose Hover Color', 'generatepress' ),
+			'toggleId' => 'top-bar-colors',
+			'hideLabel' => true,
+		),
+		'output' => array(
+			array(
+				'element'  => '.top-bar a:hover',
+				'property' => 'color',
+			),
+		),
+	)
+);

wp-content/themes/generatepress/inc/customizer/helpers.php

@@ -0,0 +1,476 @@
+<?php
+/**
+ * Helper functions for the Customizer.
+ *
+ * @package GeneratePress
+ */
+
+if ( ! defined( 'ABSPATH' ) ) {
+	exit; // Exit if accessed directly.
+}
+
+if ( ! function_exists( 'generate_is_posts_page' ) ) {
+	/**
+	 * Check to see if we're on a posts page
+	 *
+	 * @since 1.3.39
+	 */
+	function generate_is_posts_page() {
+		return ( is_home() || is_archive() || is_tax() ) ? true : false;
+	}
+}
+
+if ( ! function_exists( 'generate_is_footer_bar_active' ) ) {
+	/**
+	 * Check to see if we're using our footer bar widget
+	 *
+	 * @since 1.3.42
+	 */
+	function generate_is_footer_bar_active() {
+		return ( is_active_sidebar( 'footer-bar' ) ) ? true : false;
+	}
+}
+
+if ( ! function_exists( 'generate_is_top_bar_active' ) ) {
+	/**
+	 * Check to see if the top bar is active
+	 *
+	 * @since 1.3.45
+	 */
+	function generate_is_top_bar_active() {
+		$top_bar = is_active_sidebar( 'top-bar' ) ? true : false;
+		return apply_filters( 'generate_is_top_bar_active', $top_bar );
+	}
+}
+
+if ( ! function_exists( 'generate_customize_partial_blogname' ) ) {
+	/**
+	 * Render the site title for the selective refresh partial.
+	 *
+	 * @since 1.3.41
+	 */
+	function generate_customize_partial_blogname() {
+		bloginfo( 'name' );
+	}
+}
+
+if ( ! function_exists( 'generate_customize_partial_blogdescription' ) ) {
+	/**
+	 * Render the site tagline for the selective refresh partial.
+	 *
+	 * @since 1.3.41
+	 */
+	function generate_customize_partial_blogdescription() {
+		bloginfo( 'description' );
+	}
+}
+
+if ( ! function_exists( 'generate_enqueue_color_palettes' ) ) {
+	add_action( 'customize_controls_enqueue_scripts', 'generate_enqueue_color_palettes' );
+	/**
+	 * Add our custom color palettes to the color pickers in the Customizer.
+	 *
+	 * @since 1.3.42
+	 */
+	function generate_enqueue_color_palettes() {
+		// Old versions of WP don't get nice things.
+		if ( ! function_exists( 'wp_add_inline_script' ) ) {
+			return;
+		}
+
+		// Grab our palette array and turn it into JS.
+		$palettes = wp_json_encode( generate_get_default_color_palettes() );
+
+		// Add our custom palettes.
+		// json_encode takes care of escaping.
+		wp_add_inline_script( 'wp-color-picker', 'jQuery.wp.wpColorPicker.prototype.options.palettes = ' . $palettes . ';' );
+	}
+}
+
+if ( ! function_exists( 'generate_sanitize_integer' ) ) {
+	/**
+	 * Sanitize integers.
+	 *
+	 * @since 1.0.8
+	 * @param string $input The value to check.
+	 */
+	function generate_sanitize_integer( $input ) {
+		return absint( $input );
+	}
+}
+
+if ( ! function_exists( 'generate_sanitize_decimal_integer' ) ) {
+	/**
+	 * Sanitize integers that can use decimals.
+	 *
+	 * @since 1.3.41
+	 * @param string $input The value to check.
+	 */
+	function generate_sanitize_decimal_integer( $input ) {
+		return abs( floatval( $input ) );
+	}
+}
+
+/**
+ * Sanitize integers that can use decimals.
+ *
+ * @since 3.1.0
+ * @param string $input The value to check.
+ */
+function generate_sanitize_empty_decimal_integer( $input ) {
+	if ( '' === $input ) {
+		return '';
+	}
+
+	return abs( floatval( $input ) );
+}
+
+/**
+ * Sanitize integers that can use negative decimals.
+ *
+ * @since 3.1.0
+ * @param string $input The value to check.
+ */
+function generate_sanitize_empty_negative_decimal_integer( $input ) {
+	if ( '' === $input ) {
+		return '';
+	}
+
+	return floatval( $input );
+}
+
+/**
+ * Sanitize a positive number, but allow an empty value.
+ *
+ * @since 2.2
+ * @param string $input The value to check.
+ */
+function generate_sanitize_empty_absint( $input ) {
+	// phpcs:ignore WordPress.PHP.StrictComparisons.LooseComparison -- Intentially loose.
+	if ( '' == $input ) {
+		return '';
+	}
+
+	return absint( $input );
+}
+
+if ( ! function_exists( 'generate_sanitize_checkbox' ) ) {
+	/**
+	 * Sanitize checkbox values.
+	 *
+	 * @since 1.0.8
+	 * @param string $checked The value to check.
+	 */
+	function generate_sanitize_checkbox( $checked ) {
+		// phpcs:ignore WordPress.PHP.StrictComparisons.LooseComparison -- Intentially loose.
+		return ( ( isset( $checked ) && true == $checked ) ? true : false );
+	}
+}
+
+if ( ! function_exists( 'generate_sanitize_blog_excerpt' ) ) {
+	/**
+	 * Sanitize blog excerpt.
+	 * Needed because GP Premium calls the control ID which is different from the settings ID.
+	 *
+	 * @since 1.0.8
+	 * @param string $input The value to check.
+	 */
+	function generate_sanitize_blog_excerpt( $input ) {
+		$valid = array(
+			'full',
+			'excerpt',
+		);
+
+		if ( in_array( $input, $valid ) ) {
+			return $input;
+		} else {
+			return 'full';
+		}
+	}
+}
+
+if ( ! function_exists( 'generate_sanitize_hex_color' ) ) {
+	/**
+	 * Sanitize colors.
+	 * Allow blank value.
+	 *
+	 * @since 1.2.9.6
+	 * @param string $color The color to check.
+	 */
+	function generate_sanitize_hex_color( $color ) {
+		// phpcs:ignore WordPress.PHP.StrictComparisons.LooseComparison -- Intentially loose.
+		if ( '' === $color ) {
+			return '';
+		}
+
+		// 3 or 6 hex digits, or the empty string.
+		if ( preg_match( '|^#([A-Fa-f0-9]{3}){1,2}$|', $color ) ) {
+			return $color;
+		}
+
+		// Sanitize CSS variables.
+		if ( strpos( $color, 'var(' ) !== false ) {
+			return sanitize_text_field( $color );
+		}
+
+		// Sanitize rgb() values.
+		if ( strpos( $color, 'rgb(' ) !== false ) {
+			$color = str_replace( ' ', '', $color );
+
+			sscanf( $color, 'rgb(%d,%d,%d)', $red, $green, $blue );
+			return 'rgb(' . $red . ',' . $green . ',' . $blue . ')';
+		}
+
+		// Sanitize rgba() values.
+		if ( strpos( $color, 'rgba' ) !== false ) {
+			$color = str_replace( ' ', '', $color );
+			sscanf( $color, 'rgba(%d,%d,%d,%f)', $red, $green, $blue, $alpha );
+
+			return 'rgba(' . $red . ',' . $green . ',' . $blue . ',' . $alpha . ')';
+		}
+
+		return '';
+	}
+}
+
+/**
+ * Sanitize RGBA colors.
+ *
+ * @since 2.2
+ * @param string $color The color to check.
+ */
+function generate_sanitize_rgba_color( $color ) {
+	if ( '' === $color ) {
+		return '';
+	}
+
+	if ( false === strpos( $color, 'rgba' ) ) {
+		return generate_sanitize_hex_color( $color );
+	}
+
+	$color = str_replace( ' ', '', $color );
+	sscanf( $color, 'rgba(%d,%d,%d,%f)', $red, $green, $blue, $alpha );
+
+	return 'rgba(' . $red . ',' . $green . ',' . $blue . ',' . $alpha . ')';
+}
+
+if ( ! function_exists( 'generate_sanitize_choices' ) ) {
+	/**
+	 * Sanitize choices.
+	 *
+	 * @since 1.3.24
+	 * @param string $input The value to check.
+	 * @param object $setting The setting object.
+	 */
+	function generate_sanitize_choices( $input, $setting ) {
+		// Ensure input is a slug.
+		$input = sanitize_key( $input );
+
+		// Get list of choices from the control.
+		// associated with the setting.
+		$choices = $setting->manager->get_control( $setting->id )->choices;
+
+		// If the input is a valid key, return it.
+		// otherwise, return the default.
+		return ( array_key_exists( $input, $choices ) ? $input : $setting->default );
+	}
+}
+
+/**
+ * Sanitize our Google Font variants
+ *
+ * @since 2.0
+ * @param string $input The value to check.
+ */
+function generate_sanitize_variants( $input ) {
+	if ( is_array( $input ) ) {
+		$input = implode( ',', $input );
+	}
+	return sanitize_text_field( $input );
+}
+
+add_action( 'customize_controls_enqueue_scripts', 'generate_do_control_inline_scripts', 100 );
+/**
+ * Add misc inline scripts to our controls.
+ *
+ * We don't want to add these to the controls themselves, as they will be repeated
+ * each time the control is initialized.
+ *
+ * @since 2.0
+ */
+function generate_do_control_inline_scripts() {
+	wp_localize_script(
+		'generatepress-typography-customizer',
+		'gp_customize',
+		array(
+			'nonce' => wp_create_nonce( 'gp_customize_nonce' ),
+		)
+	);
+
+	$number_of_fonts = apply_filters( 'generate_number_of_fonts', 200 );
+
+	wp_localize_script(
+		'generatepress-typography-customizer',
+		'generatePressTypography',
+		array(
+			'googleFonts' => apply_filters( 'generate_typography_customize_list', generate_get_all_google_fonts( $number_of_fonts ) ),
+		)
+	);
+
+	wp_localize_script( 'generatepress-typography-customizer', 'typography_defaults', generate_typography_default_fonts() );
+
+	wp_enqueue_script( 'generatepress-customizer-controls', trailingslashit( get_template_directory_uri() ) . 'inc/customizer/controls/js/customizer-controls.js', array( 'customize-controls', 'jquery' ), GENERATE_VERSION, true );
+	wp_localize_script( 'generatepress-customizer-controls', 'generatepress_defaults', generate_get_defaults() );
+	wp_localize_script( 'generatepress-customizer-controls', 'generatepress_color_defaults', generate_get_color_defaults() );
+	wp_localize_script( 'generatepress-customizer-controls', 'generatepress_typography_defaults', generate_get_default_fonts() );
+	wp_localize_script( 'generatepress-customizer-controls', 'generatepress_spacing_defaults', generate_spacing_get_defaults() );
+
+	wp_localize_script(
+		'generatepress-customizer-controls',
+		'generatepressCustomizeControls',
+		array(
+			'mappedTypographyData' => array(
+				'typography' => GeneratePress_Typography_Migration::get_mapped_typography_data(),
+				'fonts' => GeneratePress_Typography_Migration::get_mapped_font_data(),
+			),
+		)
+	);
+
+	wp_enqueue_script(
+		'generate-customizer-controls',
+		trailingslashit( get_template_directory_uri() ) . 'assets/dist/customizer.js',
+		// We're including wp-color-picker for localized strings, nothing more.
+		array( 'lodash', 'react', 'react-dom', 'wp-components', 'wp-element', 'wp-hooks', 'wp-i18n', 'wp-polyfill', 'jquery', 'customize-base', 'customize-controls', 'wp-color-picker' ),
+		GENERATE_VERSION,
+		true
+	);
+
+	if ( function_exists( 'wp_set_script_translations' ) ) {
+		wp_set_script_translations( 'generate-customizer-controls', 'generatepress' );
+	}
+
+	$color_palette = get_theme_support( 'editor-color-palette' );
+	$colors = array();
+
+	if ( is_array( $color_palette ) ) {
+		foreach ( $color_palette as $key => $value ) {
+			foreach ( $value as $color ) {
+				$colors[] = array(
+					'name' => $color['name'],
+					'color' => $color['color'],
+				);
+			}
+		}
+	}
+
+	wp_localize_script(
+		'generate-customizer-controls',
+		'generateCustomizerControls',
+		array(
+			'palette' => $colors,
+			'showGoogleFonts' => apply_filters( 'generate_font_manager_show_google_fonts', true ),
+			'colorPickerShouldShift' => function_exists( 'did_filter' ),
+		)
+	);
+
+	wp_enqueue_style(
+		'generate-customizer-controls',
+		trailingslashit( get_template_directory_uri() ) . 'assets/dist/style-customizer.css',
+		array( 'wp-components' ),
+		GENERATE_VERSION
+	);
+
+	$global_colors = generate_get_global_colors();
+	$global_colors_css = ':root {';
+
+	if ( ! empty( $global_colors ) ) {
+		foreach ( (array) $global_colors as $key => $data ) {
+			$global_colors_css .= '--' . $data['slug'] . ':' . $data['color'] . ';';
+		}
+	}
+
+	$global_colors_css .= '}';
+
+	wp_add_inline_style( 'generate-customizer-controls', $global_colors_css );
+}
+
+if ( ! function_exists( 'generate_customizer_live_preview' ) ) {
+	add_action( 'customize_preview_init', 'generate_customizer_live_preview', 100 );
+	/**
+	 * Add our live preview scripts
+	 *
+	 * @since 0.1
+	 */
+	function generate_customizer_live_preview() {
+		$spacing_settings = wp_parse_args(
+			get_option( 'generate_spacing_settings', array() ),
+			generate_spacing_get_defaults()
+		);
+
+		wp_enqueue_script( 'generate-themecustomizer', trailingslashit( get_template_directory_uri() ) . 'inc/customizer/controls/js/customizer-live-preview.js', array( 'customize-preview' ), GENERATE_VERSION, true );
+
+		wp_localize_script(
+			'generate-themecustomizer',
+			'generatepress_live_preview',
+			array(
+				'mobile' => generate_get_media_query( 'mobile' ),
+				'tablet' => generate_get_media_query( 'tablet_only' ),
+				'desktop' => generate_get_media_query( 'desktop' ),
+				'contentLeft' => absint( $spacing_settings['content_left'] ),
+				'contentRight' => absint( $spacing_settings['content_right'] ),
+				'isFlex' => generate_is_using_flexbox(),
+				'isRTL' => is_rtl(),
+			)
+		);
+
+		wp_enqueue_script(
+			'generate-postMessage',
+			trailingslashit( get_template_directory_uri() ) . 'inc/customizer/controls/js/postMessage.js',
+			array( 'jquery', 'customize-preview', 'wp-hooks' ),
+			GENERATE_VERSION,
+			true
+		);
+
+		global $generate_customize_fields;
+		wp_localize_script( 'generate-postMessage', 'gpPostMessageFields', $generate_customize_fields );
+	}
+}
+
+/**
+ * Check to see if we have a logo or not.
+ *
+ * Used as an active callback. Calling has_custom_logo creates a PHP notice for
+ * multisite users.
+ *
+ * @since 2.0.1
+ */
+function generate_has_custom_logo_callback() {
+	if ( get_theme_mod( 'custom_logo' ) ) {
+		return true;
+	}
+
+	return false;
+}
+
+/**
+ * Save our preset layout controls. These should always save to be "current".
+ *
+ * @since 2.2
+ */
+function generate_sanitize_preset_layout() {
+	return 'current';
+}
+
+/**
+ * Display options if we're using the Floats structure.
+ */
+function generate_is_using_floats_callback() {
+	return 'floats' === generate_get_option( 'structure' );
+}
+
+/**
+ * Callback to determine whether to show the inline logo option.
+ */
+function generate_show_inline_logo_callback() {
+	return 'floats' === generate_get_option( 'structure' ) && generate_has_logo_site_branding();
+}