wp-customize-fonts-preview.js 794 B

1234567891011121314151617181920212223242526
  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. let innerHTML = 'body {';
  16. innerHTML += `--wp--preset--font-family--body-font:${ fontSettings[ 'body' ] };`;
  17. innerHTML += `--wp--preset--font-family--heading-font:${ fontSettings[ 'heading' ] };`;
  18. innerHTML += '}';
  19. // Inject them into the body.
  20. const styleElement = document.getElementById(
  21. 'global-styles-fonts-customizations-inline-css'
  22. );
  23. styleElement.innerHTML = innerHTML;
  24. }