reduxframework / redux-framework

redux-core/inc/fields/typography/class-redux-typography.php

Indentation +1354 added lines, -1354 removed lines

@@ -12,357 +12,357 @@ 
 
 if ( ! class_exists( 'Redux_Typography', false ) ) {
 
-	/**
-	 * Class Redux_Typography
-	 */
-	class Redux_Typography extends Redux_Field {
-
-		/**
-		 * Array of data for typography preview.
-		 *
-		 * @var array
-		 */
-		private $typography_preview = array();
-
-		/**
-		 *  Standard font array.
-		 *
-		 * @var array $std_fonts
-		 */
-		private $std_fonts = array(
-			'Arial, Helvetica, sans-serif'            => 'Arial, Helvetica, sans-serif',
-			'\'Arial Black\', Gadget, sans-serif'     => '\'Arial Black\', Gadget, sans-serif',
-			'\'Bookman Old Style\', serif'            => '\'Bookman Old Style\', serif',
-			'\'Comic Sans MS\', cursive'              => '\'Comic Sans MS\', cursive',
-			'Courier, monospace'                      => 'Courier, monospace',
-			'Garamond, serif'                         => 'Garamond, serif',
-			'Georgia, serif'                          => 'Georgia, serif',
-			'Impact, Charcoal, sans-serif'            => 'Impact, Charcoal, sans-serif',
-			'\'Lucida Console\', Monaco, monospace'   => '\'Lucida Console\', Monaco, monospace',
-			'\'Lucida Sans Unicode\', \'Lucida Grande\', sans-serif' => '\'Lucida Sans Unicode\', \'Lucida Grande\', sans-serif',
-			'\'MS Sans Serif\', Geneva, sans-serif'   => '\'MS Sans Serif\', Geneva, sans-serif',
-			'\'MS Serif\', \'New York\', sans-serif'  => '\'MS Serif\', \'New York\', sans-serif',
-			'\'Palatino Linotype\', \'Book Antiqua\', Palatino, serif' => '\'Palatino Linotype\', \'Book Antiqua\', Palatino, serif',
-			'Tahoma,Geneva, sans-serif'               => 'Tahoma, Geneva, sans-serif',
-			'\'Times New Roman\', Times,serif'        => '\'Times New Roman\', Times, serif',
-			'\'Trebuchet MS\', Helvetica, sans-serif' => '\'Trebuchet MS\', Helvetica, sans-serif',
-			'Verdana, Geneva, sans-serif'             => 'Verdana, Geneva, sans-serif',
-		);
-
-		/**
-		 * Default font weights.
-		 *
-		 * @var string[]
-		 */
-		private $default_font_weights = array(
-			'400'       => 'Normal 400',
-			'700'       => 'Bold 700',
-			'400italic' => 'Normal 400 Italic',
-			'700italic' => 'Bold 700 Italic',
-		);
-
-		/**
-		 * User font array.
-		 *
-		 * @var bool $user_fonts
-		 */
-		private $user_fonts = true;
-
-		/**
-		 * Redux_Field constructor.
-		 *
-		 * @param array  $field  Field array.
-		 * @param string $value  Field values.
-		 * @param null   $redux  ReduxFramework object pointer.
-		 *
-		 * @throws ReflectionException Exception.
-		 */
-		public function __construct( $field = array(), $value = null, $redux = null ) { // phpcs:ignore Generic.CodeAnalysis.UselessOverridingMethod
-			parent::__construct( $field, $value, $redux );
-
-			$this->parent = $redux;
-			$this->field  = $field;
-			$this->value  = $value;
-
-			$this->set_defaults();
-
-			$path_info = Redux_Helpers::path_info( __FILE__ );
-			$this->dir = trailingslashit( dirname( $path_info['real_path'] ) );
-			$this->url = trailingslashit( dirname( $path_info['url'] ) );
-
-			$this->timestamp = Redux_Core::$version;
-			if ( $redux->args['dev_mode'] ) {
-				$this->timestamp .= '.' . time();
-			}
-		}
-
-		/**
-		 * Sets default values for field.
-		 */
-		public function set_defaults() {
-			// Shim out old arg to new.
-			if ( isset( $this->field['all_styles'] ) && ! empty( $this->field['all_styles'] ) ) {
-				$this->field['all-styles'] = $this->field['all_styles'];
-				unset( $this->field['all_styles'] );
-			}
-
-			$defaults = array(
-				'font-family'             => true,
-				'font-size'               => true,
-				'font-weight'             => true,
-				'font-style'              => true,
-				'font-backup'             => false,
-				'subsets'                 => true,
-				'custom_fonts'            => true,
-				'text-align'              => true,
-				'text-transform'          => false,
-				'font-variant'            => false,
-				'text-decoration'         => false,
-				'color'                   => true,
-				'preview'                 => true,
-				'line-height'             => true,
-				'multi'                   => array(
-					'subsets' => false,
-					'weight'  => false,
-				),
-				'word-spacing'            => false,
-				'letter-spacing'          => false,
-				'google'                  => true,
-				'font_family_clear'       => true,
-				'allow_empty_line_height' => false,
-				'margin-top'              => false,
-				'margin-bottom'           => false,
-				'text-shadow'             => false,
-				'word-spacing-unit'       => '',
-				'letter-spacing-unit'     => '',
-				'font-size-unit'          => '',
-				'margin-top-unit'         => '',
-				'margin-bottom-unit'      => '',
-			);
-
-			$this->field = wp_parse_args( $this->field, $defaults );
-
-			if ( isset( $this->field['color_alpha'] ) ) {
-				if ( is_array( $this->field['color_alpha'] ) ) {
-					$this->field['color_alpha']['color']        = $this->field['color_alpha']['color'] ?? false;
-					$this->field['color_alpha']['shadow-color'] = $this->field['color_alpha']['shadow-color'] ?? false;
-				} else {
-					$mode                                       = $this->field['color_alpha'];
-					$this->field['color_alpha']                 = array();
-					$this->field['color_alpha']['color']        = $mode;
-					$this->field['color_alpha']['shadow-color'] = $mode;
-				}
-			} else {
-				$this->field['color_alpha']['color']        = false;
-				$this->field['color_alpha']['shadow-color'] = false;
-			}
-
-			// Set value defaults.
-			$defaults = array(
-				'font-family'       => '',
-				'font-options'      => '',
-				'font-backup'       => '',
-				'text-align'        => '',
-				'text-transform'    => '',
-				'font-variant'      => '',
-				'text-decoration'   => '',
-				'line-height'       => '',
-				'word-spacing'      => '',
-				'letter-spacing'    => '',
-				'subsets'           => '',
-				'google'            => false,
-				'font-script'       => '',
-				'font-weight'       => '',
-				'font-style'        => '',
-				'color'             => '',
-				'font-size'         => '',
-				'margin-top'        => '',
-				'margin-bottom'     => '',
-				'shadow-color'      => '#000000',
-				'shadow-horizontal' => '1',
-				'shadow-vertical'   => '1',
-				'shadow-blur'       => '4',
-			);
-
-			$this->value = wp_parse_args( $this->value, $defaults );
-
-			if ( empty( $this->field['units'] ) || ! in_array( $this->field['units'], Redux_Helpers::$array_units, true ) ) {
-				$this->field['units'] = 'px';
-			}
-
-			// Get the Google array.
-			$this->get_google_array();
-
-			if ( empty( $this->field['fonts'] ) ) {
-				$this->user_fonts     = false;
-				$this->field['fonts'] = $this->std_fonts;
-			}
-
-			$this->field['weights'] = $this->field['weights'] ?? $this->default_font_weights;
-
-			// Localize std fonts.
-			$this->localize_std_fonts();
-		}
-
-		/**
-		 * Localize font array
-		 *
-		 * @param array  $field Field array.
-		 * @param string $value Value.
-		 *
-		 * @return array
-		 */
-		public function localize( array $field, string $value = '' ): array {
-			$params = array();
-
-			if ( true === $this->user_fonts && ! empty( $this->field['fonts'] ) ) {
-				$params['std_font'] = $this->field['fonts'];
-			}
-
-			return $params;
-		}
-
-		/**
-		 * Field Render Function.
-		 * Takes the vars and outputs the HTML for the field in the settings
-		 *
-		 * @since ReduxFramework 1.0.0
-		 */
-		public function render() {
-			// Since fonts declared is CSS (@font-face) are not rendered in the preview,
-			// they can be declared in a CSS file and passed here, so they DO display in
-			// font preview.  Do NOT pass style.css in your theme, as that will mess up
-			// admin page styling.  It's recommended to pass a CSS file with ONLY font
-			// declarations.
-			// If field is set and not blank, then enqueue field.
-			if ( isset( $this->field['ext-font-css'] ) && '' !== $this->field['ext-font-css'] ) {
-				wp_enqueue_style( 'redux-external-fonts', $this->field['ext-font-css'], array(), $this->timestamp );
-			}
-
-			if ( empty( $this->field['units'] ) && ! empty( $this->field['default']['units'] ) ) {
-				$this->field['units'] = $this->field['default']['units'];
-			}
-
-			$unit = $this->field['units'];
-
-			echo '<div id="' . esc_attr( $this->field['id'] ) . '" class="redux-typography-container" data-id="' . esc_attr( $this->field['id'] ) . '" data-units="' . esc_attr( $unit ) . '">';
-
-			$this->select2_config['allowClear'] = true;
-
-			if ( isset( $this->field['select2'] ) ) {
-				$this->field['select2'] = wp_parse_args( $this->field['select2'], $this->select2_config );
-			} else {
-				$this->field['select2'] = $this->select2_config;
-			}
-
-			$this->field['select2'] = Redux_Functions::sanitize_camel_case_array_keys( $this->field['select2'] );
-
-			$select2_data = Redux_Functions::create_data_string( $this->field['select2'] );
-
-			$google_set     = false;
-			$is_google_font = '0';
-
-			// If no fontFamily array exists, create one and set array 0
-			// with font value.
-			if ( ! isset( $font_family ) ) {
-				$font_family    = array();
-				$font_family[0] = $this->value['font-family'];
-				$font_family[1] = '';
-			}
-
-			/* Font Family */
-			if ( true === $this->field['font-family'] ) {
-				if ( filter_var( $this->value['google'], FILTER_VALIDATE_BOOLEAN ) ) {
-
-					// Divide and conquer.
-					$font_family = explode( ', ', $this->value['font-family'], 2 );
-
-					// If array 0 is empty and array 1 is not.
-					if ( empty( $font_family[0] ) && ! empty( $font_family[1] ) ) {
-
-						// Make array 0 = array 1.
-						$font_family[0] = $font_family[1];
-					}
-				}
-
-				// Is selected font a Google font.
-				if ( isset( Redux_Core::$fonts['google'][ $font_family[0] ] ) ) {
-					$is_google_font = '1';
-				}
-
-				// If not a Google font, show all font families.
-				if ( '1' !== $is_google_font ) {
-					$font_family[0] = $this->value['font-family'];
-				}
-
-				$user_fonts = '0';
-				if ( true === $this->user_fonts ) {
-					$user_fonts = '1';
-				}
-
-				echo '<input
+    /**
+     * Class Redux_Typography
+     */
+    class Redux_Typography extends Redux_Field {
+
+        /**
+         * Array of data for typography preview.
+         *
+         * @var array
+         */
+        private $typography_preview = array();
+
+        /**
+         *  Standard font array.
+         *
+         * @var array $std_fonts
+         */
+        private $std_fonts = array(
+            'Arial, Helvetica, sans-serif'            => 'Arial, Helvetica, sans-serif',
+            '\'Arial Black\', Gadget, sans-serif'     => '\'Arial Black\', Gadget, sans-serif',
+            '\'Bookman Old Style\', serif'            => '\'Bookman Old Style\', serif',
+            '\'Comic Sans MS\', cursive'              => '\'Comic Sans MS\', cursive',
+            'Courier, monospace'                      => 'Courier, monospace',
+            'Garamond, serif'                         => 'Garamond, serif',
+            'Georgia, serif'                          => 'Georgia, serif',
+            'Impact, Charcoal, sans-serif'            => 'Impact, Charcoal, sans-serif',
+            '\'Lucida Console\', Monaco, monospace'   => '\'Lucida Console\', Monaco, monospace',
+            '\'Lucida Sans Unicode\', \'Lucida Grande\', sans-serif' => '\'Lucida Sans Unicode\', \'Lucida Grande\', sans-serif',
+            '\'MS Sans Serif\', Geneva, sans-serif'   => '\'MS Sans Serif\', Geneva, sans-serif',
+            '\'MS Serif\', \'New York\', sans-serif'  => '\'MS Serif\', \'New York\', sans-serif',
+            '\'Palatino Linotype\', \'Book Antiqua\', Palatino, serif' => '\'Palatino Linotype\', \'Book Antiqua\', Palatino, serif',
+            'Tahoma,Geneva, sans-serif'               => 'Tahoma, Geneva, sans-serif',
+            '\'Times New Roman\', Times,serif'        => '\'Times New Roman\', Times, serif',
+            '\'Trebuchet MS\', Helvetica, sans-serif' => '\'Trebuchet MS\', Helvetica, sans-serif',
+            'Verdana, Geneva, sans-serif'             => 'Verdana, Geneva, sans-serif',
+        );
+
+        /**
+         * Default font weights.
+         *
+         * @var string[]
+         */
+        private $default_font_weights = array(
+            '400'       => 'Normal 400',
+            '700'       => 'Bold 700',
+            '400italic' => 'Normal 400 Italic',
+            '700italic' => 'Bold 700 Italic',
+        );
+
+        /**
+         * User font array.
+         *
+         * @var bool $user_fonts
+         */
+        private $user_fonts = true;
+
+        /**
+         * Redux_Field constructor.
+         *
+         * @param array  $field  Field array.
+         * @param string $value  Field values.
+         * @param null   $redux  ReduxFramework object pointer.
+         *
+         * @throws ReflectionException Exception.
+         */
+        public function __construct( $field = array(), $value = null, $redux = null ) { // phpcs:ignore Generic.CodeAnalysis.UselessOverridingMethod
+            parent::__construct( $field, $value, $redux );
+
+            $this->parent = $redux;
+            $this->field  = $field;
+            $this->value  = $value;
+
+            $this->set_defaults();
+
+            $path_info = Redux_Helpers::path_info( __FILE__ );
+            $this->dir = trailingslashit( dirname( $path_info['real_path'] ) );
+            $this->url = trailingslashit( dirname( $path_info['url'] ) );
+
+            $this->timestamp = Redux_Core::$version;
+            if ( $redux->args['dev_mode'] ) {
+                $this->timestamp .= '.' . time();
+            }
+        }
+
+        /**
+         * Sets default values for field.
+         */
+        public function set_defaults() {
+            // Shim out old arg to new.
+            if ( isset( $this->field['all_styles'] ) && ! empty( $this->field['all_styles'] ) ) {
+                $this->field['all-styles'] = $this->field['all_styles'];
+                unset( $this->field['all_styles'] );
+            }
+
+            $defaults = array(
+                'font-family'             => true,
+                'font-size'               => true,
+                'font-weight'             => true,
+                'font-style'              => true,
+                'font-backup'             => false,
+                'subsets'                 => true,
+                'custom_fonts'            => true,
+                'text-align'              => true,
+                'text-transform'          => false,
+                'font-variant'            => false,
+                'text-decoration'         => false,
+                'color'                   => true,
+                'preview'                 => true,
+                'line-height'             => true,
+                'multi'                   => array(
+                    'subsets' => false,
+                    'weight'  => false,
+                ),
+                'word-spacing'            => false,
+                'letter-spacing'          => false,
+                'google'                  => true,
+                'font_family_clear'       => true,
+                'allow_empty_line_height' => false,
+                'margin-top'              => false,
+                'margin-bottom'           => false,
+                'text-shadow'             => false,
+                'word-spacing-unit'       => '',
+                'letter-spacing-unit'     => '',
+                'font-size-unit'          => '',
+                'margin-top-unit'         => '',
+                'margin-bottom-unit'      => '',
+            );
+
+            $this->field = wp_parse_args( $this->field, $defaults );
+
+            if ( isset( $this->field['color_alpha'] ) ) {
+                if ( is_array( $this->field['color_alpha'] ) ) {
+                    $this->field['color_alpha']['color']        = $this->field['color_alpha']['color'] ?? false;
+                    $this->field['color_alpha']['shadow-color'] = $this->field['color_alpha']['shadow-color'] ?? false;
+                } else {
+                    $mode                                       = $this->field['color_alpha'];
+                    $this->field['color_alpha']                 = array();
+                    $this->field['color_alpha']['color']        = $mode;
+                    $this->field['color_alpha']['shadow-color'] = $mode;
+                }
+            } else {
+                $this->field['color_alpha']['color']        = false;
+                $this->field['color_alpha']['shadow-color'] = false;
+            }
+
+            // Set value defaults.
+            $defaults = array(
+                'font-family'       => '',
+                'font-options'      => '',
+                'font-backup'       => '',
+                'text-align'        => '',
+                'text-transform'    => '',
+                'font-variant'      => '',
+                'text-decoration'   => '',
+                'line-height'       => '',
+                'word-spacing'      => '',
+                'letter-spacing'    => '',
+                'subsets'           => '',
+                'google'            => false,
+                'font-script'       => '',
+                'font-weight'       => '',
+                'font-style'        => '',
+                'color'             => '',
+                'font-size'         => '',
+                'margin-top'        => '',
+                'margin-bottom'     => '',
+                'shadow-color'      => '#000000',
+                'shadow-horizontal' => '1',
+                'shadow-vertical'   => '1',
+                'shadow-blur'       => '4',
+            );
+
+            $this->value = wp_parse_args( $this->value, $defaults );
+
+            if ( empty( $this->field['units'] ) || ! in_array( $this->field['units'], Redux_Helpers::$array_units, true ) ) {
+                $this->field['units'] = 'px';
+            }
+
+            // Get the Google array.
+            $this->get_google_array();
+
+            if ( empty( $this->field['fonts'] ) ) {
+                $this->user_fonts     = false;
+                $this->field['fonts'] = $this->std_fonts;
+            }
+
+            $this->field['weights'] = $this->field['weights'] ?? $this->default_font_weights;
+
+            // Localize std fonts.
+            $this->localize_std_fonts();
+        }
+
+        /**
+         * Localize font array
+         *
+         * @param array  $field Field array.
+         * @param string $value Value.
+         *
+         * @return array
+         */
+        public function localize( array $field, string $value = '' ): array {
+            $params = array();
+
+            if ( true === $this->user_fonts && ! empty( $this->field['fonts'] ) ) {
+                $params['std_font'] = $this->field['fonts'];
+            }
+
+            return $params;
+        }
+
+        /**
+         * Field Render Function.
+         * Takes the vars and outputs the HTML for the field in the settings
+         *
+         * @since ReduxFramework 1.0.0
+         */
+        public function render() {
+            // Since fonts declared is CSS (@font-face) are not rendered in the preview,
+            // they can be declared in a CSS file and passed here, so they DO display in
+            // font preview.  Do NOT pass style.css in your theme, as that will mess up
+            // admin page styling.  It's recommended to pass a CSS file with ONLY font
+            // declarations.
+            // If field is set and not blank, then enqueue field.
+            if ( isset( $this->field['ext-font-css'] ) && '' !== $this->field['ext-font-css'] ) {
+                wp_enqueue_style( 'redux-external-fonts', $this->field['ext-font-css'], array(), $this->timestamp );
+            }
+
+            if ( empty( $this->field['units'] ) && ! empty( $this->field['default']['units'] ) ) {
+                $this->field['units'] = $this->field['default']['units'];
+            }
+
+            $unit = $this->field['units'];
+
+            echo '<div id="' . esc_attr( $this->field['id'] ) . '" class="redux-typography-container" data-id="' . esc_attr( $this->field['id'] ) . '" data-units="' . esc_attr( $unit ) . '">';
+
+            $this->select2_config['allowClear'] = true;
+
+            if ( isset( $this->field['select2'] ) ) {
+                $this->field['select2'] = wp_parse_args( $this->field['select2'], $this->select2_config );
+            } else {
+                $this->field['select2'] = $this->select2_config;
+            }
+
+            $this->field['select2'] = Redux_Functions::sanitize_camel_case_array_keys( $this->field['select2'] );
+
+            $select2_data = Redux_Functions::create_data_string( $this->field['select2'] );
+
+            $google_set     = false;
+            $is_google_font = '0';
+
+            // If no fontFamily array exists, create one and set array 0
+            // with font value.
+            if ( ! isset( $font_family ) ) {
+                $font_family    = array();
+                $font_family[0] = $this->value['font-family'];
+                $font_family[1] = '';
+            }
+
+            /* Font Family */
+            if ( true === $this->field['font-family'] ) {
+                if ( filter_var( $this->value['google'], FILTER_VALIDATE_BOOLEAN ) ) {
+
+                    // Divide and conquer.
+                    $font_family = explode( ', ', $this->value['font-family'], 2 );
+
+                    // If array 0 is empty and array 1 is not.
+                    if ( empty( $font_family[0] ) && ! empty( $font_family[1] ) ) {
+
+                        // Make array 0 = array 1.
+                        $font_family[0] = $font_family[1];
+                    }
+                }
+
+                // Is selected font a Google font.
+                if ( isset( Redux_Core::$fonts['google'][ $font_family[0] ] ) ) {
+                    $is_google_font = '1';
+                }
+
+                // If not a Google font, show all font families.
+                if ( '1' !== $is_google_font ) {
+                    $font_family[0] = $this->value['font-family'];
+                }
+
+                $user_fonts = '0';
+                if ( true === $this->user_fonts ) {
+                    $user_fonts = '1';
+                }
+
+                echo '<input
 						type="hidden"
 						class="redux-typography-font-family ' . esc_attr( $this->field['class'] ) . '"
 						data-user-fonts="' . esc_attr( $user_fonts ) . '" name="' . esc_attr( $this->field['name'] . $this->field['name_suffix'] ) . '[font-family]"
 						value="' . esc_attr( $this->value['font-family'] ) . '"
 						data-id="' . esc_attr( $this->field['id'] ) . '"  />';
 
-				echo '<input
+                echo '<input
 						type="hidden"
 						class="redux-typography-font-options ' . esc_attr( $this->field['class'] ) . '"
 						name="' . esc_attr( $this->field['name'] . $this->field['name_suffix'] ) . '[font-options]"
 						value="' . esc_attr( $this->value['font-options'] ) . '"
 						data-id="' . esc_attr( $this->field['id'] ) . '"  />';
 
-				echo '<input
+                echo '<input
 						type="hidden"
 						class="redux-typography-google-font" value="' . esc_attr( $is_google_font ) . '"
 						id="' . esc_attr( $this->field['id'] ) . '-google-font">';
 
-				echo '<div class="select_wrapper typography-family" style="width: 220px; margin-right: 5px;">';
-				echo '<label for="' . esc_attr( $this->field['id'] ) . '-family">' . esc_html__( 'Font Family', 'redux-framework' ) . '</label>';
+                echo '<div class="select_wrapper typography-family" style="width: 220px; margin-right: 5px;">';
+                echo '<label for="' . esc_attr( $this->field['id'] ) . '-family">' . esc_html__( 'Font Family', 'redux-framework' ) . '</label>';
 
-				$placeholder = esc_html__( 'Font family', 'redux-framework' );
+                $placeholder = esc_html__( 'Font family', 'redux-framework' );
 
-				$new_arr                = $this->field['select2'];
-				$new_arr['allow-clear'] = $this->field['font_family_clear'];
-				$new_data               = Redux_Functions::create_data_string( $new_arr );
+                $new_arr                = $this->field['select2'];
+                $new_arr['allow-clear'] = $this->field['font_family_clear'];
+                $new_data               = Redux_Functions::create_data_string( $new_arr );
 
-				echo '<select class=" redux-typography redux-typography-family select2-container ' . esc_attr( $this->field['class'] ) . '" id="' . esc_attr( $this->field['id'] ) . '-family" data-placeholder="' . esc_attr( $placeholder ) . '" data-id="' . esc_attr( $this->field['id'] ) . '" data-value="' . esc_attr( $font_family[0] ) . '"' . esc_html( $new_data ) . '>';
+                echo '<select class=" redux-typography redux-typography-family select2-container ' . esc_attr( $this->field['class'] ) . '" id="' . esc_attr( $this->field['id'] ) . '-family" data-placeholder="' . esc_attr( $placeholder ) . '" data-id="' . esc_attr( $this->field['id'] ) . '" data-value="' . esc_attr( $font_family[0] ) . '"' . esc_html( $new_data ) . '>';
 
-				echo '</select>';
-				echo '</div>';
+                echo '</select>';
+                echo '</div>';
 
-				if ( true === $this->field['google'] ) {
+                if ( true === $this->field['google'] ) {
 
-					// Set a flag, so we know to set a header style or not.
-					echo '<input
+                    // Set a flag, so we know to set a header style or not.
+                    echo '<input
 							type="hidden"
 							class="redux-typography-google ' . esc_attr( $this->field['class'] ) . '"
 							id="' . esc_attr( $this->field['id'] ) . '-google" name="' . esc_attr( $this->field['name'] . $this->field['name_suffix'] ) . '[google]"
 							type="text" value="' . esc_attr( $this->field['google'] ) . '"
 							data-id="' . esc_attr( $this->field['id'] ) . '" />';
 
-					$google_set = true;
-				}
-			}
+                    $google_set = true;
+                }
+            }
 
-			/* Backup Font */
-			if ( true === $this->field['font-family'] && true === $this->field['google'] ) {
-				if ( false === $google_set ) {
-					// Set a flag, so we know to set a header style or not.
-					echo '<input
+            /* Backup Font */
+            if ( true === $this->field['font-family'] && true === $this->field['google'] ) {
+                if ( false === $google_set ) {
+                    // Set a flag, so we know to set a header style or not.
+                    echo '<input
 							type="hidden"
 							class="redux-typography-google ' . esc_attr( $this->field['class'] ) . '"
 							id="' . esc_attr( $this->field['id'] ) . '-google" name="' . esc_attr( $this->field['name'] . $this->field['name_suffix'] ) . '[google]"
 							type="text" value="' . esc_attr( $this->field['google'] ) . '"
 							data-id="' . esc_attr( $this->field['id'] ) . '"  />';
-				}
+                }
 
-				if ( true === $this->field['font-backup'] ) {
-					echo '<div class="select_wrapper typography-family-backup" style="width: 220px; margin-right: 5px;">';
-					echo '<label for="' . esc_attr( $this->field['id'] ) . '-family-backup">' . esc_html__( 'Backup Font Family', 'redux-framework' ) . '</label>';
-					echo '<select
+                if ( true === $this->field['font-backup'] ) {
+                    echo '<div class="select_wrapper typography-family-backup" style="width: 220px; margin-right: 5px;">';
+                    echo '<label for="' . esc_attr( $this->field['id'] ) . '-family-backup">' . esc_html__( 'Backup Font Family', 'redux-framework' ) . '</label>';
+                    echo '<select
 							data-placeholder="' . esc_html__( 'Backup Font Family', 'redux-framework' ) . '"
 							name="' . esc_attr( $this->field['name'] . $this->field['name_suffix'] ) . '[font-backup]"
 							class="redux-typography redux-typography-family-backup ' . esc_attr( $this->field['class'] ) . '"
@@ -370,62 +370,62 @@ 
 							data-id="' . esc_attr( $this->field['id'] ) . '"
 							data-value="' . esc_attr( $this->value['font-backup'] ) . '"' . esc_attr( $select2_data ) . '>';
 
-					echo '<option data-google="false" data-details="" value=""></option>';
+                    echo '<option data-google="false" data-details="" value=""></option>';
 
-					foreach ( $this->field['fonts'] as $i => $family ) {
-						echo '<option data-google="true" value="' . esc_attr( $i ) . '" ' . selected( $this->value['font-backup'], $i, false ) . '>' . esc_html( $family ) . '</option>';
-					}
+                    foreach ( $this->field['fonts'] as $i => $family ) {
+                        echo '<option data-google="true" value="' . esc_attr( $i ) . '" ' . selected( $this->value['font-backup'], $i, false ) . '>' . esc_html( $family ) . '</option>';
+                    }
 
-					echo '</select></div>';
-				}
-			}
+                    echo '</select></div>';
+                }
+            }
 
-			/* Font Style/Weight */
-			if ( true === $this->field['font-style'] || true === $this->field['font-weight'] ) {
-				echo '<div data-weights="' . rawurlencode( wp_json_encode( $this->field['weights'] ) ) . '" class="select_wrapper typography-style" original-title="' . esc_html__( 'Font style', 'redux-framework' ) . '">';
-				echo '<label for="' . esc_attr( $this->field['id'] ) . '_style">' . esc_html__( 'Font Weight &amp; Style', 'redux-framework' ) . '</label>';
+            /* Font Style/Weight */
+            if ( true === $this->field['font-style'] || true === $this->field['font-weight'] ) {
+                echo '<div data-weights="' . rawurlencode( wp_json_encode( $this->field['weights'] ) ) . '" class="select_wrapper typography-style" original-title="' . esc_html__( 'Font style', 'redux-framework' ) . '">';
+                echo '<label for="' . esc_attr( $this->field['id'] ) . '_style">' . esc_html__( 'Font Weight &amp; Style', 'redux-framework' ) . '</label>';
 
-				$style = $this->value['font-weight'] . $this->value['font-style'];
+                $style = $this->value['font-weight'] . $this->value['font-style'];
 
-				echo '<input
+                echo '<input
 						type="hidden"
 						class="typography-font-weight" name="' . esc_attr( $this->field['name'] . $this->field['name_suffix'] ) . '[font-weight]"
 						value="' . esc_attr( $this->value['font-weight'] ) . '"
 						data-id="' . esc_attr( $this->field['id'] ) . '"  /> ';
 
-				echo '<input
+                echo '<input
 						type="hidden"
 						class="typography-font-style" name="' . esc_attr( $this->field['name'] . $this->field['name_suffix'] ) . '[font-style]"
 						value="' . esc_attr( $this->value['font-style'] ) . '"
 						data-id="' . esc_attr( $this->field['id'] ) . '"  /> ';
-				$multi = ( isset( $this->field['multi']['weight'] ) && $this->field['multi']['weight'] ) ? ' multiple="multiple"' : '';
-				echo '<select' . esc_html( $multi ) . '
+                $multi = ( isset( $this->field['multi']['weight'] ) && $this->field['multi']['weight'] ) ? ' multiple="multiple"' : '';
+                echo '<select' . esc_html( $multi ) . '
 				        data-placeholder="' . esc_html__( 'Style', 'redux-framework' ) . '"
 				        class="redux-typography redux-typography-style select ' . esc_attr( $this->field['class'] ) . '"
 				        original-title="' . esc_html__( 'Font style', 'redux-framework' ) . '"
 				        id="' . esc_attr( $this->field['id'] ) . '_style" data-id="' . esc_attr( $this->field['id'] ) . '"
 				        data-value="' . esc_attr( $style ) . '"' . esc_attr( $select2_data ) . '>';
 
-				if ( empty( $this->value['subsets'] ) || empty( $this->value['font-weight'] ) ) {
-					echo '<option value=""></option>';
-				}
+                if ( empty( $this->value['subsets'] ) || empty( $this->value['font-weight'] ) ) {
+                    echo '<option value=""></option>';
+                }
 
-				echo '</select></div>';
-			}
+                echo '</select></div>';
+            }
 
-			/* Font Script */
-			if ( true === $this->field['font-family'] && true === $this->field['subsets'] && true === $this->field['google'] ) {
-				echo '<div class="select_wrapper typography-script tooltip" original-title="' . esc_html__( 'Font subsets', 'redux-framework' ) . '">';
-				echo '<input
+            /* Font Script */
+            if ( true === $this->field['font-family'] && true === $this->field['subsets'] && true === $this->field['google'] ) {
+                echo '<div class="select_wrapper typography-script tooltip" original-title="' . esc_html__( 'Font subsets', 'redux-framework' ) . '">';
+                echo '<input
 						type="hidden"
 						class="typography-subsets"
 						name="' . esc_attr( $this->field['name'] . $this->field['name_suffix'] ) . '[subsets]"
 						value="' . esc_attr( $this->value['subsets'] ) . '"
 						data-id="' . esc_attr( $this->field['id'] ) . '"  /> ';
 
-				echo '<label for="' . esc_attr( $this->field['id'] ) . '-subsets">' . esc_html__( 'Font Subsets', 'redux-framework' ) . '</label>';
-				$multi = ( isset( $this->field['multi']['subsets'] ) && $this->field['multi']['subsets'] ) ? ' multiple="multiple"' : '';
-				echo '<select' . esc_html( $multi ) . '
+                echo '<label for="' . esc_attr( $this->field['id'] ) . '-subsets">' . esc_html__( 'Font Subsets', 'redux-framework' ) . '</label>';
+                $multi = ( isset( $this->field['multi']['subsets'] ) && $this->field['multi']['subsets'] ) ? ' multiple="multiple"' : '';
+                echo '<select' . esc_html( $multi ) . '
 						data-placeholder="' . esc_html__( 'Subsets', 'redux-framework' ) . '"
 						class="redux-typography redux-typography-subsets ' . esc_attr( $this->field['class'] ) . '"
 						original-title="' . esc_html__( 'Font script', 'redux-framework' ) . '"
@@ -433,18 +433,18 @@ 
 						data-value="' . esc_attr( $this->value['subsets'] ) . '"
 						data-id="' . esc_attr( $this->field['id'] ) . '"' . esc_attr( $select2_data ) . '>';
 
-				if ( empty( $this->value['subsets'] ) ) {
-					echo '<option value=""></option>';
-				}
+                if ( empty( $this->value['subsets'] ) ) {
+                    echo '<option value=""></option>';
+                }
 
-				echo '</select></div>';
-			}
+                echo '</select></div>';
+            }
 
-			/* Font Align */
-			if ( true === $this->field['text-align'] ) {
-				echo '<div class="select_wrapper typography-align tooltip" original-title="' . esc_html__( 'Text Align', 'redux-framework' ) . '">';
-				echo '<label for="' . esc_attr( $this->field['id'] ) . '-align">' . esc_html__( 'Text Align', 'redux-framework' ) . '</label>';
-				echo '<select
+            /* Font Align */
+            if ( true === $this->field['text-align'] ) {
+                echo '<div class="select_wrapper typography-align tooltip" original-title="' . esc_html__( 'Text Align', 'redux-framework' ) . '">';
+                echo '<label for="' . esc_attr( $this->field['id'] ) . '-align">' . esc_html__( 'Text Align', 'redux-framework' ) . '</label>';
+                echo '<select
 						data-placeholder="' . esc_html__( 'Text Align', 'redux-framework' ) . '"
 						class="redux-typography redux-typography-align ' . esc_attr( $this->field['class'] ) . '"
 						original-title="' . esc_html__( 'Text Align', 'redux-framework' ) . '"
@@ -453,29 +453,29 @@ 
 						data-value="' . esc_attr( $this->value['text-align'] ) . '"
 						data-id="' . esc_attr( $this->field['id'] ) . '"' . esc_attr( $select2_data ) . '>';
 
-				echo '<option value=""></option>';
-
-				$align = array(
-					esc_html__( 'inherit', 'redux-framework' ),
-					esc_html__( 'left', 'redux-framework' ),
-					esc_html__( 'right', 'redux-framework' ),
-					esc_html__( 'center', 'redux-framework' ),
-					esc_html__( 'justify', 'redux-framework' ),
-					esc_html__( 'initial', 'redux-framework' ),
-				);
-
-				foreach ( $align as $v ) {
-					echo '<option value="' . esc_attr( $v ) . '" ' . selected( $this->value['text-align'], $v, false ) . '>' . esc_html( ucfirst( $v ) ) . '</option>';
-				}
-
-				echo '</select></div>';
-			}
-
-			/* Text Transform */
-			if ( true === $this->field['text-transform'] ) {
-				echo '<div class="select_wrapper typography-transform tooltip" original-title="' . esc_html__( 'Text Transform', 'redux-framework' ) . '">';
-				echo '<label for="' . esc_attr( $this->field['id'] ) . '-transform">' . esc_html__( 'Text Transform', 'redux-framework' ) . '</label>';
-				echo '<select
+                echo '<option value=""></option>';
+
+                $align = array(
+                    esc_html__( 'inherit', 'redux-framework' ),
+                    esc_html__( 'left', 'redux-framework' ),
+                    esc_html__( 'right', 'redux-framework' ),
+                    esc_html__( 'center', 'redux-framework' ),
+                    esc_html__( 'justify', 'redux-framework' ),
+                    esc_html__( 'initial', 'redux-framework' ),
+                );
+
+                foreach ( $align as $v ) {
+                    echo '<option value="' . esc_attr( $v ) . '" ' . selected( $this->value['text-align'], $v, false ) . '>' . esc_html( ucfirst( $v ) ) . '</option>';
+                }
+
+                echo '</select></div>';
+            }
+
+            /* Text Transform */
+            if ( true === $this->field['text-transform'] ) {
+                echo '<div class="select_wrapper typography-transform tooltip" original-title="' . esc_html__( 'Text Transform', 'redux-framework' ) . '">';
+                echo '<label for="' . esc_attr( $this->field['id'] ) . '-transform">' . esc_html__( 'Text Transform', 'redux-framework' ) . '</label>';
+                echo '<select
 						data-placeholder="' . esc_html__( 'Text Transform', 'redux-framework' ) . '"
 						class="redux-typography redux-typography-transform ' . esc_attr( $this->field['class'] ) . '"
 						original-title="' . esc_html__( 'Text Transform', 'redux-framework' ) . '"
@@ -484,29 +484,29 @@ 
 						data-value="' . esc_attr( $this->value['text-transform'] ) . '"
 						data-id="' . esc_attr( $this->field['id'] ) . '"' . esc_attr( $select2_data ) . '>';
 
-				echo '<option value=""></option>';
-
-				$values = array(
-					esc_html__( 'none', 'redux-framework' ),
-					esc_html__( 'capitalize', 'redux-framework' ),
-					esc_html__( 'uppercase', 'redux-framework' ),
-					esc_html__( 'lowercase', 'redux-framework' ),
-					esc_html__( 'initial', 'redux-framework' ),
-					esc_html__( 'inherit', 'redux-framework' ),
-				);
-
-				foreach ( $values as $v ) {
-					echo '<option value="' . esc_attr( $v ) . '" ' . selected( $this->value['text-transform'], $v, false ) . '>' . esc_html( ucfirst( $v ) ) . '</option>';
-				}
-
-				echo '</select></div>';
-			}
-
-			/* Font Variant */
-			if ( true === $this->field['font-variant'] ) {
-				echo '<div class="select_wrapper typography-font-variant tooltip" original-title="' . esc_html__( 'Font Variant', 'redux-framework' ) . '">';
-				echo '<label for="' . esc_attr( $this->field['id'] ) . '-font-variant">' . esc_html__( 'Font Variant', 'redux-framework' ) . '</label>';
-				echo '<select
+                echo '<option value=""></option>';
+
+                $values = array(
+                    esc_html__( 'none', 'redux-framework' ),
+                    esc_html__( 'capitalize', 'redux-framework' ),
+                    esc_html__( 'uppercase', 'redux-framework' ),
+                    esc_html__( 'lowercase', 'redux-framework' ),
+                    esc_html__( 'initial', 'redux-framework' ),
+                    esc_html__( 'inherit', 'redux-framework' ),
+                );
+
+                foreach ( $values as $v ) {
+                    echo '<option value="' . esc_attr( $v ) . '" ' . selected( $this->value['text-transform'], $v, false ) . '>' . esc_html( ucfirst( $v ) ) . '</option>';
+                }
+
+                echo '</select></div>';
+            }
+
+            /* Font Variant */
+            if ( true === $this->field['font-variant'] ) {
+                echo '<div class="select_wrapper typography-font-variant tooltip" original-title="' . esc_html__( 'Font Variant', 'redux-framework' ) . '">';
+                echo '<label for="' . esc_attr( $this->field['id'] ) . '-font-variant">' . esc_html__( 'Font Variant', 'redux-framework' ) . '</label>';
+                echo '<select
 						data-placeholder="' . esc_html__( 'Font Variant', 'redux-framework' ) . '"
 						class="redux-typography redux-typography-font-variant ' . esc_attr( $this->field['class'] ) . '"
 						original-title="' . esc_html__( 'Font Variant', 'redux-framework' ) . '"
@@ -515,26 +515,26 @@ 
 						data-value="' . esc_attr( $this->value['font-variant'] ) . '"
 						data-id="' . esc_attr( $this->field['id'] ) . '"' . esc_attr( $select2_data ) . '>';
 
-				echo '<option value=""></option>';
+                echo '<option value=""></option>';
 
-				$values = array(
-					esc_html__( 'inherit', 'redux-framework' ),
-					esc_html__( 'normal', 'redux-framework' ),
-					esc_html__( 'small-caps', 'redux-framework' ),
-				);
+                $values = array(
+                    esc_html__( 'inherit', 'redux-framework' ),
+                    esc_html__( 'normal', 'redux-framework' ),
+                    esc_html__( 'small-caps', 'redux-framework' ),
+                );
 
-				foreach ( $values as $v ) {
-					echo '<option value="' . esc_attr( $v ) . '" ' . selected( $this->value['font-variant'], $v, false ) . '>' . esc_attr( ucfirst( $v ) ) . '</option>';
-				}
+                foreach ( $values as $v ) {
+                    echo '<option value="' . esc_attr( $v ) . '" ' . selected( $this->value['font-variant'], $v, false ) . '>' . esc_attr( ucfirst( $v ) ) . '</option>';
+                }
 
-				echo '</select></div>';
-			}
+                echo '</select></div>';
+            }
 
-			/* Text Decoration */
-			if ( true === $this->field['text-decoration'] ) {
-				echo '<div class="select_wrapper typography-decoration tooltip" original-title="' . esc_html__( 'Text Decoration', 'redux-framework' ) . '">';
-				echo '<label for="' . esc_attr( $this->field['id'] ) . '-decoration">' . esc_html__( 'Text Decoration', 'redux-framework' ) . '</label>';
-				echo '<select
+            /* Text Decoration */
+            if ( true === $this->field['text-decoration'] ) {
+                echo '<div class="select_wrapper typography-decoration tooltip" original-title="' . esc_html__( 'Text Decoration', 'redux-framework' ) . '">';
+                echo '<label for="' . esc_attr( $this->field['id'] ) . '-decoration">' . esc_html__( 'Text Decoration', 'redux-framework' ) . '</label>';
+                echo '<select
 						data-placeholder="' . esc_html__( 'Text Decoration', 'redux-framework' ) . '"
 						class="redux-typography redux-typography-decoration ' . esc_attr( $this->field['class'] ) . '"
 						original-title="' . esc_html__( 'Text Decoration', 'redux-framework' ) . '"
@@ -543,32 +543,32 @@ 
 						data-value="' . esc_attr( $this->value['text-decoration'] ) . '"
 						data-id="' . esc_attr( $this->field['id'] ) . '"' . esc_attr( $select2_data ) . '>';
 
-				echo '<option value=""></option>';
+                echo '<option value=""></option>';
 
-				$values = array(
-					esc_html__( 'none', 'redux-framework' ),
-					esc_html__( 'inherit', 'redux-framework' ),
-					esc_html__( 'underline', 'redux-framework' ),
-					esc_html__( 'overline', 'redux-framework' ),
-					esc_html__( 'line-through', 'redux-framework' ),
-					esc_html__( 'blink', 'redux-framework' ),
-				);
+                $values = array(
+                    esc_html__( 'none', 'redux-framework' ),
+                    esc_html__( 'inherit', 'redux-framework' ),
+                    esc_html__( 'underline', 'redux-framework' ),
+                    esc_html__( 'overline', 'redux-framework' ),
+                    esc_html__( 'line-through', 'redux-framework' ),
+                    esc_html__( 'blink', 'redux-framework' ),
+                );
 
-				foreach ( $values as $v ) {
-					echo '<option value="' . esc_attr( $v ) . '" ' . selected( $this->value['text-decoration'], $v, false ) . '>' . esc_html( ucfirst( $v ) ) . '</option>';
-				}
+                foreach ( $values as $v ) {
+                    echo '<option value="' . esc_attr( $v ) . '" ' . selected( $this->value['text-decoration'], $v, false ) . '>' . esc_html( ucfirst( $v ) ) . '</option>';
+                }
 
-				echo '</select></div>';
-			}
+                echo '</select></div>';
+            }
 
-			/* Font Size */
-			if ( true === $this->field['font-size'] ) {
-				$the_unit = '' !== $this->field['font-size-unit'] ? $this->field['font-size-unit'] : $unit;
+            /* Font Size */
+            if ( true === $this->field['font-size'] ) {
+                $the_unit = '' !== $this->field['font-size-unit'] ? $this->field['font-size-unit'] : $unit;
 
-				echo '<div class="input_wrapper font-size redux-container-typography">';
-				echo '<label for="' . esc_attr( $this->field['id'] ) . '-size">' . esc_html__( 'Font Size', 'redux-framework' ) . '</label>';
-				echo '<div class="input-append">';
-				echo '<input
+                echo '<div class="input_wrapper font-size redux-container-typography">';
+                echo '<label for="' . esc_attr( $this->field['id'] ) . '-size">' . esc_html__( 'Font Size', 'redux-framework' ) . '</label>';
+                echo '<div class="input-append">';
+                echo '<input
 						type="text"
 						class="span2 redux-typography redux-typography-size mini typography-input ' . esc_attr( $this->field['class'] ) . '"
 						title="' . esc_html__( 'Font Size', 'redux-framework' ) . '"
@@ -577,20 +577,20 @@ 
 						value="' . esc_attr( str_replace( Redux_Helpers::$array_units, '', $this->value['font-size'] ) ) . '"
 						data-unit="' . esc_attr( $the_unit ) . '"
 						data-value="' . esc_attr( str_replace( Redux_Helpers::$array_units, '', $this->value['font-size'] ) ) . '">';
-				echo '<span class="add-on">' . esc_html( $the_unit ) . '</span>';
-				echo '</div>';
-				echo '<input type="hidden" class="typography-font-size" name="' . esc_attr( $this->field['name'] . $this->field['name_suffix'] ) . '[font-size]" value="' . esc_attr( $this->value['font-size'] ) . '" data-id="' . esc_attr( $this->field['id'] ) . '"/>';
-				echo '</div>';
-			}
-
-			/* Line Height */
-			if ( true === $this->field['line-height'] ) {
-				$the_unit = $this->field['line-height-unit'] ?? $unit;
-
-				echo '<div class="input_wrapper line-height redux-container-typography">';
-				echo '<label for="' . esc_attr( $this->field['id'] ) . '-height">' . esc_html__( 'Line Height', 'redux-framework' ) . '</label>';
-				echo '<div class="input-append">';
-				echo '<input
+                echo '<span class="add-on">' . esc_html( $the_unit ) . '</span>';
+                echo '</div>';
+                echo '<input type="hidden" class="typography-font-size" name="' . esc_attr( $this->field['name'] . $this->field['name_suffix'] ) . '[font-size]" value="' . esc_attr( $this->value['font-size'] ) . '" data-id="' . esc_attr( $this->field['id'] ) . '"/>';
+                echo '</div>';
+            }
+
+            /* Line Height */
+            if ( true === $this->field['line-height'] ) {
+                $the_unit = $this->field['line-height-unit'] ?? $unit;
+
+                echo '<div class="input_wrapper line-height redux-container-typography">';
+                echo '<label for="' . esc_attr( $this->field['id'] ) . '-height">' . esc_html__( 'Line Height', 'redux-framework' ) . '</label>';
+                echo '<div class="input-append">';
+                echo '<input
 						type="text"
 						class="span2 redux-typography redux-typography-height mini typography-input ' . esc_attr( $this->field['class'] ) . '"
 						title="' . esc_html__( 'Line Height', 'redux-framework' ) . '"
@@ -600,25 +600,25 @@ 
 						data-allow-empty="' . esc_attr( $this->field['allow_empty_line_height'] ) . '"
 						data-unit="' . esc_attr( $the_unit ) . '"
 						data-value="' . esc_attr( str_replace( Redux_Helpers::$array_units, '', $this->value['line-height'] ) ) . '">';
-				echo '<span class="add-on">' . esc_html( '' === $the_unit ? '&nbsp;' : $the_unit ) . '</span>';
-				echo '</div>';
-				echo '<input
+                echo '<span class="add-on">' . esc_html( '' === $the_unit ? '&nbsp;' : $the_unit ) . '</span>';
+                echo '</div>';
+                echo '<input
 						type="hidden"
 						class="typography-line-height"
 						name="' . esc_attr( $this->field['name'] . $this->field['name_suffix'] ) . '[line-height]"
 						value="' . esc_attr( $this->value['line-height'] ) . '"
 						data-id="' . esc_attr( $this->field['id'] ) . '"/>';
-				echo '</div>';
-			}
+                echo '</div>';
+            }
 
-			/* Word Spacing */
-			if ( true === $this->field['word-spacing'] ) {
-				$the_unit = '' !== $this->field['word-spacing-unit'] ? $this->field['word-spacing-unit'] : $unit;
+            /* Word Spacing */
+            if ( true === $this->field['word-spacing'] ) {
+                $the_unit = '' !== $this->field['word-spacing-unit'] ? $this->field['word-spacing-unit'] : $unit;
 
-				echo '<div class="input_wrapper word-spacing redux-container-typography">';
-				echo '<label for="' . esc_attr( $this->field['id'] ) . '-word">' . esc_html__( 'Word Spacing', 'redux-framework' ) . '</label>';
-				echo '<div class="input-append">';
-				echo '<input
+                echo '<div class="input_wrapper word-spacing redux-container-typography">';
+                echo '<label for="' . esc_attr( $this->field['id'] ) . '-word">' . esc_html__( 'Word Spacing', 'redux-framework' ) . '</label>';
+                echo '<div class="input-append">';
+                echo '<input
 						type="text"
 						class="span2 redux-typography redux-typography-word mini typography-input ' . esc_attr( $this->field['class'] ) . '"
 						title="' . esc_html__( 'Word Spacing', 'redux-framework' ) . '"
@@ -628,20 +628,20 @@ 
 						value="' . esc_attr( str_replace( $the_unit, '', $this->value['word-spacing'] ) ) . '"
 						data-value="' . esc_attr( str_replace( $the_unit, '', $this->value['word-spacing'] ) ) . '">';
 
-				echo '<span class="add-on">' . esc_html( $the_unit ) . '</span>';
-				echo '</div>';
-				echo '<input type="hidden" class="typography-word-spacing" name="' . esc_attr( $this->field['name'] . $this->field['name_suffix'] ) . '[word-spacing] " value="' . esc_attr( $this->value['word-spacing'] ) . '" data-id="' . esc_attr( $this->field['id'] ) . '"/>';
-				echo '</div>';
-			}
+                echo '<span class="add-on">' . esc_html( $the_unit ) . '</span>';
+                echo '</div>';
+                echo '<input type="hidden" class="typography-word-spacing" name="' . esc_attr( $this->field['name'] . $this->field['name_suffix'] ) . '[word-spacing] " value="' . esc_attr( $this->value['word-spacing'] ) . '" data-id="' . esc_attr( $this->field['id'] ) . '"/>';
+                echo '</div>';
+            }
 
-			/* Letter Spacing */
-			if ( true === $this->field['letter-spacing'] ) {
-				$the_unit = '' !== $this->field['letter-spacing-unit'] ? $this->field['letter-spacing-unit'] : $unit;
+            /* Letter Spacing */
+            if ( true === $this->field['letter-spacing'] ) {
+                $the_unit = '' !== $this->field['letter-spacing-unit'] ? $this->field['letter-spacing-unit'] : $unit;
 
-				echo '<div class="input_wrapper letter-spacing redux-container-typography">';
-				echo '<label for="' . esc_attr( $this->field['id'] ) . '-letter">' . esc_html__( 'Letter Spacing', 'redux-framework' ) . '</label>';
-				echo '<div class="input-append">';
-				echo '<input
+                echo '<div class="input_wrapper letter-spacing redux-container-typography">';
+                echo '<label for="' . esc_attr( $this->field['id'] ) . '-letter">' . esc_html__( 'Letter Spacing', 'redux-framework' ) . '</label>';
+                echo '<div class="input-append">';
+                echo '<input
 						type="text"
 						class="span2 redux-typography redux-typography-letter mini typography-input ' . esc_attr( $this->field['class'] ) . '"
 						title="' . esc_html__( 'Letter Spacing', 'redux-framework' ) . '"
@@ -651,28 +651,28 @@ 
 						value="' . esc_attr( str_replace( $the_unit, '', $this->value['letter-spacing'] ) ) . '"
 						data-value="' . esc_attr( str_replace( $the_unit, '', $this->value['letter-spacing'] ) ) . '">';
 
-				echo '<span class="add-on">' . esc_html( $the_unit ) . '</span>';
-				echo '</div>';
-				echo '<input
+                echo '<span class="add-on">' . esc_html( $the_unit ) . '</span>';
+                echo '</div>';
+                echo '<input
 						type="hidden"
 						class="typography-letter-spacing"
 						name="' . esc_attr( $this->field['name'] . $this->field['name_suffix'] ) . '[letter-spacing]"
 						value="' . esc_attr( $this->value['letter-spacing'] ) . '"
 						data-id="' . esc_attr( $this->field['id'] ) . '"  />';
 
-				echo '</div>';
-			}
+                echo '</div>';
+            }
 
-			echo '<div class="clearfix"></div>';
+            echo '<div class="clearfix"></div>';
 
-			// Margins.
-			if ( $this->field['margin-top'] ) {
-				$the_unit = '' !== $this->field['margin-top-unit'] ? $this->field['margin-top-unit'] : $unit;
+            // Margins.
+            if ( $this->field['margin-top'] ) {
+                $the_unit = '' !== $this->field['margin-top-unit'] ? $this->field['margin-top-unit'] : $unit;
 
-				echo '<div class="input_wrapper margin-top redux-container-typography">';
-				echo '<label for="' . esc_attr( $this->field['id'] ) . '-margin-top">' . esc_html__( 'Margin Top', 'redux-framework' ) . '</label>';
-				echo '<div class="input-append">';
-				echo '<input
+                echo '<div class="input_wrapper margin-top redux-container-typography">';
+                echo '<label for="' . esc_attr( $this->field['id'] ) . '-margin-top">' . esc_html__( 'Margin Top', 'redux-framework' ) . '</label>';
+                echo '<div class="input-append">';
+                echo '<input
 						type="text"
 						class="span2 redux-typography redux-typography-margin-top mini typography-input ' . esc_attr( $this->field['class'] ) . '"
 						title="' . esc_html__( 'Margin Top', 'redux-framework' ) . '"
@@ -681,25 +681,25 @@ 
 						data-unit="' . esc_attr( $the_unit ) . '"
 						value="' . esc_attr( str_replace( $the_unit, '', $this->value['margin-top'] ) ) . '"
 						data-value="' . esc_attr( str_replace( $the_unit, '', $this->value['margin-top'] ) ) . '">';
-				echo '<span class="add-on">' . esc_html( $the_unit ) . '</span>';
-				echo '</div>';
-				echo '<input
+                echo '<span class="add-on">' . esc_html( $the_unit ) . '</span>';
+                echo '</div>';
+                echo '<input
 						type="hidden"
 						class="typography-margin-top"
 						name="' . esc_attr( $this->field['name'] . $this->field['name_suffix'] ) . '[margin-top]"
 						value="' . esc_attr( $this->value['margin-top'] ) . '"
 						data-id="' . esc_attr( $this->field['id'] ) . '"  />';
-				echo '</div>';
-			}
+                echo '</div>';
+            }
 
-			/* Bottom Margin */
-			if ( $this->field['margin-bottom'] ) {
-				$the_unit = '' !== $this->field['margin-bottom-unit'] ? $this->field['margin-bottom-unit'] : $unit;
+            /* Bottom Margin */
+            if ( $this->field['margin-bottom'] ) {
+                $the_unit = '' !== $this->field['margin-bottom-unit'] ? $this->field['margin-bottom-unit'] : $unit;
 
-				echo '<div class="input_wrapper margin-bottom redux-container-typography">';
-				echo '<label for="' . esc_attr( $this->field['id'] ) . '-margin-bottom">' . esc_html__( 'Margin Bottom', 'redux-framework' ) . '</label>';
-				echo '<div class="input-append">';
-				echo '<input
+                echo '<div class="input_wrapper margin-bottom redux-container-typography">';
+                echo '<label for="' . esc_attr( $this->field['id'] ) . '-margin-bottom">' . esc_html__( 'Margin Bottom', 'redux-framework' ) . '</label>';
+                echo '<div class="input-append">';
+                echo '<input
 						type="text"
 						class="span2 redux-typography redux-typography-margin-bottom mini typography-input ' . esc_attr( $this->field['class'] ) . '"
 						title="' . esc_html__( 'Margin Bottom', 'redux-framework' ) . '"
@@ -708,106 +708,106 @@ 
 						data-unit="' . esc_attr( $the_unit ) . '"
 						value="' . esc_attr( str_replace( $the_unit, '', $this->value['margin-bottom'] ) ) . '"
 						data-value="' . esc_attr( str_replace( $the_unit, '', $this->value['margin-bottom'] ) ) . '">';
-				echo '<span class="add-on">' . esc_html( $the_unit ) . '</span>';
-				echo '</div>';
-				echo '<input type="hidden" class="typography-margin-bottom" name="' . esc_attr( $this->field['name'] . $this->field['name_suffix'] ) . '[margin-bottom]" value="' . esc_attr( $this->value['margin-bottom'] ) . '" data-id="' . esc_attr( $this->field['id'] ) . '"  />';
-				echo '</div>';
-			}
-
-			if ( $this->field['margin-top'] || $this->field['margin-bottom'] ) {
-				echo '<div class="clearfix"></div>';
-			}
-
-			/* Font Color */
-			if ( true === $this->field['color'] ) {
-				$default = '';
-
-				if ( empty( $this->field['default']['color'] ) && ! empty( $this->field['color'] ) ) {
-					$default = $this->value['color'];
-				} elseif ( ! empty( $this->field['default']['color'] ) ) {
-					$default = $this->field['default']['color'];
-				}
-
-				echo '<div class="picker-wrapper">';
-				echo '<label for="' . esc_attr( $this->field['id'] ) . '-color">' . esc_html__( 'Font Color', 'redux-framework' ) . '</label>';
-				echo '<div id="' . esc_attr( $this->field['id'] ) . '_color_picker" class="colorSelector typography-color">';
-				echo '<div style="background-color: ' . esc_attr( $this->value['color'] ) . '"></div>';
-				echo '</div>';
-				echo '<input ';
-				echo 'data-default-color="' . esc_attr( $default ) . '"';
-				echo 'class="color-picker redux-color redux-typography-color ' . esc_attr( $this->field['class'] ) . '"';
-				echo 'original-title="' . esc_html__( 'Font color', 'redux-framework' ) . '"';
-				echo 'id="' . esc_attr( $this->field['id'] ) . '-color"';
-				echo 'name="' . esc_attr( $this->field['name'] . $this->field['name_suffix'] ) . '[color]"';
-				echo 'type="text"';
-				echo 'value="' . esc_attr( $this->value['color'] ) . '"';
-				echo 'data-id="' . esc_attr( $this->field['id'] ) . '"';
-
-				$data = array(
-					'field' => $this->field,
-					'index' => 'color',
-				);
-
-				echo Redux_Functions_Ex::output_alpha_data( $data ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
-
-				echo '>';
-				echo '</div>';
-			}
-
-			echo '<div class="clearfix"></div>';
-
-			/* Font Preview */
-			if ( ! isset( $this->field['preview'] ) || false !== $this->field['preview'] ) {
-				$g_text = $this->field['preview']['text'] ?? '1 2 3 4 5 6 7 8 9 0 A B C D E F G H I J K L M N O P Q R S T U V W X Y Z a b c d e f g h i j k l m n o p q r s t u v w x y z';
-
-				$style = '';
-				if ( isset( $this->field['preview']['always_display'] ) ) {
-					if ( true === filter_var( $this->field['preview']['always_display'], FILTER_VALIDATE_BOOLEAN ) ) {
-						if ( true === (bool) $is_google_font ) {
-							$this->typography_preview[ $font_family[0] ] = array(
-								'font-style' => array( $this->value['font-weight'] . $this->value['font-style'] ),
-								'subset'     => array( $this->value['subsets'] ),
-							);
-
-							wp_deregister_style( 'redux-typography-preview' );
-							wp_dequeue_style( 'redux-typography-preview' );
-
-							wp_enqueue_style( 'redux-typography-preview', $this->make_google_web_font_link( $this->typography_preview ), array(), $this->timestamp );
-						}
-
-						$style = 'display: block; font-family: ' . esc_attr( $this->value['font-family'] ) . '; font-weight: ' . esc_attr( $this->value['font-weight'] ) . ';';
-					}
-				}
-
-				if ( isset( $this->field['preview']['font-size'] ) ) {
-					$style .= 'font-size: ' . $this->field['preview']['font-size'] . ';';
-					$in_use = '1';
-				} else {
-					$in_use = '0';
-				}
-
-				// Filter to disable Google font updates.
-				if ( apply_filters( "redux/{$this->parent->args['opt_name']}/field/typography/google_font_update", true ) ) { // phpcs:ignored WordPress.NamingConventions.ValidHookName
-					if ( Redux_Helpers::google_fonts_update_needed() && ! get_option( 'auto_update_redux_google_fonts', false ) && $this->field['font-family'] && $this->field['google'] ) {
-						$nonce = wp_create_nonce( 'redux_update_google_fonts' );
-
-						echo '<div data-nonce="' . esc_attr( $nonce ) . '" class="redux-update-google-fonts update-message notice inline notice-warning notice-alt">';
-						echo '<p>' . esc_html__( 'Your Google Fonts are out of date. To update them, please click one of the following:', 'redux-framework' );
-						echo '&nbsp;<a href="#" class="update-google-fonts" data-action="automatic" aria-label="' . esc_attr__( 'Automated updates', 'redux-framework' ) . '">' . esc_html__( 'Automated updates', 'redux-framework' ) . '</a> ' . esc_html__( 'or', 'redux-framework' ) . ' <a href="#" class="update-google-fonts" data-action="manual" aria-label="' . esc_attr__( 'one-time update', 'redux-framework' ) . '">' . esc_html__( 'one-time update', 'redux-framework' ) . '</a>.';
-						echo '</p>';
-						echo '</div>';
-					}
-				}
-
-				echo '<p data-preview-size="' . esc_attr( $in_use ) . '" class="clear ' . esc_attr( $this->field['id'] ) . '_previewer typography-preview" style="' . esc_attr( $style ) . '">' . esc_html( $g_text ) . '</p>';
-
-				if ( $this->field['text-shadow'] ) {
-
-					/* Shadow Colour */
-					echo '<div class="picker-wrapper">';
-					echo '<label for="' . esc_attr( $this->field['id'] ) . '-shadow-color">' . esc_html__( 'Shadow Color', 'redux-framework' ) . '</label>';
-					echo '<div id="' . esc_attr( $this->field['id'] ) . '_color_picker" class="colorSelector typography-shadow-color"><div style="background-color: ' . esc_attr( $this->value['color'] ) . '"></div></div>';
-					echo '<input
+                echo '<span class="add-on">' . esc_html( $the_unit ) . '</span>';
+                echo '</div>';
+                echo '<input type="hidden" class="typography-margin-bottom" name="' . esc_attr( $this->field['name'] . $this->field['name_suffix'] ) . '[margin-bottom]" value="' . esc_attr( $this->value['margin-bottom'] ) . '" data-id="' . esc_attr( $this->field['id'] ) . '"  />';
+                echo '</div>';
+            }
+
+            if ( $this->field['margin-top'] || $this->field['margin-bottom'] ) {
+                echo '<div class="clearfix"></div>';
+            }
+
+            /* Font Color */
+            if ( true === $this->field['color'] ) {
+                $default = '';
+
+                if ( empty( $this->field['default']['color'] ) && ! empty( $this->field['color'] ) ) {
+                    $default = $this->value['color'];
+                } elseif ( ! empty( $this->field['default']['color'] ) ) {
+                    $default = $this->field['default']['color'];
+                }
+
+                echo '<div class="picker-wrapper">';
+                echo '<label for="' . esc_attr( $this->field['id'] ) . '-color">' . esc_html__( 'Font Color', 'redux-framework' ) . '</label>';
+                echo '<div id="' . esc_attr( $this->field['id'] ) . '_color_picker" class="colorSelector typography-color">';
+                echo '<div style="background-color: ' . esc_attr( $this->value['color'] ) . '"></div>';
+                echo '</div>';
+                echo '<input ';
+                echo 'data-default-color="' . esc_attr( $default ) . '"';
+                echo 'class="color-picker redux-color redux-typography-color ' . esc_attr( $this->field['class'] ) . '"';
+                echo 'original-title="' . esc_html__( 'Font color', 'redux-framework' ) . '"';
+                echo 'id="' . esc_attr( $this->field['id'] ) . '-color"';
+                echo 'name="' . esc_attr( $this->field['name'] . $this->field['name_suffix'] ) . '[color]"';
+                echo 'type="text"';
+                echo 'value="' . esc_attr( $this->value['color'] ) . '"';
+                echo 'data-id="' . esc_attr( $this->field['id'] ) . '"';
+
+                $data = array(
+                    'field' => $this->field,
+                    'index' => 'color',
+                );
+
+                echo Redux_Functions_Ex::output_alpha_data( $data ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
+
+                echo '>';
+                echo '</div>';
+            }
+
+            echo '<div class="clearfix"></div>';
+
+            /* Font Preview */
+            if ( ! isset( $this->field['preview'] ) || false !== $this->field['preview'] ) {
+                $g_text = $this->field['preview']['text'] ?? '1 2 3 4 5 6 7 8 9 0 A B C D E F G H I J K L M N O P Q R S T U V W X Y Z a b c d e f g h i j k l m n o p q r s t u v w x y z';
+
+                $style = '';
+                if ( isset( $this->field['preview']['always_display'] ) ) {
+                    if ( true === filter_var( $this->field['preview']['always_display'], FILTER_VALIDATE_BOOLEAN ) ) {
+                        if ( true === (bool) $is_google_font ) {
+                            $this->typography_preview[ $font_family[0] ] = array(
+                                'font-style' => array( $this->value['font-weight'] . $this->value['font-style'] ),
+                                'subset'     => array( $this->value['subsets'] ),
+                            );
+
+                            wp_deregister_style( 'redux-typography-preview' );
+                            wp_dequeue_style( 'redux-typography-preview' );
+
+                            wp_enqueue_style( 'redux-typography-preview', $this->make_google_web_font_link( $this->typography_preview ), array(), $this->timestamp );
+                        }
+
+                        $style = 'display: block; font-family: ' . esc_attr( $this->value['font-family'] ) . '; font-weight: ' . esc_attr( $this->value['font-weight'] ) . ';';
+                    }
+                }
+
+                if ( isset( $this->field['preview']['font-size'] ) ) {
+                    $style .= 'font-size: ' . $this->field['preview']['font-size'] . ';';
+                    $in_use = '1';
+                } else {
+                    $in_use = '0';
+                }
+
+                // Filter to disable Google font updates.
+                if ( apply_filters( "redux/{$this->parent->args['opt_name']}/field/typography/google_font_update", true ) ) { // phpcs:ignored WordPress.NamingConventions.ValidHookName
+                    if ( Redux_Helpers::google_fonts_update_needed() && ! get_option( 'auto_update_redux_google_fonts', false ) && $this->field['font-family'] && $this->field['google'] ) {
+                        $nonce = wp_create_nonce( 'redux_update_google_fonts' );
+
+                        echo '<div data-nonce="' . esc_attr( $nonce ) . '" class="redux-update-google-fonts update-message notice inline notice-warning notice-alt">';
+                        echo '<p>' . esc_html__( 'Your Google Fonts are out of date. To update them, please click one of the following:', 'redux-framework' );
+                        echo '&nbsp;<a href="#" class="update-google-fonts" data-action="automatic" aria-label="' . esc_attr__( 'Automated updates', 'redux-framework' ) . '">' . esc_html__( 'Automated updates', 'redux-framework' ) . '</a> ' . esc_html__( 'or', 'redux-framework' ) . ' <a href="#" class="update-google-fonts" data-action="manual" aria-label="' . esc_attr__( 'one-time update', 'redux-framework' ) . '">' . esc_html__( 'one-time update', 'redux-framework' ) . '</a>.';
+                        echo '</p>';
+                        echo '</div>';
+                    }
+                }
+
+                echo '<p data-preview-size="' . esc_attr( $in_use ) . '" class="clear ' . esc_attr( $this->field['id'] ) . '_previewer typography-preview" style="' . esc_attr( $style ) . '">' . esc_html( $g_text ) . '</p>';
+
+                if ( $this->field['text-shadow'] ) {
+
+                    /* Shadow Colour */
+                    echo '<div class="picker-wrapper">';
+                    echo '<label for="' . esc_attr( $this->field['id'] ) . '-shadow-color">' . esc_html__( 'Shadow Color', 'redux-framework' ) . '</label>';
+                    echo '<div id="' . esc_attr( $this->field['id'] ) . '_color_picker" class="colorSelector typography-shadow-color"><div style="background-color: ' . esc_attr( $this->value['color'] ) . '"></div></div>';
+                    echo '<input
 		                    data-default-color="' . esc_attr( $this->value['shadow-color'] ) . '"
 		                    class="color-picker redux-color redux-typography-shadow-color ' . esc_attr( $this->field['class'] ) . '"
 		                    original-title="' . esc_html__( 'Shadow color', 'redux-framework' ) . '"
@@ -818,12 +818,12 @@ 
 		                    data-alpha="' . esc_attr( $this->field['color_alpha']['shadow-color'] ) . '"
 		                    data-id="' . esc_attr( $this->field['id'] ) . '"
 		                  />';
-					echo '</div>';
+                    echo '</div>';
 
-					/* Shadow Horizontal Length */
-					echo '<div class="input_wrapper shadow-horizontal redux-container-typography" style="top:-60px;margin-left:20px;width:20%">';
-					echo '<div class="label">' . esc_html__( 'Horizontal', 'redux-framework' ) . ': <strong>' . esc_attr( $this->value['shadow-horizontal'] ) . 'px</strong></div>';
-					echo '<div
+                    /* Shadow Horizontal Length */
+                    echo '<div class="input_wrapper shadow-horizontal redux-container-typography" style="top:-60px;margin-left:20px;width:20%">';
+                    echo '<div class="label">' . esc_html__( 'Horizontal', 'redux-framework' ) . ': <strong>' . esc_attr( $this->value['shadow-horizontal'] ) . 'px</strong></div>';
+                    echo '<div
                             class="redux-typography-slider span2 redux-typography redux-typography-shadow-horizontal mini typography-input ' . esc_attr( $this->field['class'] ) . '"
                             id="' . esc_attr( $this->field['id'] ) . '"
                             data-id="' . esc_attr( $this->field['id'] ) . '-h"
@@ -834,13 +834,13 @@ 
                             data-label="' . esc_attr__( 'Horizontal', 'redux-framework' ) . '"
                             data-default = "' . esc_attr( $this->value['shadow-horizontal'] ) . '">
                         </div>';
-					echo '<input type="hidden" id="redux-slider-value-' . esc_attr( $this->field['id'] ) . '-h" class="typography-shadow-horizontal" name="' . esc_attr( $this->field['name'] . $this->field['name_suffix'] ) . '[shadow-horizontal]" value="' . esc_attr( $this->value['shadow-horizontal'] ) . '" data-id="' . esc_attr( $this->field['id'] ) . '"  />';
-					echo '</div>';
+                    echo '<input type="hidden" id="redux-slider-value-' . esc_attr( $this->field['id'] ) . '-h" class="typography-shadow-horizontal" name="' . esc_attr( $this->field['name'] . $this->field['name_suffix'] ) . '[shadow-horizontal]" value="' . esc_attr( $this->value['shadow-horizontal'] ) . '" data-id="' . esc_attr( $this->field['id'] ) . '"  />';
+                    echo '</div>';
 
-					/* Shadow Vertical Length */
-					echo '<div class="input_wrapper shadow-vertical redux-container-typography" style="top:-60px;margin-left:20px;width:20%">';
-					echo '<div>' . esc_html__( 'Vertical', 'redux-framework' ) . ': <strong>' . esc_attr( $this->value['shadow-vertical'] ) . 'px</strong></div>';
-					echo '<div
+                    /* Shadow Vertical Length */
+                    echo '<div class="input_wrapper shadow-vertical redux-container-typography" style="top:-60px;margin-left:20px;width:20%">';
+                    echo '<div>' . esc_html__( 'Vertical', 'redux-framework' ) . ': <strong>' . esc_attr( $this->value['shadow-vertical'] ) . 'px</strong></div>';
+                    echo '<div
                             class="redux-typography-slider span2 redux-typography redux-typography-shadow-vertical mini typography-input ' . esc_attr( $this->field['class'] ) . '"
                             id="' . esc_attr( $this->field['id'] ) . '"
                             data-id="' . esc_attr( $this->field['id'] ) . '-v"
@@ -851,13 +851,13 @@ 
                             data-label="' . esc_attr__( 'Vertical', 'redux-framework' ) . '"
                             data-default = "' . esc_attr( $this->value['shadow-vertical'] ) . '">
                         </div>';
-					echo '<input type="hidden" id="redux-slider-value-' . esc_attr( $this->field['id'] ) . '-v" class="typography-shadow-vertical" name="' . esc_attr( $this->field['name'] . $this->field['name_suffix'] ) . '[shadow-vertical]" value="' . esc_attr( $this->value['shadow-vertical'] ) . '" data-id="' . esc_attr( $this->field['id'] ) . '"  />';
-					echo '</div>';
+                    echo '<input type="hidden" id="redux-slider-value-' . esc_attr( $this->field['id'] ) . '-v" class="typography-shadow-vertical" name="' . esc_attr( $this->field['name'] . $this->field['name_suffix'] ) . '[shadow-vertical]" value="' . esc_attr( $this->value['shadow-vertical'] ) . '" data-id="' . esc_attr( $this->field['id'] ) . '"  />';
+                    echo '</div>';
 
-					/* Shadow Blur */
-					echo '<div class="input_wrapper shadow-blur redux-container-typography" style="top:-60px;margin-left:20px;width:20%">';
-					echo '<div>' . esc_html__( 'Blur', 'redux-framework' ) . ': <strong>' . esc_attr( $this->value['shadow-blur'] ) . 'px</strong></div>';
-					echo '<div
+                    /* Shadow Blur */
+                    echo '<div class="input_wrapper shadow-blur redux-container-typography" style="top:-60px;margin-left:20px;width:20%">';
+                    echo '<div>' . esc_html__( 'Blur', 'redux-framework' ) . ': <strong>' . esc_attr( $this->value['shadow-blur'] ) . 'px</strong></div>';
+                    echo '<div
                             class="redux-typography-slider span2 redux-typography redux-typography-shadow-blur mini typography-input ' . esc_attr( $this->field['class'] ) . '"
                             id="' . esc_attr( $this->field['id'] ) . '"
                             data-id="' . esc_attr( $this->field['id'] ) . '-b"
@@ -868,743 +868,743 @@ 
                             data-label="' . esc_attr__( 'Blur', 'redux-framework' ) . '"
                             data-default = "' . esc_attr( $this->value['shadow-blur'] ) . '">
                         </div>';
-					echo '<input type="hidden" id="redux-slider-value-' . esc_attr( $this->field['id'] ) . '-b" class="typography-shadow-blur" name="' . esc_attr( $this->field['name'] . $this->field['name_suffix'] ) . '[shadow-blur]" value="' . esc_attr( $this->value['shadow-blur'] ) . '" data-id="' . esc_attr( $this->field['id'] ) . '"  />';
-					echo '</div>';
-				}
-
-				echo '</div>'; // end typography container.
-			}
-		}
-
-		/**
-		 * Enqueue for every field instance.
-		 */
-		public function always_enqueue() {
-			$min = Redux_Functions::is_min();
-
-			if ( isset( $this->field['color_alpha'] ) && is_array( $this->field['color_alpha'] ) ) {
-				if ( $this->field['color_alpha']['color'] || $this->field['color_alpha']['shadow-color'] ) {
-					wp_enqueue_script( 'redux-wp-color-picker-alpha' );
-				}
-			}
-
-			if ( ! wp_style_is( 'redux-nouislider' ) && isset( $this->field['text-shadow'] ) && $this->field['text-shadow'] ) {
-				wp_enqueue_style(
-					'redux-nouislider',
-					Redux_Core::$url . "assets/css/vendor/nouislider$min.css",
-					array(),
-					'5.0.0'
-				);
-
-				wp_enqueue_script(
-					'redux-nouislider',
-					Redux_Core::$url . "assets/js/vendor/nouislider/redux.jquery.nouislider$min.js",
-					array( 'jquery' ),
-					'5.0.0',
-					true
-				);
-			}
-		}
-
-		/**
-		 * Enqueue Function.
-		 * If this field requires any scripts, or CSS define this function and register/enqueue the scripts/css
-		 *
-		 * @since ReduxFramework 1.0.0
-		 */
-		public function enqueue() {
-			$min = Redux_Functions::is_min();
-
-			if ( ! wp_style_is( 'select2-css' ) ) {
-				wp_enqueue_style( 'select2-css' );
-			}
-
-			if ( ! wp_style_is( 'wp-color-picker' ) ) {
-				wp_enqueue_style( 'wp-color-picker' );
-			}
-
-			wp_enqueue_script(
-				'redux-webfont',
-				'//' . 'ajax' . '.googleapis' . '.com/ajax/libs/webfont/1.6.26/webfont.js', // phpcs:ignore Generic.Strings.UnnecessaryStringConcat
-				array(),
-				'1.6.26',
-				true
-			);
-
-			$dep_array = array( 'jquery', 'wp-color-picker', 'select2-js', 'redux-js', 'redux-webfont' );
-
-			wp_enqueue_script(
-				'redux-field-typography',
-				Redux_Core::$url . "inc/fields/typography/redux-typography$min.js",
-				$dep_array,
-				$this->timestamp,
-				true
-			);
-
-			wp_localize_script(
-				'redux-field-typography',
-				'redux_typography_ajax',
-				array(
-					'ajaxurl'             => esc_url( admin_url( 'admin-ajax.php' ) ),
-					'update_google_fonts' => array(
-						'updating' => esc_html__( 'Downloading Google Fonts...', 'redux-framework' ),
-						// translators: Aria title, link title.
-						'error'    => sprintf( esc_html__( 'Update Failed|msg. %1$s', 'redux-framework' ), sprintf( '<a href="#" class="update-google-fonts" data-action="manual" aria-label="%s">%s</a>', esc_html__( 'Retry?', 'redux-framework' ), esc_html__( 'Retry?', 'redux-framework' ) ) ),
-						// translators: Javascript reload command, link title.
-						'success'  => sprintf( esc_html__( 'Updated! %1$s to start using your updated fonts.', 'redux-framework' ), sprintf( '<a href="	%1$s">%2$s</a>', 'javascript:location.reload();', esc_html__( 'Reload the page', 'redux-framework' ) ) ),
-					),
-				)
-			);
-
-			if ( $this->parent->args['dev_mode'] ) {
-				wp_enqueue_style( 'redux-color-picker' );
-
-				wp_enqueue_style(
-					'redux-field-typography',
-					Redux_Core::$url . 'inc/fields/typography/redux-typography.css',
-					array(),
-					$this->timestamp
-				);
-			}
-		}
-
-		/**
-		 * Make_google_web_font_link Function.
-		 * Creates the Google fonts link.
-		 *
-		 * @param array $fonts Array of google fonts.
-		 *
-		 * @return string
-		 *
-		 * @since ReduxFramework 3.0.0
-		 */
-		public function make_google_web_font_link( array $fonts ): string {
-			$link    = '';
-			$subsets = array();
-
-			foreach ( $fonts as $family => $font ) {
-				if ( ! empty( $link ) ) {
-					$link .= '|'; // Append a new font to the string.
-				}
-				$link .= $family;
-
-				if ( ! empty( $font['font-style'] ) || ! empty( $font['all-styles'] ) ) {
-					$link .= ':';
-					if ( ! empty( $font['all-styles'] ) ) {
-						$link .= implode( ',', $font['all-styles'] );
-					} elseif ( ! empty( $font['font-style'] ) ) {
-						$link .= implode( ',', $font['font-style'] );
-					}
-				}
-
-				if ( ! empty( $font['subset'] ) || ! empty( $font['all-subsets'] ) ) {
-					if ( ! empty( $font['all-subsets'] ) ) {
-						foreach ( $font['all-subsets'] as $subset ) {
-							if ( ! in_array( $subset, $subsets, true ) ) {
-								$subsets[] = $subset;
-							}
-						}
-					} elseif ( ! empty( $font['subset'] ) ) {
-						foreach ( $font['subset'] as $subset ) {
-							if ( ! in_array( $subset, $subsets, true ) ) {
-								$subsets[] = $subset;
-							}
-						}
-					}
-				}
-			}
-
-			if ( ! empty( $subsets ) ) {
-				$link .= '&subset=' . implode( ',', $subsets );
-			}
-
-			$display = $this->parent->args['font_display'] ?? 'swap';
-
-			$link .= '&display=' . $display;
-
-			// return 'https://fonts.bunny.net/css?family=' . $link;
-			return 'https://fonts.googleapis.com/css?family=' . $link;
-		}
-
-		/**
-		 * Make_google_web_font_string Function.
-		 * Creates the Google fonts link.
-		 *
-		 * @param array $fonts Array of Google fonts.
-		 *
-		 * @return string
-		 *
-		 * @since ReduxFramework 3.1.8
-		 */
-		public function make_google_web_font_string( array $fonts ): string {
-			$link    = '';
-			$subsets = array();
-
-			foreach ( $fonts as $family => $font ) {
-				if ( ! empty( $link ) ) {
-					$link .= "', '"; // Append a new font to the string.
-				}
-				$link .= $family;
-
-				if ( ! empty( $font['font-style'] ) || ! empty( $font['all-styles'] ) ) {
-					$link .= ':';
-					if ( ! empty( $font['all-styles'] ) ) {
-						$link .= implode( ',', $font['all-styles'] );
-					} elseif ( ! empty( $font['font-style'] ) ) {
-						$link .= implode( ',', $font['font-style'] );
-					}
-				}
-
-				if ( ! empty( $font['subset'] ) || ! empty( $font['all-subsets'] ) ) {
-					if ( ! empty( $font['all-subsets'] ) ) {
-						foreach ( $font['all-subsets'] as $subset ) {
-							if ( ! in_array( $subset, $subsets, true ) && ! is_numeric( $subset ) ) {
-								$subsets[] = $subset;
-							}
-						}
-					} elseif ( ! empty( $font['subset'] ) ) {
-						foreach ( $font['subset'] as $subset ) {
-							if ( ! in_array( $subset, $subsets, true ) && ! is_numeric( $subset ) ) {
-								$subsets[] = $subset;
-							}
-						}
-					}
-				}
-			}
-
-			if ( ! empty( $subsets ) ) {
-				$link .= '&subset=' . implode( ',', $subsets );
-			}
-
-			return "'" . $link . "'";
-		}
-
-		/**
-		 * Compiles field CSS for output.
-		 *
-		 * @param array $data Array of data to process.
-		 *
-		 * @return string
-		 */
-		public function css_style( $data ): string {
-			$style = '';
-
-			$font = $data;
-
-			// Shim out old arg to new.
-			if ( isset( $this->field['all_styles'] ) && ! empty( $this->field['all_styles'] ) ) {
-				$this->field['all-styles'] = $this->field['all_styles'];
-				unset( $this->field['all_styles'] );
-			}
-
-			// Check for font-backup.  If it's set, stick it on a variable for
-			// later use.
-			if ( ! empty( $font['font-family'] ) && ! empty( $font['font-backup'] ) ) {
-				$font['font-family'] = str_replace( ', ' . $font['font-backup'], '', $font['font-family'] );
-				$font_backup         = ',' . $font['font-backup'];
-			}
-
-			$font_value_set = false;
-
-			if ( ! empty( $font ) ) {
-				foreach ( $font as $key => $value ) {
-					if ( ! empty( $value ) && in_array( $key, array( 'font-family', 'font-weight' ), true ) ) {
-						$font_value_set = true;
-					}
-				}
-			}
-
-			if ( ! empty( $font ) ) {
-				foreach ( $font as $key => $value ) {
-					if ( 'font-options' === $key ) {
-						continue;
-					}
-
-					// Check for font-family key.
-					if ( 'font-family' === $key ) {
-
-						// Enclose font family in quotes if spaces are in the
-						// name.  This is necessary because if there are numerics
-						// in the font name, they will not render properly.
-						// Google should know better.
-						if ( strpos( $value, ' ' ) && ! strpos( $value, ',' ) ) {
-							$value = '"' . $value . '"';
-						}
-
-						// Ensure fontBackup isn't empty. We already option
-						// checked this earlier.  No need to do it again.
-						if ( ! empty( $font_backup ) ) {
-
-							// Apply the backup font to the font-family element
-							// via the saved variable.  We do this here, so it
-							// doesn't get appended to the Google stuff below.
-							$value .= $font_backup;
-						}
-					}
-
-					if ( empty( $value ) && in_array(
-						$key,
-						array(
-							'font-weight',
-							'font-style',
-						),
-						true
-					) && true === $font_value_set ) {
-						$value = 'normal';
-					}
-
-					if ( 'font-weight' === $key && false === $this->field['font-weight'] ) {
-						continue;
-					}
-
-					if ( 'font-style' === $key && false === $this->field['font-style'] ) {
-						continue;
-					}
-
-					if ( 'google' === $key || 'subsets' === $key || 'font-backup' === $key || empty( $value ) ) {
-						continue;
-					}
-
-					if ( isset( $data['key'] ) ) {
-						return $data;
-					}
-
-					$continue = false;
-
-					if ( 'shadow-horizontal' === $key || 'shadow-vertical' === $key || 'shadow-blur' === $key ) {
-						$continue = true;
-					}
-
-					if ( 'shadow-color' === $key ) {
-						if ( $this->field['text-shadow'] ) {
-							$key   = 'text-shadow';
-							$value = $data['shadow-horizontal'] . 'px ' . $data['shadow-vertical'] . 'px ' . $data['shadow-blur'] . 'px ' . $data['shadow-color'];
-						} else {
-							$continue = true;
-						}
-					}
-
-					if ( $continue ) {
-						continue;
-					}
-
-					$style .= $key . ':' . $value . ';';
-				}
-			}
-
-			return $style;
-		}
-
-		/**
-		 * CSS Output to send to the page.
-		 *
-		 * @param string|null|array $style CSS styles.
-		 */
-		public function output( $style = '' ) {
-			$font = $this->value;
-
-			if ( '' !== $style ) {
-				if ( ! empty( $this->field['output'] ) && ! is_array( $this->field['output'] ) ) {
-					$this->field['output'] = array( $this->field['output'] );
-				}
-
-				if ( ! empty( $this->field['output'] ) && is_array( $this->field['output'] ) ) {
-					$keys                     = implode( ',', $this->field['output'] );
-					$this->parent->outputCSS .= $keys . '{' . $style . '}';
-				}
-
-				if ( ! empty( $this->field['compiler'] ) && ! is_array( $this->field['compiler'] ) ) {
-					$this->field['compiler'] = array( $this->field['compiler'] );
-				}
-
-				if ( ! empty( $this->field['compiler'] ) && is_array( $this->field['compiler'] ) ) {
-					$keys                       = implode( ',', $this->field['compiler'] );
-					$this->parent->compilerCSS .= $keys . '{' . $style . '}';
-				}
-			}
-
-			$this->set_google_fonts( (array) $font );
-		}
-
-		/**
-		 * Set global Google font data for global pointer.
-		 *
-		 * @param array $font Array of font data.
-		 */
-		private function set_google_fonts( array $font ) {
-			// Google only stuff!
-			if ( ! empty( $font['font-family'] ) && ! empty( $this->field['google'] ) && filter_var( $this->field['google'], FILTER_VALIDATE_BOOLEAN ) ) {
-
-				// Added standard font matching check to avoid output to Google fonts call - kp
-				// If no custom font array was supplied, then load it with default
-				// standard fonts.
-				if ( empty( $this->field['fonts'] ) ) {
-					$this->field['fonts'] = $this->std_fonts;
-				}
-
-				// Ensure the fonts array is NOT empty.
-				if ( ! empty( $this->field['fonts'] ) ) {
-
-					// Make the font keys in the array lowercase, for case-insensitive matching.
-					$lc_fonts = array_change_key_case( $this->field['fonts'] );
-
-					// Rebuild font array with all keys stripped of spaces.
-					$arr = array();
-					foreach ( $lc_fonts as $key => $value ) {
-						$key         = str_replace( ', ', ',', $key );
-						$arr[ $key ] = $value;
-					}
-
-					if ( is_array( $this->field['custom_fonts'] ) ) {
-						$lc_fonts = array_change_key_case( $this->field['custom_fonts'] );
-
-						foreach ( $lc_fonts as $font_arr ) {
-							foreach ( $font_arr as $key => $value ) {
-								$arr[ Redux_Core::strtolower( $key ) ] = $key;
-							}
-						}
-					}
-
-					$lc_fonts = $arr;
-
-					unset( $arr );
-
-					// lowercase chosen font for matching purposes.
-					$lc_font = Redux_Core::strtolower( $font['font-family'] );
-
-					// Remove spaces after commas in chosen font for matching purposes.
-					$lc_font = str_replace( ', ', ',', $lc_font );
-
-					// If the lower cased passed font-family is NOT found in the standard font array
-					// Then it's a Google font, so process it for output.
-					if ( ! array_key_exists( $lc_font, $lc_fonts ) ) {
-						$family = $font['font-family'];
-
-						// TODO: This method doesn't respect spaces after commas, hence the reason
-						// Strip out spaces in font names and replace with with plus signs
-						// for the std_font array keys having no spaces after commas.  This could be
-						// fixed with RegEx in the future.
-						$font['font-family'] = str_replace( ' ', '+', $font['font-family'] );
-
-						// Push data to parent typography variable.
-						if ( empty( Redux_Core::$typography[ $font['font-family'] ] ) ) {
-							Redux_Core::$typography[ $font['font-family'] ] = array();
-						}
-
-						if ( isset( $this->field['all-styles'] ) || isset( $this->field['all-subsets'] ) ) {
-							if ( empty( $font['font-options'] ) ) {
-								$this->get_google_array();
-
-								if ( isset( Redux_Core::$google_array ) && ! empty( Redux_Core::$google_array ) && isset( Redux_Core::$google_array[ $family ] ) ) {
-									$font['font-options'] = Redux_Core::$google_array[ $family ];
-								}
-							} else {
-								$font['font-options'] = json_decode( $font['font-options'], true );
-							}
-						}
-
-						if ( isset( $font['font-options'] ) && ! empty( $font['font-options'] ) && isset( $this->field['all-styles'] ) && filter_var( $this->field['all-styles'], FILTER_VALIDATE_BOOLEAN ) ) {
-							if ( ! empty( $font['font-options']['variants'] ) ) {
-								if ( ! isset( Redux_Core::$typography[ $font['font-family'] ]['all-styles'] ) || empty( Redux_Core::$typography[ $font['font-family'] ]['all-styles'] ) ) {
-									Redux_Core::$typography[ $font['font-family'] ]['all-styles'] = array();
-									foreach ( $font['font-options']['variants'] as $variant ) {
-										Redux_Core::$typography[ $font['font-family'] ]['all-styles'][] = $variant['id'];
-									}
-								}
-							}
-						}
-
-						if ( isset( $font['font-options'] ) && ! empty( $font['font-options'] ) && isset( $this->field['all-subsets'] ) && $this->field['all-styles'] ) {
-							if ( ! empty( $font['font-options']['subsets'] ) ) {
-								if ( ! isset( Redux_Core::$typography[ $font['font-family'] ]['all-subsets'] ) || empty( Redux_Core::$typography[ $font['font-family'] ]['all-subsets'] ) ) {
-									Redux_Core::$typography[ $font['font-family'] ]['all-subsets'] = array();
-									foreach ( $font['font-options']['subsets'] as $variant ) {
-										Redux_Core::$typography[ $font['font-family'] ]['all-subsets'][] = $variant['id'];
-									}
-								}
-							}
-						}
-
-						$style = '';
-
-						if ( ! empty( $font['font-weight'] ) ) {
-							if ( empty( Redux_Core::$typography[ $font['font-family'] ]['font-weight'] ) || ! in_array( $font['font-weight'], Redux_Core::$typography[ $font['font-family'] ]['font-weight'], true ) ) {
-								$style = $font['font-weight'];
-							}
-
-							if ( ! empty( $font['font-style'] ) ) {
-								$style .= $font['font-style'];
-							}
-
-							if ( empty( Redux_Core::$typography[ $font['font-family'] ]['font-style'] ) || ! in_array( $style, Redux_Core::$typography[ $font['font-family'] ]['font-style'], true ) ) {
-								Redux_Core::$typography[ $font['font-family'] ]['font-style'][] = $style;
-							}
-						}
-
-						if ( ! empty( $font['subsets'] ) ) {
-							if ( empty( Redux_Core::$typography[ $font['font-family'] ]['subset'] ) || ! in_array( $font['subsets'], Redux_Core::$typography[ $font['font-family'] ]['subset'], true ) ) {
-								Redux_Core::$typography[ $font['font-family'] ]['subset'][] = $font['subsets'];
-							}
-						}
-					}
-				}
-			}
-		}
-
-		/**
-		 * Localize standard, custom and typekit fonts.
-		 */
-		private function localize_std_fonts() {
-			if ( false === $this->user_fonts ) {
-				if ( isset( Redux_Core::$fonts['std'] ) && ! empty( Redux_Core::$fonts['std'] ) ) {
-					return;
-				}
-
-				Redux_Core::$font_groups['std'] = array(
-					'text'     => esc_html__( 'Standard Fonts', 'redux-framework' ),
-					'children' => array(),
-				);
-
-				foreach ( $this->field['fonts'] as $font => $extra ) {
-					Redux_Core::$font_groups['std']['children'][] = array(
-						'id'          => $font,
-						'text'        => $font,
-						'data-google' => 'false',
-					);
-				}
-			}
-
-			if ( false !== $this->field['custom_fonts'] ) {
-				// phpcs:ignored WordPress.NamingConventions.ValidHookName
-				$this->field['custom_fonts'] = apply_filters( "redux/{$this->parent->args['opt_name']}/field/typography/custom_fonts", array() );
-
-				if ( ! empty( $this->field['custom_fonts'] ) ) {
-					foreach ( $this->field['custom_fonts'] as $group => $fonts ) {
-						Redux_Core::$font_groups['customfonts'] = array(
-							'text'     => $group,
-							'children' => array(),
-						);
-
-						foreach ( $fonts as $family => $v ) {
-							Redux_Core::$font_groups['customfonts']['children'][] = array(
-								'id'          => $family,
-								'text'        => $family,
-								'data-google' => 'false',
-							);
-						}
-					}
-				}
-			}
-
-			// Typekit.
-			// phpcs:ignored WordPress.NamingConventions.ValidHookName
-			$typekit_fonts = apply_filters( "redux/{$this->parent->args['opt_name']}/field/typography/typekit_fonts", array() );
-
-			if ( ! empty( $typekit_fonts ) ) {
-				foreach ( $typekit_fonts as $group => $fonts ) {
-					Redux_Core::$font_groups['typekitfonts'] = array(
-						'text'     => $group,
-						'children' => array(),
-					);
-
-					foreach ( $fonts as $family => $v ) {
-						Redux_Core::$font_groups['typekitfonts']['children'][] = array(
-							'text'        => $family,
-							'id'          => $family,
-							'data-google' => 'false',
-						);
-					}
-				}
-			}
-		}
-
-		/**
-		 *   Construct the Google array from the stored JSON/HTML
-		 */
-		private function get_google_array() {
-			if ( ( ( isset( Redux_Core::$fonts['google'] ) && ! empty( Redux_Core::$fonts['google'] ) ) ) || ( isset( Redux_Core::$fonts['google'] ) && false === Redux_Core::$fonts['google'] ) ) {
-				return;
-			}
-
-			$fonts = Redux_Helpers::google_fonts_array( get_option( 'auto_update_redux_google_fonts', false ) );
-			if ( empty( $fonts ) ) {
-				$google_font = __DIR__ . '/googlefonts.php';
-				$fonts       = include $google_font;
-			}
-
-			if ( true === $fonts ) {
-				Redux_Core::$fonts['google'] = false;
-
-				return;
-			}
-
-			if ( isset( $fonts ) && ! empty( $fonts ) && is_array( $fonts ) ) {
-				Redux_Core::$fonts['google'] = $fonts;
-				Redux_Core::$google_array    = $fonts;
-
-				// optgroup.
-				Redux_Core::$font_groups['google'] = array(
-					'text'     => esc_html__( 'Google Webfonts', 'redux-framework' ),
-					'children' => array(),
-				);
-
-				// options.
-				foreach ( Redux_Core::$fonts['google'] as $font => $extra ) {
-					Redux_Core::$font_groups['google']['children'][] = array(
-						'id'          => $font,
-						'text'        => $font,
-						'data-google' => 'true',
-					);
-				}
-			}
-		}
-
-		/**
-		 * Clean up the Google Webfonts subsets to be human-readable
-		 *
-		 * @param array $var Font subset array.
-		 *
-		 * @return array
-		 *
-		 * @since ReduxFramework 0.2.0
-		 */
-		private function get_subsets( array $var ): array {
-			$result = array();
-
-			foreach ( $var as $v ) {
-				if ( strpos( $v, '-ext' ) ) {
-					$name = ucfirst( str_replace( '-ext', ' Extended', $v ) );
-				} else {
-					$name = ucfirst( $v );
-				}
-
-				$result[] = array(
-					'id'   => $v,
-					'name' => $name,
-				);
-			}
-
-			return array_filter( $result );
-		}
-
-		/**
-		 * Clean up the Google Webfonts variants to be human-readable
-		 *
-		 * @param array $var Font variant array.
-		 *
-		 * @return array
-		 *
-		 * @since ReduxFramework 0.2.0
-		 */
-		private function get_variants( array $var ): array {
-			$result = array();
-			$italic = array();
-
-			foreach ( $var as $v ) {
-				$name = '';
-				if ( 1 === $v[0] ) {
-					$name = 'Ultra-Light 100';
-				} elseif ( 2 === $v[0] ) {
-					$name = 'Light 200';
-				} elseif ( 3 === $v[0] ) {
-					$name = 'Book 300';
-				} elseif ( 4 === $v[0] || 'r' === $v[0] || 'i' === $v[0] ) {
-					$name = 'Normal 400';
-				} elseif ( 5 === $v[0] ) {
-					$name = 'Medium 500';
-				} elseif ( 6 === $v[0] ) {
-					$name = 'Semi-Bold 600';
-				} elseif ( 7 === $v[0] ) {
-					$name = 'Bold 700';
-				} elseif ( 8 === $v[0] ) {
-					$name = 'Extra-Bold 800';
-				} elseif ( 9 === $v[0] ) {
-					$name = 'Ultra-Bold 900';
-				}
-
-				if ( 'regular' === $v ) {
-					$v = '400';
-				}
-
-				if ( strpos( $v, 'italic' ) || 'italic' === $v ) {
-					$name .= ' Italic';
-					$name  = trim( $name );
-					if ( 'italic' === $v ) {
-						$v = '400italic';
-					}
-					$italic[] = array(
-						'id'   => $v,
-						'name' => $name,
-					);
-				} else {
-					$result[] = array(
-						'id'   => $v,
-						'name' => $name,
-					);
-				}
-			}
-
-			foreach ( $italic as $item ) {
-				$result[] = $item;
-			}
-
-			return array_filter( $result );
-		}
-
-		/**
-		 * Update google font array via AJAX call.
-		 */
-		public function google_fonts_update_ajax() {
-			if ( ! current_user_can( $this->parent->args['page_permissions'] ) ) {
-				wp_die( esc_html__( 'You do not have permission to perform this action.', 'redux-framework' ), 403 );
-			}
-
-			if ( ! isset( $_POST['nonce'] ) || ( ! wp_verify_nonce( sanitize_key( wp_unslash( $_POST['nonce'] ) ), 'redux_update_google_fonts' ) ) ) {
-				die( 'Security check' );
-			}
-
-			if ( isset( $_POST['data'] ) && 'automatic' === $_POST['data'] ) {
-				update_option( 'auto_update_redux_google_fonts', true );
-			}
-
-			$fonts = Redux_Helpers::google_fonts_array( true );
-
-			if ( ! empty( $fonts ) && ! is_wp_error( $fonts ) ) {
-				echo wp_json_encode(
-					array(
-						'status' => 'success',
-						'fonts'  => $fonts,
-					)
-				);
-			} else {
-				$err_msg = '';
-
-				if ( is_wp_error( $fonts ) ) {
-					$err_msg = $fonts->get_error_code();
-				}
-
-				echo wp_json_encode(
-					array(
-						'status' => 'error',
-						'error'  => $err_msg,
-					)
-				);
-			}
-
-			die();
-		}
-
-		/**
-		 * Enable output_variables to be generated.
-		 *
-		 * @since       4.0.3
-		 * @return void
-		 */
-		public function output_variables() {
-			// No code needed, just defining the method is enough.
-		}
-	}
+                    echo '<input type="hidden" id="redux-slider-value-' . esc_attr( $this->field['id'] ) . '-b" class="typography-shadow-blur" name="' . esc_attr( $this->field['name'] . $this->field['name_suffix'] ) . '[shadow-blur]" value="' . esc_attr( $this->value['shadow-blur'] ) . '" data-id="' . esc_attr( $this->field['id'] ) . '"  />';
+                    echo '</div>';
+                }
+
+                echo '</div>'; // end typography container.
+            }
+        }
+
+        /**
+         * Enqueue for every field instance.
+         */
+        public function always_enqueue() {
+            $min = Redux_Functions::is_min();
+
+            if ( isset( $this->field['color_alpha'] ) && is_array( $this->field['color_alpha'] ) ) {
+                if ( $this->field['color_alpha']['color'] || $this->field['color_alpha']['shadow-color'] ) {
+                    wp_enqueue_script( 'redux-wp-color-picker-alpha' );
+                }
+            }
+
+            if ( ! wp_style_is( 'redux-nouislider' ) && isset( $this->field['text-shadow'] ) && $this->field['text-shadow'] ) {
+                wp_enqueue_style(
+                    'redux-nouislider',
+                    Redux_Core::$url . "assets/css/vendor/nouislider$min.css",
+                    array(),
+                    '5.0.0'
+                );
+
+                wp_enqueue_script(
+                    'redux-nouislider',
+                    Redux_Core::$url . "assets/js/vendor/nouislider/redux.jquery.nouislider$min.js",
+                    array( 'jquery' ),
+                    '5.0.0',
+                    true
+                );
+            }
+        }
+
+        /**
+         * Enqueue Function.
+         * If this field requires any scripts, or CSS define this function and register/enqueue the scripts/css
+         *
+         * @since ReduxFramework 1.0.0
+         */
+        public function enqueue() {
+            $min = Redux_Functions::is_min();
+
+            if ( ! wp_style_is( 'select2-css' ) ) {
+                wp_enqueue_style( 'select2-css' );
+            }
+
+            if ( ! wp_style_is( 'wp-color-picker' ) ) {
+                wp_enqueue_style( 'wp-color-picker' );
+            }
+
+            wp_enqueue_script(
+                'redux-webfont',
+                '//' . 'ajax' . '.googleapis' . '.com/ajax/libs/webfont/1.6.26/webfont.js', // phpcs:ignore Generic.Strings.UnnecessaryStringConcat
+                array(),
+                '1.6.26',
+                true
+            );
+
+            $dep_array = array( 'jquery', 'wp-color-picker', 'select2-js', 'redux-js', 'redux-webfont' );
+
+            wp_enqueue_script(
+                'redux-field-typography',
+                Redux_Core::$url . "inc/fields/typography/redux-typography$min.js",
+                $dep_array,
+                $this->timestamp,
+                true
+            );
+
+            wp_localize_script(
+                'redux-field-typography',
+                'redux_typography_ajax',
+                array(
+                    'ajaxurl'             => esc_url( admin_url( 'admin-ajax.php' ) ),
+                    'update_google_fonts' => array(
+                        'updating' => esc_html__( 'Downloading Google Fonts...', 'redux-framework' ),
+                        // translators: Aria title, link title.
+                        'error'    => sprintf( esc_html__( 'Update Failed|msg. %1$s', 'redux-framework' ), sprintf( '<a href="#" class="update-google-fonts" data-action="manual" aria-label="%s">%s</a>', esc_html__( 'Retry?', 'redux-framework' ), esc_html__( 'Retry?', 'redux-framework' ) ) ),
+                        // translators: Javascript reload command, link title.
+                        'success'  => sprintf( esc_html__( 'Updated! %1$s to start using your updated fonts.', 'redux-framework' ), sprintf( '<a href="	%1$s">%2$s</a>', 'javascript:location.reload();', esc_html__( 'Reload the page', 'redux-framework' ) ) ),
+                    ),
+                )
+            );
+
+            if ( $this->parent->args['dev_mode'] ) {
+                wp_enqueue_style( 'redux-color-picker' );
+
+                wp_enqueue_style(
+                    'redux-field-typography',
+                    Redux_Core::$url . 'inc/fields/typography/redux-typography.css',
+                    array(),
+                    $this->timestamp
+                );
+            }
+        }
+
+        /**
+         * Make_google_web_font_link Function.
+         * Creates the Google fonts link.
+         *
+         * @param array $fonts Array of google fonts.
+         *
+         * @return string
+         *
+         * @since ReduxFramework 3.0.0
+         */
+        public function make_google_web_font_link( array $fonts ): string {
+            $link    = '';
+            $subsets = array();
+
+            foreach ( $fonts as $family => $font ) {
+                if ( ! empty( $link ) ) {
+                    $link .= '|'; // Append a new font to the string.
+                }
+                $link .= $family;
+
+                if ( ! empty( $font['font-style'] ) || ! empty( $font['all-styles'] ) ) {
+                    $link .= ':';
+                    if ( ! empty( $font['all-styles'] ) ) {
+                        $link .= implode( ',', $font['all-styles'] );
+                    } elseif ( ! empty( $font['font-style'] ) ) {
+                        $link .= implode( ',', $font['font-style'] );
+                    }
+                }
+
+                if ( ! empty( $font['subset'] ) || ! empty( $font['all-subsets'] ) ) {
+                    if ( ! empty( $font['all-subsets'] ) ) {
+                        foreach ( $font['all-subsets'] as $subset ) {
+                            if ( ! in_array( $subset, $subsets, true ) ) {
+                                $subsets[] = $subset;
+                            }
+                        }
+                    } elseif ( ! empty( $font['subset'] ) ) {
+                        foreach ( $font['subset'] as $subset ) {
+                            if ( ! in_array( $subset, $subsets, true ) ) {
+                                $subsets[] = $subset;
+                            }
+                        }
+                    }
+                }
+            }
+
+            if ( ! empty( $subsets ) ) {
+                $link .= '&subset=' . implode( ',', $subsets );
+            }
+
+            $display = $this->parent->args['font_display'] ?? 'swap';
+
+            $link .= '&display=' . $display;
+
+            // return 'https://fonts.bunny.net/css?family=' . $link;
+            return 'https://fonts.googleapis.com/css?family=' . $link;
+        }
+
+        /**
+         * Make_google_web_font_string Function.
+         * Creates the Google fonts link.
+         *
+         * @param array $fonts Array of Google fonts.
+         *
+         * @return string
+         *
+         * @since ReduxFramework 3.1.8
+         */
+        public function make_google_web_font_string( array $fonts ): string {
+            $link    = '';
+            $subsets = array();
+
+            foreach ( $fonts as $family => $font ) {
+                if ( ! empty( $link ) ) {
+                    $link .= "', '"; // Append a new font to the string.
+                }
+                $link .= $family;
+
+                if ( ! empty( $font['font-style'] ) || ! empty( $font['all-styles'] ) ) {
+                    $link .= ':';
+                    if ( ! empty( $font['all-styles'] ) ) {
+                        $link .= implode( ',', $font['all-styles'] );
+                    } elseif ( ! empty( $font['font-style'] ) ) {
+                        $link .= implode( ',', $font['font-style'] );
+                    }
+                }
+
+                if ( ! empty( $font['subset'] ) || ! empty( $font['all-subsets'] ) ) {
+                    if ( ! empty( $font['all-subsets'] ) ) {
+                        foreach ( $font['all-subsets'] as $subset ) {
+                            if ( ! in_array( $subset, $subsets, true ) && ! is_numeric( $subset ) ) {
+                                $subsets[] = $subset;
+                            }
+                        }
+                    } elseif ( ! empty( $font['subset'] ) ) {
+                        foreach ( $font['subset'] as $subset ) {
+                            if ( ! in_array( $subset, $subsets, true ) && ! is_numeric( $subset ) ) {
+                                $subsets[] = $subset;
+                            }
+                        }
+                    }
+                }
+            }
+
+            if ( ! empty( $subsets ) ) {
+                $link .= '&subset=' . implode( ',', $subsets );
+            }
+
+            return "'" . $link . "'";
+        }
+
+        /**
+         * Compiles field CSS for output.
+         *
+         * @param array $data Array of data to process.
+         *
+         * @return string
+         */
+        public function css_style( $data ): string {
+            $style = '';
+
+            $font = $data;
+
+            // Shim out old arg to new.
+            if ( isset( $this->field['all_styles'] ) && ! empty( $this->field['all_styles'] ) ) {
+                $this->field['all-styles'] = $this->field['all_styles'];
+                unset( $this->field['all_styles'] );
+            }
+
+            // Check for font-backup.  If it's set, stick it on a variable for
+            // later use.
+            if ( ! empty( $font['font-family'] ) && ! empty( $font['font-backup'] ) ) {
+                $font['font-family'] = str_replace( ', ' . $font['font-backup'], '', $font['font-family'] );
+                $font_backup         = ',' . $font['font-backup'];
+            }
+
+            $font_value_set = false;
+
+            if ( ! empty( $font ) ) {
+                foreach ( $font as $key => $value ) {
+                    if ( ! empty( $value ) && in_array( $key, array( 'font-family', 'font-weight' ), true ) ) {
+                        $font_value_set = true;
+                    }
+                }
+            }
+
+            if ( ! empty( $font ) ) {
+                foreach ( $font as $key => $value ) {
+                    if ( 'font-options' === $key ) {
+                        continue;
+                    }
+
+                    // Check for font-family key.
+                    if ( 'font-family' === $key ) {
+
+                        // Enclose font family in quotes if spaces are in the
+                        // name.  This is necessary because if there are numerics
+                        // in the font name, they will not render properly.
+                        // Google should know better.
+                        if ( strpos( $value, ' ' ) && ! strpos( $value, ',' ) ) {
+                            $value = '"' . $value . '"';
+                        }
+
+                        // Ensure fontBackup isn't empty. We already option
+                        // checked this earlier.  No need to do it again.
+                        if ( ! empty( $font_backup ) ) {
+
+                            // Apply the backup font to the font-family element
+                            // via the saved variable.  We do this here, so it
+                            // doesn't get appended to the Google stuff below.
+                            $value .= $font_backup;
+                        }
+                    }
+
+                    if ( empty( $value ) && in_array(
+                        $key,
+                        array(
+                            'font-weight',
+                            'font-style',
+                        ),
+                        true
+                    ) && true === $font_value_set ) {
+                        $value = 'normal';
+                    }
+
+                    if ( 'font-weight' === $key && false === $this->field['font-weight'] ) {
+                        continue;
+                    }
+
+                    if ( 'font-style' === $key && false === $this->field['font-style'] ) {
+                        continue;
+                    }
+
+                    if ( 'google' === $key || 'subsets' === $key || 'font-backup' === $key || empty( $value ) ) {
+                        continue;
+                    }
+
+                    if ( isset( $data['key'] ) ) {
+                        return $data;
+                    }
+
+                    $continue = false;
+
+                    if ( 'shadow-horizontal' === $key || 'shadow-vertical' === $key || 'shadow-blur' === $key ) {
+                        $continue = true;
+                    }
+
+                    if ( 'shadow-color' === $key ) {
+                        if ( $this->field['text-shadow'] ) {
+                            $key   = 'text-shadow';
+                            $value = $data['shadow-horizontal'] . 'px ' . $data['shadow-vertical'] . 'px ' . $data['shadow-blur'] . 'px ' . $data['shadow-color'];
+                        } else {
+                            $continue = true;
+                        }
+                    }
+
+                    if ( $continue ) {
+                        continue;
+                    }
+
+                    $style .= $key . ':' . $value . ';';
+                }
+            }
+
+            return $style;
+        }
+
+        /**
+         * CSS Output to send to the page.
+         *
+         * @param string|null|array $style CSS styles.
+         */
+        public function output( $style = '' ) {
+            $font = $this->value;
+
+            if ( '' !== $style ) {
+                if ( ! empty( $this->field['output'] ) && ! is_array( $this->field['output'] ) ) {
+                    $this->field['output'] = array( $this->field['output'] );
+                }
+
+                if ( ! empty( $this->field['output'] ) && is_array( $this->field['output'] ) ) {
+                    $keys                     = implode( ',', $this->field['output'] );
+                    $this->parent->outputCSS .= $keys . '{' . $style . '}';
+                }
+
+                if ( ! empty( $this->field['compiler'] ) && ! is_array( $this->field['compiler'] ) ) {
+                    $this->field['compiler'] = array( $this->field['compiler'] );
+                }
+
+                if ( ! empty( $this->field['compiler'] ) && is_array( $this->field['compiler'] ) ) {
+                    $keys                       = implode( ',', $this->field['compiler'] );
+                    $this->parent->compilerCSS .= $keys . '{' . $style . '}';
+                }
+            }
+
+            $this->set_google_fonts( (array) $font );
+        }
+
+        /**
+         * Set global Google font data for global pointer.
+         *
+         * @param array $font Array of font data.
+         */
+        private function set_google_fonts( array $font ) {
+            // Google only stuff!
+            if ( ! empty( $font['font-family'] ) && ! empty( $this->field['google'] ) && filter_var( $this->field['google'], FILTER_VALIDATE_BOOLEAN ) ) {
+
+                // Added standard font matching check to avoid output to Google fonts call - kp
+                // If no custom font array was supplied, then load it with default
+                // standard fonts.
+                if ( empty( $this->field['fonts'] ) ) {
+                    $this->field['fonts'] = $this->std_fonts;
+                }
+
+                // Ensure the fonts array is NOT empty.
+                if ( ! empty( $this->field['fonts'] ) ) {
+
+                    // Make the font keys in the array lowercase, for case-insensitive matching.
+                    $lc_fonts = array_change_key_case( $this->field['fonts'] );
+
+                    // Rebuild font array with all keys stripped of spaces.
+                    $arr = array();
+                    foreach ( $lc_fonts as $key => $value ) {
+                        $key         = str_replace( ', ', ',', $key );
+                        $arr[ $key ] = $value;
+                    }
+
+                    if ( is_array( $this->field['custom_fonts'] ) ) {
+                        $lc_fonts = array_change_key_case( $this->field['custom_fonts'] );
+
+                        foreach ( $lc_fonts as $font_arr ) {
+                            foreach ( $font_arr as $key => $value ) {
+                                $arr[ Redux_Core::strtolower( $key ) ] = $key;
+                            }
+                        }
+                    }
+
+                    $lc_fonts = $arr;
+
+                    unset( $arr );
+
+                    // lowercase chosen font for matching purposes.
+                    $lc_font = Redux_Core::strtolower( $font['font-family'] );
+
+                    // Remove spaces after commas in chosen font for matching purposes.
+                    $lc_font = str_replace( ', ', ',', $lc_font );
+
+                    // If the lower cased passed font-family is NOT found in the standard font array
+                    // Then it's a Google font, so process it for output.
+                    if ( ! array_key_exists( $lc_font, $lc_fonts ) ) {
+                        $family = $font['font-family'];
+
+                        // TODO: This method doesn't respect spaces after commas, hence the reason
+                        // Strip out spaces in font names and replace with with plus signs
+                        // for the std_font array keys having no spaces after commas.  This could be
+                        // fixed with RegEx in the future.
+                        $font['font-family'] = str_replace( ' ', '+', $font['font-family'] );
+
+                        // Push data to parent typography variable.
+                        if ( empty( Redux_Core::$typography[ $font['font-family'] ] ) ) {
+                            Redux_Core::$typography[ $font['font-family'] ] = array();
+                        }
+
+                        if ( isset( $this->field['all-styles'] ) || isset( $this->field['all-subsets'] ) ) {
+                            if ( empty( $font['font-options'] ) ) {
+                                $this->get_google_array();
+
+                                if ( isset( Redux_Core::$google_array ) && ! empty( Redux_Core::$google_array ) && isset( Redux_Core::$google_array[ $family ] ) ) {
+                                    $font['font-options'] = Redux_Core::$google_array[ $family ];
+                                }
+                            } else {
+                                $font['font-options'] = json_decode( $font['font-options'], true );
+                            }
+                        }
+
+                        if ( isset( $font['font-options'] ) && ! empty( $font['font-options'] ) && isset( $this->field['all-styles'] ) && filter_var( $this->field['all-styles'], FILTER_VALIDATE_BOOLEAN ) ) {
+                            if ( ! empty( $font['font-options']['variants'] ) ) {
+                                if ( ! isset( Redux_Core::$typography[ $font['font-family'] ]['all-styles'] ) || empty( Redux_Core::$typography[ $font['font-family'] ]['all-styles'] ) ) {
+                                    Redux_Core::$typography[ $font['font-family'] ]['all-styles'] = array();
+                                    foreach ( $font['font-options']['variants'] as $variant ) {
+                                        Redux_Core::$typography[ $font['font-family'] ]['all-styles'][] = $variant['id'];
+                                    }
+                                }
+                            }
+                        }
+
+                        if ( isset( $font['font-options'] ) && ! empty( $font['font-options'] ) && isset( $this->field['all-subsets'] ) && $this->field['all-styles'] ) {
+                            if ( ! empty( $font['font-options']['subsets'] ) ) {
+                                if ( ! isset( Redux_Core::$typography[ $font['font-family'] ]['all-subsets'] ) || empty( Redux_Core::$typography[ $font['font-family'] ]['all-subsets'] ) ) {
+                                    Redux_Core::$typography[ $font['font-family'] ]['all-subsets'] = array();
+                                    foreach ( $font['font-options']['subsets'] as $variant ) {
+                                        Redux_Core::$typography[ $font['font-family'] ]['all-subsets'][] = $variant['id'];
+                                    }
+                                }
+                            }
+                        }
+
+                        $style = '';
+
+                        if ( ! empty( $font['font-weight'] ) ) {
+                            if ( empty( Redux_Core::$typography[ $font['font-family'] ]['font-weight'] ) || ! in_array( $font['font-weight'], Redux_Core::$typography[ $font['font-family'] ]['font-weight'], true ) ) {
+                                $style = $font['font-weight'];
+                            }
+
+                            if ( ! empty( $font['font-style'] ) ) {
+                                $style .= $font['font-style'];
+                            }
+
+                            if ( empty( Redux_Core::$typography[ $font['font-family'] ]['font-style'] ) || ! in_array( $style, Redux_Core::$typography[ $font['font-family'] ]['font-style'], true ) ) {
+                                Redux_Core::$typography[ $font['font-family'] ]['font-style'][] = $style;
+                            }
+                        }
+
+                        if ( ! empty( $font['subsets'] ) ) {
+                            if ( empty( Redux_Core::$typography[ $font['font-family'] ]['subset'] ) || ! in_array( $font['subsets'], Redux_Core::$typography[ $font['font-family'] ]['subset'], true ) ) {
+                                Redux_Core::$typography[ $font['font-family'] ]['subset'][] = $font['subsets'];
+                            }
+                        }
+                    }
+                }
+            }
+        }
+
+        /**
+         * Localize standard, custom and typekit fonts.
+         */
+        private function localize_std_fonts() {
+            if ( false === $this->user_fonts ) {
+                if ( isset( Redux_Core::$fonts['std'] ) && ! empty( Redux_Core::$fonts['std'] ) ) {
+                    return;
+                }
+
+                Redux_Core::$font_groups['std'] = array(
+                    'text'     => esc_html__( 'Standard Fonts', 'redux-framework' ),
+                    'children' => array(),
+                );
+
+                foreach ( $this->field['fonts'] as $font => $extra ) {
+                    Redux_Core::$font_groups['std']['children'][] = array(
+                        'id'          => $font,
+                        'text'        => $font,
+                        'data-google' => 'false',
+                    );
+                }
+            }
+
+            if ( false !== $this->field['custom_fonts'] ) {
+                // phpcs:ignored WordPress.NamingConventions.ValidHookName
+                $this->field['custom_fonts'] = apply_filters( "redux/{$this->parent->args['opt_name']}/field/typography/custom_fonts", array() );
+
+                if ( ! empty( $this->field['custom_fonts'] ) ) {
+                    foreach ( $this->field['custom_fonts'] as $group => $fonts ) {
+                        Redux_Core::$font_groups['customfonts'] = array(
+                            'text'     => $group,
+                            'children' => array(),
+                        );
+
+                        foreach ( $fonts as $family => $v ) {
+                            Redux_Core::$font_groups['customfonts']['children'][] = array(
+                                'id'          => $family,
+                                'text'        => $family,
+                                'data-google' => 'false',
+                            );
+                        }
+                    }
+                }
+            }
+
+            // Typekit.
+            // phpcs:ignored WordPress.NamingConventions.ValidHookName
+            $typekit_fonts = apply_filters( "redux/{$this->parent->args['opt_name']}/field/typography/typekit_fonts", array() );
+
+            if ( ! empty( $typekit_fonts ) ) {
+                foreach ( $typekit_fonts as $group => $fonts ) {
+                    Redux_Core::$font_groups['typekitfonts'] = array(
+                        'text'     => $group,
+                        'children' => array(),
+                    );
+
+                    foreach ( $fonts as $family => $v ) {
+                        Redux_Core::$font_groups['typekitfonts']['children'][] = array(
+                            'text'        => $family,
+                            'id'          => $family,
+                            'data-google' => 'false',
+                        );
+                    }
+                }
+            }
+        }
+
+        /**
+         *   Construct the Google array from the stored JSON/HTML
+         */
+        private function get_google_array() {
+            if ( ( ( isset( Redux_Core::$fonts['google'] ) && ! empty( Redux_Core::$fonts['google'] ) ) ) || ( isset( Redux_Core::$fonts['google'] ) && false === Redux_Core::$fonts['google'] ) ) {
+                return;
+            }
+
+            $fonts = Redux_Helpers::google_fonts_array( get_option( 'auto_update_redux_google_fonts', false ) );
+            if ( empty( $fonts ) ) {
+                $google_font = __DIR__ . '/googlefonts.php';
+                $fonts       = include $google_font;
+            }
+
+            if ( true === $fonts ) {
+                Redux_Core::$fonts['google'] = false;
+
+                return;
+            }
+
+            if ( isset( $fonts ) && ! empty( $fonts ) && is_array( $fonts ) ) {
+                Redux_Core::$fonts['google'] = $fonts;
+                Redux_Core::$google_array    = $fonts;
+
+                // optgroup.
+                Redux_Core::$font_groups['google'] = array(
+                    'text'     => esc_html__( 'Google Webfonts', 'redux-framework' ),
+                    'children' => array(),
+                );
+
+                // options.
+                foreach ( Redux_Core::$fonts['google'] as $font => $extra ) {
+                    Redux_Core::$font_groups['google']['children'][] = array(
+                        'id'          => $font,
+                        'text'        => $font,
+                        'data-google' => 'true',
+                    );
+                }
+            }
+        }
+
+        /**
+         * Clean up the Google Webfonts subsets to be human-readable
+         *
+         * @param array $var Font subset array.
+         *
+         * @return array
+         *
+         * @since ReduxFramework 0.2.0
+         */
+        private function get_subsets( array $var ): array {
+            $result = array();
+
+            foreach ( $var as $v ) {
+                if ( strpos( $v, '-ext' ) ) {
+                    $name = ucfirst( str_replace( '-ext', ' Extended', $v ) );
+                } else {
+                    $name = ucfirst( $v );
+                }
+
+                $result[] = array(
+                    'id'   => $v,
+                    'name' => $name,
+                );
+            }
+
+            return array_filter( $result );
+        }
+
+        /**
+         * Clean up the Google Webfonts variants to be human-readable
+         *
+         * @param array $var Font variant array.
+         *
+         * @return array
+         *
+         * @since ReduxFramework 0.2.0
+         */
+        private function get_variants( array $var ): array {
+            $result = array();
+            $italic = array();
+
+            foreach ( $var as $v ) {
+                $name = '';
+                if ( 1 === $v[0] ) {
+                    $name = 'Ultra-Light 100';
+                } elseif ( 2 === $v[0] ) {
+                    $name = 'Light 200';
+                } elseif ( 3 === $v[0] ) {
+                    $name = 'Book 300';
+                } elseif ( 4 === $v[0] || 'r' === $v[0] || 'i' === $v[0] ) {
+                    $name = 'Normal 400';
+                } elseif ( 5 === $v[0] ) {
+                    $name = 'Medium 500';
+                } elseif ( 6 === $v[0] ) {
+                    $name = 'Semi-Bold 600';
+                } elseif ( 7 === $v[0] ) {
+                    $name = 'Bold 700';
+                } elseif ( 8 === $v[0] ) {
+                    $name = 'Extra-Bold 800';
+                } elseif ( 9 === $v[0] ) {
+                    $name = 'Ultra-Bold 900';
+                }
+
+                if ( 'regular' === $v ) {
+                    $v = '400';
+                }
+
+                if ( strpos( $v, 'italic' ) || 'italic' === $v ) {
+                    $name .= ' Italic';
+                    $name  = trim( $name );
+                    if ( 'italic' === $v ) {
+                        $v = '400italic';
+                    }
+                    $italic[] = array(
+                        'id'   => $v,
+                        'name' => $name,
+                    );
+                } else {
+                    $result[] = array(
+                        'id'   => $v,
+                        'name' => $name,
+                    );
+                }
+            }
+
+            foreach ( $italic as $item ) {
+                $result[] = $item;
+            }
+
+            return array_filter( $result );
+        }
+
+        /**
+         * Update google font array via AJAX call.
+         */
+        public function google_fonts_update_ajax() {
+            if ( ! current_user_can( $this->parent->args['page_permissions'] ) ) {
+                wp_die( esc_html__( 'You do not have permission to perform this action.', 'redux-framework' ), 403 );
+            }
+
+            if ( ! isset( $_POST['nonce'] ) || ( ! wp_verify_nonce( sanitize_key( wp_unslash( $_POST['nonce'] ) ), 'redux_update_google_fonts' ) ) ) {
+                die( 'Security check' );
+            }
+
+            if ( isset( $_POST['data'] ) && 'automatic' === $_POST['data'] ) {
+                update_option( 'auto_update_redux_google_fonts', true );
+            }
+
+            $fonts = Redux_Helpers::google_fonts_array( true );
+
+            if ( ! empty( $fonts ) && ! is_wp_error( $fonts ) ) {
+                echo wp_json_encode(
+                    array(
+                        'status' => 'success',
+                        'fonts'  => $fonts,
+                    )
+                );
+            } else {
+                $err_msg = '';
+
+                if ( is_wp_error( $fonts ) ) {
+                    $err_msg = $fonts->get_error_code();
+                }
+
+                echo wp_json_encode(
+                    array(
+                        'status' => 'error',
+                        'error'  => $err_msg,
+                    )
+                );
+            }
+
+            die();
+        }
+
+        /**
+         * Enable output_variables to be generated.
+         *
+         * @since       4.0.3
+         * @return void
+         */
+        public function output_variables() {
+            // No code needed, just defining the method is enough.
+        }
+    }
 }
 if ( ! class_exists( 'ReduxFramework_Typography' ) ) {
-	class_alias( 'Redux_Typography', 'ReduxFramework_Typography' );
+    class_alias( 'Redux_Typography', 'ReduxFramework_Typography' );
 }

redux-core/inc/extensions/color_scheme/class-redux-extension-color-scheme.php

Indentation +764 added lines, -764 removed lines

@@ -16,775 +16,775 @@
 // Don't duplicate me!
 if ( ! class_exists( 'Redux_Extension_Color_Scheme' ) ) {
 
-	/**
-	 * Class Redux_Extension_Color_Scheme
-	 */
-	class Redux_Extension_Color_Scheme extends Redux_Extension_Abstract {
-
-		/**
-		 * Extension version.
-		 *
-		 * @var string
-		 */
-		public static $version = '4.5.10';
-
-		/**
-		 * Extension friendly name.
-		 *
-		 * @var string
-		 */
-		public string $extension_name = 'Color Schemes';
-
-		/**
-		 * Field ID.
-		 *
-		 * @var string
-		 */
-		public $field_id = '';
-
-		/**
-		 * Transparent output bit.
-		 *
-		 * @var bool
-		 */
-		public bool $output_transparent = false;
-
-		/**
-		 * Extension field name.
-		 *
-		 * @var string
-		 */
-		public string $field_name = '';
-
-		/**
-		 * Class Constructor. Defines the args for the extensions class
-		 *
-		 * @since       1.0.0
-		 * @access      public
-		 *
-		 * @param       object $redux Parent settings.
-		 *
-		 * @return      void
-		 */
-		public function __construct( $redux ) {
-			parent::__construct( $redux, __FILE__ );
+    /**
+     * Class Redux_Extension_Color_Scheme
+     */
+    class Redux_Extension_Color_Scheme extends Redux_Extension_Abstract {
+
+        /**
+         * Extension version.
+         *
+         * @var string
+         */
+        public static $version = '4.5.10';
+
+        /**
+         * Extension friendly name.
+         *
+         * @var string
+         */
+        public string $extension_name = 'Color Schemes';
+
+        /**
+         * Field ID.
+         *
+         * @var string
+         */
+        public $field_id = '';
+
+        /**
+         * Transparent output bit.
+         *
+         * @var bool
+         */
+        public bool $output_transparent = false;
+
+        /**
+         * Extension field name.
+         *
+         * @var string
+         */
+        public string $field_name = '';
+
+        /**
+         * Class Constructor. Defines the args for the extensions class
+         *
+         * @since       1.0.0
+         * @access      public
+         *
+         * @param       object $redux Parent settings.
+         *
+         * @return      void
+         */
+        public function __construct( $redux ) {
+            parent::__construct( $redux, __FILE__ );
 
-			$this->add_field( 'color_scheme' );
-			$this->field_name = 'color_scheme';
+            $this->add_field( 'color_scheme' );
+            $this->field_name = 'color_scheme';
 
-			add_filter( "redux/options/{$this->parent->args['opt_name']}/defaults", array( $this, 'set_defaults' ) );
+            add_filter( "redux/options/{$this->parent->args['opt_name']}/defaults", array( $this, 'set_defaults' ) );
 
-			// Ajax hooks.
-			add_action( 'wp_ajax_redux_color_schemes', array( $this, 'parse_ajax' ) );
-
-			// Reset hooks.
-			add_action( 'redux/validate/' . $this->parent->args['opt_name'] . '/defaults', array( $this, 'reset_defaults' ), 0, 3 );
-			add_action( 'redux/validate/' . $this->parent->args['opt_name'] . '/defaults_section', array( $this, 'reset_defaults_section' ), 0, 3 );
-
-			// Save filter.
-			add_action( 'redux/validate/' . $this->parent->args['opt_name'] . '/before_validation', array( $this, 'save_hook' ), 0, 3 );
-
-			// Register hook - to get field id and prep helper.
-			add_action( 'redux/options/' . $this->parent->args['opt_name'] . '/field/' . $this->field_name . '/register', array( $this, 'register_field' ) );
-
-			include_once $this->extension_dir . 'color_scheme/inc/class-redux-color-scheme-functions.php';
-			Redux_Color_Scheme_Functions::init( $redux );
-
-			$field = Redux_Color_Scheme_Functions::get_field( $redux );
-
-			if ( ! is_array( $field ) ) {
-				return;
-			}
-
-			$this->field_id = $field['id'];
-
-			// Prep storage.
-			$upload_dir = Redux_Color_Scheme_Functions::$upload_dir;
-
-			// Create uploads/redux_scheme_colors/ folder.
-			if ( ! is_dir( $upload_dir ) ) {
-				Redux_Core::$filesystem->execute( 'mkdir', $upload_dir );
-			}
-		}
+            // Ajax hooks.
+            add_action( 'wp_ajax_redux_color_schemes', array( $this, 'parse_ajax' ) );
+
+            // Reset hooks.
+            add_action( 'redux/validate/' . $this->parent->args['opt_name'] . '/defaults', array( $this, 'reset_defaults' ), 0, 3 );
+            add_action( 'redux/validate/' . $this->parent->args['opt_name'] . '/defaults_section', array( $this, 'reset_defaults_section' ), 0, 3 );
+
+            // Save filter.
+            add_action( 'redux/validate/' . $this->parent->args['opt_name'] . '/before_validation', array( $this, 'save_hook' ), 0, 3 );
+
+            // Register hook - to get field id and prep helper.
+            add_action( 'redux/options/' . $this->parent->args['opt_name'] . '/field/' . $this->field_name . '/register', array( $this, 'register_field' ) );
+
+            include_once $this->extension_dir . 'color_scheme/inc/class-redux-color-scheme-functions.php';
+            Redux_Color_Scheme_Functions::init( $redux );
+
+            $field = Redux_Color_Scheme_Functions::get_field( $redux );
+
+            if ( ! is_array( $field ) ) {
+                return;
+            }
+
+            $this->field_id = $field['id'];
+
+            // Prep storage.
+            $upload_dir = Redux_Color_Scheme_Functions::$upload_dir;
+
+            // Create uploads/redux_scheme_colors/ folder.
+            if ( ! is_dir( $upload_dir ) ) {
+                Redux_Core::$filesystem->execute( 'mkdir', $upload_dir );
+            }
+        }
 
-		/**
-		 * Set default values after reset.
-		 *
-		 * @param array $defaults Default values.
-		 *
-		 * @return array
-		 */
-		public function set_defaults( array $defaults = array() ): array {
-			if ( ! Redux_Helpers::is_field_in_use( $this->parent, 'color_scheme' ) ) {
-				return $defaults;
-			}
-
-			if ( empty( $this->field_id ) ) {
-				return $defaults;
-			}
-
-			$x            = get_option( $this->parent->args['opt_name'] );
-			$color_opts   = $x[ $this->field_id ] ?? array();
-			$wrong_format = false;
-
-			if ( ! isset( $color_opts['color_scheme_name'] ) ) {
-				$wrong_format = true;
-
-				$data = Redux_Color_Scheme_Functions::data_array_from_scheme( 'Default' );
-
-				if ( ! empty( $data ) && isset( $x[ $this->field_id ] ) ) {
-					$x[ $this->field_id ] = $data;
-
-					update_option( $this->parent->args['opt_name'], $x );
-				}
-			}
-
-			Redux_Color_Scheme_Functions::$parent = $this->parent;
-
-			$ot_val                   = Redux_Color_Scheme_Functions::get_output_transparent_val();
-			$this->output_transparent = $ot_val;
-
-			Redux_Color_Scheme_Functions::convert_to_db();
-
-			$scheme_key  = Redux_Color_Scheme_Functions::get_scheme_key();
-			$scheme_data = get_option( $scheme_key );
-
-			$scheme_data_exists = ! empty( $scheme_data );
-
-			$default_exists = in_array( 'default', array_map( 'strtolower', Redux_Color_Scheme_Functions::get_scheme_names() ), true );
-
-			if ( ! $scheme_data_exists || ! $default_exists || $wrong_format ) {
-				$data = $this->get_default_data();
-
-				// Add to (and/or create) JSON scheme file.
-				Redux_Color_Scheme_Functions::set_scheme_data( 'Default', $data );
-
-				// Set default scheme.
-				Redux_Color_Scheme_Functions::set_current_scheme_id( 'Default' );
-
-				$data = Redux_Color_Scheme_Functions::data_array_from_scheme( 'Default' );
-
-				$this->parent->options[ $this->field_id ] = $data;
-
-				$defaults[ $this->field_id ] = $data;
-			}
-
-			return $defaults;
-		}
-
-		/**
-		 * Field Register. Sets the whole smash up.
-		 *
-		 * @param       array $data Field data.
-		 *
-		 * @return      array
-		 * @since       1.0.0
-		 * @access      public
-		 */
-		public function register_field( array $data ): array {
-
-			// Include color_scheme helper.
-			include_once $this->extension_dir . 'color_scheme/inc/class-redux-color-scheme-functions.php';
-
-			if ( isset( $data['output_transparent'] ) ) {
-				$this->output_transparent = $data['output_transparent'];
-			}
+        /**
+         * Set default values after reset.
+         *
+         * @param array $defaults Default values.
+         *
+         * @return array
+         */
+        public function set_defaults( array $defaults = array() ): array {
+            if ( ! Redux_Helpers::is_field_in_use( $this->parent, 'color_scheme' ) ) {
+                return $defaults;
+            }
+
+            if ( empty( $this->field_id ) ) {
+                return $defaults;
+            }
+
+            $x            = get_option( $this->parent->args['opt_name'] );
+            $color_opts   = $x[ $this->field_id ] ?? array();
+            $wrong_format = false;
+
+            if ( ! isset( $color_opts['color_scheme_name'] ) ) {
+                $wrong_format = true;
+
+                $data = Redux_Color_Scheme_Functions::data_array_from_scheme( 'Default' );
+
+                if ( ! empty( $data ) && isset( $x[ $this->field_id ] ) ) {
+                    $x[ $this->field_id ] = $data;
+
+                    update_option( $this->parent->args['opt_name'], $x );
+                }
+            }
+
+            Redux_Color_Scheme_Functions::$parent = $this->parent;
+
+            $ot_val                   = Redux_Color_Scheme_Functions::get_output_transparent_val();
+            $this->output_transparent = $ot_val;
+
+            Redux_Color_Scheme_Functions::convert_to_db();
+
+            $scheme_key  = Redux_Color_Scheme_Functions::get_scheme_key();
+            $scheme_data = get_option( $scheme_key );
+
+            $scheme_data_exists = ! empty( $scheme_data );
+
+            $default_exists = in_array( 'default', array_map( 'strtolower', Redux_Color_Scheme_Functions::get_scheme_names() ), true );
+
+            if ( ! $scheme_data_exists || ! $default_exists || $wrong_format ) {
+                $data = $this->get_default_data();
+
+                // Add to (and/or create) JSON scheme file.
+                Redux_Color_Scheme_Functions::set_scheme_data( 'Default', $data );
+
+                // Set default scheme.
+                Redux_Color_Scheme_Functions::set_current_scheme_id( 'Default' );
+
+                $data = Redux_Color_Scheme_Functions::data_array_from_scheme( 'Default' );
+
+                $this->parent->options[ $this->field_id ] = $data;
+
+                $defaults[ $this->field_id ] = $data;
+            }
+
+            return $defaults;
+        }
+
+        /**
+         * Field Register. Sets the whole smash up.
+         *
+         * @param       array $data Field data.
+         *
+         * @return      array
+         * @since       1.0.0
+         * @access      public
+         */
+        public function register_field( array $data ): array {
+
+            // Include color_scheme helper.
+            include_once $this->extension_dir . 'color_scheme/inc/class-redux-color-scheme-functions.php';
+
+            if ( isset( $data['output_transparent'] ) ) {
+                $this->output_transparent = $data['output_transparent'];
+            }
 
-			$this->field_id                         = $data['id'];
-			Redux_Color_Scheme_Functions::$field_id = $data['id'];
-
-			// Set helper parent object.
-			Redux_Color_Scheme_Functions::$parent = $this->parent;
-
-			// Prep storage.
-			$upload_dir = Redux_Color_Scheme_Functions::$upload_dir;
-
-			// Set upload_dir cookie.
-			setcookie( 'redux_color_scheme_upload_dir', $upload_dir, 0, '/' );
-
-			return $data;
-		}
-
-		/**
-		 * Reset defaults.
-		 *
-		 * @param array $defaults Default values.
-		 *
-		 * @return array
-		 */
-		public function reset_defaults( array $defaults = array() ): array {
-			if ( Redux_Helpers::is_field_in_use( $this->parent, 'color_scheme' ) ) {
-				// Check if reset_all was fired.
-				$this->reset_all();
-				$defaults[ $this->field_id ] = Redux_Color_Scheme_Functions::data_array_from_scheme( 'Default' );
-			}
+            $this->field_id                         = $data['id'];
+            Redux_Color_Scheme_Functions::$field_id = $data['id'];
+
+            // Set helper parent object.
+            Redux_Color_Scheme_Functions::$parent = $this->parent;
+
+            // Prep storage.
+            $upload_dir = Redux_Color_Scheme_Functions::$upload_dir;
+
+            // Set upload_dir cookie.
+            setcookie( 'redux_color_scheme_upload_dir', $upload_dir, 0, '/' );
+
+            return $data;
+        }
+
+        /**
+         * Reset defaults.
+         *
+         * @param array $defaults Default values.
+         *
+         * @return array
+         */
+        public function reset_defaults( array $defaults = array() ): array {
+            if ( Redux_Helpers::is_field_in_use( $this->parent, 'color_scheme' ) ) {
+                // Check if reset_all was fired.
+                $this->reset_all();
+                $defaults[ $this->field_id ] = Redux_Color_Scheme_Functions::data_array_from_scheme( 'Default' );
+            }
 
-			return $defaults;
-		}
+            return $defaults;
+        }
 
-		/**
-		 * Reset section defaults.
-		 *
-		 * @param array $defaults Default values.
-		 *
-		 * @return array
-		 */
-		public function reset_defaults_section( array $defaults = array() ): array {
-			if ( Redux_Helpers::is_field_in_use( $this->parent, 'color_scheme' ) ) {
-				// Get the current tab/section number.
-				if ( isset( $_COOKIE['redux_current_tab'] ) ) {
-					$cur_tab = sanitize_text_field( wp_unslash( $_COOKIE['redux_current_tab'] ) );
-
-					// Get the tab/section number field is used on.
-					$tab_num = $this->parent->field_sections['color_scheme'][ $this->field_id ];
-
-					// Match...
-					if ( $cur_tab === $tab_num ) {
-
-						// Reset data.
-						$this->reset_all();
-					}
-					$defaults[ $this->field_id ] = Redux_Color_Scheme_Functions::data_array_from_scheme( 'Default' );
-				}
-			}
-
-			return $defaults;
-		}
-
-		/**
-		 * Save Changes Hook. What to do when changes are saved
-		 *
-		 * @param array $saved_options Saved data.
-		 * @param array $old_options   Previous data.
-		 *
-		 * @return      array
-		 * @since       1.0.0
-		 * @access      public
-		 */
-		public function save_hook( array $saved_options = array(), array $old_options = array() ): array {
-			if ( ! isset( $saved_options[ $this->field_id ] ) || empty( $saved_options[ $this->field_id ] ) || ( is_array( $saved_options[ $this->field_id ] ) && $old_options === $saved_options ) || ! array_key_exists( $this->field_id, $saved_options ) ) {
-				return $saved_options;
-			}
-
-			// We'll use the reset hook instead.
-			if ( ! empty( $saved_options['defaults'] ) || ! empty( $saved_options['defaults-section'] ) ) {
-				return $saved_options;
-			}
-
-			$first_value = reset( $saved_options[ $this->field_id ] ); // First Element's Value.
-
-			// Parse the JSON to an array.
-			if ( isset( $first_value['data'] ) ) {
-
-				Redux_Color_Scheme_Functions::$parent   = $this->parent;
-				Redux_Color_Scheme_Functions::$field_id = $this->field_id;
-
-				Redux_Color_Scheme_Functions::set_current_scheme_id( $saved_options['redux-scheme-select'] );
-
-				// Get the current field ID.
-				$raw_data = $saved_options[ $this->field_id ];
-
-				// Create a new array.
-				$save_data = array();
-
-				// Enum through saved data.
-				foreach ( $raw_data as $id => $val ) {
-
-					if ( 'color_scheme_name' !== $id ) {
-						if ( is_array( $val ) ) {
-
-							if ( ! isset( $val['data'] ) ) {
-								continue;
-							}
-
-							$data = json_decode( rawurldecode( $val['data'] ), true );
-
-							// Sanitize everything.
-							$color = $data['color'] ?? '';
-							$alpha = $data['alpha'] ?? 1;
-
-							$id    = $data['id'] ?? $id;
-							$title = $data['title'] ?? $id;
-
-							$grp = $data['group'] ?? '';
-
-							if ( '' === $color || 'transparent' === $color ) {
-								$rgba = $this->output_transparent ? 'transparent' : '';
-							} else {
-								$rgba = Redux_Helpers::hex2rgba( $color, $alpha );
-							}
-
-							// Create an array of saved data.
-							$save_data[] = array(
-								'id'    => $id,
-								'title' => $title,
-								'color' => $color,
-								'alpha' => $alpha,
-								'group' => $grp,
-								'rgba'  => $rgba,
-							);
-						} else {
-							$save_data[] = array(
-								'id'    => $id,
-								'value' => $val,
-								'type'  => 'select',
-							);
-						}
-					}
-				}
-
-				$new_scheme = array();
-
-				$new_scheme['color_scheme_name'] = Redux_Color_Scheme_Functions::get_current_scheme_id();
-
-				// Enum through values and assign them to a new array.
-				foreach ( $save_data as $val ) {
-					if ( isset( $val['id'] ) ) {
-						$new_scheme[ $val['id'] ] = $val;
-					}
-				}
-
-				// Filter for DB save
-				// Doesn't need to save select arrays to a database,
-				// just the id => value.
-				$database_data = $new_scheme;
-
-				foreach ( $database_data as $k => $v ) {
-					if ( isset( $v['type'] ) ) {
-						$val = $v['value'];
-
-						unset( $database_data[ $k ] );
-
-						$database_data[ $k ] = $val;
-					}
-				}
-
-				$saved_options[ $this->field_id ] = $database_data;
-
-				// Check if we should save this compared to the old data.
-				$save_scheme = false;
-
-				// Doesn't exist or is empty.
-				if ( ! isset( $old_options[ $this->field_id ] ) || ( isset( $old_options[ $this->field_id ] ) && ! empty( $old_options[ $this->field_id ] ) ) ) {
-					$save_scheme = true;
-				}
-
-				// Isn't empty and isn't the same as the new array.
-				if ( ! empty( $old_options[ $this->field_id ] ) && $saved_options[ $this->field_id ] !== $old_options[ $this->field_id ] ) {
-					$save_scheme = true;
-				}
-
-				if ( $save_scheme ) {
-					$scheme = Redux_Color_Scheme_Functions::get_current_scheme_id();
-					Redux_Color_Scheme_Functions::set_scheme_data( $scheme, $save_data );
-				}
-			}
-
-			return $saved_options;
-		}
-
-		/**
-		 * Reset data. Restores colour picker to default values
-		 *
-		 * @since       1.0.0
-		 * @access      private
-		 * @return      void
-		 */
-		private function reset_data() {
-			Redux_Color_Scheme_Functions::$parent   = $this->parent;
-			Redux_Color_Scheme_Functions::$field_id = $this->field_id;
-
-			// Get default data.
-			$data = $this->get_default_data();
-
-			// Add to (and/or create) JSON scheme file.
-			Redux_Color_Scheme_Functions::set_scheme_data( 'Default', $data );
-
-			// Set default scheme.
-			Redux_Color_Scheme_Functions::set_current_scheme_id( 'Default' );
-		}
-
-		/**
-		 * Reset All Hook. Todo list when all data is reset
-		 *
-		 * @return      void
-		 * @since       1.0.0
-		 * @access      public
-		 */
-		public function reset_all() {
-			if ( ! empty( $this->field_id ) && isset( $this->parent->options_defaults[ $this->field_id ] ) && ! empty( $this->parent->options_defaults[ $this->field_id ] ) ) {
-				Redux_Color_Scheme_Functions::$parent   = $this->parent;
-				Redux_Color_Scheme_Functions::$field_id = $this->field_id;
-
-				$this->reset_data();
-			}
-		}
-
-		/**
-		 * AJAX evaluator. Determine course of action based on AJAX callback
-		 *
-		 * @since       1.0.0
-		 * @access      public
-		 * @return      void
-		 */
-		public function parse_ajax() {
-			if ( ! is_admin() ) {
-				wp_die();
-			}
-
-			if ( ! current_user_can( $this->parent->args['page_permissions'] ) ) {
-				wp_die( esc_html__( 'You do not have permission to perform this action.', 'redux-framework' ) );
-			}
-
-			$opt_name = $this->parent->args['opt_name'];
-			$parent   = $this->parent;
-
-			$nonce = isset( $_REQUEST['nonce'] ) ? sanitize_key( wp_unslash( $_REQUEST['nonce'] ) ) : '';
-			if ( ! wp_verify_nonce( $nonce, 'redux_' . $opt_name . '_color_schemes' ) ) {
-				wp_die( esc_html__( 'Invalid Security Credentials. Please reload the page and try again.', 'redux-framework' ) );
-			}
-
-			$type = isset( $_REQUEST['type'] ) ? sanitize_key( wp_unslash( $_REQUEST['type'] ) ) : '';
-			if ( ! in_array( $type, array( 'save', 'delete', 'update', 'export', 'import' ), true ) ) {
-				wp_die( esc_html__( 'Invalid request.', 'redux-framework' ) );
-			}
-
-			if ( 'save' === $type ) {
-				$this->save_scheme( $parent );
-			} elseif ( 'delete' === $type ) {
-				$this->delete_scheme( $parent );
-			} elseif ( 'update' === $type ) {
-				$this->get_scheme_html( $parent );
-			} elseif ( 'export' === $type ) {
-				$this->download_schemes();
-			} elseif ( 'import' === $type ) {
-				$this->import_schemes();
-			}
-		}
-
-		/**
-		 * Download Scheme File.
-		 *
-		 * @since       4.4.18
-		 * @access      private
-		 * @return      void
-		 */
-		private function import_schemes() {
-			if ( isset( $_REQUEST['content'] ) ) { // phpcs:ignore WordPress.Security.NonceVerification
-				$content = wp_unslash( $_REQUEST['content'] ); // phpcs:ignore WordPress.Security.NonceVerification, WordPress.Security.ValidatedSanitizedInput.InputNotSanitized
-				$content = is_array( $content ) ? array_map( 'stripslashes_deep', $content ) : stripslashes( $content );
-				$content = json_decode( $content, true );
-
-				if ( is_null( $content ) ) {
-					$result = array(
-						'result' => false,
-						'data'   => esc_html__( 'Import unsuccessful! Malformed JSON data detected.', 'redux-framework' ),
-					);
-
-					$result = wp_json_encode( $result );
-
-					echo $result; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
-
-					die;
-				}
-
-				if ( isset( $content['Default']['color_scheme_name'] ) ) {
-					$content = wp_json_encode( $content );
-
-					$param_array = array(
-						'content'   => $content,
-						'overwrite' => true,
-						'chmod'     => FS_CHMOD_FILE,
-					);
-
-					$import_file = Redux_Color_Scheme_Functions::$upload_dir . Redux_Color_Scheme_Functions::$parent->args['opt_name'] . '_' . Redux_Color_Scheme_Functions::$field_id . '.json';
-
-					if ( true === Redux_Core::$filesystem->execute( 'put_contents', $import_file, $param_array ) ) {
-						$result = array(
-							'result' => true,
-							// translators: %s = HTML content.
-							'data'   => sprintf( esc_html__( 'Import successful! Click %s to refresh.', 'redux-framework' ), '<strong>' . esc_html__( 'OK', 'redux-framework' ) . '</strong>' ),
-						);
-					} else {
-						$result = array(
-							'result' => false,
-							'data'   => esc_html__( 'Import unsuccessful! File permission error: Could not write import data to server.', 'redux-framework' ),
-						);
-					}
-				} else {
-					$result = array(
-						'result' => false,
-						'data'   => esc_html__( 'Import unsuccessful! The selected file is not a valid color scheme file.', 'redux-framework' ),
-					);
-				}
-			} else {
-				$result = array(
-					'result' => false,
-					'data'   => esc_html__( 'Import unsuccessful! No data detected in the import file.', 'redux-framework' ),
-				);
-			}
-
-			$result = wp_json_encode( $result );
-
-			echo $result; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
-
-			die;
-		}
-
-		/**
-		 * Download Scheme File.
-		 *
-		 * @since       1.0.0
-		 * @access      private
-		 * @return      void
-		 */
-		private function download_schemes() {
-			Redux_Color_Scheme_Functions::$parent   = $this->parent;
-			Redux_Color_Scheme_Functions::$field_id = $this->field_id;
-
-			// Read contents of scheme file.
-			$content = Redux_Color_Scheme_Functions::read_scheme_file();
-			$content = wp_json_encode( $content );
-
-			// Set header info.
-			header( 'Content-Description: File Transfer' );
-			header( 'Content-type: application/txt' );
-			header( 'Content-Disposition: attachment; filename="redux_schemes_' . $this->parent->args['opt_name'] . '_' . $this->field_id . '_' . gmdate( 'm-d-Y' ) . '.json"' );
-			header( 'Content-Transfer-Encoding: binary' );
-			header( 'Expires: 0' );
-			header( 'Cache-Control: must-revalidate' );
-			header( 'Pragma: public' );
-
-			// File download.
-			echo $content; // phpcs:ignore WordPress.Security.EscapeOutput
-
-			// 2B ~! 2B
-			die;
-		}
-
-		/**
-		 * Save Scheme. Saved an individual scheme to JSON scheme file.
-		 *
-		 * @param ReduxFramework $redux ReduxFramework object.
-		 *
-		 * @return      void
-		 * @since       1.0.0
-		 * @access      private
-		 */
-		private function save_scheme( ReduxFramework $redux ) {
-			Redux_Color_Scheme_Functions::$parent   = $redux;
-			Redux_Color_Scheme_Functions::$field_id = $this->field_id;
-
-			// Get the scheme name.
-			if ( isset( $_REQUEST['scheme_name'] ) ) { // phpcs:ignore WordPress.Security.NonceVerification
-				$scheme_name = sanitize_text_field( wp_unslash( $_REQUEST['scheme_name'] ) ); // phpcs:ignore WordPress.Security.NonceVerification
-
-				// Check for duplicates.
-				$names = Redux_Color_Scheme_Functions::get_scheme_names();
-				foreach ( $names as $name ) {
-					$name     = strtolower( $name );
-					$tmp_name = strtolower( $scheme_name );
-
-					if ( $name === $tmp_name ) {
-						echo 'fail';
-						die();
-					}
-				}
-
-				// Get scheme data.
-				if ( isset( $_REQUEST['scheme_data'] ) ) { // phpcs:ignore WordPress.Security.NonceVerification
-					$scheme_data = wp_unslash( $_REQUEST['scheme_data'] ); // phpcs:ignore WordPress.Security
-
-					// Get field ID.
-					if ( isset( $_REQUEST['field_id'] ) ) { // phpcs:ignore WordPress.Security.NonceVerification
-						$scheme_data = rawurldecode( $scheme_data );
-						$scheme_data = json_decode( $scheme_data, true );
-
-						// Save scheme to file.  If successful...
-						if ( true === Redux_Color_Scheme_Functions::set_scheme_data( $scheme_name, $scheme_data ) ) {
-
-							// Update scheme selector.
-							echo Redux_Color_Scheme_Functions::get_scheme_select_html( $scheme_name ); // phpcs:ignore WordPress.Security.EscapeOutput
-						}
-					}
-				}
-			}
-
-			die(); // a horrible death!
-		}
-
-		/**
-		 * Delete Scheme. Delete individual scheme from JSON scheme file.
-		 *
-		 * @param ReduxFramework $redux ReduxFramework object.
-		 *
-		 * @return      void
-		 * @since       1.0.0
-		 * @access      private
-		 */
-		private function delete_scheme( ReduxFramework $redux ) {
-
-			// Get deleted scheme ID.
-			if ( isset( $_REQUEST['scheme_id'] ) ) { // phpcs:ignore WordPress.Security.NonceVerification
-				$scheme_id = sanitize_text_field( wp_unslash( $_REQUEST['scheme_id'] ) ); // phpcs:ignore WordPress.Security.NonceVerification
-
-				// Get field ID.
-				if ( isset( $_REQUEST['field_id'] ) ) { // phpcs:ignore WordPress.Security.NonceVerification
-					$field_id = sanitize_text_field( wp_unslash( $_REQUEST['field_id'] ) ); // phpcs:ignore WordPress.Security.NonceVerification
-
-					// If scheme ID was passed (and why wouldn't it be?? Hmm??).
-					if ( $scheme_id ) {
-						Redux_Color_Scheme_Functions::$field_id = $field_id;
-						Redux_Color_Scheme_Functions::$parent   = $redux;
-
-						// Get the entire scheme file.
-						$schemes = Redux_Color_Scheme_Functions::read_scheme_file();
-
-						// If we got a good read...
-						if ( false !== $schemes ) {
-
-							// If scheme name exists...
-							if ( isset( $schemes[ $scheme_id ] ) ) {
-
-								// Unset it.
-								unset( $schemes[ $scheme_id ] );
-
-								// Save the scheme data, minus the deleted scheme.  Upon success...
-								if ( true === Redux_Color_Scheme_Functions::write_scheme_file( $schemes ) ) {
-
-									// Set default scheme.
-									Redux_Color_Scheme_Functions::set_current_scheme_id( 'Default' );
-
-									// Update field ID.
-									Redux_Color_Scheme_Functions::$field_id = $field_id;
-
-									// Meh TODO.
-									Redux_Color_Scheme_Functions::set_database_data();
-
-									echo 'success';
-								} else {
-									echo 'Failed to write JSON file to server.';
-								}
-							} else {
-								echo 'Scheme name does not exist in JSON string.  Aborting.';
-							}
-						} else {
-							echo 'Failed to read JSON scheme file, or file is empty.';
-						}
-					} else {
-						echo 'No scheme ID passed.  Aborting.';
-					}
-				}
-			}
-
-			die(); // rolled a two.
-		}
-
-		/**
-		 * Gets the new scheme based on selection.
-		 *
-		 * @param ReduxFramework $redux ReduxFramework object.
-		 *
-		 * @return      void
-		 * @since       1.0.0
-		 * @access      private
-		 */
-		private function get_scheme_html( ReduxFramework $redux ) {
-			if ( isset( $_POST['scheme_id'] ) ) { // phpcs:ignore WordPress.Security.NonceVerification
-
-				// Get the selected scheme name.
-				$scheme_id = sanitize_text_field( wp_unslash( $_POST['scheme_id'] ) ); // phpcs:ignore WordPress.Security.NonceVerification
-
-				if ( isset( $_POST['field_id'] ) ) { // phpcs:ignore WordPress.Security.NonceVerification
-
-					// Get the field ID.
-					$field_id = sanitize_text_field( wp_unslash( $_POST['field_id'] ) ); // phpcs:ignore WordPress.Security.NonceVerification
-
-					// Get the field class.
-					$field_class = isset( $_POST['field_class'] ) ? sanitize_text_field( wp_unslash( $_POST['field_class'] ) ) : ''; // phpcs:ignore WordPress.Security.NonceVerification
-
-					Redux_Color_Scheme_Functions::$parent = $redux;
-
-					// Set the updated field ID.
-					Redux_Color_Scheme_Functions::$field_id = $field_id;
-
-					// Set the updated field class.
-					Redux_Color_Scheme_Functions::$field_class = $field_class;
-
-					// Get the color picket layout HTML.
-					$html = Redux_Color_Scheme_Functions::get_current_color_scheme_html( $scheme_id );
-
-					// Print!
-					echo $html; // phpcs:ignore WordPress.Security.EscapeOutput
-				}
-			}
-
-			die(); // another day.
-		}
-
-
-		/**
-		 * Retrieves an array of default data for color picker.
-		 *
-		 * @since       1.0.0
-		 * @access      private
-		 * @return      array Default values from config.
-		 */
-		private function get_default_data(): array {
-			$def_opts = $this->parent->options_defaults[ $this->field_id ];
-
-			if ( isset( $def_opts['color_scheme_name'] ) ) {
-				return array();
-			}
-
-			$sections = $this->parent->sections;
-			$data     = array();
-
-			foreach ( $sections as $arr ) {
-				if ( isset( $arr['fields'] ) ) {
-					foreach ( $arr['fields'] as $arr2 ) {
-						if ( $arr2['id'] === $this->field_id ) {
-
-							// Select fields.
-							if ( isset( $arr2['select'] ) ) {
-								foreach ( $arr2['select'] as $v ) {
-									$data[] = array(
-										'id'    => $v['id'],
-										'value' => $v['default'],
-										'type'  => 'select',
-									);
-								}
-							}
-						}
-					}
-				}
-			}
-
-			foreach ( $def_opts as $v ) {
-				$title = $v['title'] ?? $v['id'];
-				$color = $v['color'] ?? '';
-				$alpha = $v['alpha'] ?? 1;
-				$grp   = $v['group'] ?? '';
-
-				if ( '' === $color || 'transparent' === $color ) {
-					$rgba = $this->output_transparent ? 'transparent' : '';
-				} else {
-					$rgba = Redux_Helpers::hex2rgba( $color, $alpha );
-				}
-
-				$data[] = array(
-					'id'    => $v['id'],
-					'title' => $title,
-					'color' => $color,
-					'alpha' => $alpha,
-					'group' => $grp,
-					'rgba'  => $rgba,
-				);
-			}
-
-			return $data;
-		}
-	}
-
-	class_alias( Redux_Extension_Color_Scheme::class, 'ReduxFramework_Extension_Color_Scheme' );
+        /**
+         * Reset section defaults.
+         *
+         * @param array $defaults Default values.
+         *
+         * @return array
+         */
+        public function reset_defaults_section( array $defaults = array() ): array {
+            if ( Redux_Helpers::is_field_in_use( $this->parent, 'color_scheme' ) ) {
+                // Get the current tab/section number.
+                if ( isset( $_COOKIE['redux_current_tab'] ) ) {
+                    $cur_tab = sanitize_text_field( wp_unslash( $_COOKIE['redux_current_tab'] ) );
+
+                    // Get the tab/section number field is used on.
+                    $tab_num = $this->parent->field_sections['color_scheme'][ $this->field_id ];
+
+                    // Match...
+                    if ( $cur_tab === $tab_num ) {
+
+                        // Reset data.
+                        $this->reset_all();
+                    }
+                    $defaults[ $this->field_id ] = Redux_Color_Scheme_Functions::data_array_from_scheme( 'Default' );
+                }
+            }
+
+            return $defaults;
+        }
+
+        /**
+         * Save Changes Hook. What to do when changes are saved
+         *
+         * @param array $saved_options Saved data.
+         * @param array $old_options   Previous data.
+         *
+         * @return      array
+         * @since       1.0.0
+         * @access      public
+         */
+        public function save_hook( array $saved_options = array(), array $old_options = array() ): array {
+            if ( ! isset( $saved_options[ $this->field_id ] ) || empty( $saved_options[ $this->field_id ] ) || ( is_array( $saved_options[ $this->field_id ] ) && $old_options === $saved_options ) || ! array_key_exists( $this->field_id, $saved_options ) ) {
+                return $saved_options;
+            }
+
+            // We'll use the reset hook instead.
+            if ( ! empty( $saved_options['defaults'] ) || ! empty( $saved_options['defaults-section'] ) ) {
+                return $saved_options;
+            }
+
+            $first_value = reset( $saved_options[ $this->field_id ] ); // First Element's Value.
+
+            // Parse the JSON to an array.
+            if ( isset( $first_value['data'] ) ) {
+
+                Redux_Color_Scheme_Functions::$parent   = $this->parent;
+                Redux_Color_Scheme_Functions::$field_id = $this->field_id;
+
+                Redux_Color_Scheme_Functions::set_current_scheme_id( $saved_options['redux-scheme-select'] );
+
+                // Get the current field ID.
+                $raw_data = $saved_options[ $this->field_id ];
+
+                // Create a new array.
+                $save_data = array();
+
+                // Enum through saved data.
+                foreach ( $raw_data as $id => $val ) {
+
+                    if ( 'color_scheme_name' !== $id ) {
+                        if ( is_array( $val ) ) {
+
+                            if ( ! isset( $val['data'] ) ) {
+                                continue;
+                            }
+
+                            $data = json_decode( rawurldecode( $val['data'] ), true );
+
+                            // Sanitize everything.
+                            $color = $data['color'] ?? '';
+                            $alpha = $data['alpha'] ?? 1;
+
+                            $id    = $data['id'] ?? $id;
+                            $title = $data['title'] ?? $id;
+
+                            $grp = $data['group'] ?? '';
+
+                            if ( '' === $color || 'transparent' === $color ) {
+                                $rgba = $this->output_transparent ? 'transparent' : '';
+                            } else {
+                                $rgba = Redux_Helpers::hex2rgba( $color, $alpha );
+                            }
+
+                            // Create an array of saved data.
+                            $save_data[] = array(
+                                'id'    => $id,
+                                'title' => $title,
+                                'color' => $color,
+                                'alpha' => $alpha,
+                                'group' => $grp,
+                                'rgba'  => $rgba,
+                            );
+                        } else {
+                            $save_data[] = array(
+                                'id'    => $id,
+                                'value' => $val,
+                                'type'  => 'select',
+                            );
+                        }
+                    }
+                }
+
+                $new_scheme = array();
+
+                $new_scheme['color_scheme_name'] = Redux_Color_Scheme_Functions::get_current_scheme_id();
+
+                // Enum through values and assign them to a new array.
+                foreach ( $save_data as $val ) {
+                    if ( isset( $val['id'] ) ) {
+                        $new_scheme[ $val['id'] ] = $val;
+                    }
+                }
+
+                // Filter for DB save
+                // Doesn't need to save select arrays to a database,
+                // just the id => value.
+                $database_data = $new_scheme;
+
+                foreach ( $database_data as $k => $v ) {
+                    if ( isset( $v['type'] ) ) {
+                        $val = $v['value'];
+
+                        unset( $database_data[ $k ] );
+
+                        $database_data[ $k ] = $val;
+                    }
+                }
+
+                $saved_options[ $this->field_id ] = $database_data;
+
+                // Check if we should save this compared to the old data.
+                $save_scheme = false;
+
+                // Doesn't exist or is empty.
+                if ( ! isset( $old_options[ $this->field_id ] ) || ( isset( $old_options[ $this->field_id ] ) && ! empty( $old_options[ $this->field_id ] ) ) ) {
+                    $save_scheme = true;
+                }
+
+                // Isn't empty and isn't the same as the new array.
+                if ( ! empty( $old_options[ $this->field_id ] ) && $saved_options[ $this->field_id ] !== $old_options[ $this->field_id ] ) {
+                    $save_scheme = true;
+                }
+
+                if ( $save_scheme ) {
+                    $scheme = Redux_Color_Scheme_Functions::get_current_scheme_id();
+                    Redux_Color_Scheme_Functions::set_scheme_data( $scheme, $save_data );
+                }
+            }
+
+            return $saved_options;
+        }
+
+        /**
+         * Reset data. Restores colour picker to default values
+         *
+         * @since       1.0.0
+         * @access      private
+         * @return      void
+         */
+        private function reset_data() {
+            Redux_Color_Scheme_Functions::$parent   = $this->parent;
+            Redux_Color_Scheme_Functions::$field_id = $this->field_id;
+
+            // Get default data.
+            $data = $this->get_default_data();
+
+            // Add to (and/or create) JSON scheme file.
+            Redux_Color_Scheme_Functions::set_scheme_data( 'Default', $data );
+
+            // Set default scheme.
+            Redux_Color_Scheme_Functions::set_current_scheme_id( 'Default' );
+        }
+
+        /**
+         * Reset All Hook. Todo list when all data is reset
+         *
+         * @return      void
+         * @since       1.0.0
+         * @access      public
+         */
+        public function reset_all() {
+            if ( ! empty( $this->field_id ) && isset( $this->parent->options_defaults[ $this->field_id ] ) && ! empty( $this->parent->options_defaults[ $this->field_id ] ) ) {
+                Redux_Color_Scheme_Functions::$parent   = $this->parent;
+                Redux_Color_Scheme_Functions::$field_id = $this->field_id;
+
+                $this->reset_data();
+            }
+        }
+
+        /**
+         * AJAX evaluator. Determine course of action based on AJAX callback
+         *
+         * @since       1.0.0
+         * @access      public
+         * @return      void
+         */
+        public function parse_ajax() {
+            if ( ! is_admin() ) {
+                wp_die();
+            }
+
+            if ( ! current_user_can( $this->parent->args['page_permissions'] ) ) {
+                wp_die( esc_html__( 'You do not have permission to perform this action.', 'redux-framework' ) );
+            }
+
+            $opt_name = $this->parent->args['opt_name'];
+            $parent   = $this->parent;
+
+            $nonce = isset( $_REQUEST['nonce'] ) ? sanitize_key( wp_unslash( $_REQUEST['nonce'] ) ) : '';
+            if ( ! wp_verify_nonce( $nonce, 'redux_' . $opt_name . '_color_schemes' ) ) {
+                wp_die( esc_html__( 'Invalid Security Credentials. Please reload the page and try again.', 'redux-framework' ) );
+            }
+
+            $type = isset( $_REQUEST['type'] ) ? sanitize_key( wp_unslash( $_REQUEST['type'] ) ) : '';
+            if ( ! in_array( $type, array( 'save', 'delete', 'update', 'export', 'import' ), true ) ) {
+                wp_die( esc_html__( 'Invalid request.', 'redux-framework' ) );
+            }
+
+            if ( 'save' === $type ) {
+                $this->save_scheme( $parent );
+            } elseif ( 'delete' === $type ) {
+                $this->delete_scheme( $parent );
+            } elseif ( 'update' === $type ) {
+                $this->get_scheme_html( $parent );
+            } elseif ( 'export' === $type ) {
+                $this->download_schemes();
+            } elseif ( 'import' === $type ) {
+                $this->import_schemes();
+            }
+        }
+
+        /**
+         * Download Scheme File.
+         *
+         * @since       4.4.18
+         * @access      private
+         * @return      void
+         */
+        private function import_schemes() {
+            if ( isset( $_REQUEST['content'] ) ) { // phpcs:ignore WordPress.Security.NonceVerification
+                $content = wp_unslash( $_REQUEST['content'] ); // phpcs:ignore WordPress.Security.NonceVerification, WordPress.Security.ValidatedSanitizedInput.InputNotSanitized
+                $content = is_array( $content ) ? array_map( 'stripslashes_deep', $content ) : stripslashes( $content );
+                $content = json_decode( $content, true );
+
+                if ( is_null( $content ) ) {
+                    $result = array(
+                        'result' => false,
+                        'data'   => esc_html__( 'Import unsuccessful! Malformed JSON data detected.', 'redux-framework' ),
+                    );
+
+                    $result = wp_json_encode( $result );
+
+                    echo $result; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
+
+                    die;
+                }
+
+                if ( isset( $content['Default']['color_scheme_name'] ) ) {
+                    $content = wp_json_encode( $content );
+
+                    $param_array = array(
+                        'content'   => $content,
+                        'overwrite' => true,
+                        'chmod'     => FS_CHMOD_FILE,
+                    );
+
+                    $import_file = Redux_Color_Scheme_Functions::$upload_dir . Redux_Color_Scheme_Functions::$parent->args['opt_name'] . '_' . Redux_Color_Scheme_Functions::$field_id . '.json';
+
+                    if ( true === Redux_Core::$filesystem->execute( 'put_contents', $import_file, $param_array ) ) {
+                        $result = array(
+                            'result' => true,
+                            // translators: %s = HTML content.
+                            'data'   => sprintf( esc_html__( 'Import successful! Click %s to refresh.', 'redux-framework' ), '<strong>' . esc_html__( 'OK', 'redux-framework' ) . '</strong>' ),
+                        );
+                    } else {
+                        $result = array(
+                            'result' => false,
+                            'data'   => esc_html__( 'Import unsuccessful! File permission error: Could not write import data to server.', 'redux-framework' ),
+                        );
+                    }
+                } else {
+                    $result = array(
+                        'result' => false,
+                        'data'   => esc_html__( 'Import unsuccessful! The selected file is not a valid color scheme file.', 'redux-framework' ),
+                    );
+                }
+            } else {
+                $result = array(
+                    'result' => false,
+                    'data'   => esc_html__( 'Import unsuccessful! No data detected in the import file.', 'redux-framework' ),
+                );
+            }
+
+            $result = wp_json_encode( $result );
+
+            echo $result; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
+
+            die;
+        }
+
+        /**
+         * Download Scheme File.
+         *
+         * @since       1.0.0
+         * @access      private
+         * @return      void
+         */
+        private function download_schemes() {
+            Redux_Color_Scheme_Functions::$parent   = $this->parent;
+            Redux_Color_Scheme_Functions::$field_id = $this->field_id;
+
+            // Read contents of scheme file.
+            $content = Redux_Color_Scheme_Functions::read_scheme_file();
+            $content = wp_json_encode( $content );
+
+            // Set header info.
+            header( 'Content-Description: File Transfer' );
+            header( 'Content-type: application/txt' );
+            header( 'Content-Disposition: attachment; filename="redux_schemes_' . $this->parent->args['opt_name'] . '_' . $this->field_id . '_' . gmdate( 'm-d-Y' ) . '.json"' );
+            header( 'Content-Transfer-Encoding: binary' );
+            header( 'Expires: 0' );
+            header( 'Cache-Control: must-revalidate' );
+            header( 'Pragma: public' );
+
+            // File download.
+            echo $content; // phpcs:ignore WordPress.Security.EscapeOutput
+
+            // 2B ~! 2B
+            die;
+        }
+
+        /**
+         * Save Scheme. Saved an individual scheme to JSON scheme file.
+         *
+         * @param ReduxFramework $redux ReduxFramework object.
+         *
+         * @return      void
+         * @since       1.0.0
+         * @access      private
+         */
+        private function save_scheme( ReduxFramework $redux ) {
+            Redux_Color_Scheme_Functions::$parent   = $redux;
+            Redux_Color_Scheme_Functions::$field_id = $this->field_id;
+
+            // Get the scheme name.
+            if ( isset( $_REQUEST['scheme_name'] ) ) { // phpcs:ignore WordPress.Security.NonceVerification
+                $scheme_name = sanitize_text_field( wp_unslash( $_REQUEST['scheme_name'] ) ); // phpcs:ignore WordPress.Security.NonceVerification
+
+                // Check for duplicates.
+                $names = Redux_Color_Scheme_Functions::get_scheme_names();
+                foreach ( $names as $name ) {
+                    $name     = strtolower( $name );
+                    $tmp_name = strtolower( $scheme_name );
+
+                    if ( $name === $tmp_name ) {
+                        echo 'fail';
+                        die();
+                    }
+                }
+
+                // Get scheme data.
+                if ( isset( $_REQUEST['scheme_data'] ) ) { // phpcs:ignore WordPress.Security.NonceVerification
+                    $scheme_data = wp_unslash( $_REQUEST['scheme_data'] ); // phpcs:ignore WordPress.Security
+
+                    // Get field ID.
+                    if ( isset( $_REQUEST['field_id'] ) ) { // phpcs:ignore WordPress.Security.NonceVerification
+                        $scheme_data = rawurldecode( $scheme_data );
+                        $scheme_data = json_decode( $scheme_data, true );
+
+                        // Save scheme to file.  If successful...
+                        if ( true === Redux_Color_Scheme_Functions::set_scheme_data( $scheme_name, $scheme_data ) ) {
+
+                            // Update scheme selector.
+                            echo Redux_Color_Scheme_Functions::get_scheme_select_html( $scheme_name ); // phpcs:ignore WordPress.Security.EscapeOutput
+                        }
+                    }
+                }
+            }
+
+            die(); // a horrible death!
+        }
+
+        /**
+         * Delete Scheme. Delete individual scheme from JSON scheme file.
+         *
+         * @param ReduxFramework $redux ReduxFramework object.
+         *
+         * @return      void
+         * @since       1.0.0
+         * @access      private
+         */
+        private function delete_scheme( ReduxFramework $redux ) {
+
+            // Get deleted scheme ID.
+            if ( isset( $_REQUEST['scheme_id'] ) ) { // phpcs:ignore WordPress.Security.NonceVerification
+                $scheme_id = sanitize_text_field( wp_unslash( $_REQUEST['scheme_id'] ) ); // phpcs:ignore WordPress.Security.NonceVerification
+
+                // Get field ID.
+                if ( isset( $_REQUEST['field_id'] ) ) { // phpcs:ignore WordPress.Security.NonceVerification
+                    $field_id = sanitize_text_field( wp_unslash( $_REQUEST['field_id'] ) ); // phpcs:ignore WordPress.Security.NonceVerification
+
+                    // If scheme ID was passed (and why wouldn't it be?? Hmm??).
+                    if ( $scheme_id ) {
+                        Redux_Color_Scheme_Functions::$field_id = $field_id;
+                        Redux_Color_Scheme_Functions::$parent   = $redux;
+
+                        // Get the entire scheme file.
+                        $schemes = Redux_Color_Scheme_Functions::read_scheme_file();
+
+                        // If we got a good read...
+                        if ( false !== $schemes ) {
+
+                            // If scheme name exists...
+                            if ( isset( $schemes[ $scheme_id ] ) ) {
+
+                                // Unset it.
+                                unset( $schemes[ $scheme_id ] );
+
+                                // Save the scheme data, minus the deleted scheme.  Upon success...
+                                if ( true === Redux_Color_Scheme_Functions::write_scheme_file( $schemes ) ) {
+
+                                    // Set default scheme.
+                                    Redux_Color_Scheme_Functions::set_current_scheme_id( 'Default' );
+
+                                    // Update field ID.
+                                    Redux_Color_Scheme_Functions::$field_id = $field_id;
+
+                                    // Meh TODO.
+                                    Redux_Color_Scheme_Functions::set_database_data();
+
+                                    echo 'success';
+                                } else {
+                                    echo 'Failed to write JSON file to server.';
+                                }
+                            } else {
+                                echo 'Scheme name does not exist in JSON string.  Aborting.';
+                            }
+                        } else {
+                            echo 'Failed to read JSON scheme file, or file is empty.';
+                        }
+                    } else {
+                        echo 'No scheme ID passed.  Aborting.';
+                    }
+                }
+            }
+
+            die(); // rolled a two.
+        }
+
+        /**
+         * Gets the new scheme based on selection.
+         *
+         * @param ReduxFramework $redux ReduxFramework object.
+         *
+         * @return      void
+         * @since       1.0.0
+         * @access      private
+         */
+        private function get_scheme_html( ReduxFramework $redux ) {
+            if ( isset( $_POST['scheme_id'] ) ) { // phpcs:ignore WordPress.Security.NonceVerification
+
+                // Get the selected scheme name.
+                $scheme_id = sanitize_text_field( wp_unslash( $_POST['scheme_id'] ) ); // phpcs:ignore WordPress.Security.NonceVerification
+
+                if ( isset( $_POST['field_id'] ) ) { // phpcs:ignore WordPress.Security.NonceVerification
+
+                    // Get the field ID.
+                    $field_id = sanitize_text_field( wp_unslash( $_POST['field_id'] ) ); // phpcs:ignore WordPress.Security.NonceVerification
+
+                    // Get the field class.
+                    $field_class = isset( $_POST['field_class'] ) ? sanitize_text_field( wp_unslash( $_POST['field_class'] ) ) : ''; // phpcs:ignore WordPress.Security.NonceVerification
+
+                    Redux_Color_Scheme_Functions::$parent = $redux;
+
+                    // Set the updated field ID.
+                    Redux_Color_Scheme_Functions::$field_id = $field_id;
+
+                    // Set the updated field class.
+                    Redux_Color_Scheme_Functions::$field_class = $field_class;
+
+                    // Get the color picket layout HTML.
+                    $html = Redux_Color_Scheme_Functions::get_current_color_scheme_html( $scheme_id );
+
+                    // Print!
+                    echo $html; // phpcs:ignore WordPress.Security.EscapeOutput
+                }
+            }
+
+            die(); // another day.
+        }
+
+
+        /**
+         * Retrieves an array of default data for color picker.
+         *
+         * @since       1.0.0
+         * @access      private
+         * @return      array Default values from config.
+         */
+        private function get_default_data(): array {
+            $def_opts = $this->parent->options_defaults[ $this->field_id ];
+
+            if ( isset( $def_opts['color_scheme_name'] ) ) {
+                return array();
+            }
+
+            $sections = $this->parent->sections;
+            $data     = array();
+
+            foreach ( $sections as $arr ) {
+                if ( isset( $arr['fields'] ) ) {
+                    foreach ( $arr['fields'] as $arr2 ) {
+                        if ( $arr2['id'] === $this->field_id ) {
+
+                            // Select fields.
+                            if ( isset( $arr2['select'] ) ) {
+                                foreach ( $arr2['select'] as $v ) {
+                                    $data[] = array(
+                                        'id'    => $v['id'],
+                                        'value' => $v['default'],
+                                        'type'  => 'select',
+                                    );
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+
+            foreach ( $def_opts as $v ) {
+                $title = $v['title'] ?? $v['id'];
+                $color = $v['color'] ?? '';
+                $alpha = $v['alpha'] ?? 1;
+                $grp   = $v['group'] ?? '';
+
+                if ( '' === $color || 'transparent' === $color ) {
+                    $rgba = $this->output_transparent ? 'transparent' : '';
+                } else {
+                    $rgba = Redux_Helpers::hex2rgba( $color, $alpha );
+                }
+
+                $data[] = array(
+                    'id'    => $v['id'],
+                    'title' => $title,
+                    'color' => $color,
+                    'alpha' => $alpha,
+                    'group' => $grp,
+                    'rgba'  => $rgba,
+                );
+            }
+
+            return $data;
+        }
+    }
+
+    class_alias( Redux_Extension_Color_Scheme::class, 'ReduxFramework_Extension_Color_Scheme' );
 }

redux-core/inc/extensions/custom_fonts/class-redux-extension-custom-fonts.php

Indentation +975 added lines, -975 removed lines

@@ -16,979 +16,979 @@
 
 if ( ! class_exists( 'Redux_Extension_Custom_Fonts' ) ) {
 
-	/**
-	 * Class Redux_Extension_Custom_Fonts
-	 */
-	class Redux_Extension_Custom_Fonts extends Redux_Extension_Abstract {
-
-		/**
-		 * Extension version.
-		 *
-		 * @var string
-		 */
-		public static $version = '4.5.10';
-
-		/**
-		 * Extension friendly name.
-		 *
-		 * @var string
-		 */
-		public string $extension_name = 'Custom Fonts';
-		/**
-		 * Class instance.
-		 *
-		 * @var object|null
-		 */
-		public static ?object $instance;
-
-		/**
-		 * Custom fonts array.
-		 *
-		 * @var array|null
-		 */
-		public ?array $custom_fonts = array();
-
-		/**
-		 * WordPress upload directory.
-		 *
-		 * @var string|null
-		 */
-		public ?string $upload_dir = '';
-
-		/**
-		 * WordPress upload URI.
-		 *
-		 * @var string|null
-		 */
-		public ?string $upload_url = '';
-
-		/**
-		 * Subfolder name.
-		 *
-		 * @var string
-		 */
-		public string $subfolder = 'custom/';
-
-		/**
-		 * Font folder.
-		 *
-		 * @var string|null
-		 */
-		public ?string $font_folder = '';
-
-		/**
-		 * Font Filename.
-		 *
-		 * @var string|null
-		 */
-		public ?string $font_filename = '';
-
-		/**
-		 * File selected in media upload.
-		 *
-		 * @var string|null
-		 */
-		public ?string $selected_file = '';
-
-		/**
-		 * Is font conversation service available?
-		 *
-		 * @var bool
-		 */
-		private bool $can_convert;
-
-		/**
-		 * Class Constructor. Defines the args for the extensions class
-		 *
-		 * @param ReduxFramework $redux ReduxFramework pointer.
-		 *
-		 * @return      void
-		 * @since       1.0.0
-		 * @access      public
-		 */
-		public function __construct( $redux ) {
-			if ( false === $redux->args['custom_fonts'] ) {
-				return;
-			}
-
-			parent::__construct( $redux, __FILE__ );
-
-			self::$instance = parent::get_instance();
-
-			$this->add_field( 'custom_fonts' );
-
-			$this->upload_dir = Redux_Core::$upload_dir . 'custom-fonts/';
-			$this->upload_url = Redux_Core::$upload_url . 'custom-fonts/';
-
-			if ( ! is_dir( $this->upload_dir ) ) {
-				Redux_Core::$filesystem->execute( 'mkdir', $this->upload_dir );
-			}
-
-			if ( ! is_dir( $this->upload_dir . '/custom' ) ) {
-				Redux_Core::$filesystem->execute( 'mkdir', $this->upload_dir . '/custom' );
-			}
-
-			$this->get_fonts();
-
-			if ( file_exists( $this->upload_dir . 'fonts.css' ) ) {
-				if ( filemtime( $this->upload_dir . 'custom' ) > ( filemtime( $this->upload_dir . 'fonts.css' ) + 10 ) ) {
-					$this->generate_css();
-				}
-			} else {
-				$this->generate_css();
-			}
-
-			add_action( 'wp_ajax_redux_custom_fonts', array( $this, 'ajax' ) );
-			add_action( 'wp_ajax_redux_custom_font_timer', array( $this, 'timer' ) );
-
-			add_filter( "redux/{$this->parent->args['opt_name']}/field/typography/custom_fonts", array( $this, 'add_custom_fonts' ) );
-
-			// phpcs:disable
-			// $this->is_field = Redux_Helpers::is_field_in_use( $parent, 'custom_fonts' );
-
-			// if ( ! $this->is_field ) {
-			// 	$this->add_section();
-			// }
-
-			add_filter( "redux/options/{$this->parent->args['opt_name']}/section/redux_dynamic_font_control", array( $this, 'remove_dynamic_section' ) ); // phpcs:ignore WordPress.NamingConventions.ValidHookName
-			add_filter( 'upload_mimes', array( $this, 'custom_upload_mimes' ) );
-			add_action( 'wp_head', array( $this, 'enqueue_output' ), 150 );
-			add_filter( 'tiny_mce_before_init', array( $this, 'extend_tinymce_dropdown' ) );
-
-			$this->can_convert = true; // has_filter( 'redux/' . $this->parent->args['opt_name'] . '/extensions/custom_fonts/api_url' );
-			// phpcs:enable
-		}
-
-		/**
-		 * Timer.
-		 */
-		public function timer() {
-			if ( ! current_user_can( $this->parent->args['page_permissions'] ) ) {
-				wp_die( esc_html__( 'You do not have permission to perform this action.', 'redux-framework' ), 403 );
-			}
-
-			if ( ! isset( $_POST['nonce'] ) || ! wp_verify_nonce( sanitize_key( wp_unslash( $_POST['nonce'] ) ), 'redux_custom_fonts' ) ) {
-				die( 0 );
-			}
-
-			$name = get_option( 'redux_custom_font_current' );
-
-			if ( ! empty( $name ) ) {
-				echo esc_html( $name );
-			}
-
-			die();
-		}
-
-		/**
-		 * Remove the dynamically added section if the field was used elsewhere
-		 *
-		 * @param array $section Section array.
-		 *
-		 * @return array
-		 * @since  Redux_Framework 3.1.1
-		 */
-		public function remove_dynamic_section( array $section ): array {
-			if ( isset( $this->parent->field_types['custom_fonts'] ) ) {
-				$section = array();
-			}
-
-			return $section;
-		}
-
-		/**
-		 * Adds FontMeister fonts to the TinyMCE drop-down.
-		 * Typekit's fonts don't render properly in the drop-down and in the editor,
-		 * because Typekit needs JS and TinyMCE doesn't support that.
-		 *
-		 * @param array $opt Option array.
-		 *
-		 * @return array
-		 */
-		public function extend_tinymce_dropdown( array $opt ): array {
-			if ( ! is_admin() ) {
-				return $opt;
-			}
-
-			if ( file_exists( $this->upload_dir . 'fonts.css' ) ) {
-				$theme_advanced_fonts = $opt['font_formats'] ?? 'Andale Mono=andale mono,times;Arial=arial,helvetica,sans-serif;Arial Black=arial black,avant garde;Book Antiqua=book antiqua,palatino;Comic Sans MS=comic sans ms,sans-serif;Courier New=courier new,courier;Georgia=georgia,palatino;Helvetica=helvetica;Impact=impact,chicago;Symbol=symbol;Tahoma=tahoma,arial,helvetica,sans-serif;Terminal=terminal,monaco;Times New Roman=times new roman,times;Trebuchet MS=trebuchet ms,geneva;Verdana=verdana,geneva;Webdings=webdings;Wingdings=wingdings,zapf dingbats';
-				$custom_fonts         = '';
-
-				$stylesheet = $this->upload_url . 'fonts.css';
-
-				if ( empty( $opt['content_css'] ) ) {
-					$opt['content_css'] = $stylesheet;
-				} else {
-					$opt['content_css'] = $opt['content_css'] . ',' . $stylesheet;
-				}
-
-				foreach ( $this->custom_fonts as $arr ) {
-					foreach ( $arr as $font => $pieces ) {
-						$custom_fonts .= ';' . $font . '=' . $font;
-					}
-				}
-
-				$opt['font_formats'] = $theme_advanced_fonts . $custom_fonts;
-			}
-
-			return $opt;
-		}
-
-
-		/**
-		 * Function to enqueue the custom fonts css
-		 */
-		public function enqueue_output() {
-			if ( file_exists( $this->upload_dir . 'fonts.css' ) ) {
-				wp_enqueue_style(
-					'redux-custom-fonts',
-					$this->upload_url . 'fonts.css',
-					array(),
-					filemtime( $this->upload_dir . 'fonts.css' )
-				);
-			}
-		}
-
-		/**
-		 * Adds the appropriate mime types to WordPress
-		 *
-		 * @param array $existing_mimes Mine array.
-		 *
-		 * @return array
-		 */
-		public function custom_upload_mimes( array $existing_mimes = array() ): array {
-			$existing_mimes['ttf']   = 'font/ttf';
-			$existing_mimes['otf']   = 'font/otf';
-			$existing_mimes['eot']   = 'application/vnd.ms-fontobject';
-			$existing_mimes['woff']  = 'application/font-woff';
-			$existing_mimes['woff2'] = 'application/font-woff2';
-			$existing_mimes['svg']   = 'image/svg+xml';
-			$existing_mimes['zip']   = 'application/zip';
-
-			return $existing_mimes;
-		}
-
-		/**
-		 * Gets all the fonts in the custom_fonts directory
-		 */
-		public function get_fonts() {
-			if ( empty( $this->custom_fonts ) ) {
-				$params = array(
-					'include_hidden' => false,
-					'recursive'      => true,
-				);
-
-				$fonts = Redux_Core::$filesystem->execute( 'dirlist', $this->upload_dir, $params );
-
-				if ( ! empty( $fonts ) ) {
-					foreach ( $fonts as $section ) {
-						if ( 'd' === $section['type'] && ! empty( $section['name'] ) ) {
-							if ( 'custom' === $section['name'] ) {
-								$section['name'] = esc_html__( 'Custom Fonts', 'redux-framework' );
-							}
-
-							if ( empty( $section['files'] ) ) {
-								continue;
-							}
-
-							$this->custom_fonts[ $section['name'] ] = $this->custom_fonts[ $section['name'] ] ?? array();
-
-							foreach ( $section['files'] as $font ) {
-								if ( ! empty( $font['name'] ) ) {
-									if ( empty( $font['files'] ) ) {
-										continue;
-									}
-
-									$kinds = array();
-
-									foreach ( $font['files'] as $f ) {
-										$valid = $this->check_font_name( $f );
-										if ( $valid ) {
-											$kinds[] = $valid;
-										}
-									}
-
-									$this->custom_fonts[ $section['name'] ][ $font['name'] ] = $kinds;
-								}
-							}
-						}
-					}
-				}
-			}
-		}
-
-		/**
-		 * Add custom fonts.
-		 *
-		 * @param mixed $custom_fonts Custom fonts.
-		 *
-		 * @return array
-		 */
-		public function add_custom_fonts( $custom_fonts ): array {
-			if ( empty( $custom_fonts ) ) {
-				$custom_fonts = array();
-			}
-
-			return wp_parse_args( $custom_fonts, $this->custom_fonts );
-		}
-
-		/**
-		 * Ajax used within the panel to add and process the fonts
-		 */
-		public function ajax() {
-			if ( ! current_user_can( $this->parent->args['page_permissions'] ) ) {
-				wp_die( esc_html__( 'You do not have permission to perform this action.', 'redux-framework' ), 403 );
-			}
-
-			if ( ! isset( $_POST['nonce'] ) || ! wp_verify_nonce( sanitize_key( wp_unslash( $_POST['nonce'] ) ), 'redux_custom_fonts' ) ) {
-				die( 0 );
-			}
-
-			if ( isset( $_POST['type'] ) && 'delete' === $_POST['type'] ) {
-				if ( isset( $_POST['section'] ) ) {
-					if ( esc_html__( 'Custom Fonts', 'redux-framework' ) === $_POST['section'] ) {
-						$_POST['section'] = 'custom';
-					}
-				}
-
-				try {
-					if ( isset( $_POST['section'] ) || isset( $_POST['name'] ) ) {
-						$ret = Redux_Core::$filesystem->execute( 'rmdir', $this->upload_dir . sanitize_file_name( wp_unslash( $_POST['section'] ) ) . '/' . sanitize_file_name( wp_unslash( $_POST['name'] ) ) . '/', array( 'recursive' => true ) );
-
-						if ( true === $ret ) {
-							$result = array( 'type' => 'success' );
-						} else {
-							$result = array(
-								'type' => 'error',
-								'msg'  => esc_html__( 'File system failure. Could not delete temp dir.', 'redux-framework' ),
-							);
-						}
-
-						echo wp_json_encode( $result );
-					}
-				} catch ( Exception $e ) {
-					echo wp_json_encode(
-						array(
-							'type' => 'error',
-							'msg'  => esc_html__( 'Unable to delete font file(s).', 'redux-framework' ),
-						)
-					);
-				}
-
-				die();
-			}
-
-			if ( ! isset( $_POST['title'] ) ) {
-				$_POST['title'] = '';
-			}
-
-			if ( ! isset( $_POST['filename'] ) ) {
-				$_POST['filename'] = '';
-			}
-
-			$this->font_folder   = sanitize_file_name( wp_unslash( $_POST['title'] ) );
-			$this->font_filename = sanitize_file_name( wp_unslash( $_POST['filename'] ) );
-
-			if ( ! empty( $_POST['attachment_id'] ) ) {
-				if ( isset( $_POST['title'] ) || isset( $_POST['mime'] ) ) {
-					$msg = $this->process_web_font( sanitize_key( wp_unslash( $_POST['attachment_id'] ) ), sanitize_text_field( wp_unslash( $_POST['mime'] ) ) );
-
-					if ( empty( $msg ) ) {
-						$msg = '';
-					}
-
-					$result = array(
-						'type' => 'success',
-						'msg'  => $msg,
-					);
-
-					echo wp_json_encode( $result );
-				}
-			}
-
-			die();
-		}
-
-		/**
-		 * Get only valid files. Ensure everything is proper for processing.
-		 *
-		 * @param string $path Path.
-		 *
-		 * @return array
-		 */
-		public function get_valid_files( string $path ): array {
-			$output = array();
-			$path   = trailingslashit( $path );
-
-			$params = array(
-				'include_hidden' => false,
-				'recursive'      => true,
-			);
-
-			$files = Redux_Core::$filesystem->execute( 'dirlist', $path, $params );
-
-			foreach ( $files as $file ) {
-				if ( 'd' === $file['type'] ) {
-					$output = array_merge( $output, $this->get_valid_files( $path . $file['name'] ) );
-				} elseif ( 'f' === $file['type'] ) {
-					$valid = $this->check_font_name( $file );
-					if ( $valid ) {
-						$output[ $valid ] = trailingslashit( $path ) . $file['name'];
-					}
-				}
-			}
-
-			return $output;
-		}
-
-		/**
-		 * Take a valid web font and process the missing pieces.
-		 *
-		 * @param string $attachment_id ID.
-		 * @param string $mime_type     Mine type.
-		 */
-		public function process_web_font( string $attachment_id, string $mime_type ) {
-			// phpcs:ignore WordPress.Security.NonceVerification
-			if ( ! isset( $_POST['conversion'] ) ) {
-				$_POST['conversion'] = 'false';
-			}
-
-			// phpcs:ignore WordPress.Security.NonceVerification
-			$conversion = sanitize_text_field( wp_unslash( $_POST['conversion'] ) );
-
-			$missing = array();
-
-			$complete = array(
-				'ttf',
-				'woff',
-				'woff2',
-				'eot',
-				'svg',
-				'otf',
-			);
-
-			$subtype = explode( '/', $mime_type );
-			$subtype = trim( max( $subtype ) );
-
-			if ( ! is_dir( $this->upload_dir ) ) {
-				Redux_Core::$filesystem->execute( 'mkdir', $this->upload_dir );
-			}
-
-			if ( ! is_dir( $this->upload_dir . $this->subfolder ) ) {
-				Redux_Core::$filesystem->execute( 'mkdir', $this->upload_dir . $this->subfolder );
-			}
-
-			$temp                = $this->upload_dir . 'temp';
-			$this->selected_file = get_attached_file( $attachment_id );
-
-			if ( empty( $this->selected_file ) ) {
-				echo wp_json_encode(
-					array(
-						'type' => 'error',
-						'msg'  => esc_html__( 'Attachment does not exist.', 'redux-framework' ),
-					)
-				);
-
-				die();
-			}
-
-			$filename = explode( '/', $this->selected_file );
-
-			$filename = $filename[ ( count( $filename ) - 1 ) ];
-
-			$fontname = ucfirst(
-				str_replace(
-					array(
-						'.zip',
-						'.ttf',
-						'.woff',
-						'.woff2',
-						'.eot',
-						'.svg',
-						'.otf',
-					),
-					'',
-					strtolower( $filename )
-				)
-			);
-
-			if ( empty( $this->font_folder ) ) {
-				$this->font_folder = $fontname;
-			}
-
-			$ret = array();
-
-			if ( ! is_dir( $temp ) ) {
-				Redux_Core::$filesystem->execute( 'mkdir', $temp );
-			}
-
-			if ( 'zip' === $subtype ) {
-				$unzipfile = unzip_file( $this->selected_file, $temp );
-
-				if ( is_wp_error( $unzipfile ) ) {
-					echo wp_json_encode(
-						array(
-							'type' => 'error',
-							'msg'  => $unzipfile->get_error_message() . '<br><br>' . esc_html__( 'Unzipping failed.', 'redux-framework' ),
-						)
-					);
-
-					die();
-				}
-
-				$output = $this->get_valid_files( $temp );
-
-				if ( ! empty( $output ) ) {
-					foreach ( $complete as $test ) {
-						if ( ! isset( $output[ $test ] ) ) {
-							$missing[] = $test;
-						}
-					}
-
-					if ( ! is_dir( $this->upload_dir . $this->subfolder . $this->font_folder . '/' ) ) {
-						Redux_Core::$filesystem->execute( 'mkdir', $this->upload_dir . $this->subfolder . $this->font_folder . '/' );
-					}
-
-					foreach ( $output as $key => $value ) {
-						$param_array = array(
-							'destination' => $this->upload_dir . $this->subfolder . $this->font_folder . '/' . $fontname . '.' . $key,
-							'overwrite'   => true,
-							'chmod'       => 755,
-						);
-
-						Redux_Core::$filesystem->execute( 'copy', $value, $param_array );
-					}
-
-					if ( true === $this->can_convert && 'true' === $conversion ) {
-						$ret = $this->get_missing_files( $fontname, $missing, $output );
-					}
-				}
-
-				Redux_Core::$filesystem->execute( 'rmdir', $temp, array( 'recursive' => true ) );
-
-				$this->generate_css();
-
-				wp_delete_attachment( $attachment_id, true );
-			} elseif ( 'svg+xml' === $subtype || 'vnd.ms-fontobject' === $subtype || 'x-font-ttf' === $subtype || 'ttf' === $subtype || 'otf' === $subtype || 'font-woff' === $subtype || 'font-woff2' === $subtype || 'application-octet-stream' === $subtype || 'octet-stream' === $subtype ) {
-				foreach ( $complete as $test ) {
-					if ( $subtype !== $test ) {
-						if ( ! isset( $output[ $test ] ) ) {
-							$missing[] = $test;
-						}
-					}
-				}
-
-				if ( ! is_dir( $this->upload_dir . $this->subfolder . $this->font_folder . '/' ) ) {
-					Redux_Core::$filesystem->execute( 'mkdir', $this->upload_dir . $this->subfolder . $this->font_folder . '/' );
-				}
-
-				$output = array( $subtype => $this->selected_file );
-
-				if ( true === $this->can_convert && 'true' === $conversion ) {
-					$ret = $this->get_missing_files( $fontname, $missing, $output );
-
-					if ( false === $ret ) {
-						if ( false === $this->convert_local_font() ) {
-							echo wp_json_encode(
-								array(
-									'type' => 'error',
-									'msg'  => esc_html__( 'File permission error. Local file could not be installed.', 'redux-framework' ) . ' ' . $subtype,
-								)
-							);
-
-							die;
-						}
-					}
-				} elseif ( false === $this->convert_local_font() ) {
-						echo wp_json_encode(
-							array(
-								'type' => 'error',
-								'msg'  => esc_html__( 'File permission error. Local file could not be installed.', 'redux-framework' ) . ' ' . $subtype,
-							)
-						);
-
-						die;
-				}
-
-				Redux_Core::$filesystem->execute( 'rmdir', $temp, array( 'recursive' => true ) );
-
-				$this->generate_css();
-
-				wp_delete_attachment( $attachment_id, true );
-			} else {
-				echo wp_json_encode(
-					array(
-						'type' => 'error',
-						'msg'  => esc_html__( 'File type not recognized.', 'redux-framework' ) . ' ' . $subtype,
-					)
-				);
-
-				die();
-			}
-
-			if ( is_array( $ret ) && ! empty( $ret ) ) {
-				$msg = esc_html__( 'Unidentified error.', 'redux-framework' );
-
-				if ( isset( $ret['msg'] ) ) {
-					$msg = $ret['msg'];
-				}
-
-				return $msg;
-			}
-
-			return '';
-		}
-
-		/**
-		 * Install selected file into Custom Fonts.
-		 *
-		 * @return bool
-		 */
-		private function convert_local_font(): bool {
-			$param_array = array(
-				'destination' => $this->upload_dir . $this->subfolder . '/' . $this->font_folder . '/' . $this->font_filename,
-				'overwrite'   => true,
-				'chmod'       => 755,
-			);
-
-			return Redux_Core::$filesystem->execute( 'copy', $this->selected_file, $param_array );
-		}
-
-		/**
-		 * Ping the WebFontOMatic API to get the missing files.
-		 *
-		 * @param string $fontname  Font name.
-		 * @param array  $missing   Missing.
-		 * @param array  $output    Output.
-		 */
-		private function get_missing_files( string $fontname, array $missing, array $output ) {
-			if ( ! empty( $this->font_folder ) && ! empty( $missing ) ) {
-				$temp = $this->upload_dir . 'temp';
-
-				$font_ext = pathinfo( $this->font_filename, PATHINFO_EXTENSION );
-
-				$unsupported = array( 'eot', 'woff', 'woff2' );
-
-				// Find a file to convert from.
-				foreach ( $output as $key => $value ) {
-					if ( 'eot' === $key ) {
-						continue;
-					} else {
-						$main = $key;
-						break;
-					}
-				}
-
-				if ( ! isset( $main ) ) {
-					echo wp_json_encode(
-						array(
-							'type' => 'error',
-							'msg'  => esc_html__( 'No valid font file was found.', 'redux-framework' ),
-						)
-					);
-
-					Redux_Core::$filesystem->execute( 'rmdir', $temp, array( 'recursive' => true ) );
-					Redux_Core::$filesystem->execute( 'rmdir', $this->upload_dir . $this->subfolder . $this->font_folder . '/', array( 'recursive' => true ) );
-
-					die();
-				}
-
-				update_option( 'redux_custom_font_current', $this->font_folder . '.zip' );
-
-				$boundary = wp_generate_password( 24 );
-
-				$headers = array(
-					'content-type' => 'multipart/form-data; boundary=' . $boundary,
-					'user-agent'   => 'redux-custom-fonts-' . self::$version . ' using ' . wp_get_theme(),
-				);
-
-				$payload  = '--' . $boundary;
-				$payload .= "\r\n";
-				$payload .= 'Content-Disposition: form-data; name="md5"' . "\r\n\r\n";
-				$payload .= md5( 'redux_custom_font' );
-				$payload .= "\r\n";
-
-				if ( $output[ $main ] ) {
-					$payload .= '--' . $boundary;
-					$payload .= "\r\n";
-					$payload .= 'Content-Disposition: form-data; name="convert"; filename="' . basename( $output[ $main ] ) . '"' . "\r\n";
-					$payload .= "\r\n";
-					$payload .= Redux_Core::$filesystem->execute( 'get_contents', $output[ $main ] );
-					$payload .= "\r\n";
-				}
-
-				$payload .= '--' . $boundary . '--';
-
-				$args = array(
-					'headers'    => $headers,
-					'body'       => $payload,
-					'user-agent' => $headers['user-agent'],
-					'timeout'    => 300,
-					'sslverify'  => true,
-				);
-
-				// phpcs:disable WordPress.NamingConventions.ValidHookName
-				$api_url = apply_filters( 'redux/' . $this->parent->args['opt_name'] . '/extensions/custom_fonts/api_url', 'https://redux.io/fonts' );
-
-				$response = wp_remote_post( $api_url, $args );
-
-				if ( is_wp_error( $response ) ) {
-					return array(
-						'type' => 'error',
-						'msg'  => $response->get_error_message() . '<br><br>' . esc_html__( 'Your font could not be converted at this time. Please try again later.', 'redux-framework' ),
-					);
-				} elseif ( isset( $response['body'] ) ) {
-					if ( null !== json_decode( $response['body'] ) ) {
-						return json_decode( $response['body'], true );
-					}
-				}
-
-				$param_array = array(
-					'content'   => $response['body'],
-					'overwrite' => true,
-					'chmod'     => FS_CHMOD_FILE,
-				);
-
-				$zip_file = $temp . DIRECTORY_SEPARATOR . $fontname . '.zip';
-
-				Redux_Core::$filesystem->execute( 'put_contents', $zip_file, $param_array );
-
-				if ( 0 === filesize( $zip_file ) ) {
-					return false;
-				}
-
-				$zip = unzip_file( $zip_file, $temp );
-
-				if ( ! is_wp_error( $zip ) ) {
-					$params = array(
-						'include_hidden' => false,
-						'recursive'      => false,
-					);
-
-					$files = Redux_Core::$filesystem->execute( 'dirlist', $temp . DIRECTORY_SEPARATOR . 'fonts' . DIRECTORY_SEPARATOR, $params );
-
-					foreach ( $files as $file ) {
-						$param_array = array(
-							'destination' => $this->upload_dir . $this->subfolder . $this->font_folder . DIRECTORY_SEPARATOR . sanitize_file_name( $file['name'] ),
-							'overwrite'   => true,
-							'chmod'       => 755,
-						);
-
-						Redux_Core::$filesystem->execute( 'move', $temp . DIRECTORY_SEPARATOR . 'fonts' . DIRECTORY_SEPARATOR . ( $file['name'] ), $param_array );
-					}
-				} else {
-					$path_parts = pathinfo( $output[ $main ] );
-
-					$param_array = array(
-						'destination' => $this->upload_dir . $this->subfolder . $this->font_folder . DIRECTORY_SEPARATOR . sanitize_file_name( $path_parts['basename'] ),
-						'overwrite'   => true,
-						'chmod'       => 755,
-					);
-
-					Redux_Core::$filesystem->execute( 'move', $output[ $main ], $param_array );
-
-					if ( in_array( $font_ext, $unsupported, true ) ) {
-						return array(
-							'type' => 'error',
-							// translators: %s = font extension.
-							'msg'  => $zip->get_error_message() . '<br><br>' . sprintf( esc_html__( 'The font converter does not support %s fonts.', 'redux-framework' ), $font_ext ),
-						);
-					} else {
-						return array(
-							'type' => 'error',
-							'msg'  => $zip->get_error_message() . '<br><br>' . esc_html__( 'ZIP error. Your font could not be converted at this time. Please try again later.', 'redux-framework' ),
-						);
-					}
-				}
-
-				delete_option( 'redux_custom_font_current' );
-			}
-
-			return true;
-		}
-
-		/**
-		 * Check if the file name is a valid font file.
-		 *
-		 * @param array $file File.
-		 *
-		 * @return bool|string
-		 */
-		private function check_font_name( array $file ) {
-			if ( '.woff' === strtolower( substr( $file['name'], - 5 ) ) ) {
-				return 'woff';
-			}
-
-			if ( '.woff2' === strtolower( substr( $file['name'], - 6 ) ) ) {
-				return 'woff2';
-			}
-
-			$sub = strtolower( substr( $file['name'], - 4 ) );
-
-			if ( '.ttf' === $sub ) {
-				return 'ttf';
-			}
-
-			if ( '.eot' === $sub ) {
-				return 'eot';
-			}
-
-			if ( '.svg' === $sub ) {
-				return 'svg';
-			}
-
-			if ( '.otf' === $sub ) {
-				return 'otf';
-			}
-
-			return false;
-		}
-
-		/**
-		 * Generate a new custom CSS file for enqueuing on the frontend and backend.
-		 */
-		private function generate_css() {
-			$params = array(
-				'include_hidden' => false,
-				'recursive'      => true,
-			);
-
-			$fonts = Redux_Core::$filesystem->execute( 'dirlist', $this->upload_dir . 'custom' . DIRECTORY_SEPARATOR, $params );
-
-			if ( empty( $fonts ) || ! is_array( $fonts ) ) {
-				return;
-			}
-
-			foreach ( $fonts as $font ) {
-				if ( 'd' === $font['type'] ) {
-					break;
-				}
-
-				if ( file_exists( $this->upload_dir . 'fonts.css' ) ) {
-					Redux_Core::$filesystem->execute( 'delete', $this->upload_dir . 'fonts.css' );
-				}
-
-				return;
-			}
-
-			$css = '';
-
-			foreach ( $fonts as $font ) {
-				if ( 'd' === $font['type'] ) {
-					$css .= $this->generate_font_css( $font['name'], $this->upload_dir . 'custom' . DIRECTORY_SEPARATOR );
-				}
-			}
-
-			if ( '' !== $css ) {
-				$param_array = array(
-					'content' => $css,
-					'chmod'   => FS_CHMOD_FILE,
-				);
-
-				Redux_Core::$filesystem->execute( 'put_contents', $this->upload_dir . 'fonts.css', $param_array );
-			}
-		}
-
-		/**
-		 * Process to actually construct the custom font css file.
-		 *
-		 * @param string $name Name.
-		 * @param string $dir  Directory.
-		 *
-		 * @return string
-		 */
-		private function generate_font_css( string $name, string $dir ): ?string {
-			$path = $dir . $name;
-
-			$params = array(
-				'include_hidden' => false,
-				'recursive'      => true,
-			);
-
-			$files = Redux_Core::$filesystem->execute( 'dirlist', $path, $params );
-
-			if ( empty( $files ) ) {
-				return null;
-			}
-
-			$output = array();
-
-			foreach ( $files as $file ) {
-				$output[ $this->check_font_name( $file ) ] = $file['name'];
-			}
-
-			$css = '@font-face {';
-
-			$css .= 'font-family:"' . $name . '";';
-
-			$src = array();
-
-			if ( isset( $output['eot'] ) ) {
-				$src[] = "url('{$this->upload_url}custom/$name/{$output['eot']}?#iefix') format('embedded-opentype')";
-			}
-
-			if ( isset( $output['woff'] ) ) {
-				$src[] = "url('{$this->upload_url}custom/$name/{$output['woff']}') format('woff')";
-			}
-
-			if ( isset( $output['woff2'] ) ) {
-				$src[] = "url('{$this->upload_url}custom/$name/{$output['woff2']}') format('woff2')";
-			}
-
-			if ( isset( $output['ttf'] ) ) {
-				$src[] = "url('{$this->upload_url}custom/$name/{$output['ttf']}') format('truetype')";
-			}
-
-			if ( isset( $output['svg'] ) ) {
-				$src[] = "url('{$this->upload_url}custom/$name/{$output['svg']}#svg$name') format('svg')";
-			}
-
-			if ( ! empty( $src ) ) {
-				$css .= 'src:' . implode( ', ', $src ) . ';';
-			}
-
-			// Replace font weight and style with sub-sets.
-			$css .= 'font-weight: normal;';
-
-			$css .= 'font-style: normal;';
-
-			$css .= '}';
-
-			return $css;
-		}
-
-		/**
-		 * Custom function for filtering the section array.
-		 * Good for child themes to override or add to the sections.
-		 * Simply include this function in the child themes functions.php file.
-		 * NOTE: the defined constants for URLs and directories will NOT be available at this point in a child theme,
-		 * so you must use get_template_directory_uri() if you want to use any of the built-in icons
-		 */
-		public function add_section() {
-			if ( ! isset( $this->parent->fontControl ) ) {
-				$this->parent->sections[] = array(
-					'title'  => esc_html__( 'Font Control', 'redux-framework' ),
-					'desc'   => '<p class="description"></p>',
-					'icon'   => 'el-icon-font',
-					'id'     => 'redux_dynamic_font_control',
-					// Leave this as a blank section, no options just some intro text set above.
-					'fields' => array(),
-				);
-
-				for ( $i = count( $this->parent->sections ); $i >= 1; $i-- ) {
-					if ( isset( $this->parent->sections[ $i ] ) && isset( $this->parent->sections[ $i ]['title'] ) && esc_html__( 'Font Control', 'redux-framework' ) === $this->parent->sections[ $i ]['title'] ) {
-						$this->parent->fontControl                                        = $i;
-						$this->parent->sections[ $this->parent->fontControl ]['fields'][] = array(
-							'id'   => 'redux_font_control',
-							'type' => 'custom_fonts',
-						);
-
-						break;
-					}
-				}
-			}
-		}
-	}
-
-	class_alias( Redux_Extension_Custom_Fonts::class, 'ReduxFramework_Extension_custom_fonts' );
+    /**
+     * Class Redux_Extension_Custom_Fonts
+     */
+    class Redux_Extension_Custom_Fonts extends Redux_Extension_Abstract {
+
+        /**
+         * Extension version.
+         *
+         * @var string
+         */
+        public static $version = '4.5.10';
+
+        /**
+         * Extension friendly name.
+         *
+         * @var string
+         */
+        public string $extension_name = 'Custom Fonts';
+        /**
+         * Class instance.
+         *
+         * @var object|null
+         */
+        public static ?object $instance;
+
+        /**
+         * Custom fonts array.
+         *
+         * @var array|null
+         */
+        public ?array $custom_fonts = array();
+
+        /**
+         * WordPress upload directory.
+         *
+         * @var string|null
+         */
+        public ?string $upload_dir = '';
+
+        /**
+         * WordPress upload URI.
+         *
+         * @var string|null
+         */
+        public ?string $upload_url = '';
+
+        /**
+         * Subfolder name.
+         *
+         * @var string
+         */
+        public string $subfolder = 'custom/';
+
+        /**
+         * Font folder.
+         *
+         * @var string|null
+         */
+        public ?string $font_folder = '';
+
+        /**
+         * Font Filename.
+         *
+         * @var string|null
+         */
+        public ?string $font_filename = '';
+
+        /**
+         * File selected in media upload.
+         *
+         * @var string|null
+         */
+        public ?string $selected_file = '';
+
+        /**
+         * Is font conversation service available?
+         *
+         * @var bool
+         */
+        private bool $can_convert;
+
+        /**
+         * Class Constructor. Defines the args for the extensions class
+         *
+         * @param ReduxFramework $redux ReduxFramework pointer.
+         *
+         * @return      void
+         * @since       1.0.0
+         * @access      public
+         */
+        public function __construct( $redux ) {
+            if ( false === $redux->args['custom_fonts'] ) {
+                return;
+            }
+
+            parent::__construct( $redux, __FILE__ );
+
+            self::$instance = parent::get_instance();
+
+            $this->add_field( 'custom_fonts' );
+
+            $this->upload_dir = Redux_Core::$upload_dir . 'custom-fonts/';
+            $this->upload_url = Redux_Core::$upload_url . 'custom-fonts/';
+
+            if ( ! is_dir( $this->upload_dir ) ) {
+                Redux_Core::$filesystem->execute( 'mkdir', $this->upload_dir );
+            }
+
+            if ( ! is_dir( $this->upload_dir . '/custom' ) ) {
+                Redux_Core::$filesystem->execute( 'mkdir', $this->upload_dir . '/custom' );
+            }
+
+            $this->get_fonts();
+
+            if ( file_exists( $this->upload_dir . 'fonts.css' ) ) {
+                if ( filemtime( $this->upload_dir . 'custom' ) > ( filemtime( $this->upload_dir . 'fonts.css' ) + 10 ) ) {
+                    $this->generate_css();
+                }
+            } else {
+                $this->generate_css();
+            }
+
+            add_action( 'wp_ajax_redux_custom_fonts', array( $this, 'ajax' ) );
+            add_action( 'wp_ajax_redux_custom_font_timer', array( $this, 'timer' ) );
+
+            add_filter( "redux/{$this->parent->args['opt_name']}/field/typography/custom_fonts", array( $this, 'add_custom_fonts' ) );
+
+            // phpcs:disable
+            // $this->is_field = Redux_Helpers::is_field_in_use( $parent, 'custom_fonts' );
+
+            // if ( ! $this->is_field ) {
+            // 	$this->add_section();
+            // }
+
+            add_filter( "redux/options/{$this->parent->args['opt_name']}/section/redux_dynamic_font_control", array( $this, 'remove_dynamic_section' ) ); // phpcs:ignore WordPress.NamingConventions.ValidHookName
+            add_filter( 'upload_mimes', array( $this, 'custom_upload_mimes' ) );
+            add_action( 'wp_head', array( $this, 'enqueue_output' ), 150 );
+            add_filter( 'tiny_mce_before_init', array( $this, 'extend_tinymce_dropdown' ) );
+
+            $this->can_convert = true; // has_filter( 'redux/' . $this->parent->args['opt_name'] . '/extensions/custom_fonts/api_url' );
+            // phpcs:enable
+        }
+
+        /**
+         * Timer.
+         */
+        public function timer() {
+            if ( ! current_user_can( $this->parent->args['page_permissions'] ) ) {
+                wp_die( esc_html__( 'You do not have permission to perform this action.', 'redux-framework' ), 403 );
+            }
+
+            if ( ! isset( $_POST['nonce'] ) || ! wp_verify_nonce( sanitize_key( wp_unslash( $_POST['nonce'] ) ), 'redux_custom_fonts' ) ) {
+                die( 0 );
+            }
+
+            $name = get_option( 'redux_custom_font_current' );
+
+            if ( ! empty( $name ) ) {
+                echo esc_html( $name );
+            }
+
+            die();
+        }
+
+        /**
+         * Remove the dynamically added section if the field was used elsewhere
+         *
+         * @param array $section Section array.
+         *
+         * @return array
+         * @since  Redux_Framework 3.1.1
+         */
+        public function remove_dynamic_section( array $section ): array {
+            if ( isset( $this->parent->field_types['custom_fonts'] ) ) {
+                $section = array();
+            }
+
+            return $section;
+        }
+
+        /**
+         * Adds FontMeister fonts to the TinyMCE drop-down.
+         * Typekit's fonts don't render properly in the drop-down and in the editor,
+         * because Typekit needs JS and TinyMCE doesn't support that.
+         *
+         * @param array $opt Option array.
+         *
+         * @return array
+         */
+        public function extend_tinymce_dropdown( array $opt ): array {
+            if ( ! is_admin() ) {
+                return $opt;
+            }
+
+            if ( file_exists( $this->upload_dir . 'fonts.css' ) ) {
+                $theme_advanced_fonts = $opt['font_formats'] ?? 'Andale Mono=andale mono,times;Arial=arial,helvetica,sans-serif;Arial Black=arial black,avant garde;Book Antiqua=book antiqua,palatino;Comic Sans MS=comic sans ms,sans-serif;Courier New=courier new,courier;Georgia=georgia,palatino;Helvetica=helvetica;Impact=impact,chicago;Symbol=symbol;Tahoma=tahoma,arial,helvetica,sans-serif;Terminal=terminal,monaco;Times New Roman=times new roman,times;Trebuchet MS=trebuchet ms,geneva;Verdana=verdana,geneva;Webdings=webdings;Wingdings=wingdings,zapf dingbats';
+                $custom_fonts         = '';
+
+                $stylesheet = $this->upload_url . 'fonts.css';
+
+                if ( empty( $opt['content_css'] ) ) {
+                    $opt['content_css'] = $stylesheet;
+                } else {
+                    $opt['content_css'] = $opt['content_css'] . ',' . $stylesheet;
+                }
+
+                foreach ( $this->custom_fonts as $arr ) {
+                    foreach ( $arr as $font => $pieces ) {
+                        $custom_fonts .= ';' . $font . '=' . $font;
+                    }
+                }
+
+                $opt['font_formats'] = $theme_advanced_fonts . $custom_fonts;
+            }
+
+            return $opt;
+        }
+
+
+        /**
+         * Function to enqueue the custom fonts css
+         */
+        public function enqueue_output() {
+            if ( file_exists( $this->upload_dir . 'fonts.css' ) ) {
+                wp_enqueue_style(
+                    'redux-custom-fonts',
+                    $this->upload_url . 'fonts.css',
+                    array(),
+                    filemtime( $this->upload_dir . 'fonts.css' )
+                );
+            }
+        }
+
+        /**
+         * Adds the appropriate mime types to WordPress
+         *
+         * @param array $existing_mimes Mine array.
+         *
+         * @return array
+         */
+        public function custom_upload_mimes( array $existing_mimes = array() ): array {
+            $existing_mimes['ttf']   = 'font/ttf';
+            $existing_mimes['otf']   = 'font/otf';
+            $existing_mimes['eot']   = 'application/vnd.ms-fontobject';
+            $existing_mimes['woff']  = 'application/font-woff';
+            $existing_mimes['woff2'] = 'application/font-woff2';
+            $existing_mimes['svg']   = 'image/svg+xml';
+            $existing_mimes['zip']   = 'application/zip';
+
+            return $existing_mimes;
+        }
+
+        /**
+         * Gets all the fonts in the custom_fonts directory
+         */
+        public function get_fonts() {
+            if ( empty( $this->custom_fonts ) ) {
+                $params = array(
+                    'include_hidden' => false,
+                    'recursive'      => true,
+                );
+
+                $fonts = Redux_Core::$filesystem->execute( 'dirlist', $this->upload_dir, $params );
+
+                if ( ! empty( $fonts ) ) {
+                    foreach ( $fonts as $section ) {
+                        if ( 'd' === $section['type'] && ! empty( $section['name'] ) ) {
+                            if ( 'custom' === $section['name'] ) {
+                                $section['name'] = esc_html__( 'Custom Fonts', 'redux-framework' );
+                            }
+
+                            if ( empty( $section['files'] ) ) {
+                                continue;
+                            }
+
+                            $this->custom_fonts[ $section['name'] ] = $this->custom_fonts[ $section['name'] ] ?? array();
+
+                            foreach ( $section['files'] as $font ) {
+                                if ( ! empty( $font['name'] ) ) {
+                                    if ( empty( $font['files'] ) ) {
+                                        continue;
+                                    }
+
+                                    $kinds = array();
+
+                                    foreach ( $font['files'] as $f ) {
+                                        $valid = $this->check_font_name( $f );
+                                        if ( $valid ) {
+                                            $kinds[] = $valid;
+                                        }
+                                    }
+
+                                    $this->custom_fonts[ $section['name'] ][ $font['name'] ] = $kinds;
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+        }
+
+        /**
+         * Add custom fonts.
+         *
+         * @param mixed $custom_fonts Custom fonts.
+         *
+         * @return array
+         */
+        public function add_custom_fonts( $custom_fonts ): array {
+            if ( empty( $custom_fonts ) ) {
+                $custom_fonts = array();
+            }
+
+            return wp_parse_args( $custom_fonts, $this->custom_fonts );
+        }
+
+        /**
+         * Ajax used within the panel to add and process the fonts
+         */
+        public function ajax() {
+            if ( ! current_user_can( $this->parent->args['page_permissions'] ) ) {
+                wp_die( esc_html__( 'You do not have permission to perform this action.', 'redux-framework' ), 403 );
+            }
+
+            if ( ! isset( $_POST['nonce'] ) || ! wp_verify_nonce( sanitize_key( wp_unslash( $_POST['nonce'] ) ), 'redux_custom_fonts' ) ) {
+                die( 0 );
+            }
+
+            if ( isset( $_POST['type'] ) && 'delete' === $_POST['type'] ) {
+                if ( isset( $_POST['section'] ) ) {
+                    if ( esc_html__( 'Custom Fonts', 'redux-framework' ) === $_POST['section'] ) {
+                        $_POST['section'] = 'custom';
+                    }
+                }
+
+                try {
+                    if ( isset( $_POST['section'] ) || isset( $_POST['name'] ) ) {
+                        $ret = Redux_Core::$filesystem->execute( 'rmdir', $this->upload_dir . sanitize_file_name( wp_unslash( $_POST['section'] ) ) . '/' . sanitize_file_name( wp_unslash( $_POST['name'] ) ) . '/', array( 'recursive' => true ) );
+
+                        if ( true === $ret ) {
+                            $result = array( 'type' => 'success' );
+                        } else {
+                            $result = array(
+                                'type' => 'error',
+                                'msg'  => esc_html__( 'File system failure. Could not delete temp dir.', 'redux-framework' ),
+                            );
+                        }
+
+                        echo wp_json_encode( $result );
+                    }
+                } catch ( Exception $e ) {
+                    echo wp_json_encode(
+                        array(
+                            'type' => 'error',
+                            'msg'  => esc_html__( 'Unable to delete font file(s).', 'redux-framework' ),
+                        )
+                    );
+                }
+
+                die();
+            }
+
+            if ( ! isset( $_POST['title'] ) ) {
+                $_POST['title'] = '';
+            }
+
+            if ( ! isset( $_POST['filename'] ) ) {
+                $_POST['filename'] = '';
+            }
+
+            $this->font_folder   = sanitize_file_name( wp_unslash( $_POST['title'] ) );
+            $this->font_filename = sanitize_file_name( wp_unslash( $_POST['filename'] ) );
+
+            if ( ! empty( $_POST['attachment_id'] ) ) {
+                if ( isset( $_POST['title'] ) || isset( $_POST['mime'] ) ) {
+                    $msg = $this->process_web_font( sanitize_key( wp_unslash( $_POST['attachment_id'] ) ), sanitize_text_field( wp_unslash( $_POST['mime'] ) ) );
+
+                    if ( empty( $msg ) ) {
+                        $msg = '';
+                    }
+
+                    $result = array(
+                        'type' => 'success',
+                        'msg'  => $msg,
+                    );
+
+                    echo wp_json_encode( $result );
+                }
+            }
+
+            die();
+        }
+
+        /**
+         * Get only valid files. Ensure everything is proper for processing.
+         *
+         * @param string $path Path.
+         *
+         * @return array
+         */
+        public function get_valid_files( string $path ): array {
+            $output = array();
+            $path   = trailingslashit( $path );
+
+            $params = array(
+                'include_hidden' => false,
+                'recursive'      => true,
+            );
+
+            $files = Redux_Core::$filesystem->execute( 'dirlist', $path, $params );
+
+            foreach ( $files as $file ) {
+                if ( 'd' === $file['type'] ) {
+                    $output = array_merge( $output, $this->get_valid_files( $path . $file['name'] ) );
+                } elseif ( 'f' === $file['type'] ) {
+                    $valid = $this->check_font_name( $file );
+                    if ( $valid ) {
+                        $output[ $valid ] = trailingslashit( $path ) . $file['name'];
+                    }
+                }
+            }
+
+            return $output;
+        }
+
+        /**
+         * Take a valid web font and process the missing pieces.
+         *
+         * @param string $attachment_id ID.
+         * @param string $mime_type     Mine type.
+         */
+        public function process_web_font( string $attachment_id, string $mime_type ) {
+            // phpcs:ignore WordPress.Security.NonceVerification
+            if ( ! isset( $_POST['conversion'] ) ) {
+                $_POST['conversion'] = 'false';
+            }
+
+            // phpcs:ignore WordPress.Security.NonceVerification
+            $conversion = sanitize_text_field( wp_unslash( $_POST['conversion'] ) );
+
+            $missing = array();
+
+            $complete = array(
+                'ttf',
+                'woff',
+                'woff2',
+                'eot',
+                'svg',
+                'otf',
+            );
+
+            $subtype = explode( '/', $mime_type );
+            $subtype = trim( max( $subtype ) );
+
+            if ( ! is_dir( $this->upload_dir ) ) {
+                Redux_Core::$filesystem->execute( 'mkdir', $this->upload_dir );
+            }
+
+            if ( ! is_dir( $this->upload_dir . $this->subfolder ) ) {
+                Redux_Core::$filesystem->execute( 'mkdir', $this->upload_dir . $this->subfolder );
+            }
+
+            $temp                = $this->upload_dir . 'temp';
+            $this->selected_file = get_attached_file( $attachment_id );
+
+            if ( empty( $this->selected_file ) ) {
+                echo wp_json_encode(
+                    array(
+                        'type' => 'error',
+                        'msg'  => esc_html__( 'Attachment does not exist.', 'redux-framework' ),
+                    )
+                );
+
+                die();
+            }
+
+            $filename = explode( '/', $this->selected_file );
+
+            $filename = $filename[ ( count( $filename ) - 1 ) ];
+
+            $fontname = ucfirst(
+                str_replace(
+                    array(
+                        '.zip',
+                        '.ttf',
+                        '.woff',
+                        '.woff2',
+                        '.eot',
+                        '.svg',
+                        '.otf',
+                    ),
+                    '',
+                    strtolower( $filename )
+                )
+            );
+
+            if ( empty( $this->font_folder ) ) {
+                $this->font_folder = $fontname;
+            }
+
+            $ret = array();
+
+            if ( ! is_dir( $temp ) ) {
+                Redux_Core::$filesystem->execute( 'mkdir', $temp );
+            }
+
+            if ( 'zip' === $subtype ) {
+                $unzipfile = unzip_file( $this->selected_file, $temp );
+
+                if ( is_wp_error( $unzipfile ) ) {
+                    echo wp_json_encode(
+                        array(
+                            'type' => 'error',
+                            'msg'  => $unzipfile->get_error_message() . '<br><br>' . esc_html__( 'Unzipping failed.', 'redux-framework' ),
+                        )
+                    );
+
+                    die();
+                }
+
+                $output = $this->get_valid_files( $temp );
+
+                if ( ! empty( $output ) ) {
+                    foreach ( $complete as $test ) {
+                        if ( ! isset( $output[ $test ] ) ) {
+                            $missing[] = $test;
+                        }
+                    }
+
+                    if ( ! is_dir( $this->upload_dir . $this->subfolder . $this->font_folder . '/' ) ) {
+                        Redux_Core::$filesystem->execute( 'mkdir', $this->upload_dir . $this->subfolder . $this->font_folder . '/' );
+                    }
+
+                    foreach ( $output as $key => $value ) {
+                        $param_array = array(
+                            'destination' => $this->upload_dir . $this->subfolder . $this->font_folder . '/' . $fontname . '.' . $key,
+                            'overwrite'   => true,
+                            'chmod'       => 755,
+                        );
+
+                        Redux_Core::$filesystem->execute( 'copy', $value, $param_array );
+                    }
+
+                    if ( true === $this->can_convert && 'true' === $conversion ) {
+                        $ret = $this->get_missing_files( $fontname, $missing, $output );
+                    }
+                }
+
+                Redux_Core::$filesystem->execute( 'rmdir', $temp, array( 'recursive' => true ) );
+
+                $this->generate_css();
+
+                wp_delete_attachment( $attachment_id, true );
+            } elseif ( 'svg+xml' === $subtype || 'vnd.ms-fontobject' === $subtype || 'x-font-ttf' === $subtype || 'ttf' === $subtype || 'otf' === $subtype || 'font-woff' === $subtype || 'font-woff2' === $subtype || 'application-octet-stream' === $subtype || 'octet-stream' === $subtype ) {
+                foreach ( $complete as $test ) {
+                    if ( $subtype !== $test ) {
+                        if ( ! isset( $output[ $test ] ) ) {
+                            $missing[] = $test;
+                        }
+                    }
+                }
+
+                if ( ! is_dir( $this->upload_dir . $this->subfolder . $this->font_folder . '/' ) ) {
+                    Redux_Core::$filesystem->execute( 'mkdir', $this->upload_dir . $this->subfolder . $this->font_folder . '/' );
+                }
+
+                $output = array( $subtype => $this->selected_file );
+
+                if ( true === $this->can_convert && 'true' === $conversion ) {
+                    $ret = $this->get_missing_files( $fontname, $missing, $output );
+
+                    if ( false === $ret ) {
+                        if ( false === $this->convert_local_font() ) {
+                            echo wp_json_encode(
+                                array(
+                                    'type' => 'error',
+                                    'msg'  => esc_html__( 'File permission error. Local file could not be installed.', 'redux-framework' ) . ' ' . $subtype,
+                                )
+                            );
+
+                            die;
+                        }
+                    }
+                } elseif ( false === $this->convert_local_font() ) {
+                        echo wp_json_encode(
+                            array(
+                                'type' => 'error',
+                                'msg'  => esc_html__( 'File permission error. Local file could not be installed.', 'redux-framework' ) . ' ' . $subtype,
+                            )
+                        );
+
+                        die;
+                }
+
+                Redux_Core::$filesystem->execute( 'rmdir', $temp, array( 'recursive' => true ) );
+
+                $this->generate_css();
+
+                wp_delete_attachment( $attachment_id, true );
+            } else {
+                echo wp_json_encode(
+                    array(
+                        'type' => 'error',
+                        'msg'  => esc_html__( 'File type not recognized.', 'redux-framework' ) . ' ' . $subtype,
+                    )
+                );
+
+                die();
+            }
+
+            if ( is_array( $ret ) && ! empty( $ret ) ) {
+                $msg = esc_html__( 'Unidentified error.', 'redux-framework' );
+
+                if ( isset( $ret['msg'] ) ) {
+                    $msg = $ret['msg'];
+                }
+
+                return $msg;
+            }
+
+            return '';
+        }
+
+        /**
+         * Install selected file into Custom Fonts.
+         *
+         * @return bool
+         */
+        private function convert_local_font(): bool {
+            $param_array = array(
+                'destination' => $this->upload_dir . $this->subfolder . '/' . $this->font_folder . '/' . $this->font_filename,
+                'overwrite'   => true,
+                'chmod'       => 755,
+            );
+
+            return Redux_Core::$filesystem->execute( 'copy', $this->selected_file, $param_array );
+        }
+
+        /**
+         * Ping the WebFontOMatic API to get the missing files.
+         *
+         * @param string $fontname  Font name.
+         * @param array  $missing   Missing.
+         * @param array  $output    Output.
+         */
+        private function get_missing_files( string $fontname, array $missing, array $output ) {
+            if ( ! empty( $this->font_folder ) && ! empty( $missing ) ) {
+                $temp = $this->upload_dir . 'temp';
+
+                $font_ext = pathinfo( $this->font_filename, PATHINFO_EXTENSION );
+
+                $unsupported = array( 'eot', 'woff', 'woff2' );
+
+                // Find a file to convert from.
+                foreach ( $output as $key => $value ) {
+                    if ( 'eot' === $key ) {
+                        continue;
+                    } else {
+                        $main = $key;
+                        break;
+                    }
+                }
+
+                if ( ! isset( $main ) ) {
+                    echo wp_json_encode(
+                        array(
+                            'type' => 'error',
+                            'msg'  => esc_html__( 'No valid font file was found.', 'redux-framework' ),
+                        )
+                    );
+
+                    Redux_Core::$filesystem->execute( 'rmdir', $temp, array( 'recursive' => true ) );
+                    Redux_Core::$filesystem->execute( 'rmdir', $this->upload_dir . $this->subfolder . $this->font_folder . '/', array( 'recursive' => true ) );
+
+                    die();
+                }
+
+                update_option( 'redux_custom_font_current', $this->font_folder . '.zip' );
+
+                $boundary = wp_generate_password( 24 );
+
+                $headers = array(
+                    'content-type' => 'multipart/form-data; boundary=' . $boundary,
+                    'user-agent'   => 'redux-custom-fonts-' . self::$version . ' using ' . wp_get_theme(),
+                );
+
+                $payload  = '--' . $boundary;
+                $payload .= "\r\n";
+                $payload .= 'Content-Disposition: form-data; name="md5"' . "\r\n\r\n";
+                $payload .= md5( 'redux_custom_font' );
+                $payload .= "\r\n";
+
+                if ( $output[ $main ] ) {
+                    $payload .= '--' . $boundary;
+                    $payload .= "\r\n";
+                    $payload .= 'Content-Disposition: form-data; name="convert"; filename="' . basename( $output[ $main ] ) . '"' . "\r\n";
+                    $payload .= "\r\n";
+                    $payload .= Redux_Core::$filesystem->execute( 'get_contents', $output[ $main ] );
+                    $payload .= "\r\n";
+                }
+
+                $payload .= '--' . $boundary . '--';
+
+                $args = array(
+                    'headers'    => $headers,
+                    'body'       => $payload,
+                    'user-agent' => $headers['user-agent'],
+                    'timeout'    => 300,
+                    'sslverify'  => true,
+                );
+
+                // phpcs:disable WordPress.NamingConventions.ValidHookName
+                $api_url = apply_filters( 'redux/' . $this->parent->args['opt_name'] . '/extensions/custom_fonts/api_url', 'https://redux.io/fonts' );
+
+                $response = wp_remote_post( $api_url, $args );
+
+                if ( is_wp_error( $response ) ) {
+                    return array(
+                        'type' => 'error',
+                        'msg'  => $response->get_error_message() . '<br><br>' . esc_html__( 'Your font could not be converted at this time. Please try again later.', 'redux-framework' ),
+                    );
+                } elseif ( isset( $response['body'] ) ) {
+                    if ( null !== json_decode( $response['body'] ) ) {
+                        return json_decode( $response['body'], true );
+                    }
+                }
+
+                $param_array = array(
+                    'content'   => $response['body'],
+                    'overwrite' => true,
+                    'chmod'     => FS_CHMOD_FILE,
+                );
+
+                $zip_file = $temp . DIRECTORY_SEPARATOR . $fontname . '.zip';
+
+                Redux_Core::$filesystem->execute( 'put_contents', $zip_file, $param_array );
+
+                if ( 0 === filesize( $zip_file ) ) {
+                    return false;
+                }
+
+                $zip = unzip_file( $zip_file, $temp );
+
+                if ( ! is_wp_error( $zip ) ) {
+                    $params = array(
+                        'include_hidden' => false,
+                        'recursive'      => false,
+                    );
+
+                    $files = Redux_Core::$filesystem->execute( 'dirlist', $temp . DIRECTORY_SEPARATOR . 'fonts' . DIRECTORY_SEPARATOR, $params );
+
+                    foreach ( $files as $file ) {
+                        $param_array = array(
+                            'destination' => $this->upload_dir . $this->subfolder . $this->font_folder . DIRECTORY_SEPARATOR . sanitize_file_name( $file['name'] ),
+                            'overwrite'   => true,
+                            'chmod'       => 755,
+                        );
+
+                        Redux_Core::$filesystem->execute( 'move', $temp . DIRECTORY_SEPARATOR . 'fonts' . DIRECTORY_SEPARATOR . ( $file['name'] ), $param_array );
+                    }
+                } else {
+                    $path_parts = pathinfo( $output[ $main ] );
+
+                    $param_array = array(
+                        'destination' => $this->upload_dir . $this->subfolder . $this->font_folder . DIRECTORY_SEPARATOR . sanitize_file_name( $path_parts['basename'] ),
+                        'overwrite'   => true,
+                        'chmod'       => 755,
+                    );
+
+                    Redux_Core::$filesystem->execute( 'move', $output[ $main ], $param_array );
+
+                    if ( in_array( $font_ext, $unsupported, true ) ) {
+                        return array(
+                            'type' => 'error',
+                            // translators: %s = font extension.
+                            'msg'  => $zip->get_error_message() . '<br><br>' . sprintf( esc_html__( 'The font converter does not support %s fonts.', 'redux-framework' ), $font_ext ),
+                        );
+                    } else {
+                        return array(
+                            'type' => 'error',
+                            'msg'  => $zip->get_error_message() . '<br><br>' . esc_html__( 'ZIP error. Your font could not be converted at this time. Please try again later.', 'redux-framework' ),
+                        );
+                    }
+                }
+
+                delete_option( 'redux_custom_font_current' );
+            }
+
+            return true;
+        }
+
+        /**
+         * Check if the file name is a valid font file.
+         *
+         * @param array $file File.
+         *
+         * @return bool|string
+         */
+        private function check_font_name( array $file ) {
+            if ( '.woff' === strtolower( substr( $file['name'], - 5 ) ) ) {
+                return 'woff';
+            }
+
+            if ( '.woff2' === strtolower( substr( $file['name'], - 6 ) ) ) {
+                return 'woff2';
+            }
+
+            $sub = strtolower( substr( $file['name'], - 4 ) );
+
+            if ( '.ttf' === $sub ) {
+                return 'ttf';
+            }
+
+            if ( '.eot' === $sub ) {
+                return 'eot';
+            }
+
+            if ( '.svg' === $sub ) {
+                return 'svg';
+            }
+
+            if ( '.otf' === $sub ) {
+                return 'otf';
+            }
+
+            return false;
+        }
+
+        /**
+         * Generate a new custom CSS file for enqueuing on the frontend and backend.
+         */
+        private function generate_css() {
+            $params = array(
+                'include_hidden' => false,
+                'recursive'      => true,
+            );
+
+            $fonts = Redux_Core::$filesystem->execute( 'dirlist', $this->upload_dir . 'custom' . DIRECTORY_SEPARATOR, $params );
+
+            if ( empty( $fonts ) || ! is_array( $fonts ) ) {
+                return;
+            }
+
+            foreach ( $fonts as $font ) {
+                if ( 'd' === $font['type'] ) {
+                    break;
+                }
+
+                if ( file_exists( $this->upload_dir . 'fonts.css' ) ) {
+                    Redux_Core::$filesystem->execute( 'delete', $this->upload_dir . 'fonts.css' );
+                }
+
+                return;
+            }
+
+            $css = '';
+
+            foreach ( $fonts as $font ) {
+                if ( 'd' === $font['type'] ) {
+                    $css .= $this->generate_font_css( $font['name'], $this->upload_dir . 'custom' . DIRECTORY_SEPARATOR );
+                }
+            }
+
+            if ( '' !== $css ) {
+                $param_array = array(
+                    'content' => $css,
+                    'chmod'   => FS_CHMOD_FILE,
+                );
+
+                Redux_Core::$filesystem->execute( 'put_contents', $this->upload_dir . 'fonts.css', $param_array );
+            }
+        }
+
+        /**
+         * Process to actually construct the custom font css file.
+         *
+         * @param string $name Name.
+         * @param string $dir  Directory.
+         *
+         * @return string
+         */
+        private function generate_font_css( string $name, string $dir ): ?string {
+            $path = $dir . $name;
+
+            $params = array(
+                'include_hidden' => false,
+                'recursive'      => true,
+            );
+
+            $files = Redux_Core::$filesystem->execute( 'dirlist', $path, $params );
+
+            if ( empty( $files ) ) {
+                return null;
+            }
+
+            $output = array();
+
+            foreach ( $files as $file ) {
+                $output[ $this->check_font_name( $file ) ] = $file['name'];
+            }
+
+            $css = '@font-face {';
+
+            $css .= 'font-family:"' . $name . '";';
+
+            $src = array();
+
+            if ( isset( $output['eot'] ) ) {
+                $src[] = "url('{$this->upload_url}custom/$name/{$output['eot']}?#iefix') format('embedded-opentype')";
+            }
+
+            if ( isset( $output['woff'] ) ) {
+                $src[] = "url('{$this->upload_url}custom/$name/{$output['woff']}') format('woff')";
+            }
+
+            if ( isset( $output['woff2'] ) ) {
+                $src[] = "url('{$this->upload_url}custom/$name/{$output['woff2']}') format('woff2')";
+            }
+
+            if ( isset( $output['ttf'] ) ) {
+                $src[] = "url('{$this->upload_url}custom/$name/{$output['ttf']}') format('truetype')";
+            }
+
+            if ( isset( $output['svg'] ) ) {
+                $src[] = "url('{$this->upload_url}custom/$name/{$output['svg']}#svg$name') format('svg')";
+            }
+
+            if ( ! empty( $src ) ) {
+                $css .= 'src:' . implode( ', ', $src ) . ';';
+            }
+
+            // Replace font weight and style with sub-sets.
+            $css .= 'font-weight: normal;';
+
+            $css .= 'font-style: normal;';
+
+            $css .= '}';
+
+            return $css;
+        }
+
+        /**
+         * Custom function for filtering the section array.
+         * Good for child themes to override or add to the sections.
+         * Simply include this function in the child themes functions.php file.
+         * NOTE: the defined constants for URLs and directories will NOT be available at this point in a child theme,
+         * so you must use get_template_directory_uri() if you want to use any of the built-in icons
+         */
+        public function add_section() {
+            if ( ! isset( $this->parent->fontControl ) ) {
+                $this->parent->sections[] = array(
+                    'title'  => esc_html__( 'Font Control', 'redux-framework' ),
+                    'desc'   => '<p class="description"></p>',
+                    'icon'   => 'el-icon-font',
+                    'id'     => 'redux_dynamic_font_control',
+                    // Leave this as a blank section, no options just some intro text set above.
+                    'fields' => array(),
+                );
+
+                for ( $i = count( $this->parent->sections ); $i >= 1; $i-- ) {
+                    if ( isset( $this->parent->sections[ $i ] ) && isset( $this->parent->sections[ $i ]['title'] ) && esc_html__( 'Font Control', 'redux-framework' ) === $this->parent->sections[ $i ]['title'] ) {
+                        $this->parent->fontControl                                        = $i;
+                        $this->parent->sections[ $this->parent->fontControl ]['fields'][] = array(
+                            'id'   => 'redux_font_control',
+                            'type' => 'custom_fonts',
+                        );
+
+                        break;
+                    }
+                }
+            }
+        }
+    }
+
+    class_alias( Redux_Extension_Custom_Fonts::class, 'ReduxFramework_Extension_custom_fonts' );
 }

redux-core/inc/extensions/import_export/class-redux-extension-import-export.php

Indentation +146 added lines, -146 removed lines

@@ -14,153 +14,153 @@
 // Don't duplicate me!
 if ( ! class_exists( 'Redux_Extension_Import_Export', false ) ) {
 
-	/**
-	 * Main ReduxFramework import_export extension class
-	 *
-	 * @since       3.1.6
-	 */
-	class Redux_Extension_Import_Export extends Redux_Extension_Abstract {
-
-		/**
-		 * Ext version.
-		 *
-		 * @var string
-		 */
-		public static $version = '4.5.10';
-
-		/**
-		 * Is field bit.
-		 *
-		 * @var bool
-		 */
-		public bool $is_field = false;
-
-		/**
-		 * Class Constructor. Defines the args for the extensions class
-		 *
-		 * @param object $redux ReduxFramework object.
-		 *
-		 * @return      void
-		 * @since       1.0.0
-		 * @access      public
-		 */
-		public function __construct( $redux ) {
-			parent::__construct( $redux, __FILE__ );
-
-			$this->add_field( 'import_export' );
-
-			add_action( 'wp_ajax_redux_download_options-' . $this->parent->args['opt_name'], array( $this, 'download_options' ) );
-
-			// phpcs:ignore WordPress.NamingConventions.ValidHookName
-			do_action( 'redux/options/' . $this->parent->args['opt_name'] . '/import', array( $this, 'remove_cookie' ) );
-
-			$this->is_field = Redux_Helpers::is_field_in_use( $redux, 'import_export' );
-
-			if ( ! $this->is_field && $this->parent->args['show_import_export'] ) {
-				$this->add_section();
-			}
-
-			add_filter( 'upload_mimes', array( $this, 'custom_upload_mimes' ) );
-		}
-
-		/**
-		 * Adds the appropriate mime types to WordPress
-		 *
-		 * @param array|null $existing_mimes .
-		 *
-		 * @return array
-		 */
-		public function custom_upload_mimes( ?array $existing_mimes = array() ): array {
-			$existing_mimes['redux'] = 'application/redux';
-
-			return $existing_mimes;
-		}
-
-		/**
-		 * Add section to panel.
-		 */
-		public function add_section() {
-			$this->parent->sections[] = array(
-				'id'         => 'import/export',
-				'title'      => esc_html__( 'Import / Export', 'redux-framework' ),
-				'heading'    => '',
-				'icon'       => 'el el-refresh',
-				'customizer' => false,
-				'fields'     => array(
-					array(
-						'id'         => 'redux_import_export',
-						'type'       => 'import_export',
-						'full_width' => true,
-					),
-				),
-			);
-		}
-
-		/**
-		 * Import download options.
-		 */
-		public function download_options() {
-			if ( ! is_admin() ) {
-				wp_die();
-			}
-
-			if ( ! current_user_can( $this->parent->args['page_permissions'] ) ) {
-				wp_die( esc_html__( 'You do not have permission to export options.', 'redux-framework' ) );
-			}
-
-			if ( ! isset( $_GET['secret'] ) || ! wp_verify_nonce( sanitize_key( wp_unslash( $_GET['secret'] ) ), 'redux_io_' . $this->parent->args['opt_name'] ) ) { // phpcs:ignore WordPress.Security.NonceVerification
-				wp_die( 'Invalid secret for options use.' );
-			}
-
-			$this->parent->options_class->get();
-			$backup_options                 = $this->parent->options;
-			$backup_options['redux-backup'] = 1;
-
-			if ( isset( $backup_options['REDUX_imported'] ) ) {
-				unset( $backup_options['REDUX_imported'] );
-			}
-
-			// No need to escape this, as it's been properly escaped previously and through json_encode.
-			$content = wp_json_encode( $backup_options );
-
-			if ( isset( $_GET['action'] ) && 'redux_download_options-' . $this->parent->args['opt_name'] === $_GET['action'] ) { // phpcs:ignore WordPress.Security.NonceVerification
-				header( 'Content-Description: File Transfer' );
-				header( 'Content-type: application/txt' );
-				header( 'Content-Disposition: attachment; filename="redux_options_"' . $this->parent->args['opt_name'] . '_backup_' . gmdate( 'm-d-Y' ) . '.json' );
-				header( 'Content-Transfer-Encoding: binary' );
-				header( 'Expires: 0' );
-				header( 'Cache-Control: must-revalidate' );
-				header( 'Pragma: public' );
-			} else {
-				header( 'Expires: Mon, 26 Jul 1997 05:00:00 GMT' );
-				header( 'Last-Modified: ' . gmdate( 'D, d M Y H:i:s' ) . 'GMT' );
-				header( 'Expires: Sat, 26 Jul 1997 05:00:00 GMT' );
-				header( 'Cache-Control: no-store, no-cache, must-revalidate' );
-				header( 'Cache-Control: post-check=0, pre-check=0', false );
-				header( 'Pragma: no-cache' );
-
-				// Can't include the type. Thanks old Firefox and IE. BAH.
-				// header('Content-type: application/json');.
-			}
-
-			// phpcs:ignore WordPress.Security.EscapeOutput
-			echo( $content );
-			exit;
-		}
-
-		/**
-		 * Remove current tab cookie.
-		 */
-		public function remove_cookie() {
-			// Remove the import/export tab cookie.
-			if ( isset( $_COOKIE[ 'redux_current_tab_' . $this->parent->args['opt_name'] ] ) && 'import_export_default' === $_COOKIE[ 'redux_current_tab_' . $this->parent->args['opt_name'] ] ) {
-				setcookie( 'redux_current_tab_' . $this->parent->args['opt_name'], '', 1, '/' );
-				$_COOKIE[ 'redux_current_tab_' . $this->parent->args['opt_name'] ] = 1;
-			}
-		}
-	}
+    /**
+     * Main ReduxFramework import_export extension class
+     *
+     * @since       3.1.6
+     */
+    class Redux_Extension_Import_Export extends Redux_Extension_Abstract {
+
+        /**
+         * Ext version.
+         *
+         * @var string
+         */
+        public static $version = '4.5.10';
+
+        /**
+         * Is field bit.
+         *
+         * @var bool
+         */
+        public bool $is_field = false;
+
+        /**
+         * Class Constructor. Defines the args for the extensions class
+         *
+         * @param object $redux ReduxFramework object.
+         *
+         * @return      void
+         * @since       1.0.0
+         * @access      public
+         */
+        public function __construct( $redux ) {
+            parent::__construct( $redux, __FILE__ );
+
+            $this->add_field( 'import_export' );
+
+            add_action( 'wp_ajax_redux_download_options-' . $this->parent->args['opt_name'], array( $this, 'download_options' ) );
+
+            // phpcs:ignore WordPress.NamingConventions.ValidHookName
+            do_action( 'redux/options/' . $this->parent->args['opt_name'] . '/import', array( $this, 'remove_cookie' ) );
+
+            $this->is_field = Redux_Helpers::is_field_in_use( $redux, 'import_export' );
+
+            if ( ! $this->is_field && $this->parent->args['show_import_export'] ) {
+                $this->add_section();
+            }
+
+            add_filter( 'upload_mimes', array( $this, 'custom_upload_mimes' ) );
+        }
+
+        /**
+         * Adds the appropriate mime types to WordPress
+         *
+         * @param array|null $existing_mimes .
+         *
+         * @return array
+         */
+        public function custom_upload_mimes( ?array $existing_mimes = array() ): array {
+            $existing_mimes['redux'] = 'application/redux';
+
+            return $existing_mimes;
+        }
+
+        /**
+         * Add section to panel.
+         */
+        public function add_section() {
+            $this->parent->sections[] = array(
+                'id'         => 'import/export',
+                'title'      => esc_html__( 'Import / Export', 'redux-framework' ),
+                'heading'    => '',
+                'icon'       => 'el el-refresh',
+                'customizer' => false,
+                'fields'     => array(
+                    array(
+                        'id'         => 'redux_import_export',
+                        'type'       => 'import_export',
+                        'full_width' => true,
+                    ),
+                ),
+            );
+        }
+
+        /**
+         * Import download options.
+         */
+        public function download_options() {
+            if ( ! is_admin() ) {
+                wp_die();
+            }
+
+            if ( ! current_user_can( $this->parent->args['page_permissions'] ) ) {
+                wp_die( esc_html__( 'You do not have permission to export options.', 'redux-framework' ) );
+            }
+
+            if ( ! isset( $_GET['secret'] ) || ! wp_verify_nonce( sanitize_key( wp_unslash( $_GET['secret'] ) ), 'redux_io_' . $this->parent->args['opt_name'] ) ) { // phpcs:ignore WordPress.Security.NonceVerification
+                wp_die( 'Invalid secret for options use.' );
+            }
+
+            $this->parent->options_class->get();
+            $backup_options                 = $this->parent->options;
+            $backup_options['redux-backup'] = 1;
+
+            if ( isset( $backup_options['REDUX_imported'] ) ) {
+                unset( $backup_options['REDUX_imported'] );
+            }
+
+            // No need to escape this, as it's been properly escaped previously and through json_encode.
+            $content = wp_json_encode( $backup_options );
+
+            if ( isset( $_GET['action'] ) && 'redux_download_options-' . $this->parent->args['opt_name'] === $_GET['action'] ) { // phpcs:ignore WordPress.Security.NonceVerification
+                header( 'Content-Description: File Transfer' );
+                header( 'Content-type: application/txt' );
+                header( 'Content-Disposition: attachment; filename="redux_options_"' . $this->parent->args['opt_name'] . '_backup_' . gmdate( 'm-d-Y' ) . '.json' );
+                header( 'Content-Transfer-Encoding: binary' );
+                header( 'Expires: 0' );
+                header( 'Cache-Control: must-revalidate' );
+                header( 'Pragma: public' );
+            } else {
+                header( 'Expires: Mon, 26 Jul 1997 05:00:00 GMT' );
+                header( 'Last-Modified: ' . gmdate( 'D, d M Y H:i:s' ) . 'GMT' );
+                header( 'Expires: Sat, 26 Jul 1997 05:00:00 GMT' );
+                header( 'Cache-Control: no-store, no-cache, must-revalidate' );
+                header( 'Cache-Control: post-check=0, pre-check=0', false );
+                header( 'Pragma: no-cache' );
+
+                // Can't include the type. Thanks old Firefox and IE. BAH.
+                // header('Content-type: application/json');.
+            }
+
+            // phpcs:ignore WordPress.Security.EscapeOutput
+            echo( $content );
+            exit;
+        }
+
+        /**
+         * Remove current tab cookie.
+         */
+        public function remove_cookie() {
+            // Remove the import/export tab cookie.
+            if ( isset( $_COOKIE[ 'redux_current_tab_' . $this->parent->args['opt_name'] ] ) && 'import_export_default' === $_COOKIE[ 'redux_current_tab_' . $this->parent->args['opt_name'] ] ) {
+                setcookie( 'redux_current_tab_' . $this->parent->args['opt_name'], '', 1, '/' );
+                $_COOKIE[ 'redux_current_tab_' . $this->parent->args['opt_name'] ] = 1;
+            }
+        }
+    }
 }
 
 if ( ! class_exists( 'ReduxFramework_extension_import_export' ) ) {
-	class_alias( 'Redux_Extension_Import_Export', 'ReduxFramework_extension_import_export' );
+    class_alias( 'Redux_Extension_Import_Export', 'ReduxFramework_extension_import_export' );
 }

redux-core/inc/classes/class-redux-ajax-typography.php

Indentation +46 added lines, -46 removed lines

@@ -11,50 +11,50 @@
 
 if ( ! class_exists( 'Redux_AJAX_Typography', false ) ) {
 
-	/**
-	 * Class Redux_AJAX_Typography
-	 */
-	class Redux_AJAX_Typography extends Redux_Class {
-
-		/**
-		 * Redux_AJAX_Typography constructor.
-		 *
-		 * @param object $redux ReduxFramework object.
-		 */
-		public function __construct( $redux ) {
-			parent::__construct( $redux );
-			add_action( 'wp_ajax_redux_update_google_fonts', array( $this, 'google_fonts_update' ) );
-		}
-
-		/**
-		 * Google font AJAX callback
-		 *
-		 * @return void
-		 */
-		public function google_fonts_update() {
-			if ( ! current_user_can( $this->parent->args['page_permissions'] ) ) {
-				wp_die( esc_html__( 'You do not have permission to perform this action.', 'redux-framework' ), 403 );
-			}
-
-			$field_class = 'Redux_typography';
-
-			if ( ! class_exists( $field_class ) ) {
-				$dir = str_replace( '/classes', '', Redux_Functions_Ex::wp_normalize_path( __DIR__ ) );
-
-				// phpcs:ignore WordPress.NamingConventions.ValidHookName
-				$class_file = apply_filters( 'redux-typeclass-load', $dir . '/fields/typography/class-redux-typography.php', $field_class );
-				if ( $class_file ) {
-					require_once $class_file;
-				}
-			}
-
-			if ( class_exists( $field_class ) && method_exists( $field_class, 'google_fonts_update_ajax' ) ) {
-				$f = new $field_class( array(), '', $this->parent );
-
-				$f->google_fonts_update_ajax();
-			}
-
-			die();
-		}
-	}
+    /**
+     * Class Redux_AJAX_Typography
+     */
+    class Redux_AJAX_Typography extends Redux_Class {
+
+        /**
+         * Redux_AJAX_Typography constructor.
+         *
+         * @param object $redux ReduxFramework object.
+         */
+        public function __construct( $redux ) {
+            parent::__construct( $redux );
+            add_action( 'wp_ajax_redux_update_google_fonts', array( $this, 'google_fonts_update' ) );
+        }
+
+        /**
+         * Google font AJAX callback
+         *
+         * @return void
+         */
+        public function google_fonts_update() {
+            if ( ! current_user_can( $this->parent->args['page_permissions'] ) ) {
+                wp_die( esc_html__( 'You do not have permission to perform this action.', 'redux-framework' ), 403 );
+            }
+
+            $field_class = 'Redux_typography';
+
+            if ( ! class_exists( $field_class ) ) {
+                $dir = str_replace( '/classes', '', Redux_Functions_Ex::wp_normalize_path( __DIR__ ) );
+
+                // phpcs:ignore WordPress.NamingConventions.ValidHookName
+                $class_file = apply_filters( 'redux-typeclass-load', $dir . '/fields/typography/class-redux-typography.php', $field_class );
+                if ( $class_file ) {
+                    require_once $class_file;
+                }
+            }
+
+            if ( class_exists( $field_class ) && method_exists( $field_class, 'google_fonts_update_ajax' ) ) {
+                $f = new $field_class( array(), '', $this->parent );
+
+                $f->google_fonts_update_ajax();
+            }
+
+            die();
+        }
+    }
 }