Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
An example of how to add custom fonts to Getwid Blocks.
// hook allows to disable Google Fonts
wp.hooks.addFilter('getwid.fontsControl.enableGoogleFonts', 'getwid', function (enabled) {
// current Google Fonts status(load or not) is passed to function as parameter
// should return true or false
// if return false - Google Fonts won't be loaded
return enabled;
});
// hook allows to filter lists of fonts and add custom
wp.hooks.addFilter('getwid.fontsControl.fonts', 'getwid', function (fonts) {
// list of fonts passed to function as parameter
//
fonts.push({
id: 'my-test-font-group', // - string, identifier of fonts group, can't be empty string '' or 'google-fonts'
title: 'My Test Font Group', // - string, name of fonts group
items: [ // - array of font objects
{
title: 'Font Title 1', // - string, font title displayed in control
family: 'My Test Font 1', // - string, font-family name
variants: [ // - array of available font weights
'100',
'200',
'300',
'400',
'500',
'600',
'700',
'800',
'900',
]
},
{
title: 'Font Title 2',
family: 'My Test Font 2',
variants: [
'300',
'400',
'500',
'700'
]
}
]
});
// should return array of objects with some required properties, example above
return fonts;
});
add_action( 'enqueue_block_editor_assets', function (){ // js script should be enqueued only for editor
wp_enqueue_script(
'my-test',
PATH_TO_YOUR_FILE . '/js/getwid-add-custom-font.js',
[
'wp-hooks' // js script should have wp-hooks in dependencies
]
);
} );
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment