array( 'fontFamily' => '-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif', 'slug' => 'system-font', 'name' => 'System Font', ), 'arvo' => array( 'fontFamily' => '"Arvo", serif', 'slug' => 'arvo', 'name' => 'Arvo', 'google' => 'family=Arvo:ital,wght@0,400;0,700;1,400;1,700', ), 'bodoni-moda' => array( 'fontFamily' => '"Bodoni Moda", serif', 'slug' => 'bodoni-moda', 'name' => 'Bodoni Moda', 'google' => 'family=Bodoni+Moda:ital,wght@0,400..900;1,400..900', ), 'cabin' => array( 'fontFamily' => '"Cabin", sans-serif', 'slug' => 'cabin', 'name' => 'Cabin', 'google' => 'family=Cabin:ital,wght@0,400..700;1,400..700', ), 'chivo' => array( 'fontFamily' => '"Chivo", sans-serif', 'slug' => 'chivo', 'name' => 'Chivo', 'google' => 'family=Chivo:ital,wght@0,300;0,400;0,700;0,900;1,300;1,400;1,700;1,900', ), 'courier-prime' => array( 'fontFamily' => '"Courier Prime", serif', 'slug' => 'courier-prime', 'name' => 'Courier Prime', 'google' => 'family=Courier+Prime:ital,wght@0,400;0,700;1,400;1,700', ), 'dm-sans' => array( 'fontFamily' => '"DM Sans", sans-serif', 'slug' => 'dm-sans', 'name' => 'DM Sans', 'google' => 'family=DM+Sans:ital,wght@0,400;0,500;0,700;1,400;1,500;1,700"', ), 'domine' => array( 'fontFamily' => '"Domine", serif', 'slug' => 'domine', 'name' => 'Domine', 'google' => 'family=Domine:wght@400..700', ), 'eb-garamond' => array( 'fontFamily' => '"EB Garamond", serif', 'slug' => 'eb-garamond', 'name' => 'EB Garamond', 'google' => 'family=EB+Garamond:ital,wght@0,400..800;1,400..800', ), 'fira-sans' => array( 'fontFamily' => '"Fira Sans", sans-serif', 'slug' => 'fira-sans', 'name' => 'Fira Sans', 'google' => 'family=Fira+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900', ), 'ibm-plex-mono' => array( 'fontFamily' => '"IBM Plex Mono", monospace', 'slug' => 'ibm-plex-mono', 'name' => 'IBM Plex Mono', 'google' => 'family=IBM+Plex+Mono:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700', ), 'inter' => array( 'fontFamily' => '"Inter", sans-serif', 'slug' => 'inter', 'name' => 'Inter', 'google' => 'family=Inter:wght@100..900', ), 'josefin-sans' => array( 'fontFamily' => '"Josefin Sans", sans-serif', 'slug' => 'josefin-sans', 'name' => 'Josefin Sans', 'google' => 'family=Josefin+Sans:ital,wght@0,100..700;1,100..700', ), 'libre-baskerville' => array( 'fontFamily' => '"Libre Baskerville", serif', 'slug' => 'libre-baskerville', 'name' => 'Libre Baskerville', 'google' => 'family=Libre+Baskerville:ital,wght@0,400;0,700;1,400', ), 'libre-franklin' => array( 'fontFamily' => '"Libre Franklin", sans-serif', 'slug' => 'libre-franklin', 'name' => 'Libre Franklin', 'google' => 'family=Libre+Franklin:ital,wght@0,100..900;1,100..900', ), 'lora' => array( 'fontFamily' => '"Lora", serif', 'slug' => 'lora', 'name' => 'Lora', 'google' => 'family=Lora:ital,wght@0,400..700;1,400..700', ), 'merriweather' => array( 'fontFamily' => '"Merriweather", serif', 'slug' => 'merriweather', 'name' => 'Merriweather', 'google' => 'family=Merriweather:ital,wght@0,300;0,400;0,700;0,900;1,300;1,400;1,700;1,900', ), 'montserrat' => array( 'fontFamily' => '"Montserrat", sans-serif', 'slug' => 'montserrat', 'name' => 'Montserrat', 'google' => 'family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900', ), 'nunito' => array( 'fontFamily' => '"Nunito", sans-serif', 'slug' => 'nunito', 'name' => 'Nunito', 'google' => 'family=Nunito:ital,wght@0,200;0,300;0,400;0,600;0,700;0,800;0,900;1,200;1,300;1,400;1,600;1,700;1,800;1,900', ), 'open-sans' => array( 'fontFamily' => '"Open Sans", sans-serif', 'slug' => 'open-sans', 'name' => 'Open Sans', 'google' => 'family=Open+Sans:ital,wght@0,300;0,400;0,600;0,700;0,800;1,300;1,400;1,600;1,700;1,800', ), 'overpass' => array( 'fontFamily' => '"Overpass", sans-serif', 'slug' => 'overpass', 'name' => 'Overpass', 'google' => 'family=Overpass:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900', ), 'playfair-display' => array( 'fontFamily' => '"Playfair Display", serif', 'slug' => 'playfair-display', 'name' => 'Playfair Display', 'google' => 'family=Playfair+Display:ital,wght@0,400..900;1,400..900', ), 'poppins' => array( 'fontFamily' => '"Poppins", sans-serif', 'slug' => 'poppins', 'name' => 'Poppins', 'google' => 'family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900', ), 'raleway' => array( 'fontFamily' => '"Raleway", sans-serif', 'slug' => 'raleway', 'name' => 'Raleway', 'google' => 'family=Raleway:ital,wght@0,100..900;1,100..900', ), 'red-hat-display' => array( 'fontFamily' => '"Red Hat Display", sans-serif', 'slug' => 'red-hat-display', 'name' => 'Red Hat Display', 'google' => 'family=Red+Hat+Display:ital,wght@0,400;0,500;0,700;0,900;1,400;1,500;1,700;1,900', ), 'roboto' => array( 'fontFamily' => '"Roboto", sans-serif', 'slug' => 'roboto', 'name' => 'Roboto', 'google' => 'family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,800;1,900', ), 'roboto-slab' => array( 'fontFamily' => '"Roboto Slab", sans-serif', 'slug' => 'roboto-slab', 'name' => 'Roboto Slab', 'google' => 'family=Roboto+Slab:wght@100..900', ), 'rubik' => array( 'fontFamily' => '"Rubik", sans-serif', 'slug' => 'rubik', 'name' => 'Rubik', 'google' => 'family=Rubik:ital,wght@0,300..900;1,300..900', ), 'source-sans-pro' => array( 'fontFamily' => '"Source Sans Pro", sans-serif', 'slug' => 'source-sans-pro', 'name' => 'Source Sans Pro', 'google' => 'family=Source+Sans+Pro:ital,wght@0,200;0,300;0,400;0,600;0,700;0,900;1,200;1,300;1,400;1,600;1,700;1,900', ), 'source-serif-pro' => array( 'fontFamily' => '"Source Serif Pro", serif', 'slug' => 'source-serif-pro', 'name' => 'Source Serif Pro', 'google' => 'family=Source+Serif+Pro:ital,wght@0,200;0,300;0,400;0,600;0,700;0,900;1,200;1,300;1,400;1,600;1,700;1,900', ), 'space-mono' => array( 'fontFamily' => '"Space Mono", sans-serif', 'slug' => 'space-mono', 'name' => 'Space Mono', 'google' => 'family=Space+Mono:ital,wght@0,400;0,700;1,400;1,700', ), 'work-sans' => array( 'fontFamily' => '"Work Sans", sans-serif', 'slug' => 'work-sans', 'name' => 'Work Sans', 'google' => 'family=Work+Sans:ital,wght@0,100..900;1,100..900', ), ); function __construct() { add_action( 'customize_register', array( $this, 'initialize' ) ); add_action( 'customize_preview_init', array( $this, 'handle_customize_preview_init' ) ); add_action( 'customize_register', array( $this, 'enqueue_google_fonts' ) ); add_action( 'customize_save_after', array( $this, 'handle_customize_save_after' ) ); add_action( 'customize_controls_enqueue_scripts', array( $this, 'customize_control_js' ) ); } function handle_customize_preview_init( $wp_customize ) { $this->update_font_settings( $wp_customize ); $this->customize_preview_js( $wp_customize ); $this->create_customization_style_element( $wp_customize ); } function customize_preview_js( $wp_customize ) { if ( $this->fonts && $this->font_settings ) { wp_enqueue_script( 'customizer-preview-fonts', get_template_directory_uri() . '/inc/customizer/wp-customize-fonts-preview.js', array( 'customize-preview' ) ); wp_localize_script( 'customizer-preview-fonts', 'googleFonts', $this->fonts ); wp_localize_script( 'customizer-preview-fonts', 'fontSettings', $this->font_settings ); } } function customize_control_js() { if ( $this->font_control_default_body && $this->font_control_default_heading ) { wp_enqueue_script( 'customizer-font-control', get_template_directory_uri() . '/inc/customizer/wp-customize-fonts-control.js', array( 'customize-controls' ), null, true ); wp_localize_script( 'customizer-font-control', 'fontControlDefaultBody', array( $this->font_control_default_body ) ); wp_localize_script( 'customizer-font-control', 'fontControlDefaultHeading', array( $this->font_control_default_heading ) ); } } function enqueue_google_fonts() { wp_enqueue_style( 'blockbase-google-fonts', $this->google_fonts_url(), array(), null ); } function create_customization_style_element( $wp_customize ) { if ( $this->font_settings ) { wp_enqueue_style( 'global-styles-fonts-customizations', ' ', array( 'global-styles' ) ); // This needs to load after global_styles, hence the dependency $css = 'body {'; $css .= '--wp--preset--font-family--body-font:' . $this->font_settings['body'] . ';'; $css .= '--wp--preset--font-family--heading-font:' . $this->font_settings['heading'] . ';'; $css .= '}'; wp_add_inline_style( 'global-styles-fonts-customizations', $css ); } } function update_font_settings( $wp_customize ) { $body_setting = $wp_customize->get_setting( $this->section_key . 'body' ); $heading_setting = $wp_customize->get_setting( $this->section_key . 'heading' ); if ( $body_setting && $heading_setting ) { $body_value = $body_setting->post_value(); if ( $body_value ) { $body_font_setting = $this->fonts[ $body_value ]; $this->font_settings['body'] = $body_font_setting['fontFamily']; } $heading_value = $heading_setting->post_value(); if ( $heading_value ) { $heading_font_setting = $this->fonts[ $heading_value ]; $this->font_settings['heading'] = $heading_font_setting['fontFamily']; } } } function google_fonts_url() { $font_families = array(); foreach ( $this->fonts as $font ) { if ( ! empty( $font['google'] ) ) { $font_families[] = $font['google']; } } $font_families[] = 'display=swap'; // Make a single request for the theme fonts. return esc_url_raw( 'https://fonts.googleapis.com/css2?' . implode( '&', $font_families ) ); } function initialize( $wp_customize ) { $theme = wp_get_theme(); //Add a Section to the Customizer for these bits $wp_customize->add_section( $this->section_key, array( 'capability' => 'edit_theme_options', 'description' => sprintf( __( 'Font Customization for %1$s', 'blockbase' ), $theme->name ), 'title' => __( 'Fonts', 'blockbase' ), ) ); $merged_json = WP_Theme_JSON_Resolver_Gutenberg::get_merged_data()->get_raw_data(); $theme_font_families = $merged_json['settings']['typography']['fontFamilies']['theme']; $body_font_default_array = array_filter( $theme_font_families, function( $font_family ) { return 'body-font' === $font_family['slug']; } ); $body_font_default = array_shift( $body_font_default_array ); $heading_font_default_array = array_filter( $theme_font_families, function( $font_family ) { return 'heading-font' === $font_family['slug']; } ); $heading_font_default = array_shift( $heading_font_default_array ); // See if the child theme has been updated. If not then show a notice. if ( ! $body_font_default && ! $heading_font_default ) { $wp_customize->add_control( $this->section_key . '-v1-blockbase-format-notice', array( 'type' => 'hidden', 'description' => '
' . __( 'Your theme needs to be updated before you can customize fonts', 'blockbase' ) . '