Topic: Adding fonts from a Block Theme

Nick
June 6, 2024 at 1:52 am

How can I make fonts registered in a Block Theme (via Theme.json and/or the WordPress Font Manager in the site editor) appear in the list of fonts in Generate Blocks ‘typography’ settings? All I see is ‘system fonts’.

Thanks

David

June 6, 2024 at 3:32 am

Hi there,

its not directly possible at this time, it is something we are looking into for a future update.

For now you would need to pass the values to GB using this filter:


add_filter(
    'generateblocks_typography_font_family_list',
    function( $fonts ) {
        $fonts[] = [
            'label' => 'My custom fonts',
            'options' => [
                [
                    'label' => 'My Font Label',
                    'value' => 'my_font_family_name',
                ],
            ],
        ];
        return $fonts;
    }
);

Nick

June 6, 2024 at 4:43 am

No worries, that works perfectly! A setting to pull them in from theme.json would be a great feature. I’ve hacked together a snippet to pull them in automatically (NB there is no error handling or sanitisation included here):

add_filter(
    'generateblocks_typography_font_family_list',
    function ($fonts) {
        // Only run this in the admin/editor, not on the front end
        if (is_admin()) {
            // Get the path to the active theme's theme.json file
            $theme_json_path = get_template_directory() . '/theme.json';

            if (file_exists($theme_json_path)) {
                // Read the theme.json file
                $theme_json_content = file_get_contents($theme_json_path);
                $theme_json = json_decode($theme_json_content, true);

                // Check if there are font families declared in theme.json
                if (isset($theme_json['settings']['typography']['fontFamilies'])) {
                    $font_families = $theme_json['settings']['typography']['fontFamilies'];

                    // Create an array to hold the font options
                    $font_options = [];

                    // Loop through the font families and add them to the font options
                    foreach ($font_families as $font_family) {
                        if (isset($font_family['name']) && isset($font_family['slug'])) {
                            $font_options[] = [
                                'label' => $font_family['name'],
                                'value' => 'var(--wp--preset--font-family--' . $font_family['slug'] . ')',
                            ];
                        }
                    }

                    // Add the fonts to the GenerateBlocks font family list
                    if (!empty($font_options)) {
                        $fonts[] = [
                            'label' => 'Theme Fonts',
                            'options' => $font_options,
                        ];
                    }
                }
            }
        }

        return $fonts;
    }
);

Is there a method for removing the ‘system fonts’ options btw?

David

June 6, 2024 at 6:20 am

Perhaps this ?


function remove_system_fonts_from_generateblocks( $font_families ) {
    foreach ( $font_families as $key => $font_category ) {
        if ( $font_category['label'] === __( 'System Fonts', 'generateblocks' ) ) {
            unset( $font_families[$key] );
        }
    }
    
    return array_values($font_families);
}

add_filter( 'generateblocks_typography_font_family_list', 'remove_system_fonts_from_generateblocks' );

Nick
June 7, 2024 at 7:02 am

Thanks, this borks the site but I’ll debug now I know what the filters are!
David
June 8, 2024 at 12:57 am

Sorry about that. Did you resolve the issue ?

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.

Are you a GenerateCustomer?

Just browsing?

Adding fonts from a Block Theme