[wp-trac] [WordPress Trac] #31517: Customizer: show a notice after attempting to navigate to external links in live previews

[WordPress Trac]

#31517: Customizer: show a notice after attempting to navigate to external links in
live previews
--------------------------+-----------------------------
 Reporter:  designsimply  |       Owner:
     Type:  enhancement   |      Status:  new
 Priority:  normal        |   Milestone:  Future Release
Component:  Customize     |     Version:
 Severity:  normal        |  Resolution:
 Keywords:                |     Focuses:  ui, javascript
--------------------------+-----------------------------
Changes (by westonruter):

 * milestone:  Awaiting Review => Future Release


Comment:

 I implemented this actually as part of my
 [https://make.wordpress.org/core/2015/01/26/customizer-transactions-
 proposal/ transactions proposal]: #30937.

 As in my [https://github.com/xwp/wordpress-develop/pull/61/files pull
 request]:

 It outputs the following CSS to the Customizer preview:

 {{{#!css
 .customize-preview-not-allowed,
 .customize-preview-not-allowed * {
     cursor: not-allowed !important;
 }
 }}}

 And the following JS is added to the Customizer preview as well:

 {{{#!js
 $( 'form[action], a[href]' ).each( function () {
         var url, el = $( this );
         url = el.prop( 'href' ) || el.prop( 'action' );
         if ( url && ! self.isAllowedUrl( url ) ) {
                 el.addClass( 'customize-preview-not-allowed' );
                 el.prop( 'title', api.settings.l10n.previewNotAllowed );
         }
 });
 }}}

 This ensures the tooltip and the proper cursor are displayed.

 And then when actually trying to click on a link (or submit a form), it
 prevents the default action:

 {{{#!js
  this.body.on( 'click.preview', 'a', function( event ) {
         var to = $( this ).prop( 'href' );

         // @todo Instead of preventDefault and bailing, should we instead
 show an AYS/confirm dialog?

         if ( ! self.isAllowedUrl( to ) ) {
                 event.preventDefault();
         }
 });

 this.body.on( 'submit.preview', 'form', function( event ) {
         var form = $( this );
         if ( ! self.isAllowedUrl( this.action ) ) {
                 event.preventDefault();
                 return;
         }
         // ...
 });
 }}}

 Currently in Core, the logic for `isAllowedUrl` is handled in the
 Customizer pane. The transactions patch moves this logic to the preview
 instead.

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