Ticket #31195: 31195.2.diff

src/wp-admin/css/customize-controls.css

@@ -1311 +1311 @@
         color: #00a0d2;
 }
 
+/* Device/preview size toggles */
+
+.wp-full-overlay {
+        background: #191e23;
+}
+
+#customize-preview.wp-full-overlay-main {
+        background-color: #f1f1f1;
+}
+
+.expanded #customize-footer-actions {
+        position: fixed;
+        bottom: 0;
+        left: 0;
+        width: 300px;
+        height: 45px;
+        border-top: 1px solid #ddd;
+}
+
+#customize-footer-actions .devices {
+        float: right;
+}
+
+#customize-footer-actions .devices button {
+        cursor: pointer;
+        background: transparent;
+        border: none;
+        padding: 0;
+        box-shadow: none;
+        -webkit-transition: color .1s ease-in-out;
+        transition: color .1s ease-in-out;
+}
+
+#customize-footer-actions .devices button:focus {
+        box-shadow: none;
+        outline: none;
+}
+
+#customize-footer-actions .devices button:before {
+        display: inline-block;
+        -webkit-font-smoothing: antialiased;
+        font: normal 20px/30px "dashicons";
+        vertical-align: top;
+        margin: 3px 1px;
+        padding: 4px 8px;
+        border-radius: 100%;
+        color: #656a6f; /* #82878c; would be better but doesn't meet color contrast guidelines */
+}
+
+#customize-footer-actions .devices button.active:before {
+        color: #191e23;
+        box-shadow: 0 0 2px rgba(0, 0, 0, .75);
+}
+
+#customize-footer-actions .devices button:hover:before,
+#customize-footer-actions .devices button:focus:before {
+        color: #191e23;
+        box-shadow: 0 0 0 1px #5b9dd9,
+                    0 0 2px 1px rgba(30, 140, 190, .8);
+}
+
+.wp-core-ui .wp-full-overlay .collapse-sidebar:hover,
+.wp-core-ui .wp-full-overlay .collapse-sidebar:focus {
+        color: #191e23;
+}
+
+#customize-footer-actions .devices .preview-desktop:before {
+        content: "\f472";
+}
+
+#customize-footer-actions .devices .preview-tablet:before {
+        content: "\f471";
+}
+
+#customize-footer-actions .devices .preview-mobile:before {
+        content: "\f470";
+}
+
+@media screen and (max-width:1024px) {
+        #customize-footer-actions .devices {
+                display: none;
+        }
+}
+
+.collapsed #customize-footer-actions .devices button:before {
+        display: none;
+}
+
+.collapsed #customize-footer-actions .devices .preview-full {
+        left: 0;
+}
+
+.preview-mobile #customize-preview {
+        margin: auto 0 auto -160px;
+        width: 320px;
+        height: 480px;
+        max-height: 100%;
+        max-width: 100%;
+        left: 50%;
+}
+
+.preview-tablet #customize-preview {
+        margin: auto 0 auto -3in;
+        width: 6in;
+        height: 9in;
+        max-height: 100%;
+        max-width: 100%;
+        left: 50%;
+}
+
+
 /* Responsive */
 .customize-controls-preview-toggle {
         display: none;

src/wp-admin/customize.php

@@ -137 +137 @@
                                         <button class="customize-help-toggle dashicons dashicons-editor-help" aria-expanded="false"><span class="screen-reader-text"><?php _e( 'Help' ); ?></span></button>
                                 </div>
                                 <div class="customize-panel-description"><?php
-                                        _e( 'The Customizer allows you to preview changes to your site before publishing them. You can also navigate to different pages on your site to preview them.' );
+                                        _e( 'The Customizer allows you to preview changes to your site before publishing them. You can navigate to different pages on your site to preview them.' );
                                 ?></div>
                         </div>
 
@@ -148 +148 @@
                 </div>
 
                 <div id="customize-footer-actions" class="wp-full-overlay-footer">
+                        <div class="devices">
+                                <button type="button" class="preview-desktop active" aria-pressed="true" data-device="desktop"><span class="screen-reader-text"><?php _e( 'Enter desktop preview mode' ); ?></span></button>
+                                <button type="button" class="preview-tablet" aria-pressed="false" data-device="tablet"><span class="screen-reader-text"><?php _e( 'Enter tablet preview mode' ); ?></span></button>
+                                <button type="button" class="preview-mobile" aria-pressed="false" data-device="mobile"><span class="screen-reader-text"><?php _e( 'Enter mobile preview mode' ); ?></span></button>
+                        </div>
                         <button type="button" class="collapse-sidebar button-secondary" aria-expanded="true" aria-label="<?php esc_attr_e( 'Collapse Sidebar' ); ?>">
                                 <span class="collapse-sidebar-arrow"></span>
                                 <span class="collapse-sidebar-label"><?php _e( 'Collapse' ); ?></span>

src/wp-admin/js/customize-controls.js

@@ -3602 +3602 @@
                         event.preventDefault();
                 });
 
+                // Preview size toggles.
+                $( '#customize-footer-actions .devices button' ).on( 'click', function( event ) {
+                        var overlay = $( '.wp-full-overlay' ),
+                            device = $( event.currentTarget ).data( 'device' );
+                        $( '#customize-footer-actions .devices button' ).removeClass( 'active' )
+                                                                        .attr( 'aria-pressed', false );
+                        overlay.removeClass( 'preview-full preview-desktop preview-tablet preview-mobile' )
+                               .toggleClass( 'preview-' + device );
+                        $( event.currentTarget ).addClass( 'active' )
+                                                .attr( 'aria-pressed', true );
+                        api.previewedDevice = device;
+                });
+
                 // Bind site title display to the corresponding field.
                 if ( title.length ) {
                         $( '#customize-control-blogname input' ).on( 'input', function() {

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

@@ -1694 +1694 @@
                         'autofocus' => array(),
                         'documentTitleTmpl' => $this->get_document_title_template(),
                 );
+                $this->add_setting( 'previewedDevice', array( 'default' => 'desktop' ) );
 
                 // Prepare Customize Section objects to pass to JavaScript.
                 foreach ( $this->sections() as $id => $section ) {