Previewing Site Responsiveness in the Customizer

Note: This proposal was merged to core in [36532]. Download the latest nightly build and give it a try!

The customizer is a framework for live-previewing changes to WordPress sites. And by now, nearly every WordPress theme/site features responsive designs intended to look good on any device. Previewing site changes is just important on mobile as it is on desktop, to ensure that front-end user experience is exactly as intended.

Bringing these ideas together, #31195 proposes a new feature in the customizer that allows users to quickly preview their site on various device sizes. Here’s a quick walkthrough:

customize-device-preview

The proposed feature focuses on simplicity. The device previewer is in the customizer controls footer, near the “Collapse” button. Only three options are available by default, and they’re intentionally ambiguous. Rather than looking like specific devices, the intent is to understand what a site may look like on a roughly tablet-sized, portrait-orientation device or a roughly phone-sized device, in addition to the standard desktop view. A further extension in #34051 may allow larger screen sizes to be previewed on smaller devices with forced horizontal scrolling; for now, the feature is only available on larger devices.

For Developers

Along with this feature would come a couple of ways to customize the behavior. Please keep in mind that these are proposed and subject to change.

The new customize_previewable_devices filter lets you customize the devices available for preview. One use case may be to turn off this feature entirely:

add_filter( 'customize_previewable_devices', '__return_empty_array' );

Or, developers can add additional custom device preview buttons. The button element will be rendered and the appropriate JS applied to custom devices when the button is clicked; however, developers need to provide CSS to add an icon to the button and to react to the preview size changing.

In JavaScript, themes and plugins can react to changes in the device size being previewed with:

wp.customize.previewedDevice.bind( function( newDevice ) {
     // Do something to adapt to the new device being previewed.
});

This is particularly useful if your theme requires a JS trigger for responsive elements to apply, instead of using CSS solely.

Summary

Any feedback and testing is much appreciated. Device previews in the Customizer can be tested with the latest patch on #31195.

Comments are welcome on this post, the ticket (#31195), or our continuous chat in #core-customize on Slack.

#customize, #mobile, #needs-testing