Skip to content

Commit 2acc834

Browse files
ryelleryelle
authored
Fonts: Update editor font handling, load custom fonts for WordCamp Europe (#1216)
* Git: Ignore the fonts directory * Fonts: Remove google fonts provider & deprecated Font API code * Fonts: Add Krona One and Lora to WCEU sites This is a workaround to load the font files on the site as if they're part of the theme.json's settings. * Fonts: Enqueue the google fonts for all sites * Linter fixes
1 parent 4a7b077 commit 2acc834

File tree

3 files changed

+109
-152
lines changed

3 files changed

+109
-152
lines changed

‎.gitignore

+1
Original file line numberDiff line numberDiff line change
@@ -113,3 +113,4 @@ public_html/wp-content/themes/twentytwentyfour
113113
public_html/wp-content/themes/wporg-parent-2021
114114
public_html/wp-content/themes/wporg-events-2023/style.css
115115
public_html/wp-content/themes/wporg-events-2023/editor.css
116+
public_html/wp-content/fonts

‎public_html/wp-content/plugins/wc-fonts/wc-fonts.php

+108-88
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,6 @@
33
* Plugin Name: WordCamp.org Fonts
44
*/
55

6-
require_once __DIR__ . '/wc-google-fonts-provider.php';
7-
86
class WordCamp_Fonts_Plugin {
97
protected $options;
108

@@ -20,7 +18,10 @@ public function __construct() {
2018
add_action( 'wp_head', array( $this, 'wp_head_google_web_fonts' ) );
2119
add_action( 'wp_head', array( $this, 'wp_head_font_awesome' ) );
2220
add_action( 'wp_enqueue_scripts', array( $this, 'enqueue_core_fonts' ) );
23-
add_action( 'init', array( $this, 'register_fonts_for_editor' ) );
21+
22+
// Temporary workaround until we can use the core font library on WordCamp.org.
23+
// See https://github.com/WordPress/gutenberg/pull/57697.
24+
add_filter( 'wp_theme_json_data_theme', array( $this, 'inject_fonts_theme_json' ) );
2425
}
2526

2627
/**
@@ -51,10 +52,8 @@ public function wp_head_google_web_fonts() {
5152
return;
5253
}
5354

54-
if ( ! wp_is_block_theme() ) {
55-
// phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
56-
printf( '<style>%s</style>', $this->options['google-web-fonts'] );
57-
}
55+
// phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
56+
printf( '<style>%s</style>', $this->options['google-web-fonts'] );
5857
}
5958

6059
/**
@@ -316,93 +315,114 @@ public function validate_options( $input ) {
316315
}
317316

318317
/**
319-
* Register the google fonts into WordPress so they can be used in the Site Editor.
318+
* Inject the local fonts for WordCamps.
319+
*
320+
* @todo Remove this when Gutenberg 17.6 is rolled out to WordCamp.org.
321+
*
322+
* @param WP_Theme_JSON_Data $theme_json Class to access and update the underlying data.
323+
*
324+
* @return WP_Theme_JSON_Data The updated theme settings.
320325
*/
321-
public function register_fonts_for_editor() {
322-
if ( ! function_exists( 'wp_register_fonts' ) ) {
323-
return;
324-
}
325-
326-
if ( ! isset( $this->options['google-web-fonts'] ) || empty( $this->options['google-web-fonts'] ) ) {
327-
return;
326+
public function inject_fonts_theme_json( $theme_json ) {
327+
$theme_data = $theme_json->get_data();
328+
if ( ! isset( $theme_data['settings'] ) ) {
329+
return $theme_json;
328330
}
329331

330-
$lines = explode( "\n", $this->options['google-web-fonts'] );
331-
$fonts = array();
332-
foreach ( $lines as $line ) {
333-
if ( preg_match( '#https?://fonts\.googleapis\.com/css2?\?family=[^\)\'"]+#', $line, $matches ) ) {
334-
$url = $matches[0];
335-
$query = explode( '&', wp_parse_url( $url, PHP_URL_QUERY ) );
336-
337-
// Multiple families can be added to one URL, so we need to loop over to parse them.
338-
// We can't just use wp_parse_str because each `family` will overwrite the previous.
339-
foreach ( $query as $family ) {
340-
// Make sure we're working with a `family=` value and not `display=` or anything else.
341-
if ( ! str_starts_with( $family, 'family=' ) ) {
342-
continue;
343-
}
344-
$details = explode( ':', $family );
345-
$name = str_replace( 'family=', '', $details[0] );
346-
$styles = $details[1] ?? '';
347-
348-
$variations = array(
349-
array(
350-
'font-family' => urldecode( $name ),
351-
'provider' => 'wordcamp-google',
352-
),
353-
);
354-
355-
if ( str_contains( $styles, '@' ) ) {
356-
$variations = array_map(
357-
function( $var ) use ( $name ) {
358-
$variation = array(
359-
'font-family' => urldecode( $name ),
360-
'provider' => 'wordcamp-google',
361-
);
362-
if ( isset( $var['ital'] ) ) {
363-
$variation['font-style'] = '0' === $var['ital'] ? 'normal' : 'italic';
364-
}
365-
if ( isset( $var['wght'] ) ) {
366-
$variation['font-weight'] = str_replace( '..', ' ', $var['wght'] );
367-
}
368-
return $variation;
369-
},
370-
$this->parse_google_font_variations( $styles )
371-
);
372-
}
373-
374-
$fonts[ urldecode( $name ) ] = $variations;
375-
}
376-
}
332+
$fonts = _wp_array_get( $theme_data, array( 'settings', 'typography', 'fontFamilies', 'theme' ), array() );
333+
334+
// Add Krona One and Lora to WordCamp Europe sites.
335+
// 1469: europe.wordcamp.org/2024.
336+
// 1511: wceutest24.wordcamp.org/2024.
337+
if ( in_array( get_current_blog_id(), array( 1469, 1511 ) ) ) {
338+
$fonts[] = array(
339+
'fontFace' => array(
340+
array(
341+
'fontFamily' => 'Krona One',
342+
'fontStyle' => 'normal',
343+
'fontWeight' => '400',
344+
'preview' => 'https://s.w.org/images/fonts/16.7/previews/krona-one/krona-one-400-normal.svg',
345+
'src' => site_url( '/wp-content/fonts/krona-one_normal_400.ttf' ),
346+
),
347+
),
348+
'fontFamily' => "'Krona One', sans-serif",
349+
'name' => 'Krona One',
350+
'preview' => 'https://s.w.org/images/fonts/16.7/previews/krona-one/krona-one.svg',
351+
'slug' => 'krona-one',
352+
);
353+
$fonts[] = array(
354+
'fontFace' => array(
355+
array(
356+
'fontFamily' => 'Lora',
357+
'fontStyle' => 'normal',
358+
'fontWeight' => 700,
359+
'preview' => 'https://s.w.org/images/fonts/16.7/previews/lora/lora-700-normal.svg',
360+
'src' => site_url( '/wp-content/fonts/lora_normal_700.ttf' ),
361+
),
362+
array(
363+
'fontFamily' => 'Lora',
364+
'fontStyle' => 'normal',
365+
'fontWeight' => 600,
366+
'preview' => 'https://s.w.org/images/fonts/16.7/previews/lora/lora-600-normal.svg',
367+
'src' => site_url( '/wp-content/fonts/lora_normal_600.ttf' ),
368+
),
369+
array(
370+
'fontFamily' => 'Lora',
371+
'fontStyle' => 'normal',
372+
'fontWeight' => 500,
373+
'preview' => 'https://s.w.org/images/fonts/16.7/previews/lora/lora-500-normal.svg',
374+
'src' => site_url( '/wp-content/fonts/lora_normal_500.ttf' ),
375+
),
376+
array(
377+
'fontFamily' => 'Lora',
378+
'fontStyle' => 'normal',
379+
'fontWeight' => 400,
380+
'preview' => 'https://s.w.org/images/fonts/16.7/previews/lora/lora-400-normal.svg',
381+
'src' => site_url( '/wp-content/fonts/lora_normal_400.ttf' ),
382+
),
383+
array(
384+
'fontFamily' => 'Lora',
385+
'fontStyle' => 'italic',
386+
'fontWeight' => 700,
387+
'preview' => 'https://s.w.org/images/fonts/16.7/previews/lora/lora-700-italic.svg',
388+
'src' => site_url( '/wp-content/fonts/lora_italic_700.ttf' ),
389+
),
390+
array(
391+
'fontFamily' => 'Lora',
392+
'fontStyle' => 'italic',
393+
'fontWeight' => 600,
394+
'preview' => 'https://s.w.org/images/fonts/16.7/previews/lora/lora-600-italic.svg',
395+
'src' => site_url( '/wp-content/fonts/lora_italic_600.ttf' ),
396+
),
397+
array(
398+
'fontFamily' => 'Lora',
399+
'fontStyle' => 'italic',
400+
'fontWeight' => 500,
401+
'preview' => 'https://s.w.org/images/fonts/16.7/previews/lora/lora-500-italic.svg',
402+
'src' => site_url( '/wp-content/fonts/lora_italic_500.ttf' ),
403+
),
404+
array(
405+
'fontFamily' => 'Lora',
406+
'fontStyle' => 'italic',
407+
'fontWeight' => 400,
408+
'preview' => 'https://s.w.org/images/fonts/16.7/previews/lora/lora-400-italic.svg',
409+
'src' => site_url( '/wp-content/fonts/lora_italic_400.ttf' ),
410+
),
411+
),
412+
'fontFamily' => 'Lora',
413+
'name' => 'Lora',
414+
'preview' => 'https://s.w.org/images/fonts/16.7/previews/lora/lora.svg',
415+
'slug' => 'lora',
416+
);
377417
}
378418

379-
wp_register_fonts( $fonts );
380-
wp_enqueue_fonts( array_keys( $fonts ) );
381-
}
419+
// Build a new theme.json object.
420+
$new_data = array(
421+
'version' => 2,
422+
);
423+
_wp_array_set( $new_data, array( 'settings', 'typography', 'fontFamilies', 'theme' ), $fonts );
382424

383-
/**
384-
* Parse the google font options.
385-
*
386-
* Converts the string in a google fonts URL into an array of variations.
387-
* For example, `ital,wght@0,700;1,700` should return:
388-
* [
389-
* [ 'ital' => 0, 'wght' => '700' ],
390-
* [ 'ital' => 1, 'wght' => '700' ],
391-
* ]
392-
*/
393-
public function parse_google_font_variations( $styles ) {
394-
list( $props, $values ) = explode( '@', $styles );
395-
$props = explode( ',', $props );
396-
$values = explode( ';', $values );
397-
398-
$result = array();
399-
foreach ( $values as $i => $value ) {
400-
$style = explode( ',', $value );
401-
foreach ( $props as $j => $prop ) {
402-
$result[ $i ][ $prop ] = $style[ $j ];
403-
}
404-
}
405-
return $result;
425+
return $theme_json->update_with( $new_data );
406426
}
407427
}
408428

‎public_html/wp-content/plugins/wc-fonts/wc-google-fonts-provider.php

-64
This file was deleted.

0 commit comments

Comments
 (0)