wp-customize-fonts-preview.js 893 B

123456789101112131415161718192021222324252627282930
  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 body CSS
  16. let innerHTML = 'body{';
  17. innerHTML += `font-family:${ fontSettings[ 'body' ] };`;
  18. innerHTML += '}';
  19. // Build the new heading CSS
  20. innerHTML += 'h1,h2,h3,h4,h5,h6,.wp-block-post-title,.wp-block-pullquote{';
  21. innerHTML += `font-family:${ fontSettings[ 'heading' ] };`;
  22. innerHTML += '}';
  23. // Inject them into the body.
  24. const styleElement = document.getElementById(
  25. 'global-styles-fonts-customizations-inline-css'
  26. );
  27. styleElement.innerHTML = innerHTML;
  28. }