WordPress.org

Make WordPress Core

Opened 11 months ago

Closed 4 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 needs-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 4 weeks ago.
https://github.com/xwp/wordpress-develop/pull/260
header-image-section-notification.png (193.6 KB) - added by westonruter 4 weeks ago.
widgets-panel-notification.png (56.3 KB) - added by westonruter 4 weeks ago.
widgets-panel-notifications.png (82.1 KB) - added by westonruter 4 weeks ago.
colors-section-notifications.png (90.0 KB) - added by westonruter 4 weeks ago.

Download all attachments as: .zip

Change History (14)

#1 @celloexpressions
9 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
8 months ago

  • Description modified (diff)

#3 @westonruter
6 months ago

  • Description modified (diff)

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


5 months ago

#5 @jbpaul17
5 months ago

  • Milestone changed from 4.8 to 4.8.1

Punting to 4.8.1 per bug scrub earlier this week.

#6 @westonruter
4 months ago

  • Milestone changed from 4.8.1 to 4.9

#7 @westonruter
4 weeks ago

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

#8 @westonruter
4 weeks 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
4 weeks 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.

Note: See TracTickets for help on using tickets.