Fix for confusing palette switch in customizer

[cristian-ungureanu]

Summary

This is not exactly a bug as described in the video attached. The problem comes from the fact that we take into consideration the user's last choice inside the customizer. Please see the video for the exact explanation.
What I did here was to actually check if we're inside the customizer and the auto adjust feature is on and if that happens, ignore the user's last pallet choice stored inside the localStorage.

Note for the code reviewer: The script is added in PHP so we minimized it there. Here's the unminimized version of the current changes so you could understand it easier:

/**
 * Get JS contents from file to use as inline script.
 *
 * @return string
 */
public function toggle_script() {
  $auto_adjust = Mods::get($this->get_id() . '_' . self::AUTO_ADJUST, 0);
  $default_state = '"light"';
  
  if ($auto_adjust) {
	  $default_state = 'window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"';
  }
  
  return '
		    !function() {
		        const e = "neve_user_theme";
		        const t = "data-neve-theme";
  
		        let n = ' . ( ! $auto_adjust && ! is_customize_preview() ? 'localStorage.getItem(e);' : $default_state ) . ';
  
		        document.documentElement.setAttribute(t, n);
  
		        document.addEventListener("click", (n => {
		            if (n.target.matches(".palette-icon-wrapper, .palette-icon-wrapper *")) {
		                (n => {
		                    n.preventDefault();
		                    const a = "light" === document.documentElement.getAttribute(t) ? "dark" : "light";
		                    document.documentElement.setAttribute(t, a);
		                    localStorage.setItem(e, a);
		                })(n);
		            }
		        }));
		    }();
        ';
}

This is the code we currently have on production:

public function toggle_script() {
    $auto_adjust = Mods::get($this->get_id() . '_' . self::AUTO_ADJUST, 0);
    $default_state = '"light"';

    if ($auto_adjust) {
        $default_state = 'window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"';
    }

    return '
    !function() {
        const e = "neve_user_theme";
        const t = "data-neve-theme";
        
        let n = ' . $default_state . ';
        
        if ("dark" === localStorage.getItem(e)) {
            n = "dark";
        }
        
        document.documentElement.setAttribute(t, n);
        
        document.addEventListener("click", (n => {
            if (n.target.matches(".palette-icon-wrapper, .palette-icon-wrapper *")) {
                (n => {
                    n.preventDefault();
                    const a = "light" === document.documentElement.getAttribute(t) ? "dark" : "light";
                    document.documentElement.setAttribute(t, a);
                    localStorage.setItem(e, a);
                })(n);
            }
        }));
    }();
    ';
}

Will affect visual aspect of the product

NO

Screenshots

https://vertis.d.pr/v/Eu77Sa

Test instructions

• Import the Agency starter site
• Go to Customizer and add a palette switcher in the header
• Inside the palette switcher settings, set a dark palette, other than the "Dark" one
• Click on the toggle inside the previewer to change the palette so your last choice is the dark one that you've just set
• Go and change the light palette, the changes should be visible inside the customizer ( until now, they weren't )

Please test the following cases:

• First, please test that everything remains the same on frontend after you update to this version
• Please test if the issue is fixed inside the customizer
• Test that the auto-adjustment feature still works.

Note: This feature already has e2e tests and if the changes I've made affect anything on the front end, they should fail.

Check before Pull Request is ready:

• I have written a test and included it in this PR
• I have run all tests and they pass
• The code passes when running the PHP CodeSniffer
• Code meets WordPress Coding Standards for PHP, HTML, CSS and JS
• Security and Sanitization requirements have been followed
• I have assigned a reviewer or two to review this PR (if you're not sure who to assign, we can do this step for you)

Closes #4025.

[pirate-bot]

Plugin build for 3fde811 is ready 🛎️!

• Download build

[irinelenache]

@cristian-ungureanu Tested and everything's fine here 🚀

[pirate-bot]

🎉 This PR is included in version 3.6.7 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