Merge pull request #21 from brainstormforce/font-display

v1.1.0 - New: Add option to set font-display property
brainstormforce · Jul 4, 2019 · 1c41cd3 · 1c41cd3
2 parents c59109e + ee19b45
commit 1c41cd3
Show file tree

Hide file tree

Showing 9 changed files with 201 additions and 89 deletions.
diff --git a/README.md b/README.md
@@ -4,7 +4,7 @@
 **Tags:** Beaver Builder, Elementor, Astra, woff2, woff, ttf, svg, eot, otf, Custom Fonts, Font, Typography  
 **Requires at least:** 4.4  
 **Tested up to:** 5.1  
-**Stable tag:** 1.0.8  
+**Stable tag:** 1.1.0  
 **License:** GPLv2 or later  
 **License URI:** http://www.gnu.org/licenses/gpl-2.0.html  
 
@@ -43,6 +43,9 @@ If you're not using any of the supported plugins and theme, you can write the cu
 
 ## Changelog ##
 
+### 1.1.0 ###
+- New: Option to select font-display property.
+
 ### v1.0.8 ###
 - New: Now you can also upload otf fonts.
 - Fix: ttf fonts not being uploaded in WordPress media library.

diff --git a/assets/css/bsf-custom-fonts.css b/assets/css/bsf-custom-fonts.css
@@ -6,4 +6,8 @@
     float: right;
     margin-right: 5%;
     margin-top: 2px;
+}
+
+.bsf-custom-font-select-field {
+    width: 95%;
 }
diff --git a/classes/class-bsf-custom-fonts-render.php b/classes/class-bsf-custom-fonts-render.php
@@ -245,7 +245,9 @@ private function render_font_css( $font ) {
 					$arr[] = 'url(' . esc_url( $links['font_svg'] ) . '#' . esc_attr( strtolower( str_replace( ' ', '_', $font ) ) ) . ") format('svg')";
 				}
 				$css .= join( ', ', $arr );
-				$css .= ';}';
+				$css .= ';';
+				$css .= 'font-display: ' . esc_attr( $links['font-display'] ) . ';';
+				$css .= '}';
 			endforeach;
 
 			$this->font_css .= $css;

diff --git a/custom-fonts.php b/custom-fonts.php
@@ -6,7 +6,7 @@
  * Author:          Brainstorm Force
  * Author URI:      http://www.brainstormforce.com
  * Text Domain:     custom-fonts
- * Version:         1.0.8
+ * Version:         1.1.0
  *
  * @package         Bsf_Custom_Fonts
  */
@@ -25,7 +25,7 @@
 define( 'BSF_CUSTOM_FONTS_BASE', plugin_basename( BSF_CUSTOM_FONTS_FILE ) );
 define( 'BSF_CUSTOM_FONTS_DIR', plugin_dir_path( BSF_CUSTOM_FONTS_FILE ) );
 define( 'BSF_CUSTOM_FONTS_URI', plugins_url( '/', BSF_CUSTOM_FONTS_FILE ) );
