Ticket #31195: 31195.11.diff
File 31195.11.diff, 12.2 KB (added by , 9 years ago) |
---|
-
src/wp-admin/css/colors/_admin.scss
diff --git src/wp-admin/css/colors/_admin.scss src/wp-admin/css/colors/_admin.scss index 5953861..03c932d 100644
body.more-filters-opened .more-filters:focus:before { 487 487 color: $menu-highlight-text; 488 488 } 489 489 490 #customize-footer-actions .devices button:focus { 491 border-bottom-color: $highlight-color; 492 } 493 490 494 /* Responsive Component */ 491 495 492 496 div#wp-responsive-toggle a:before { -
src/wp-admin/css/customize-controls.css
diff --git src/wp-admin/css/customize-controls.css src/wp-admin/css/customize-controls.css index 560d85e..c4b01c8 100644
p.customize-section-description { 610 610 #customize-preview iframe { 611 611 width: 100%; 612 612 height: 100%; 613 position: absolute; 613 614 } 614 615 615 616 .wp-full-overlay-sidebar { … … body.cheatin p { 1311 1312 color: #00a0d2; 1312 1313 } 1313 1314 1315 /* Device/preview size toggles */ 1316 1317 .wp-full-overlay { 1318 background: #191e23; 1319 } 1320 1321 #customize-preview.wp-full-overlay-main { 1322 background-color: #f1f1f1; 1323 } 1324 1325 .expanded #customize-footer-actions { 1326 position: fixed; 1327 bottom: 0; 1328 left: 0; 1329 width: 300px; 1330 height: 45px; 1331 border-top: 1px solid #ddd; 1332 } 1333 1334 #customize-footer-actions .devices { 1335 float: right; 1336 } 1337 1338 #customize-footer-actions .devices button { 1339 cursor: pointer; 1340 background: transparent; 1341 border: none; 1342 height: 45px; 1343 padding: 0 3px; 1344 margin: 0 0 0 -4px; 1345 box-shadow: none; 1346 border-top: 1px solid transparent; 1347 border-bottom: 4px solid transparent; 1348 -webkit-transition: background .1s ease-in-out; 1349 transition: background .1s ease-in-out; 1350 } 1351 1352 #customize-footer-actions .devices button:focus { 1353 box-shadow: none; 1354 outline: none; 1355 } 1356 1357 #customize-footer-actions .devices button:before { 1358 display: inline-block; 1359 -webkit-font-smoothing: antialiased; 1360 font: normal 20px/30px "dashicons"; 1361 vertical-align: top; 1362 margin: 3px 0; 1363 padding: 4px 8px; 1364 color: #656a6f; 1365 } 1366 1367 #customize-footer-actions .devices button.active { 1368 border-bottom-color: #191e23; 1369 } 1370 1371 #customize-footer-actions .devices button:hover, 1372 #customize-footer-actions .devices button:focus { 1373 background-color: #fff; 1374 } 1375 1376 #customize-footer-actions .devices button:focus { 1377 background-color: #fff; 1378 border-bottom-color: #0073aa; 1379 } 1380 1381 #customize-footer-actions .devices button.active:before, 1382 #customize-footer-actions .devices button:hover:before, 1383 #customize-footer-actions .devices button:focus:before { 1384 color: #191e23; 1385 } 1386 1387 .wp-core-ui .wp-full-overlay .collapse-sidebar:hover, 1388 .wp-core-ui .wp-full-overlay .collapse-sidebar:focus { 1389 color: #191e23; 1390 } 1391 1392 #customize-footer-actions .devices .preview-desktop:before { 1393 content: "\f472"; 1394 } 1395 1396 #customize-footer-actions .devices .preview-tablet:before { 1397 content: "\f471"; 1398 } 1399 1400 #customize-footer-actions .devices .preview-mobile:before { 1401 content: "\f470"; 1402 } 1403 1404 @media screen and (max-width:1024px) { 1405 #customize-footer-actions .devices { 1406 display: none; 1407 } 1408 } 1409 1410 .collapsed #customize-footer-actions .devices button:before { 1411 display: none; 1412 } 1413 1414 .collapsed #customize-footer-actions .devices .preview-full { 1415 left: 0; 1416 } 1417 1418 .preview-mobile #customize-preview { 1419 margin: auto 0 auto -160px; 1420 width: 320px; 1421 height: 480px; 1422 max-height: 100%; 1423 max-width: 100%; 1424 left: 50%; 1425 } 1426 1427 .preview-tablet #customize-preview { 1428 margin: auto 0 auto -3in; 1429 width: 6in; 1430 height: 9in; 1431 max-height: 100%; 1432 max-width: 100%; 1433 left: 50%; 1434 } 1435 1314 1436 .widget-reorder-nav span, 1315 1437 .menu-item-reorder-nav button { 1316 1438 position: relative; -
src/wp-admin/customize.php
diff --git src/wp-admin/customize.php src/wp-admin/customize.php index 1bc702b..7e13ee4 100644
do_action( 'customize_controls_print_scripts' ); 148 148 </div> 149 149 150 150 <div id="customize-footer-actions" class="wp-full-overlay-footer"> 151 <?php $previewable_devices = $wp_customize->get_previewable_devices(); ?> 152 <?php if ( ! empty( $previewable_devices ) ) : ?> 153 <div class="devices"> 154 <?php foreach ( (array) $previewable_devices as $device => $settings ) : ?> 155 <?php 156 if ( empty( $settings['label'] ) ) { 157 continue; 158 } 159 $active = ! empty( $settings['default'] ); 160 $class = 'preview-' . $device; 161 if ( $active ) { 162 $class .= ' active'; 163 } 164 ?> 165 <button type="button" class="<?php echo esc_attr( $class ); ?>" aria-pressed="<?php echo esc_attr( $active ) ?>" data-device="<?php echo esc_attr( $device ); ?>"> 166 <span class="screen-reader-text"><?php echo esc_html( $settings['label'] ); ?></span> 167 </button> 168 <?php endforeach; ?> 169 </div> 170 <?php endif; ?> 151 171 <button type="button" class="collapse-sidebar button-secondary" aria-expanded="true" aria-label="<?php esc_attr_e( 'Collapse Sidebar' ); ?>"> 152 172 <span class="collapse-sidebar-arrow"></span> 153 173 <span class="collapse-sidebar-label"><?php _e( 'Collapse' ); ?></span> -
src/wp-admin/js/customize-controls.js
diff --git src/wp-admin/js/customize-controls.js src/wp-admin/js/customize-controls.js index caf296a..0a61a86 100644
3229 3229 overlay = body.children( '.wp-full-overlay' ), 3230 3230 title = $( '#customize-info .panel-title.site-title' ), 3231 3231 closeBtn = $( '.customize-controls-close' ), 3232 saveBtn = $( '#save' ); 3232 saveBtn = $( '#save' ), 3233 footerActions = $( '#customize-footer-actions' ); 3233 3234 3234 3235 // Prevent the form from saving when enter is pressed on an input or select element. 3235 3236 $('#customize-controls').on( 'keydown', function( e ) { … … 3605 3606 event.preventDefault(); 3606 3607 }); 3607 3608 3609 // Previewed device bindings. 3610 api.previewedDevice = new api.Value(); 3611 3612 // Set the default device. 3613 api.bind( 'ready', function() { 3614 _.find( api.settings.previewableDevices, function( value, key ) { 3615 if ( true === value['default'] ) { 3616 api.previewedDevice.set( key ); 3617 return true; 3618 } 3619 } ); 3620 } ); 3621 3622 // Set the toggled device. 3623 footerActions.find( '.devices button' ).on( 'click', function( event ) { 3624 api.previewedDevice.set( $( event.currentTarget ).data( 'device' ) ); 3625 }); 3626 3627 // Bind device changes. 3628 api.previewedDevice.bind( function( newDevice ) { 3629 var overlay = $( '.wp-full-overlay' ), 3630 devices = ''; 3631 3632 footerActions.find( '.devices button' ) 3633 .removeClass( 'active' ) 3634 .attr( 'aria-pressed', false ); 3635 3636 footerActions.find( '.devices .preview-' + newDevice ) 3637 .addClass( 'active' ) 3638 .attr( 'aria-pressed', true ); 3639 3640 $.each( api.settings.previewableDevices, function( device ) { 3641 devices += ' preview-' + device; 3642 } ); 3643 3644 overlay 3645 .removeClass( devices ) 3646 .addClass( 'preview-' + newDevice ); 3647 } ); 3648 3608 3649 // Bind site title display to the corresponding field. 3609 3650 if ( title.length ) { 3610 3651 api( 'blogname', function( setting ) { -
src/wp-includes/class-wp-customize-manager.php
diff --git src/wp-includes/class-wp-customize-manager.php src/wp-includes/class-wp-customize-manager.php index 48ccc80..942d907 100644
final class WP_Customize_Manager { 1710 1710 'nonce' => $this->get_nonces(), 1711 1711 'autofocus' => array(), 1712 1712 'documentTitleTmpl' => $this->get_document_title_template(), 1713 'previewableDevices' => $this->get_previewable_devices(), 1713 1714 ); 1714 1715 1715 1716 // Prepare Customize Section objects to pass to JavaScript. … … final class WP_Customize_Manager { 1787 1788 } 1788 1789 1789 1790 /** 1791 * Returns a list of devices to allow previewing. 1792 * 1793 * @access public 1794 * @since 4.5.0 1795 * 1796 * @return array List of devices with labels and default setting. 1797 */ 1798 public function get_previewable_devices() { 1799 $devices = array( 1800 'desktop' => array( 1801 'label' => __( 'Enter desktop preview mode' ), 1802 'default' => true, 1803 ), 1804 'tablet' => array( 1805 'label' => __( 'Enter tablet preview mode' ), 1806 ), 1807 'mobile' => array( 1808 'label' => __( 'Enter mobile preview mode' ), 1809 ), 1810 ); 1811 1812 /** 1813 * Filter the available devices to allow previewing in the Customizer. 1814 * 1815 * @since 4.5.0 1816 * 1817 * @see WP_Customize_Manager::get_previewable_devices() 1818 * 1819 * @param array $devices List of devices with labels and default setting. 1820 */ 1821 $devices = apply_filters( 'customize_previewable_devices', $devices ); 1822 1823 return $devices; 1824 } 1825 1826 /** 1790 1827 * Register some default controls. 1791 1828 * 1792 1829 * @since 3.4.0 -
tests/phpunit/tests/customize/manager.php
diff --git tests/phpunit/tests/customize/manager.php tests/phpunit/tests/customize/manager.php index 4cf8d01..0b86b4c 100644
class Tests_WP_Customize_Manager extends WP_UnitTestCase { 425 425 $data = json_decode( $json, true ); 426 426 $this->assertNotEmpty( $data ); 427 427 428 $this->assertEqualSets( array( 'theme', 'url', 'browser', 'panels', 'sections', 'nonce', 'autofocus', 'documentTitleTmpl' ), array_keys( $data ) );428 $this->assertEqualSets( array( 'theme', 'url', 'browser', 'panels', 'sections', 'nonce', 'autofocus', 'documentTitleTmpl', 'previewableDevices' ), array_keys( $data ) ); 429 429 $this->assertEquals( $autofocus, $data['autofocus'] ); 430 430 $this->assertArrayHasKey( 'save', $data['nonce'] ); 431 431 $this->assertArrayHasKey( 'preview', $data['nonce'] ); … … class Tests_WP_Customize_Manager extends WP_UnitTestCase { 716 716 $this->assertEquals( $control, $result_control ); 717 717 $this->assertEquals( $control_id, $result_control->id ); 718 718 } 719 720 721 /** 722 * Testing the return values both with and without filter. 723 * 724 * @ticket 31195 725 */ 726 function test_get_previewable_devices() { 727 728 // Setup the instance. 729 $manager = new WP_Customize_Manager(); 730 731 // The default devices list. 732 $default_devices = array( 733 'desktop' => array( 734 'label' => __( 'Enter desktop preview mode' ), 735 'default' => true, 736 ), 737 'tablet' => array( 738 'label' => __( 'Enter tablet preview mode' ), 739 ), 740 'mobile' => array( 741 'label' => __( 'Enter mobile preview mode' ), 742 ), 743 ); 744 745 // Control test. 746 $devices = $manager->get_previewable_devices(); 747 $this->assertSame( $default_devices, $devices ); 748 749 // Adding the filter. 750 add_filter( 'customize_previewable_devices', array( $this, 'filter_customize_previewable_devices' ) ); 751 $devices = $manager->get_previewable_devices(); 752 $this->assertSame( $this->filtered_device_list(), $devices ); 753 754 // Clean up. 755 remove_filter( 'customize_previewable_devices', array( $this, 'filter_customize_previewable_devices' ) ); 756 } 757 758 /** 759 * Helper method for test_get_previewable_devices. 760 * 761 * @return array 762 */ 763 function filtered_device_list() { 764 return array( 765 'custom-device' => array( 766 'label' => __( 'Enter custom-device preview mode' ), 767 'default' => true, 768 ), 769 ); 770 } 771 772 /** 773 * Callback for the customize_previewable_devices filter. 774 * 775 * @param array $devices The list of devices. 776 * 777 * @return array 778 */ 779 function filter_customize_previewable_devices( $devices ) { 780 return $this->filtered_device_list(); 781 } 719 782 } 720 783 721 784 require_once ABSPATH . WPINC . '/class-wp-customize-setting.php'; -
tests/qunit/fixtures/customize-settings.js
diff --git tests/qunit/fixtures/customize-settings.js tests/qunit/fixtures/customize-settings.js index 39a49f5..85bd1ab 100644
window._wpCustomizeSettings = { 130 130 'login': 'http://example.org/wp-login.php?interim-login=1&customize-login=1', 131 131 'parent': 'http://example.org/wp-admin/', 132 132 'preview': 'http://example.org/' 133 }, 134 'previewableDevices': { 135 'desktop': { 136 'label': 'Enter desktop preview mode', 137 'default': true 138 }, 139 'tablet': { 140 'label': 'Enter tablet preview mode' 141 }, 142 'mobile': { 143 'label': 'Enter mobile preview mode' 144 } 133 145 } 134 146 }; 135 147 window._wpCustomizeControlsL10n = {}; -
tests/qunit/wp-admin/js/customize-controls.js
diff --git tests/qunit/wp-admin/js/customize-controls.js tests/qunit/wp-admin/js/customize-controls.js index 91a7d36..b274995 100644
jQuery( window ).load( function (){ 76 76 77 77 }; 78 78 79 module( 'Customizer Previewed Device' ); 80 test( 'Previewed device defaults to desktop.', function () { 81 equal( wp.customize.previewedDevice.get(), 'desktop' ); 82 } ); 83 79 84 module( 'Customizer Setting in Fixture' ); 80 85 test( 'Setting has fixture value', function () { 81 86 equal( wp.customize( 'fixture-setting' )(), 'Lorem Ipsum' );