Skip to content
This repository was archived by the owner on Feb 17, 2025. It is now read-only.

Blockbase: Register Fonts via Webfonts API instead of theme.json #6794

Open
jffng wants to merge 4 commits into
base: trunk
Choose a base branch
from
Open

Blockbase: Register Fonts via Webfonts API instead of theme.json #6794

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
31bce23
Register custom fonts conditionally.
jffng Dec 21, 2022
77295cd
Change and to or.
jffng Dec 21, 2022
f10111e
Simplify font list.
jffng Dec 22, 2022
6bf79ff
Add back Helvetica Neue.
jffng Jan 9, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Next Next commit
Register custom fonts conditionally.
  • Loading branch information
@jffng
jffng committed Dec 21, 2022
commit 31bce23fb35a3d1fa42873a32407c99f711a3419
7 changes: 6 additions & 1 deletion blockbase/functions.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -102,8 +102,13 @@ function blockbase_scripts() {
require get_template_directory() . '/inc/social-navigation.php';
}

require get_template_directory() . '/inc/fonts/custom-fonts.php';

/**
* Do not use the custom fonts provided by Blockbase if Jetpack fonts module is active
*/
if ( ! class_exists( 'Jetpack' ) && ! Jetpack::is_module_active( 'google-fonts' ) ) {
require get_template_directory() . '/inc/fonts/custom-fonts.php';
}

