WordPress.org

Make WordPress Core

Opened 13 months ago

Closed 3 months ago

Last modified 7 weeks ago

#38794 closed enhancement (fixed)

Customize: Allow panels and sections to have notifications just like controls can

Reported by: westonruter Owned by: westonruter
Milestone: 4.9 Priority: normal
Severity: normal Version: 4.6
Component: Customize Keywords: has-patch has-screenshots has-dev-note
Focuses: Cc:

Description (last modified by westonruter)

In #34893, the ability to show notifications on controls was added. In #35210 this is proposed to be extended at a global level to be able to show notifications at the root of the customizer. Between these two ends, there should also be the ability to show notifications at the panel and section level.

The Customize Posts plugin implements notifications for sections which could serve as a start for the patch here: https://github.com/xwp/wp-customize-posts/blob/0.8.2/js/customize-post-section.js#L825-L942

Once implemented, section notifications should be utilized for the Header Media section to show a notification when not previewing a URL that is eligible for a header video. See #38778. The section-level notification could be used in #40432 as well.

For more sample code, see:

Attachments (5)

38794.0.diff (11.5 KB) - added by westonruter 3 months ago.
https://github.com/xwp/wordpress-develop/pull/260
header-image-section-notification.png (193.6 KB) - added by westonruter 3 months ago.
widgets-panel-notification.png (56.3 KB) - added by westonruter 3 months ago.
widgets-panel-notifications.png (82.1 KB) - added by westonruter 3 months ago.
colors-section-notifications.png (90.0 KB) - added by westonruter 3 months ago.

Download all attachments as: .zip

Change History (16)

#1 @celloexpressions
11 months ago

  • Version set to 4.6

While it's probably generally a better practice to use control-specific descriptions and notifications, header media is a good example of where it can make sense to do this for certain sections and panels. Another potential use case could be an info notification in the menus panel when there are no menus that invites users to create their first menu and assign it to their theme's locations.

#2 @westonruter
10 months ago

  • Description modified (diff)

#3 @westonruter
8 months ago

  • Description modified (diff)

This ticket was mentioned in Slack in #core by jeffpaul. View the logs.


7 months ago

#5 @jbpaul17
7 months ago

  • Milestone changed from 4.8 to 4.8.1

Punting to 4.8.1 per bug scrub earlier this week.

#6 @westonruter
6 months ago

  • Milestone changed from 4.8.1 to 4.9

#7 @westonruter
3 months ago

  • Keywords has-patch has-screenshots needs-dev-note added; needs-patch removed

#8 @westonruter
3 months ago

Handy reference to add a slew of notifications to all 4 contexts where they can appear (global, panel, section, control):

// Add global notifications.
_( [ 'none', 'error', 'warning', 'info', 'success' ] ).each( function( type ) {
        var code = 'example-' + type;
        wp.customize.notifications.add( code, new wp.customize.Notification( code, {
                dismissible: true,
                message: 'This is a sample ' + type + ' message.',
                type: type
        } ) );
} );

// Add notifications to the Widgets panel.
_( [ 'none', 'error', 'warning', 'info', 'success' ] ).each( function( type ) {
        var code = 'example-' + type;
        wp.customize.panel( 'widgets' ).notifications.add( code, new wp.customize.Notification( code, {
                dismissible: true,
                message: 'This is a sample ' + type + ' message.',
                type: type
        } ) );
} );

// Add notifications to the Site Identity section.
_( [ 'none', 'error', 'warning', 'info', 'success' ] ).each( function( type ) {
        var code = 'example-' + type;
        wp.customize.section( 'title_tagline' ).notifications.add( code, new wp.customize.Notification( code, {
                dismissible: true,
                message: 'This is a sample ' + type + ' message.',
                type: type
        } ) );
} );

// Add notifications to the site title control.
_( [ 'none', 'error', 'warning', 'info', 'success' ] ).each( function( type ) {
        var code = 'example-' + type;
        wp.customize.control( 'blogname' ).notifications.add( code, new wp.customize.Notification( code, {
                dismissible: true,
                message: 'This is a sample ' + type + ' message.',
                type: type
        } ) );
} );

#9 @westonruter
3 months ago

  • Owner set to westonruter
  • Resolution set to fixed
  • Status changed from new to closed

In 41390:

Customize: Add notifications API to sections and panels.

  • Adds a notifications property to instances of wp.customize.Panel and wp.customize.Section.
  • Adds a setupNotifications() method to Panel, Section, and Control.
  • Adds a getNotificationsContainerElement() method to the Panel and Section classes, like Control has.
  • Replace hard-coded notification in header media section with a notification.
  • Limit rendering notifications to panels and sections that are expanded, and to controls that have an expanded section.

See #34893, #35210, #38778.
Fixes #38794.

#10 @westonruter
7 weeks ago

In 42031:

Customize: Improve Media control accessibility and compatibility for settings passed as arrays or as solitary setting.

  • Eliminate Media control template from having dependency on params.settings.default for element ID, to fix compat with params.settings array or single params.setting. See #36167.
  • Move description out of label and add aria-describedby to Media control's Select button. See #30738, #33085.
  • Obtain notification container whenever content is (re-)rendered (such as for Media control). See #38794.
  • Re-render notifications after control content is re-rendered, if control is in expanded section. See #38794.

Amends [41390].
See #36167, #38794, #33085, #30738.

Note: See TracTickets for help on using tickets.