WordPress.org
Get WordPress

Make WordPress Core

Ticket #31195: 31195.10.diff

File 31195.10.diff, 12.6 KB (added by michaelarestad, 9 years ago)

  • src/wp-admin/css/colors/_admin.scss

     
    487487        color: $menu-highlight-text;
    488488}
    489489
     490#customize-footer-actions .devices button:focus {
     491        border-bottom-color: $highlight-color;
     492}
     493
    490494/* Responsive Component */
    491495
    492496div#wp-responsive-toggle a:before {

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

     
    610610#customize-preview iframe {
    611611        width: 100%;
    612612        height: 100%;
     613        position: absolute;
    613614}
    614615
    615616.wp-full-overlay-sidebar {
    … …  
    13111312        color: #00a0d2;
    13121313}
    13131314
     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
    13141436.widget-reorder-nav span,
    13151437.menu-item-reorder-nav button {
    13161438        position: relative;

  • src/wp-admin/customize.php

     
    137137                                        <button class="customize-help-toggle dashicons dashicons-editor-help" aria-expanded="false"><span class="screen-reader-text"><?php _e( 'Help' ); ?></span></button>
    138138                                </div>
    139139                                <div class="customize-panel-description"><?php
    140                                         _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.' );
     140                                        _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.' );
    141141                                ?></div>
    142142                        </div>
    143143
    … …  
    148148                </div>
    149149
    150150                <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; ?>
    151171                        <button type="button" class="collapse-sidebar button-secondary" aria-expanded="true" aria-label="<?php esc_attr_e( 'Collapse Sidebar' ); ?>">
    152172                                <span class="collapse-sidebar-arrow"></span>
    153173                                <span class="collapse-sidebar-label"><?php _e( 'Collapse' ); ?></span>

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

     
    32293229                        overlay = body.children( '.wp-full-overlay' ),
    32303230                        title = $( '#customize-info .panel-title.site-title' ),
    32313231                        closeBtn = $( '.customize-controls-close' ),
    3232                         saveBtn = $( '#save' );
     3232                        saveBtn = $( '#save' ),
     3233                        footerActions = $( '#customize-footer-actions' );
    32333234
    32343235                // Prevent the form from saving when enter is pressed on an input or select element.
    32353236                $('#customize-controls').on( 'keydown', function( e ) {
    … …  
    36053606                        event.preventDefault();
    36063607                });
    36073608
     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
    36083649                // Bind site title display to the corresponding field.
    36093650                if ( title.length ) {
    36103651                        api( 'blogname', function( setting ) {

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

     
    17101710                        'nonce'    => $this->get_nonces(),
    17111711                        'autofocus' => array(),
    17121712                        'documentTitleTmpl' => $this->get_document_title_template(),
     1713                        'previewableDevices' => $this->get_previewable_devices(),
    17131714                );
    17141715
    17151716                // Prepare Customize Section objects to pass to JavaScript.
    … …  
    17871788        }
    17881789
    17891790        /**
     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        /**
    17901827         * Register some default controls.
    17911828         *
    17921829         * @since 3.4.0

  • tests/phpunit/tests/customize/manager.php

     
    425425                $data = json_decode( $json, true );
    426426                $this->assertNotEmpty( $data );
    427427
    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 ) );
    429429                $this->assertEquals( $autofocus, $data['autofocus'] );
    430430                $this->assertArrayHasKey( 'save', $data['nonce'] );
    431431                $this->assertArrayHasKey( 'preview', $data['nonce'] );
    … …  
    716716                $this->assertEquals( $control, $result_control );
    717717                $this->assertEquals( $control_id, $result_control->id );
    718718        }
     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        }
    719782}
    720783
    721784require_once ABSPATH . WPINC . '/class-wp-customize-setting.php';

  • tests/qunit/fixtures/customize-settings.js

     
    130130                'login': 'http://example.org/wp-login.php?interim-login=1&customize-login=1',
    131131                'parent': 'http://example.org/wp-admin/',
    132132                '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                }
    133145        }
    134146};
    135147window._wpCustomizeControlsL10n = {};

  • tests/qunit/wp-admin/js/customize-controls.js

     
    7676
    7777        };
    7878
     79        module( 'Customizer Previewed Device' );
     80        test( 'Previewed device defaults to desktop.', function () {
     81                equal( wp.customize.previewedDevice.get(), 'desktop' );
     82        } );
     83
    7984        module( 'Customizer Setting in Fixture' );
    8085        test( 'Setting has fixture value', function () {
    8186                equal( wp.customize( 'fixture-setting' )(), 'Lorem Ipsum' );