Customizer selective refresh: improve the error messages style

[afercia]

When the new Customizer selective refresh displays an error, the error is injected in places that already have their own styles defined, thus the error message could inherit styles with undesirable results. A bit of CSS should make the error message style as much independent as possible from the theme style.

On the left, how it looks like right now. On the right, a simple proposal.

[afercia]

The proposed patch uses the new official WordPress colors, avoiding to introduce new ones.

[melchoyce]

Related: #35210

[afercia]

Second pass, to address design feedback. There's an issue though. Since the error message gets injected inside the affected element and this element needs to be highlighted someway because it's clickable, the red outline used for highlighting ends up wrapping also the error message. See screenshot in the top part.
Given how it currently works and the current markup I couldn't find any other solution than trying to hide a bit the red outline. See screenshot in the bottom part. Out of ideas.

Would need a new idea to highlight the clickable element of different markup. Any thoughts and patches welcome :) cc @westonruter

[afercia]

Also, say the tagline is empty and there's an error. The tagline won't have an height (actually it could, it depends on the theme) and the red outline would be just a horizontal line. Maybe forcing the affected area to always be "block" and have a minimum height could help.

[melchoyce]

These really need to be in the sidebar, not the content area. @westonruter is that possible to get done in time for 4.5? Injecting errors into the preview of someone's site is really rough.

@afercia: can we go with a red "glow" outline on focus? And add a couple pixels of space between the red outline around the element and the error message?

[westonruter]

Replying to melchoyce:

These really need to be in the sidebar, not the content area. @westonruter is that possible to get done in time for 4.5? Injecting errors into the preview of someone's site is really rough.

If the errors are displayed in the sidebar then they would lose the context for which partial has the issue. These errors should be displayed infrequently. Formerly, such an error would have completely wrecked the Customizer entirely. So having an error message displayed is way better than the previous behavior :) In any case, we don't have a refined notification area yet (#35210), so there isn't a place in the sidebar to display them in 4.5.

[melchoyce]

If we're worried about losing context, could the error notice be display in the sidebar below whichever item is throwing the error? That would be vastly preferred to messing up the preview of someone's site.

[westonruter]

@melchoyce That is possible, and the UI for this has been prototyped in #34893, but it's too late for 4.5. I suggest we proceed with letting the error appear inline within the preview partial for this release (as again, it should be an exception—pun intended—rather than the norm). If that is not acceptable, then note also that the error message is also written out to the JS console via console.error(). The user would have to have their dev tools open to see it, however.

[afercia]

Replying to melchoyce:

@afercia: can we go with a red "glow" outline on focus? And add a couple pixels of space between the red outline around the element and the error message?

@melchoyce patches welcome :)

[melchoyce]

Replying to westonruter:

@melchoyce That is possible, and the UI for this has been prototyped in #34893, but it's too late for 4.5. I suggest we proceed with letting the error appear inline within the preview partial for this release (as again, it should be an exception—pun intended—rather than the norm). If that is not acceptable, then note also that the error message is also written out to the JS console via console.error(). The user would have to have their dev tools open to see it, however.

What happens when a user sees this? Can they dismiss the message, or do they have to reload the customizer to get rid of the error? Will there be any copy that tells them how to fix it or what's wrong? Is there any way to say whether it's a theme or a plugin that caused the error?

It seems super alarming that we're dropping code errors into someone's site preview. If I saw that without context, I would think that I broke my website and would probably panic. I expect to sometimes encounter errors in WordPress, but I don't expect to see those errors displayed on my site — even if it is just a preview. We should prioritize #34893 in 4.6.

[westonruter]

@melchoyce good points. I added 4.6-early to #34893.

If you'd like to remove the inline error message, the patch to do so is 36164.3-removal.diff​.

[helen]

Showing errors that wouldn't actually appear seems rather counter to the purpose of live previewing :) People who can actually make sense of those errors are perfectly capable of opening up dev tools, let's just leave them there.

[westonruter]

In 36890:

Customize: Remove selective refresh error message from appearing inline within the preview.

The error message will still be available in the developer console.

Removes part of [36586].
See #27355.
Fixes #36164.

[westonruter]

In 36892:

Customize: Remove unused JS variable to fix jshint error introduced in [36890].

See #36164.