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

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

@@ -1710,6 +1710,7 @@ final class WP_Customize_Manager {
 			'nonce'    => $this->get_nonces(),
 			'autofocus' => array(),
 			'documentTitleTmpl' => $this->get_document_title_template(),
+			'previewableDevices' => $this->get_previewable_devices(),
 		);
 
 		// Prepare Customize Section objects to pass to JavaScript.
@@ -1786,6 +1787,42 @@ final class WP_Customize_Manager {
 		<?php
 	}
 
+	/**
+	 * Returns a list of devices to allow previewing.
+	 *
+	 * @access public
+	 * @since 4.5.0
+	 *
+	 * @return array List of devices with labels and default setting.
+	 */
+	public function get_previewable_devices() {
+		$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' ),
+			),
+		);
+
+		/**
+		 * Filter the available devices to allow previewing in the Customizer.
+		 *
+		 * @since 4.5.0
+		 *
+		 * @see WP_Customize_Manager::get_previewable_devices()
+		 *
+		 * @param array $devices List of devices with labels and default setting.
+		 */
+		$devices = apply_filters( 'customize_previewable_devices', $devices );
+
+		return $devices;
+	}
+
 	/**
 	 * Register some default controls.
 	 *