Shapeshifter: Choose your own font feature (#1792)

inc/class-globaltypography.php

@@ -33,6 +33,7 @@ public function getSass() {
 	 * Get Pressbooks-supported languages.
 	 *
 	 * @return array
+	 * @see \Pressbooks\Modules\ThemeOptions\GlobalOptions::renderLanguagesField
 	 */
 	function getSupportedLanguages() {
 		return [
@@ -104,7 +105,10 @@ function _getRequiredLanguages() {
 	}
 
 	/**
-	 * Update and save the SCSS mixin which assigns the $global-typography variable.
+	 * Update and save user generated SCSS mixins:
+	 * _font-stack-prince.scss, _font-stack-epub.scss, _font-stack-web.scss, ...
+	 * Creates the necessary @import statements and variables, for foreign language support
+	 * (CSS fallback font stacks, for unknown characters)
 	 */
 	function updateGlobalTypographyMixin() {
 
@@ -208,6 +212,7 @@ protected function _getBookLanguage() {
 	 * Get the current theme's supported languages.
 	 *
 	 * @return array
+	 * @see \Pressbooks\Modules\ThemeOptions\GlobalOptions::renderLanguagesField
 	 */
 	function getThemeSupportedLanguages() {
 

inc/class-options.php

@@ -439,6 +439,55 @@ static function renderSelect( $args ) {
 		}
 	}
 
+	/**
+	 * Render a select element with optgroups
+	 *
+	 * @param array $args
+	 */
+	static function renderSelectOptGroup( $args ) {
+		$defaults = [
+			'id' => null,
+			'name' => null,
+			'option' => null,
+			'value' => '',
+			'choices' => [],
+			'multiple' => false,
+			'disabled' => false,
+			'description' => null,
+		];
+
+		$args = wp_parse_args( $args, $defaults );
+
+		$options = '';
+		foreach ( $args['choices'] as $optgroup => $choices ) {
+			$options .= sprintf( '<optgroup label="%s">', $optgroup );
+			foreach ( $choices as $key => $label ) {
+				$options .= sprintf(
+					'<option value="%s" %s>%s</option>',
+					$key,
+					selected( $key, $args['value'], false ),
+					$label
+				);
+			}
+			$options .= '</optgroup>';
+		}
+		printf(
+			'<select name="%s[%s]" id="%s" %s%s>%s</select>',
+			$args['name'],
+			$args['option'],
+			$args['id'],
+			( $args['multiple'] ) ? ' multiple' : '',
+			( ! empty( $args['disabled'] ) ) ? ' disabled' : '',
+			$options
+		);
+		if ( isset( $args['description'] ) ) {
+			printf(
+				'<p class="description">%s</p>',
+				$args['description']
+			);
+		}
+	}
+
 	/**
 	 * Render a custom select element.
 	 *

inc/class-sass.php

@@ -10,6 +10,8 @@
 
 /**
  * SCSS Compiler and Build Tools
+ * Think of this class as the command line you pass your junk into. Out comes a CSS string.
+ * No styles in here! Just compiler stuff.
  */
 class Sass {
 

inc/class-styles.php

@@ -12,6 +12,8 @@
 
 /**
  * Custom Styles Feature(s)
+ * This class houses a pile of Legacy (V1), Current (V2), Buckram (SCSS Components), and Shape Shifter (Choose your own font) code
+ * Basically, a pile of lessons learned over the years, used to generate the SCSS that is, then, passed into the \Pressbooks\Sass compiler, to generate the CSS we deserve.
  */
 class Styles {
 
@@ -316,12 +318,12 @@ public function getPathToScss( $type, $theme = null ) {
 	/**
 	 * Are the current theme's stylesheets SCSS compatible?
 	 *
-	 * @param int $version
+	 * @param int $with_version
 	 * @param \WP_Theme $theme (optional)
 	 *
 	 * @return bool
 	 */
-	public function isCurrentThemeCompatible( $version = 1, $theme = null ) {
+	public function isCurrentThemeCompatible( $with_version = 1, $theme = null ) {
 
 		if ( null === $theme ) {
 			$theme = wp_get_theme();
@@ -337,13 +339,13 @@ public function isCurrentThemeCompatible( $version = 1, $theme = null ) {
 
 		foreach ( $types as $type ) {
 			$path = '';
-			if ( 1 === $version && 'web' !== $type ) {
+			if ( 1 === $with_version && 'web' !== $type ) {
 				$path = $basepath . "/export/$type/style.scss";
-			} elseif ( 1 === $version && 'web' === $type ) {
+			} elseif ( 1 === $with_version && 'web' === $type ) {
 				$path = $basepath . '/style.scss';
 			}
 
-			if ( 2 === $version ) {
+			if ( 2 === $with_version ) {
 				$path = $basepath . "/assets/styles/$type/style.scss";
 			}
 
@@ -616,8 +618,88 @@ public function maybeUpdateStylesheets() {
 		return false;
 	}
 
+	// ------------------------------------------------------------------------
+	// Shape Shifter Features
+	// ------------------------------------------------------------------------
+
+	/**
+	 * Are the current theme's SCSS stylesheets "Shape Shifter" compatible?
+	 * Ie. Does it support the "choose your own font" feature?
+	 *
+	 * @return bool
+	 */
+	public function isShapeShifterCompatible() {
+		return apply_filters( 'pb_is_shape_shifter_compatible', ( 'pressbooks-malala' === get_stylesheet() ) );
+	}
+
 	/**
+	 * Optgroup compatible font choices
+	 *
+	 * @param bool $default_is_serif (optional)
 	 *
+	 * @return array
+	 * @see \Pressbooks\Options::renderSelectOptGroup
+	 */
+	public function getShapeShifterFonts( $default_is_serif = true ) {
+		$serif = [
+			'Cormorant Garamond' => __( 'Cormorant Garamond', 'pressbooks' ),
+			'Noto serif' => __( 'Noto serif', 'pressbooks' ),
+			'Spectral' => __( 'Spectral', 'pressbooks' ),
+			'Alegreya' => __( 'Alegreya', 'pressbooks' ),
+			'Crimson Text' => __( 'Crimson Text', 'pressbooks' ),
+		];
+
+		$sans_serif = [
+			'Roboto' => __( 'Roboto', 'pressbooks' ),
+			'Open Sans' => __( 'Open Sans', 'pressbooks' ),
+			'Lato' => __( 'Lato', 'pressbooks' ),
+			'Montserrat' => __( 'Montserrat', 'pressbooks' ),
+			'Raleway' => __( 'Raleway', 'pressbooks' ),
+			'Noto Sans' => __( 'Noto Sans', 'pressbooks' ),
+			'Rubik' => __( 'Rubik', 'pressbooks' ),
+			'Barlow' => __( 'Barlow', 'pressbooks' ),
+			'Libre Franklin' => __( 'Libre Franklin', 'pressbooks' ),
+			'K2D' => __( 'K2D', 'pressbooks' ),
+		];
+
+		if ( $default_is_serif ) {
+			$serif = array_merge( [ '' => __( 'Theme default', 'pressbooks' ) ], $serif );
+		} else {
+			$sans_serif = array_merge( [ '' => __( 'Theme default', 'pressbooks' ) ], $sans_serif );
+		}
+
+		return [
+			__( 'Serif', 'pressbooks' ) => $serif,
+			__( 'Sans serif', 'pressbooks' ) => $sans_serif,
+		];
+	}
+
+	/**
+	 * Is the font serif? If no, then it's sans-serif...
+	 *
+	 * @param string $font
+	 *
+	 * @return bool
+	 */
+	public function isShaperShifterFontSerif( $font ) {
+		$fonts = $this->getShapeShifterFonts();
+		$serif_key = __( 'Serif', 'pressbooks' );
+		$serif = array_keys( $fonts[ $serif_key ] );
+		$serif = array_map( 'strtolower', $serif );
+		if ( in_array( strtolower( $font ), $serif, true ) ) {
+			return true;
+		}
+		return false;
+	}
+
+	// ------------------------------------------------------------------------
+	// Custom Styles Editor
+	// ------------------------------------------------------------------------
+
+	/**
+	 * Custom Styles Editor
+	 * This method is the callback for `add_theme_page`
+	 * Adds submenu page to the Appearance main menu.
 	 */
 	public function editor() {
 

inc/modules/themeoptions/class-admin.php

@@ -97,6 +97,10 @@ public function adminMenu() {
 	 * Register the settings on each tab, run upgrade() if needed.
 	 */
 	public function loadTabs() {
+		// If this is ajax/cron, don't load theme option tabs (GUI) right now
+		if ( wp_doing_ajax() || wp_doing_cron() ) {
+			return;
+		}
 		foreach ( $this->getTabs() as $slug => $subclass ) {
 			/** @var \Pressbooks\Options $subclass (not instantiated, just a string) */
 			add_filter( "option_page_capability_pressbooks_theme_options_$slug", [ $this, 'setPermissions' ], 10, 1 );

inc/modules/themeoptions/class-ebookoptions.php

@@ -70,6 +70,28 @@ function init() {
 			$_page
 		);
 
+		$styles = \Pressbooks\Container::get( 'Styles' );
+		$shape_shifter_compatible = $styles->isShapeShifterCompatible();
+
+		if ( $shape_shifter_compatible ) {
+			add_settings_field(
+				'ebook_header_font',
+				__( 'Header Font', 'pressbooks' ),
+				[ $this, 'renderHeaderFontField' ],
+				$_page,
+				$_section,
+				array_merge( $styles->getShapeShifterFonts(), [ 'label_for' => 'ebook_header_font' ] )
+			);
+			add_settings_field(
+				'ebook_body_font',
+				__( 'Body Font', 'pressbooks' ),
+				[ $this, 'renderBodyFontField' ],
+				$_page,
+				$_section,
+				array_merge( $styles->getShapeShifterFonts(), [ 'label_for' => 'ebook_body_font' ] )
+			);
+		}
+
 		add_settings_field(
 			'ebook_start_point',
 			__( 'Ebook Start Point', 'pressbooks' ),
@@ -276,6 +298,42 @@ function renderCompressImagesField( $args ) {
 		);
 	}
 
+	/**
+	 * Render the ebook_header_font input.
+	 *
+	 * @param array $args
+	 */
+	function renderHeaderFontField( $args ) {
+		unset( $args['label_for'], $args['class'] );
+		$this->renderSelectOptGroup(
+			[
+				'id' => 'ebook_header_font',
+				'name' => 'pressbooks_theme_options_' . $this->getSlug(),
+				'option' => 'ebook_header_font',
+				'value' => ( isset( $this->options['ebook_header_font'] ) ) ? $this->options['ebook_header_font'] : '',
+				'choices' => $args,
+			]
+		);
+	}
+
+	/**
+	 * Render the ebook_body_font input.
+	 *
+	 * @param array $args
+	 */
+	function renderBodyFontField( $args ) {
+		unset( $args['label_for'], $args['class'] );
+		$this->renderSelectOptGroup(
+			[
+				'id' => 'ebook_body_font',
+				'name' => 'pressbooks_theme_options_' . $this->getSlug(),
+				'option' => 'ebook_body_font',
+				'value' => ( isset( $this->options['ebook_body_font'] ) ) ? $this->options['ebook_body_font'] : '',
+				'choices' => $args,
+			]
+		);
+	}
+
 	/**
 	 * Get the slug for the Ebook options tab.
 	 *
@@ -307,6 +365,8 @@ static function getDefaults() {
 		 */
 		return apply_filters(
 			'pb_theme_options_ebook_defaults', [
+				'ebook_header_font' => '',
+				'ebook_body_font' => '',
 				'ebook_paragraph_separation' => 'indent',
 				'ebook_compress_images' => 0,
 			]
@@ -357,7 +417,12 @@ static function getStringOptions() {
 		 *
 		 * @param array $value
 		 */
-		return apply_filters( 'pb_theme_options_ebook_strings', [] );
+		return apply_filters(
+			'pb_theme_options_ebook_strings', [
+				'ebook_header_font',
+				'ebook_body_font',
+			]
+		);
 	}
 
 	/**
@@ -426,6 +491,7 @@ static function scssOverrides( $scss ) {
 
 		$styles = \Pressbooks\Container::get( 'Styles' );
 		$v2_compatible = $styles->isCurrentThemeCompatible( 2 );
+		$shape_shifter_compatible = $styles->isShapeShifterCompatible();
 
 		// --------------------------------------------------------------------
 		// Global Options
@@ -502,6 +568,28 @@ static function scssOverrides( $scss ) {
 			}
 		}
 
+		// Shape Shifter Features
+		if ( $shape_shifter_compatible ) {
+			if ( ! empty( $options['ebook_header_font'] ) ) {
+				$ebook_header_font = str_replace( '"', '', $options['ebook_header_font'] );
+				$styles->getSass()->setVariables(
+					[
+						'shapeshifter-font-2' => '"' . $ebook_header_font . '"',
+						'shapeshifter-font-2-is-serif' => $styles->isShaperShifterFontSerif( $ebook_header_font ),
+					]
+				);
+			}
+			if ( ! empty( $options['ebook_body_font'] ) ) {
+				$ebook_body_font = str_replace( '"', '', $options['ebook_body_font'] );
+				$styles->getSass()->setVariables(
+					[
+						'shapeshifter-font-1' => '"' . $ebook_body_font . '"',
+						'shapeshifter-font-1-is-serif' => $styles->isShaperShifterFontSerif( $ebook_body_font ),
+					]
+				);
+			}
+		}
+
 		return $scss;
 	}
 }