Customizer should display "Fade" effect for entire iFrame for settings using partialRefresh when selector is not visible

[AJClarke]

When modifying the value of a setting in the customizer that uses partialRefresh for the transport, typically, the element that is being modified on the live site fades out as the customizer replaces the element with the correct output. This gives the user a nice visual letting them know to be patient as the output is modified.

In some cases, the element being modified may not be visible in which case there is no cue to the user to let them know things are being updated.

A good example would be an advanced setting for changing the color scheme of the site which adds inline CSS to the head tag. Here is a little video example: ​https://cl.ly/illS (I don't use postMessage for this setting because there are filters in place so developers can hook in custom elements to be modified and for 3rd party plugin support).

I'm sure there are other circumstances where a setting may be altering a "hidden" element. This is just one example and while there is very little delay in my specific example, I believe for consistency and UI purposes it would make sense to add the extra check to see if the element is visible and if not fade-out the whole iFrame during the refresh process.

Thank you for considering!

[westonruter]

@AJClarke cheers for the suggestion. I think that probably makes sense, at least in the case of selective refresh for a partial whose placement container is a style element since clearly the refreshed element should will cause some visual change to the page which the user should be looking for. I can't think of other cases where a partial's placement container would be hidden, so I don't know if the change you're suggesting should be applied to all or just style.

Milestoning to 4.5 since that is when selective refresh was introduced.

See also #39389 (Customize: Make sure selective refreshed partial placement is scrolled into view).

[AJClarke]

Hi Weston,

Some other examples I can think of off the top of my head may be...

• Customizing a meta tag (like viewport)
• Altering a stylesheet without using postMessage
• Inline Javascript
• Elements that display on hover only

Not sure what else, I do believe the main usage would be for the style attribute.

Replying to westonruter:

@AJClarke cheers for the suggestion. I think that probably makes sense, at least in the case of selective refresh for a partial whose placement container is a style element since clearly the refreshed element should will cause some visual change to the page which the user should be looking for. I can't think of other cases where a partial's placement container would be hidden, so I don't know if the change you're suggesting should be applied to all or just style.

Milestoning to 4.5 since that is when selective refresh was introduced.

See also #39389 (Customize: Make sure selective refreshed partial placement is scrolled into view).