Blank Canvas Blocks: Add support for Google fonts

This commit is contained in:
Ben Dwyer 2021-03-10 17:53:07 +00:00
parent e03764af82
commit cca361f249
4 changed files with 62 additions and 2 deletions

View file

@ -265,6 +265,7 @@ h1, h2, h3, h4, h5, h6 {
h1, h2, h3, h4, h5, h6 {
clear: both;
font-family: var(--wp--custom--fonts--primary);
}
/**

View file

@ -80,6 +80,10 @@
]
},
"custom": {
"fonts": {
"primary": "'Playfair Display', Georgia, Times, serif",
"secondary": "'Fira Sans', Helvetica, Arial, sans-serif"
},
"color": {
"primary": "var(--wp--preset--color--black)",
"secondary": "var(--wp--preset--color--blue)",

View file

@ -19,7 +19,8 @@ if ( ! function_exists( 'blank_canvas_blocks_support' ) ) :
add_theme_support( 'editor-styles' );
// Enqueue editor styles.
add_editor_style( array(
add_editor_style( array(
blank_canvas_blocks_fonts_url(),
'/assets/ponyfill.css'
) );
@ -28,10 +29,62 @@ if ( ! function_exists( 'blank_canvas_blocks_support' ) ) :
endif;
/**
*
*
* Enqueue scripts and styles.
*/
function blank_canvas_blocks_scripts() {
// Enqueue Google fonts
wp_enqueue_style( 'blank-canvas-blocks-fonts', blank_canvas_blocks_fonts_url(), array(), null );
wp_enqueue_style( 'blank_canvas_blocks-ponyfill', get_template_directory_uri() . '/assets/ponyfill.css', array(), wp_get_theme()->get( 'Version' ) );
}
add_action( 'wp_enqueue_scripts', 'blank_canvas_blocks_scripts', 11 );
/**
* Add Google webfonts, if necessary
*
* - See: http://themeshaper.com/2014/08/13/how-to-add-google-fonts-to-wordpress-themes/
*/
function blank_canvas_blocks_fonts_url() {
$fonts_url = '';
/* Translators: If there are characters in your language that are not
* supported by Fira Sans, translate this to 'off'. Do not translate
* into your own language.
*/
$fira_sans = esc_html_x( 'on', 'Fira Sans: on or off', 'blank-canvas-blocks' );
/* Translators: If there are characters in your language that are not
* supported by Playfair Display, translate this to 'off'. Do not translate
* into your own language.
*/
$playfair_display = esc_html_x( 'on', 'Playfair Display: on or off', 'blank-canvas-blocks' );
if ( 'off' !== $fira_sans || 'off' !== $playfair_display ) {
$font_families = array();
if ( 'off' !== $fira_sans ) {
$font_families[] = 'Fira Sans:ital,wght@0,400;0,500;1,400';
}
if ( 'off' !== $playfair_display ) {
$font_families[] = 'Playfair Display:ital,wght@0,400;0,700;1,400';
}
/**
* A filter to enable child themes to add/change/omit font families.
*
* @param array $font_families An array of font families to be imploded for the Google Font API
*/
$font_families = apply_filters( 'included_google_font_families', $font_families );
$query_args = array(
'family' => urlencode( implode( '|', $font_families ) ),
'subset' => urlencode( 'latin,latin-ext' ),
);
$fonts_url = add_query_arg( $query_args, 'https://fonts.googleapis.com/css' );
}
return esc_url_raw( $fonts_url );
}

View file

@ -1,3 +1,5 @@
h1, h2, h3, h4, h5, h6 {
clear: both;
font-family: var(--wp--custom--fonts--primary);
}