-define( 'BSF_CUSTOM_FONTS_VER', '1.0.8' );
+define( 'BSF_CUSTOM_FONTS_VER', '1.1.0' );
 
 /**
  * BSF Custom Fonts

diff --git a/includes/class-bsf-custom-fonts-admin.php b/includes/class-bsf-custom-fonts-admin.php
@@ -118,7 +118,7 @@ public function manage_columns( $columns ) {
 
 			$screen = get_current_screen();
 			// If current screen is add new custom fonts screen.
-			if ( 'edit-tags' == $screen->base ) {
+			if ( isset( $screen->base ) && 'edit-tags' == $screen->base ) {
 
 				$old_columns = $columns;
 				$columns     = array(
@@ -142,6 +142,19 @@ public function add_new_taxonomy_data() {
 			$this->font_file_new_field( 'font_eot', __( 'Font .eot', 'custom-fonts' ), __( 'Upload the font\'s eot file or enter the URL.', 'custom-fonts' ) );
 			$this->font_file_new_field( 'font_svg', __( 'Font .svg', 'custom-fonts' ), __( 'Upload the font\'s svg file or enter the URL.', 'custom-fonts' ) );
 			$this->font_file_new_field( 'font_otf', __( 'Font .otf', 'custom-fonts' ), __( 'Upload the font\'s otf file or enter the URL.', 'custom-fonts' ) );
+
+			$this->select_new_field(
+				'font-display',
+				__( 'Font Display', 'custom-fonts' ),
+				__( 'Select font-display property for this font', 'custom-fonts' ),
+				array(
+					'auto'     => 'auto',
+					'block'    => 'block',
+					'swap'     => 'swap',
+					'fallback' => 'fallback',
+					'optional' => 'optional',
+				)
+			);
 		}
 
 		/**
@@ -158,6 +171,20 @@ public function edit_taxonomy_data( $term ) {
 			$this->font_file_edit_field( 'font_eot', __( 'Font .eot', 'custom-fonts' ), $data['font_eot'], __( 'Upload the font\'s eot file or enter the URL.', 'custom-fonts' ) );
 			$this->font_file_edit_field( 'font_svg', __( 'Font .svg', 'custom-fonts' ), $data['font_svg'], __( 'Upload the font\'s svg file or enter the URL.', 'custom-fonts' ) );
 			$this->font_file_edit_field( 'font_otf', __( 'Font .otf', 'custom-fonts' ), $data['font_otf'], __( 'Upload the font\'s otf file or enter the URL.', 'custom-fonts' ) );
+
+			$this->select_edit_field(
+				'font-display',
+				__( 'Font Display', 'custom-fonts' ),
+				$data['font-display'],
+				__( 'Select font-display property for this font', 'custom-fonts' ),
+				array(
+					'auto'     => 'Auto',
+					'block'    => 'Block',
+					'swap'     => 'Swap',
+					'fallback' => 'Fallback',
+					'optional' => 'Optional',
+				)
+			);
 		}
 
 		/**
@@ -181,6 +208,62 @@ protected function font_file_new_field( $id, $title, $description, $value = '' )
 			<?php
 		}
 
+		/**
+		 * Render select field for the new font screen.
+		 *
+		 * @param String $id Field ID.
+		 * @param String $title Field Title.
+		 * @param String $description Field Description.
+		 * @param Array  $select_fields Select fields as Array.
+		 * @return void
+		 */
+		protected function select_new_field( $id, $title, $description, $select_fields ) {
+			?>
+			<div class="bsf-custom-fonts-file-wrap form-field term-<?php echo esc_attr( $id ); ?>-wrap" >
+				<label for="font-<?php echo esc_attr( $id ); ?>"><?php echo esc_html( $title ); ?></label>
+				<select type="select" id="font-<?php echo esc_attr( $id ); ?>" class="bsf-custom-font-select-field <?php echo esc_attr( $id ); ?>" name="<?php echo Bsf_Custom_Fonts_Taxonomy::$register_taxonomy_slug; ?>[<?php echo esc_attr( $id ); ?>]" />
+					<?php
+					foreach ( $select_fields as $key => $value ) {
+						?>
+						<option value="<?php echo esc_attr( $key ); ?>"><?php echo esc_html( $value ); ?></option>;
+					<?php } ?>
+				</select>
+			</div>
+			<?php
+		}
+
+		/**
+		 * Render select field for the edit font screen.
+		 *
+		 * @param String $id Field ID.
+		 * @param String $title Field Title.
+		 * @param String $saved_val Field Value.
+		 * @param String $description Field Description.
+		 * @param Array  $select_fields Select fields as Array.
+		 * @return void
+		 */
+		private function select_edit_field( $id, $title, $saved_val = '', $description, $select_fields ) {
+			?>
+			<tr class="bsf-custom-fonts-file-wrap form-field term-<?php echo esc_attr( $id ); ?>-wrap ">
+				<th scope="row">
+					<label for="metadata-<?php echo esc_attr( $id ); ?>">
+						<?php echo esc_html( $title ); ?>
+					</label>
+				</th>
+				<td>
+				<select type="select" id="font-<?php echo esc_attr( $id ); ?>" class="bsf-custom-font-select-field <?php echo esc_attr( $id ); ?>" name="<?php echo Bsf_Custom_Fonts_Taxonomy::$register_taxonomy_slug; ?>[<?php echo esc_attr( $id ); ?>]" />
+					<?php
+					foreach ( $select_fields as $key => $value ) {
+						?>
+						<option value="<?php echo esc_attr( $key ); ?>" <?php selected( $key, $saved_val ); ?>><?php echo esc_html( $value ); ?></option>;
+					<?php } ?>
+				</select>
+					<p><?php echo esc_html( $description ); ?></p>
+				</td>
+			</tr>
+			<?php
+		}
+
 		/**
 		 * Add Taxonomy data field
 		 *

diff --git a/includes/class-bsf-custom-fonts-taxonomy.php b/includes/class-bsf-custom-fonts-taxonomy.php
@@ -55,7 +55,7 @@ class Bsf_Custom_Fonts_Taxonomy {
 		 */
 		public static function get_instance() {
 			if ( ! isset( self::$_instance ) ) {
-				self::$_instance = new self;
+				self::$_instance = new self();
 			}
 
 			return self::$_instance;
@@ -120,12 +120,13 @@ protected static function default_args( $fonts ) {
 			return wp_parse_args(
 				$fonts,
 				array(
-					'font_woff_2' => '',
-					'font_woff'   => '',
-					'font_ttf'    => '',
-					'font_svg'    => '',
-					'font_eot'    => '',
-					'font_otf'    => '',
+					'font_woff_2'  => '',
+					'font_woff'    => '',
+					'font_ttf'     => '',
+					'font_svg'     => '',
+					'font_eot'     => '',
+					'font_otf'     => '',
+					'font-display' => 'swap',
 				)
 			);
 		}