Customize: Add a user-friendly way to preview site responsiveness for desktop, tablet, and mobile.

Introduces `WP_Customize_Manager::get_previewable_devices()` with a `customize_previewable_devices` filter to change the default device and which devices are available for previewing. This is a feature that was first pioneered on WordPress.com.

Props celloexpressions, folletto, valendesigns, westonruter, welcher, adamsilverstein, michaelarestad, Fab1en.
Fixes #31195.


git-svn-id: https://develop.svn.wordpress.org/trunk@36532 602fd350-edb4-49c9-b593-d223f7449a82
This commit is contained in:
Weston Ruter
2016-02-16 01:56:13 +00:00
parent 5534474cef
commit 6dd1dd61a1
8 changed files with 306 additions and 2 deletions
+64 -1
View File
@@ -425,7 +425,7 @@ class Tests_WP_Customize_Manager extends WP_UnitTestCase {
$data = json_decode( $json, true );
$this->assertNotEmpty( $data );
$this->assertEqualSets( array( 'theme', 'url', 'browser', 'panels', 'sections', 'nonce', 'autofocus', 'documentTitleTmpl' ), array_keys( $data ) );
$this->assertEqualSets( array( 'theme', 'url', 'browser', 'panels', 'sections', 'nonce', 'autofocus', 'documentTitleTmpl', 'previewableDevices' ), array_keys( $data ) );
$this->assertEquals( $autofocus, $data['autofocus'] );
$this->assertArrayHasKey( 'save', $data['nonce'] );
$this->assertArrayHasKey( 'preview', $data['nonce'] );
@@ -716,6 +716,69 @@ class Tests_WP_Customize_Manager extends WP_UnitTestCase {
$this->assertEquals( $control, $result_control );
$this->assertEquals( $control_id, $result_control->id );
}
/**
* Testing the return values both with and without filter.
*
* @ticket 31195
*/
function test_get_previewable_devices() {
// Setup the instance.
$manager = new WP_Customize_Manager();
// The default devices list.
$default_devices = array(
'desktop' => array(
'label' => __( 'Enter desktop preview mode' ),
'default' => true,
),
'tablet' => array(
'label' => __( 'Enter tablet preview mode' ),
),
'mobile' => array(
'label' => __( 'Enter mobile preview mode' ),
),
);
// Control test.
$devices = $manager->get_previewable_devices();
$this->assertSame( $default_devices, $devices );
// Adding the filter.
add_filter( 'customize_previewable_devices', array( $this, 'filter_customize_previewable_devices' ) );
$devices = $manager->get_previewable_devices();
$this->assertSame( $this->filtered_device_list(), $devices );
// Clean up.
remove_filter( 'customize_previewable_devices', array( $this, 'filter_customize_previewable_devices' ) );
}
/**
* Helper method for test_get_previewable_devices.
*
* @return array
*/
function filtered_device_list() {
return array(
'custom-device' => array(
'label' => __( 'Enter custom-device preview mode' ),
'default' => true,
),
);
}
/**
* Callback for the customize_previewable_devices filter.
*
* @param array $devices The list of devices.
*
* @return array
*/
function filter_customize_previewable_devices( $devices ) {
return $this->filtered_device_list();
}
}
require_once ABSPATH . WPINC . '/class-wp-customize-setting.php';