WordPress.org

Make WordPress Core

Opened 16 months ago

Closed 5 weeks ago

#37269 closed enhancement (fixed)

Introduce removed event for wp.customize.Values collection

Reported by: westonruter Owned by: westonruter
Milestone: 4.9 Priority: normal
Severity: normal Version: 3.4
Component: Customize Keywords: has-patch has-unit-tests commit
Focuses: javascript Cc:

Description (last modified by westonruter)

Notifications were added to Customizer controls in #34893. Notifications are re-rendered when the control.notifications collection (a wp.customize.Values) has a wp.customize.Notification added or removed with the code as follows (via wp.customize.Control#initialize):

// After the control is embedded on the page, invoke the "ready" method.
control.deferred.embedded.done( function () {
        /*
         * Note that this debounced/deferred rendering is needed for two reasons:
         * 1) The 'remove' event is triggered just _before_ the notification is actually removed.
         * 2) Improve performance when adding/removing multiple notifications at a time.
         */
        var debouncedRenderNotifications = _.debounce( function renderNotifications() {
                control.renderNotifications();
        } );
        control.notifications.bind( 'add', function( notification ) {
                wp.a11y.speak( notification.message, 'assertive' );
                debouncedRenderNotifications();
        } );
        control.notifications.bind( 'remove', debouncedRenderNotifications );
        control.renderNotifications();

        control.ready();
});

Notice the multi-line comment. We can't re-render the notifications at a remove event because this event gets triggered just before it is removed, somewhat unexpectedly. We should therefore introduce a removed event that gets triggered after the removal so that workarounds using debounce or defer aren't required.

Submitted patch should include unit test.

Change History (13)

#1 @westonruter
16 months ago

  • Description modified (diff)
  • Keywords needs-unit-tests added

#2 @westonruter
14 months ago

  • Milestone changed from Future Release to 4.7
  • Version changed from 4.6 to 3.4

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


13 months ago

This ticket was mentioned in Slack in #core-customize by celloexpressions. View the logs.


13 months ago

#5 @celloexpressions
13 months ago

  • Milestone changed from 4.7 to Future Release

Can still make 4.7 if there's a patch, but we need a patch for now.

#6 @delawski
12 months ago

@westonruter - What do you think of such implementation:

https://github.com/xwp/wordpress-develop/pull/193

#7 @delawski
12 months ago

  • Keywords has-patch added; needs-patch removed

#8 @westonruter
12 months ago

  • Keywords good-first-bug removed
  • Owner set to delawski
  • Status changed from new to assigned

@delawski nice. I added a code review comment.

#9 @delawski
12 months ago

@westonruter Thank you for the review. I've added the condition as you suggested and also wrote additional unit test to cover case you've mentioned in the comment.

#10 @westonruter
12 months ago

  • Keywords has-unit-tests commit added; needs-unit-tests removed
  • Owner changed from delawski to westonruter
  • Status changed from assigned to reviewing

Excellent. This can go into 4.8 as soon as trunk it open for enhancements.

#11 @westonruter
5 weeks ago

  • Milestone changed from Future Release to 4.9
  • Status changed from reviewing to accepted

I'm going to add this as part of #35210.

#13 @westonruter
5 weeks ago

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

In 41374:

Customize: Add global notifications area.

  • Displays an error notification in the global area when a save attempt is rejected due to invalid settings. An error notification is also displayed when saving fails due to a network error or server error.
  • Introduces wp.customize.Notifications subclass of wp.customize.Values to contain instances of wp.customize.Notification and manage their rendering into a container.
  • Exposes the global notification area as wp.customize.notifications collection instance.
  • Updates the notifications object on Control to use Notifications rather than Values and to re-use the rendering logic from the former. The old Control#renderNotifications method is deprecated.
  • Allows notifications to be dismissed by instantiating them with a dismissible property.
  • Allows wp.customize.Notification to be extended with custom templates and render functions.
  • Triggers a removed event on wp.customize.Values instances _after_ a value has been removed from the collection.

Props delawski, westonruter, karmatosed, celloexpressions, Fab1en, melchoyce, Kelderic, afercia, adamsilverstein.
See #34893, #39896.
Fixes #35210, #31582, #37727, #37269.

Note: See TracTickets for help on using tickets.