WordPress.org

Make WordPress Core

Opened 5 years ago

Closed 5 years ago

Last modified 5 years ago

#36164 closed defect (bug) (fixed)

Customizer selective refresh: improve the error messages style

Reported by: afercia Owned by: melchoyce
Milestone: 4.5 Priority: normal
Severity: normal Version: 4.6
Component: Customize Keywords: has-screenshots has-patch
Focuses: ui Cc:

Description

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.

https://cldup.com/4LDM1eiVyJ.png

Attachments (3)

36164.patch (679 bytes) - added by afercia 5 years ago.
36164.2.patch (886 bytes) - added by afercia 5 years ago.
36164.3-removal.diff (1.4 KB) - added by westonruter 5 years ago.

Download all attachments as: .zip

Change History (21)

@afercia
5 years ago

#1 @afercia
5 years ago

  • Keywords has-patch added

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

This ticket was mentioned in Slack in #design by afercia. View the logs.


5 years ago

#3 @westonruter
5 years ago

  • Keywords commit added

@afercia
5 years ago

#5 @afercia
5 years ago

  • Keywords commit removed

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

https://cldup.com/ysoYNGmRXP.png

#6 @afercia
5 years ago

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.

#7 follow-ups: @melchoyce
5 years ago

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?

#8 in reply to: ↑ 7 @westonruter
5 years ago

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.

#9 @melchoyce
5 years ago

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.

#10 follow-up: @westonruter
5 years ago

@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.

#11 in reply to: ↑ 7 @afercia
5 years ago

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 :)

#12 in reply to: ↑ 10 @melchoyce
5 years ago

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.

#13 @westonruter
5 years ago

@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.

#14 @westonruter
5 years ago

  • Owner set to melchoyce
  • Status changed from new to reviewing

This ticket was mentioned in Slack in #design by melchoyce. View the logs.


5 years ago

#16 @helen
5 years ago

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.

#17 @westonruter
5 years ago

  • Resolution set to fixed
  • Status changed from reviewing to closed

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.

#18 @westonruter
5 years ago

In 36892:

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

See #36164.

Note: See TracTickets for help on using tickets.