customizer-preview.js 786 B

123456789101112131415161718192021222324252627
  1. if ( userColorPalette ) {
  2. // For each of the palette items add a listener
  3. userColorPalette.forEach( ( paletteItem ) => {
  4. const settingName = 'customize-global-styles' + paletteItem.slug;
  5. wp.customize( settingName, ( value ) => {
  6. value.bind( ( newValue ) => {
  7. paletteItem.color = newValue;
  8. updatePreview( userColorPalette );
  9. } );
  10. } );
  11. } );
  12. }
  13. function updatePreview( palette ) {
  14. // build the CSS variables to inject
  15. let innerHTML = ':root,body{';
  16. palette.forEach( ( paletteItem ) => {
  17. innerHTML += `--wp--preset--color--${ paletteItem.slug }:${ paletteItem.color };`;
  18. } );
  19. innerHTML += ';}';
  20. // inject them into the body
  21. const styleElement = document.getElementById(
  22. 'global-styles-customizations-inline-css'
  23. );
  24. styleElement.innerHTML = innerHTML;
  25. }