[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:  new
 Priority:  normal       |  Milestone:  Awaiting Review
Component:  Customize    |    Version:  4.1
 Severity:  normal       |   Keywords:
  Focuses:  javascript   |
-------------------------+-----------------------------
 [30102] introduced some handy JS methods to deal with the customizer
 controls, sections and panel. However, it seams to me that those new shiny
 methods are not available on the live preview side, within the iframe.

 This JS code is loaded in the preview with the `customize_preview_init`
 hook :
 {{{
 // Update the site title
 wp.customize( 'blogname', function( value ) {
         value.bind( function( newval ) {
                 $( '#accueil > h1' ).html( newval );
         } );
 } );
 }}}
 and it works great. But then I want to do this :

 {{{
 // link elements to their customizer control
 $( '#accueil > h1' ).click(function(){
         wp.customize.control( 'blogname' ).focus()
 });
 }}}

 and I get a JS error `Uncaught TypeError: undefined is not a function`

 But, the API is available from the parent frame :
 {{{
 // link elements to their customizer control
 $( '#accueil > h1' ).click(function(){
         frame.top.wp.customize.control( 'blogname' ).focus()
 });
 }}}
 This DOES work and has the expected behavior (which is really cool !).

 Wouldn't it be possible to pass the entire API to the preview iframe ?

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