Make WordPress Core

Changeset 36532


Ignore:
Timestamp:
02/16/2016 01:56:13 AM (8 years ago)
Author:
westonruter
Message:

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.

Location:
trunk
Files:
8 edited

Legend:

Unmodified
Added
Removed
  • trunk/src/wp-admin/css/colors/_admin.scss

    r35265 r36532  
    488488}
    489489
     490#customize-footer-actions .devices button:focus {
     491    border-bottom-color: $highlight-color;
     492}
     493
    490494/* Responsive Component */
    491495
  • trunk/src/wp-admin/css/customize-controls.css

    r36291 r36532  
    611611    width: 100%;
    612612    height: 100%;
     613    position: absolute;
    613614}
    614615
     
    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 {
  • trunk/src/wp-admin/customize.php

    r36422 r36532  
    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>
  • trunk/src/wp-admin/js/customize-controls.js

    r36414 r36532  
    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.
     
    36053606            event.preventDefault();
    36063607        });
     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        } );
    36073648
    36083649        // Bind site title display to the corresponding field.
  • trunk/src/wp-includes/class-wp-customize-manager.php

    r36414 r36532  
    17111711            'autofocus' => array(),
    17121712            'documentTitleTmpl' => $this->get_document_title_template(),
     1713            'previewableDevices' => $this->get_previewable_devices(),
    17131714        );
    17141715
     
    17851786        </script>
    17861787        <?php
     1788    }
     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;
    17871824    }
    17881825
  • trunk/tests/phpunit/tests/customize/manager.php

    r36414 r36532  
    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'] );
     
    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
  • trunk/tests/qunit/fixtures/customize-settings.js

    r34563 r36532  
    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};
  • trunk/tests/qunit/wp-admin/js/customize-controls.js

    r35231 r36532  
    7676
    7777    };
     78
     79    module( 'Customizer Previewed Device' );
     80    test( 'Previewed device defaults to desktop.', function () {
     81        equal( wp.customize.previewedDevice.get(), 'desktop' );
     82    } );
    7883
    7984    module( 'Customizer Setting in Fixture' );
Note: See TracChangeset for help on using the changeset viewer.