wp-customize-fonts-preview.js 846 B

123456789101112131415161718192021222324252627
  1. if ( fontSettings ) {
  2. Object.keys( fontSettings ).forEach( function ( selector ) {
  3. wp.customize( 'customize-global-styles-fonts' + selector, function (
  4. control
  5. ) {
  6. control.bind( ( newFont ) => {
  7. fontFamily = googleFonts[ newFont ][ 'fontFamily' ];
  8. fontSettings[ selector ] = fontFamily;
  9. blockBaseUpdateFontPreview();
  10. } );
  11. } );
  12. } );
  13. }
  14. function blockBaseUpdateFontPreview() {
  15. // Build the new CSS variables.
  16. let innerHTML = ':root,body{';
  17. innerHTML += `--wp--custom--body--typography--font-family:${ fontSettings[ 'body' ] };`;
  18. innerHTML += `--wp--custom--heading--typography--font-family:${ fontSettings[ 'heading' ] };`;
  19. innerHTML += '}';
  20. // Inject them into the body.
  21. const styleElement = document.getElementById(
  22. 'global-styles-fonts-customizations-inline-css'
  23. );
  24. styleElement.innerHTML = innerHTML;
  25. }