first commit

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

@@ -0,0 +1,101 @@
+<?php
+/**
+ * Customizer Control: oceanwp-typography.
+ *
+ * @package     OceanWP WordPress theme
+ * @subpackage  Controls
+ * @since       1.0
+ */
+
+// Exit if accessed directly.
+if ( ! defined( 'ABSPATH' ) ) {
+	exit;
+}
+
+/**
+ * Typography control
+ */
+class OceanWP_Customizer_Typography_Control extends WP_Customize_Control {
+
+	/**
+	 * The control type.
+	 *
+	 * @access public
+	 * @var string
+	 */
+	public $type = 'oceanwp-typography';
+
+	/**
+	 * Enqueue control related scripts/styles.
+	 *
+	 * @access public
+	 */
+	public function enqueue() {
+		// Don't call is The Event Calendar active to avoid conflict
+		if ( ! class_exists( 'Tribe__Events__Main' ) || ! class_exists( 'LearnPress' ) || ! defined( 'TUTOR_VERSION' ) || ! defined( 'LEARNDASH_VERSION' ) ) {
+			wp_enqueue_script( 'oceanwp-select2', OCEANWP_INC_DIR_URI . 'customizer/controls/select2.min.js', array( 'jquery' ), false, true );
+			wp_enqueue_style( 'select2', OCEANWP_INC_DIR_URI . 'customizer/controls/select2.min.css', null );
+			wp_enqueue_script( 'oceanwp-typography-js', OCEANWP_INC_DIR_URI . 'customizer/assets/min/js/typography.min.js', array( 'jquery', 'select2' ), false, true );
+		}
+		wp_enqueue_style( 'oceanwp-typography', OCEANWP_INC_DIR_URI . 'customizer/assets/min/css/typography.min.css', null );
+	}
+
+	/**
+	 * Render the control's content.
+	 * Allows the content to be overriden without having to rewrite the wrapper in $this->render().
+	 *
+	 * @access protected
+	 */
+	protected function render_content() {
+		$this_val = $this->value(); ?>
+		<label>
+			<?php if ( ! empty( $this->label ) ) : ?>
+				<span class="customize-control-title"><?php echo esc_html( $this->label ); ?></span>
+			<?php endif; ?>
+			<?php if ( ! empty( $this->description ) ) : ?>
+				<span class="description customize-control-description"><?php echo wp_kses_post( $this->description ); ?></span>
+			<?php endif; ?>
+
+			<select class="oceanwp-typography-select" <?php $this->link(); ?>>
+				<option value="" <?php if ( ! $this_val ) echo 'selected="selected"'; ?>><?php esc_html_e( 'Default', 'oceanwp' ); ?></option>
+				<?php
+				// Add custom fonts from child themes
+				if ( function_exists( 'ocean_add_custom_fonts' ) ) {
+					$fonts = ocean_add_custom_fonts();
+					if ( $fonts && is_array( $fonts ) ) { ?>
+						<optgroup label="<?php esc_attr_e( 'Custom Fonts', 'oceanwp' ); ?>">
+							<?php foreach ( $fonts as $font ) { ?>
+								<option value="<?php echo esc_attr( $font ); ?>" <?php if ( $font == $this_val ) echo 'selected="selected"'; ?>><?php echo esc_html( $font ); ?></option>
+							<?php } ?>
+						</optgroup>
+					<?php }
+				}
+
+				// Get Standard font options
+				if ( $std_fonts = oceanwp_standard_fonts() ) { ?>
+					<optgroup label="<?php esc_attr_e( 'Standard Fonts', 'oceanwp' ); ?>">
+						<?php
+						// Loop through font options and add to select
+						foreach ( $std_fonts as $font ) { ?>
+							<option value="<?php echo esc_attr( $font ); ?>" <?php selected( $font, $this_val ); ?>><?php echo esc_html( $font ); ?></option>
+						<?php } ?>
+					</optgroup>
+				<?php }
+
+				// Google font options
+				if ( $google_fonts = oceanwp_google_fonts_array() ) { ?>
+					<optgroup label="<?php esc_attr_e( 'Google Fonts', 'oceanwp' ); ?>">
+						<?php
+						// Loop through font options and add to select
+						foreach ( $google_fonts as $font ) { ?>
+							<option value="<?php echo esc_attr( $font ); ?>" <?php selected( $font, $this_val ); ?>><?php echo esc_html( $font ); ?></option>
+						<?php } ?>
+					</optgroup>
+				<?php } ?>
+			</select>
+
+		</label>
+
+		<?php
+	}
+}

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

@@ -0,0 +1,7 @@
+/* Fix Select2 */
+body .select2-container { z-index: 99999999; }
+body .customize-control .select2-container { z-index: 1; }
+body .select2-container .select2-selection--single { height: 33px; }
+body .select2-container--default .select2-selection--single { height: 33px; border-color: #ddd; border-radius: 0; }
+body .select2-container--default .select2-selection--single .select2-selection__rendered { color: #32373c; line-height: 33px; }
+body .select2-container--default .select2-selection--single .select2-selection__arrow { height: 30px; }

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

@@ -0,0 +1,9 @@
+( function($) {
+
+	$( document ).ready(function () {
+
+		$( '.oceanwp-typography-select' ).select2();
+
+	} );
+
+} )( jQuery );