Add notification area to Customizer

[westonruter]

There is currently no standard location for showing notifications in the Customizer, whether success messages or failures. Currently in the Customizer, if there is a failure to save due to a server error or connectivity problem, there is no visual indicator that a failure happened other than that the Save & Publish button doesn't get disabled. When an error does happen, there should be an error message displayed there.

In #34893, validation constraints are added to settings in the customizer. When validation constraints fail, the error messages should be shown in the notification bar. Likewise, in #34923 there is a proposal to be able to create new pages in the Customizer: the first iteration is just to add new blank pages with only the title supplied, and upon saving we need to be able to provide edit post links for those new pages so that the body content can be fleshed out. These links can be displayed in a notification bar. (These links can also be included in the nav menu item controls.)

The notification bar should facilitate plugins to inject their own messages and indicate failures vs successes.

Tickets dependent on the notification area:

• #29932: There is no error reporting in the Customizer
• #31582: Catching PHP Fatal Errors on WordPress Theme Customizer
• #34893: Improve Customizer setting validation model
• #34923: Introduce basic content authorship in the Customizer

[westonruter]

Notification bar can appear above preview, either shifting down the preview or appearing over the preview. It would need to appear somewhere else on mobile, however, perhaps appearing below the Save & Publish header row.

[karmatosed]

Just checking, but I assume the bar only shows if a notification is in it @westonruter?

[westonruter]

Replying to karmatosed:

Just checking, but I assume the bar only shows if a notification is in it @westonruter?

That's right. It would only appear if there is a message to show.

Under the covers, it would make sense for the notification messages to be stored in a wp.customize.Values (collection) instance. When it is empty, the bar would be hidden. When the collection is populated, the bar would be displayed.

[westonruter]

Mock of notification bar on mobile

[karmatosed]

@westonruter thanks for clarification. Perhaps the phrasing of it as a bar maybe could be changed to notification area? A little change but saves the potential confusion with admin bar.

A few other queries as I look to give some UX feedback:

• Visually was the plan for notifications to take the entire space up?
• What happens with multiple notifications? Do they stack? If they stack, what happens with a large number?
• Will the notifications be the same color and design as used in other areas?

Maybe animation could be explored too, perhaps when the notifications load in or to get people to notice even with a slight bouncing.

[westonruter]

@karmatosed Thanks for the feedback:

Visually was the plan for notifications to take the entire space up?

By taking up the entire space, do you mean the full width of the preview? If so, then I suppose not as it could take some inspiration from Android's notifications that display when a device is in landscape mode.

What happens with multiple notifications? Do they stack? If they stack, what happens with a large number?

Yes, I should think they stack like admin notices stack in the admin. Good question on if there is a large number. Perhaps there should be up/down arrows to cycle through the notices?

Will the notifications be the same color and design as used in other areas?

As with admin notices, I suppose there would be a red error notice and a green success notice.

Maybe animation could be explored too, perhaps when the notifications load in or to get people to notice even with a slight bouncing.

Good idea.

Also, I'm no designer, so take the mocks I've supplied as just rough placeholders for what it could actually look like :)

[karmatosed]

Yes, I should think they stack like admin notices stack in the admin. Good question on if there is a large number. Perhaps there should be up/down arrows to cycle through the notices?

I think that's a good idea and having a maximum size in this case makes sense.

Also, I'm no designer, so take the mocks I've supplied as just rough placeholders for what it could actually look like :)

No worries, let me have a play with things and upload some musings.

[karmatosed]

I've done a few mockups. I played around with how the notifications would stack. For this example I took the coloured notifications to make it obvious.

As far as stacking goes, I found that the arrows just didn't look great, so I have for now shown it with a scrollbar here:

Potentially we could use existing pagination patterns such as pages and posts, but I feel this may be overkill and the simple scroll potentially works. Would probably be something to test actually in code.

[melchoyce]

@westonruter Can you give some examples of errors that people would typically see in the Customizer? Would be good to get a feel for how long they can be.