// Force menus to reload
add_action(
Expand Down
49 changes: 34 additions & 15 deletions blockbase/inc/fonts/custom-fonts.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,11 +6,6 @@
// Font Migration
require get_template_directory() . '/inc/fonts/custom-font-migration.php';

add_action( 'init', 'enqueue_global_styles_fonts', 100 );
add_action( 'admin_init', 'enqueue_fse_font_styles' );
add_filter( 'pre_render_block', 'enqueue_block_fonts', 10, 2 );
add_filter( 'jetpack_google_fonts_list', 'blockbase_filter_jetpack_google_fonts_list' );

$blockbase_enqueued_font_slugs = array();

/**
Expand Down Expand Up @@ -119,8 +114,7 @@ function extract_font_slug_from_setting( $setting ) {
*/
function collect_fonts_from_blockbase() {
$fonts = array();
$parent_theme_json_data = json_decode( file_get_contents( get_template_directory() . '/theme.json' ), true );
$font_families = $parent_theme_json_data['settings']['typography']['fontFamilies'];
$font_families = json_decode( file_get_contents( get_template_directory() . '/inc/fonts/fontFamilies.json' ), true )['fontFamilies'];

foreach ( $font_families as $font ) {
// Only pick it up if we're claiming it as ours to manage
Expand Down Expand Up @@ -205,12 +199,37 @@ function enqueue_block_fonts( $content, $parsed_block ) {
return $content;
}

/**
* Jetpack may attempt to register fonts for the Google Font Provider.
* If that happens on a child theme then ONLY Jetpack fonts are registered.
* This 'filter' filters out all of the fonts Jetpack should register
* so that we depend exclusively on those provided by Blockbase.
*/
function blockbase_filter_jetpack_google_fonts_list( $list_to_filter ) {
return array();
function blockbase_register_fonts() {
if ( ! function_exists( 'wp_register_webfonts' ) ) {
return;
}

$font_families = collect_fonts_from_blockbase();
foreach ( $font_families as $font_family ) {
wp_register_webfonts(
array(
array(
// 'name' key will eventually be supported: https://github.com/WordPress/gutenberg/issues/46398,
// in cases where we want the font's display name to differ from the 'font-family' key.
'font-family' => $font_family['name'],
'font-weight' => '100 900',
'font-style' => 'normal',
'font-display' => 'fallback',
'provider' => $font_family['provider'],
),
array(
'font-family' => $font_family['name'],
'font-weight' => '100 900',
'font-style' => 'italic',
'font-display' => 'fallback',
'provider' => $font_family['provider'],
),
)
Copy link
Member

@simison simison Dec 21, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

FYI using wp_register_webfonts with this array signature is fine today, we'll just need to migrate to new format once the new API stabilizes, as this exact format got deprecated.

More in WordPress/gutenberg#43492

Copy link
Contributor Author

@jffng jffng Dec 21, 2022 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Gotcha. If this approach is acceptable, we can open a follow-up PR to change the format and merge it after the new API lands in Gutenberg 14.9.

Copy link
Member

@simison simison Dec 22, 2022 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yep exactly. We'll also need to migrate Jetpack Automattic/jetpack#28054

Copy link
Member

@simison simison Dec 27, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

More info here: Automattic/jetpack#28063

);
}
}

add_action( 'init', 'enqueue_global_styles_fonts', 100 );
Copy link
Contributor Author

@jffng jffng Dec 21, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Note I just moved all action and filter registrations to the bottom since it seems to be more of a convention to do this way.

add_action( 'admin_init', 'enqueue_fse_font_styles' );
add_filter( 'pre_render_block', 'enqueue_block_fonts', 10, 2 );
add_action( 'after_setup_theme', 'blockbase_register_fonts' );
195 changes: 195 additions & 0 deletions blockbase/inc/fonts/fontFamilies.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,195 @@
{
"fontFamilies": [
{
"fontFamily": "Arvo",
"slug": "arvo",
"name": "Arvo",
"provider": "blockbase-fonts"
},
{
"fontFamily": "'Bodoni Moda', serif",
"slug": "bodoni-moda",
"name": "Bodoni Moda",
"provider": "blockbase-fonts"
},
{
"fontFamily": "Cabin, sans-serif",
"slug": "cabin",
"name": "Cabin",
"provider": "blockbase-fonts"
},
{
"fontFamily": "Chivo, sans-serif",
"slug": "chivo",
"name": "Chivo",
"provider": "blockbase-fonts"
},
{
"fontFamily": "'Courier Prime', serif",
"slug": "courier-prime",
"name": "Courier Prime",
"provider": "blockbase-fonts"
},
{
"fontFamily": "'DM Sans', sans-serif",
"slug": "dm-sans",
"name": "DM Sans",
"provider": "blockbase-fonts"
},
{
"fontFamily": "Domine, serif",
"slug": "domine",
"name": "Domine",
"provider": "blockbase-fonts"
},
{
"fontFamily": "'EB Garamond', serif",
"slug": "eb-garamond",
"name": "EB Garamond",
"provider": "blockbase-fonts"
},
{
"fontFamily": "'Fira Sans', sans-serif",
"slug": "fira-sans",
"name": "Fira Sans",
"provider": "blockbase-fonts"
},
{
"fontFamily": "'Helvetica Neue','Helvetica', 'Arial', sans-serif",
"slug": "helvetica-neue",
"name": "Helvetica Neue"
},
{
"fontFamily": "'IBM Plex Mono', monospace",
"slug": "ibm-plex-mono",
"name": "IBM Plex Mono",
"provider": "blockbase-fonts"
},
{
"fontFamily": "Inter, sans-serif",
"slug": "inter",
"name": "Inter",
"provider": "blockbase-fonts"
},
{
"fontFamily": "'Josefin Sans', sans-serif",
"slug": "josefin-sans",
"name": "Josefin Sans",
"provider": "blockbase-fonts"
},
{
"fontFamily": "'Libre Baskerville', serif",
"slug": "libre-baskerville",
"name": "Libre Baskerville",
"provider": "blockbase-fonts"
},
{
"fontFamily": "'Libre Franklin', sans-serif",
"slug": "libre-franklin",
"name": "Libre Franklin",
"provider": "blockbase-fonts"
},
{
"fontFamily": "Lora, serif",
"slug": "lora",
"name": "Lora",
"provider": "blockbase-fonts"
},
{
"fontFamily": "Merriweather, serif",
"slug": "merriweather",
"name": "Merriweather",
"provider": "blockbase-fonts"
},
{
"fontFamily": "Montserrat, sans-serif",
"slug": "montserrat",
"name": "Montserrat",
"provider": "blockbase-fonts"
},
{
"fontFamily": "Nunito, sans-serif",
"slug": "nunito",
"name": "Nunito",
"provider": "blockbase-fonts"
},
{
"fontFamily": "'Open Sans', sans-serif",
"slug": "open-sans",
"name": "Open Sans",
"provider": "blockbase-fonts"
},
{
"fontFamily": "Overpass, sans-serif",
"slug": "overpass",
"name": "Overpass",
"provider": "blockbase-fonts"
},
{
"fontFamily": "'Playfair Display', serif",
"slug": "playfair-display",
"name": "Playfair Display",
"provider": "blockbase-fonts"
},
{
"fontFamily": "Poppins, sans-serif",
"slug": "poppins",
"name": "Poppins",
"provider": "blockbase-fonts"
},
{
"fontFamily": "Raleway, sans-serif",
"slug": "raleway",
"name": "Raleway",
"provider": "blockbase-fonts"
},
{
"fontFamily": "'Red Hat Display', sans-serif",
"slug": "red-hat-display",
"name": "Red Hat Display",
"provider": "blockbase-fonts"
},
{
"fontFamily": "Roboto, sans-serif",
"slug": "roboto",
"name": "Roboto",
"provider": "blockbase-fonts"
},
{
"fontFamily": "'Roboto Slab', sans-serif",
"slug": "roboto-slab",
"name": "Roboto Slab",
"provider": "blockbase-fonts"
},
{
"fontFamily": "Rubik, sans-serif",
"slug": "rubik",
"name": "Rubik",
"provider": "blockbase-fonts"
},
{
"fontFamily": "'Source Sans Pro', sans-serif",
"slug": "source-sans-pro",
"name": "Source Sans Pro",
"provider": "blockbase-fonts"
},
{
"fontFamily": "'Source Serif Pro', sans-serif",
"slug": "source-serif-pro",
"name": "Source Serif Pro",
"provider": "blockbase-fonts"
},
{
"fontFamily": "'Space Mono', sans-serif",
"slug": "space-mono",
"name": "Space Mono",
"provider": "blockbase-fonts"
},
{
"fontFamily": "'Work Sans', sans-serif",
"slug": "work-sans",
"name": "Work Sans",
"provider": "blockbase-fonts"
}
]
}
Loading