Changeset 39332

Timestamp:

11/21/16 16:55:20 (10 months ago)

Author:

westonruter

Message:

Customize: Remove iframe-specific behaviors from customize preview when previewing on frontend and not contained inside iframe.

• Strip out customize_messenger_channel from preview window URL when not contained in iframe.
• Allow interacting with unpreviewable links and forms when previewing customized state on frontend.

See #30937.
Fixes #38867.

Location:

trunk

Files:

• src/wp-includes/class-wp-customize-manager.php (modified) (2 diffs)
• src/wp-includes/js/customize-preview.js (modified) (6 diffs)
• tests/phpunit/tests/customize/manager.php (modified) (2 diffs)

trunk/src/wp-includes/class-wp-customize-manager.php

@@ -1354 +1354 @@
         wp_enqueue_script( 'customize-preview' );
         add_action( 'wp_head', array( $this, 'customize_preview_loading_style' ) );
+        add_action( 'wp_head', array( $this, 'remove_frameless_preview_messenger_channel' ) );
         add_action( 'wp_footer', array( $this, 'customize_preview_settings' ), 20 );
         add_filter( 'get_edit_post_link', '__return_empty_string' );
@@ -1486 +1487 @@
             }
         </style><?php
+    }
+
+    /**
+     * Remove customize_messenger_channel query parameter from the preview window when it is not in an iframe.
+     *
+     * This ensures that the admin bar will be shown. It also ensures that link navigation will
+     * work as expected since the parent frame is not being sent the URL to navigate to.
+     *
+     * @since 4.7.0
+     * @access public
+     */
+    public function remove_frameless_preview_messenger_channel() {
+        if ( ! $this->messenger_channel ) {
+            return;
+        }
+        ?>
+        <script>
+        ( function() {
+            var urlParser, oldQueryParams, newQueryParams, i;
+            if ( parent !== window ) {
+                return;
+            }
+            urlParser = document.createElement( 'a' );
+            urlParser.href = location.href;
+            oldQueryParams = urlParser.search.substr( 1 ).split( /&/ );
+            newQueryParams = [];
+            for ( i = 0; i < oldQueryParams.length; i += 1 ) {
+                if ( ! /^customize_messenger_channel=/.test( oldQueryParams[ i ] ) ) {
+                    newQueryParams.push( oldQueryParams[ i ] );
+                }
+            }
+            urlParser.search = newQueryParams.join( '&' );
+            if ( urlParser.search !== location.search ) {
+                location.replace( urlParser.href );
+            }
+        } )();
+        </script>
+        <?php
     }
 

trunk/src/wp-includes/js/customize-preview.js

@@ -107 +107 @@
 
             preview.body = $( document.body );
-
-            preview.body.on( 'click.preview', 'a', function( event ) {
-                preview.handleLinkClick( event );
-            } );
-
-            preview.body.on( 'submit.preview', 'form', function( event ) {
-                preview.handleFormSubmit( event );
-            } );
-
             preview.window = $( window );
 
             if ( api.settings.channel ) {
+
+                // If in an iframe, then intercept the link clicks and form submissions.
+                preview.body.on( 'click.preview', 'a', function( event ) {
+                    preview.handleLinkClick( event );
+                } );
+                preview.body.on( 'submit.preview', 'form', function( event ) {
+                    preview.handleFormSubmit( event );
+                } );
+
                 preview.window.on( 'scroll.preview', debounce( function() {
                     preview.send( 'scroll', preview.window.scrollTop() );
@@ -156 +156 @@
                 wp.a11y.speak( api.settings.l10n.linkUnpreviewable );
                 event.preventDefault();
-                return;
-            }
-
-            // If not in an iframe, then allow the link click to proceed normally since the state query params are added.
-            if ( ! api.settings.channel ) {
                 return;
             }
@@ -197 +192 @@
                 wp.a11y.speak( api.settings.l10n.formUnpreviewable );
                 event.preventDefault();
-                return;
-            }
-
-            // If not in an iframe, then allow the form submission to proceed normally with the state inputs injected.
-            if ( ! api.settings.channel ) {
                 return;
             }
@@ -349 +339 @@
 
         // Make sure links in preview use HTTPS if parent frame uses HTTPS.
-        if ( 'https' === api.preview.scheme.get() && 'http:' === element.protocol && -1 !== api.settings.url.allowedHosts.indexOf( element.host ) ) {
+        if ( api.settings.channel && 'https' === api.preview.scheme.get() && 'http:' === element.protocol && -1 !== api.settings.url.allowedHosts.indexOf( element.host ) ) {
             element.protocol = 'https:';
         }
 
         if ( ! api.isLinkPreviewable( element ) ) {
-            $( element ).addClass( 'customize-unpreviewable' );
+
+            // Style link as unpreviewable only if previewing in iframe; if previewing on frontend, links will be allowed to work normally.
+            if ( api.settings.channel ) {
+                $( element ).addClass( 'customize-unpreviewable' );
+            }
             return;
         }
@@ -497 +491 @@
 
         // Make sure forms in preview use HTTPS if parent frame uses HTTPS.
-        if ( 'https' === api.preview.scheme.get() && 'http:' === urlParser.protocol && -1 !== api.settings.url.allowedHosts.indexOf( urlParser.host ) ) {
+        if ( api.settings.channel && 'https' === api.preview.scheme.get() && 'http:' === urlParser.protocol && -1 !== api.settings.url.allowedHosts.indexOf( urlParser.host ) ) {
             urlParser.protocol = 'https:';
             form.action = urlParser.href;
@@ -503 +497 @@
 
         if ( 'GET' !== form.method.toUpperCase() || ! api.isLinkPreviewable( urlParser ) ) {
-            $( form ).addClass( 'customize-unpreviewable' );
+
+            // Style form as unpreviewable only if previewing in iframe; if previewing on frontend, all forms will be allowed to work normally.
+            if ( api.settings.channel ) {
+                $( form ).addClass( 'customize-unpreviewable' );
+            }
             return;
         }

trunk/tests/phpunit/tests/customize/manager.php

@@ -461 +461 @@
 
         $this->assertEquals( 10, has_action( 'wp_head', 'wp_no_robots' ) );
+        $this->assertEquals( 10, has_action( 'wp_head', array( $wp_customize, 'remove_frameless_preview_messenger_channel' ) ) );
         $this->assertEquals( 10, has_filter( 'wp_headers', array( $wp_customize, 'filter_iframe_security_headers' ) ) );
         $this->assertEquals( 10, has_filter( 'wp_redirect', array( $wp_customize, 'add_state_query_params' ) ) );
@@ -2037 +2038 @@
 
     /**
+     * Test remove_frameless_preview_messenger_channel.
+     *
+     * @ticket 38867
+     * @covers WP_Customize_Manager::remove_frameless_preview_messenger_channel()
+     */
+    function test_remove_frameless_preview_messenger_channel() {
+        wp_set_current_user( self::$admin_user_id );
+        $manager = new WP_Customize_Manager( array( 'messenger_channel' => null ) );
+        ob_start();
+        $manager->remove_frameless_preview_messenger_channel();
+        $output = ob_get_clean();
+        $this->assertEmpty( $output );
+
+        $manager = new WP_Customize_Manager( array( 'messenger_channel' => 'preview-0' ) );
+        ob_start();
+        $manager->remove_frameless_preview_messenger_channel();
+        $output = ob_get_clean();
+        $this->assertContains( '<script>', $output );
+    }
+
+    /**
      * Test customize_preview_settings() method.
      *