[wp-trac] [WordPress Trac] #31320: Make customizer JavaScript API available during the live preview

[WordPress Trac]

#31320: Make customizer JavaScript API available during the live preview
-------------------------+------------------------------
 Reporter:  Fab1en       |       Owner:
     Type:  enhancement  |      Status:  reopened
 Priority:  normal       |   Milestone:  Awaiting Review
Component:  Customize    |     Version:  4.1
 Severity:  normal       |  Resolution:
 Keywords:  needs-patch  |     Focuses:  javascript
-------------------------+------------------------------

Comment (by Fab1en):

 Thanks @westonruter for this detailed explanation, and sorry for the
 response delay. I have finally managed to take some time to dive into
 this, and still cannot achieve what I want.

 In the example you pointed, there is a monkey patch that makes all the
 magic happen :

 {{{#!javascript
 /**
 * Capture the instance of the Preview since it is private
 */
 OldPreview = api.Preview;
 api.Preview = OldPreview.extend( {
     initialize: function( params, options ) {
         api.WidgetCustomizerPreview.preview = this;
         OldPreview.prototype.initialize.call( this, params, options );
     }
 } );
 }}}

 But in my case, `wp.customize.preview` is undefined at first. If I wrap
 the command into a `wp.customize()` call, it is defined but has no effect.

 {{{#!javascript
 wp.customize( 'blogname', function( value ) {
     wp.customize.preview.send( 'please-do-this-for-me', 'first-param' );
 } );
 }}}

 Doing step-by-step into the JavaScript call, I found that the event is
 sent but never received by the customizer pane. In
 `api.Messenger.receive`, `this.targetWindow()` is null so the message is
 not posted. What's wrong ?

 If I add a timeout, then things begin to work :
 {{{#!javascript
 setTimeout( function( ) {
     wp.customize.preview.send( 'please-do-this-for-me', 'first-param' );
 }, 2000 );
 }}}

 Which event should I listen in the preview iframe to be sure that the
 customizer API is fully functional ?

--
Ticket URL: <https://core.trac.wordpress.org/ticket/31320#comment:6>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform