Twenty Twenty: Customizer Controls Uncaught Errors

[fmixell]

I noticed that the customizer.js file in the Twenty Twenty theme is loading in the customizer no matter if the theme is being edited or if a plugin is using the customizer. When using any plugin that takes advantage of the customizer you will see the attached type error.

Offending Code:

api.control( 'accent_hue_active' )

Uncaught TypeError: Cannot read property 'setting' of undefined. That's because plugins are loading their settings.

So far I've seen this cause issues with the jQuery UI Slider controls, they just won't load. Switching back to the TwentyNineteen theme or TwentySeventeen theme resolved the issue.

Adding a try catch block around this twenty twenty setting specific code solves the problem for me. Try catch is fully supported now so I think this could be a great, minimal code, solution to this bug.

[fmixell]

Screenshot of error

[fmixell]

Patch

[dlh]

Hi @fmixell, and welcome to WordPress Trac!

Can you provide a code snippet or a list of steps that can be used to replicate this bug?

A try/catch block would eliminate the error, but it would also mean that the Customizer logic in the theme might never run. If possible, I think it would be preferable to wrap the logic in the Customizer's built-in ready event so it will fire once the Customizer API is available. At a glance, Twenty Nineteen's customize-controls.js might be a useful guide to this approach.

[noisysocks]

Replying to fmixell:

When using any plugin that takes advantage of the customizer you will see the attached type error.

Do you have an example of a plugin which causes this error?

I'm not able to see the error locally, and without a reliable way to see it, I'm hesitant to commit a fix.