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. git-svn-id: https://develop.svn.wordpress.org/trunk@39332 602fd350-edb4-49c9-b593-d223f7449a82
This commit is contained in:
parent
257026f7a3
commit
f21e17dbf0
|
@ -1353,6 +1353,7 @@ final class WP_Customize_Manager {
|
||||||
|
|
||||||
wp_enqueue_script( 'customize-preview' );
|
wp_enqueue_script( 'customize-preview' );
|
||||||
add_action( 'wp_head', array( $this, 'customize_preview_loading_style' ) );
|
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_action( 'wp_footer', array( $this, 'customize_preview_settings' ), 20 );
|
||||||
add_filter( 'get_edit_post_link', '__return_empty_string' );
|
add_filter( 'get_edit_post_link', '__return_empty_string' );
|
||||||
|
|
||||||
|
@ -1487,6 +1488,44 @@ final class WP_Customize_Manager {
|
||||||
</style><?php
|
</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
|
||||||
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Print JavaScript settings for preview frame.
|
* Print JavaScript settings for preview frame.
|
||||||
*
|
*
|
||||||
|
|
|
@ -106,18 +106,18 @@
|
||||||
preview.add( 'scheme', urlParser.protocol.replace( /:$/, '' ) );
|
preview.add( 'scheme', urlParser.protocol.replace( /:$/, '' ) );
|
||||||
|
|
||||||
preview.body = $( document.body );
|
preview.body = $( document.body );
|
||||||
|
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.body.on( 'click.preview', 'a', function( event ) {
|
||||||
preview.handleLinkClick( event );
|
preview.handleLinkClick( event );
|
||||||
} );
|
} );
|
||||||
|
|
||||||
preview.body.on( 'submit.preview', 'form', function( event ) {
|
preview.body.on( 'submit.preview', 'form', function( event ) {
|
||||||
preview.handleFormSubmit( event );
|
preview.handleFormSubmit( event );
|
||||||
} );
|
} );
|
||||||
|
|
||||||
preview.window = $( window );
|
|
||||||
|
|
||||||
if ( api.settings.channel ) {
|
|
||||||
preview.window.on( 'scroll.preview', debounce( function() {
|
preview.window.on( 'scroll.preview', debounce( function() {
|
||||||
preview.send( 'scroll', preview.window.scrollTop() );
|
preview.send( 'scroll', preview.window.scrollTop() );
|
||||||
}, 200 ) );
|
}, 200 ) );
|
||||||
|
@ -158,11 +158,6 @@
|
||||||
return;
|
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;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Prevent initiating navigating from click and instead rely on sending url message to pane.
|
// Prevent initiating navigating from click and instead rely on sending url message to pane.
|
||||||
event.preventDefault();
|
event.preventDefault();
|
||||||
|
|
||||||
|
@ -199,11 +194,6 @@
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
// If not in an iframe, then allow the form submission to proceed normally with the state inputs injected.
|
|
||||||
if ( ! api.settings.channel ) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
/*
|
||||||
* If the default wasn't prevented already (in which case the form
|
* If the default wasn't prevented already (in which case the form
|
||||||
* submission is already being handled by JS), and if it has a GET
|
* submission is already being handled by JS), and if it has a GET
|
||||||
|
@ -348,12 +338,16 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
// Make sure links in preview use HTTPS if parent frame uses HTTPS.
|
// 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:';
|
element.protocol = 'https:';
|
||||||
}
|
}
|
||||||
|
|
||||||
if ( ! api.isLinkPreviewable( element ) ) {
|
if ( ! api.isLinkPreviewable( element ) ) {
|
||||||
|
|
||||||
|
// 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' );
|
$( element ).addClass( 'customize-unpreviewable' );
|
||||||
|
}
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
$( element ).removeClass( 'customize-unpreviewable' );
|
$( element ).removeClass( 'customize-unpreviewable' );
|
||||||
|
@ -496,13 +490,17 @@
|
||||||
urlParser.href = form.action;
|
urlParser.href = form.action;
|
||||||
|
|
||||||
// Make sure forms in preview use HTTPS if parent frame uses HTTPS.
|
// 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:';
|
urlParser.protocol = 'https:';
|
||||||
form.action = urlParser.href;
|
form.action = urlParser.href;
|
||||||
}
|
}
|
||||||
|
|
||||||
if ( 'GET' !== form.method.toUpperCase() || ! api.isLinkPreviewable( urlParser ) ) {
|
if ( 'GET' !== form.method.toUpperCase() || ! api.isLinkPreviewable( urlParser ) ) {
|
||||||
|
|
||||||
|
// 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' );
|
$( form ).addClass( 'customize-unpreviewable' );
|
||||||
|
}
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
$( form ).removeClass( 'customize-unpreviewable' );
|
$( form ).removeClass( 'customize-unpreviewable' );
|
||||||
|
|
|
@ -460,6 +460,7 @@ class Tests_WP_Customize_Manager extends WP_UnitTestCase {
|
||||||
$this->assertEquals( $did_action_customize_preview_init + 1, did_action( 'customize_preview_init' ) );
|
$this->assertEquals( $did_action_customize_preview_init + 1, did_action( 'customize_preview_init' ) );
|
||||||
|
|
||||||
$this->assertEquals( 10, has_action( 'wp_head', 'wp_no_robots' ) );
|
$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_headers', array( $wp_customize, 'filter_iframe_security_headers' ) ) );
|
||||||
$this->assertEquals( 10, has_filter( 'wp_redirect', array( $wp_customize, 'add_state_query_params' ) ) );
|
$this->assertEquals( 10, has_filter( 'wp_redirect', array( $wp_customize, 'add_state_query_params' ) ) );
|
||||||
$this->assertTrue( wp_script_is( 'customize-preview', 'enqueued' ) );
|
$this->assertTrue( wp_script_is( 'customize-preview', 'enqueued' ) );
|
||||||
|
@ -2035,6 +2036,27 @@ class Tests_WP_Customize_Manager extends WP_UnitTestCase {
|
||||||
$this->assertArrayHasKey( 'preview', $data['nonce'] );
|
$this->assertArrayHasKey( 'preview', $data['nonce'] );
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 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.
|
* Test customize_preview_settings() method.
|
||||||
*
|
*
|
||||||
|
|
Loading…
Reference in New Issue