WordPress.org

Make WordPress Core

Ticket #31195: 31195.6.diff

File 31195.6.diff, 7.8 KB (added by adamsilverstein, 4 years ago)
  • src/wp-admin/css/customize-controls.css

     
    13111311        color: #00a0d2;
    13121312}
    13131313
     1314/* Device/preview size toggles */
     1315
     1316.wp-full-overlay {
     1317        background: #191e23;
     1318}
     1319
     1320#customize-preview.wp-full-overlay-main {
     1321        background-color: #f1f1f1;
     1322}
     1323
     1324.expanded #customize-footer-actions {
     1325        position: fixed;
     1326        bottom: 0;
     1327        left: 0;
     1328        width: 300px;
     1329        height: 45px;
     1330        border-top: 1px solid #ddd;
     1331}
     1332
     1333#customize-footer-actions .devices {
     1334        float: right;
     1335}
     1336
     1337#customize-footer-actions .devices button {
     1338        cursor: pointer;
     1339        background: transparent;
     1340        border: none;
     1341        height: 45px;
     1342        padding: 0 3px;
     1343        margin: 0 0 0 -4px;
     1344        box-shadow: none;
     1345        border-top: 1px solid transparent;
     1346        border-bottom: 4px solid transparent;
     1347        -webkit-transition: all .1s ease-in-out;
     1348        transition: all .1s ease-in-out;
     1349}
     1350
     1351#customize-footer-actions .devices button:focus {
     1352        box-shadow: none;
     1353        outline: none;
     1354}
     1355
     1356#customize-footer-actions .devices button:before {
     1357        display: inline-block;
     1358        -webkit-font-smoothing: antialiased;
     1359        font: normal 20px/30px "dashicons";
     1360        vertical-align: top;
     1361        margin: 3px 0;
     1362        padding: 4px 8px;
     1363        color: #656a6f;
     1364}
     1365
     1366#customize-footer-actions .devices button.active {
     1367        border-bottom-color: #191e23;
     1368}
     1369
     1370#customize-footer-actions .devices button:hover,
     1371#customize-footer-actions .devices button:focus {
     1372        background-color: #fff;
     1373        border-bottom-color: #0073aa;
     1374}
     1375
     1376#customize-footer-actions .devices button.active:before,
     1377#customize-footer-actions .devices button:hover:before,
     1378#customize-footer-actions .devices button:focus:before {
     1379        color: #191e23;
     1380}
     1381
     1382.wp-core-ui .wp-full-overlay .collapse-sidebar:hover,
     1383.wp-core-ui .wp-full-overlay .collapse-sidebar:focus {
     1384        color: #191e23;
     1385}
     1386
     1387#customize-footer-actions .devices .preview-desktop:before {
     1388        content: "\f472";
     1389}
     1390
     1391#customize-footer-actions .devices .preview-tablet:before {
     1392        content: "\f471";
     1393}
     1394
     1395#customize-footer-actions .devices .preview-mobile:before {
     1396        content: "\f470";
     1397}
     1398
     1399@media screen and (max-width:1024px) {
     1400        #customize-footer-actions .devices {
     1401                display: none;
     1402        }
     1403}
     1404
     1405.collapsed #customize-footer-actions .devices button:before {
     1406        display: none;
     1407}
     1408
     1409.collapsed #customize-footer-actions .devices .preview-full {
     1410        left: 0;
     1411}
     1412
     1413.preview-mobile #customize-preview {
     1414        margin: auto 0 auto -160px;
     1415        width: 320px;
     1416        height: 480px;
     1417        max-height: 100%;
     1418        max-width: 100%;
     1419        left: 50%;
     1420}
     1421
     1422.preview-tablet #customize-preview {
     1423        margin: auto 0 auto -3in;
     1424        width: 6in;
     1425        height: 9in;
     1426        max-height: 100%;
     1427        max-width: 100%;
     1428        left: 50%;
     1429}
     1430
    13141431.widget-reorder-nav span,
    13151432.menu-item-reorder-nav button {
    13161433        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 ( $previewable_devices as $device => $settings ) : ?>
     155                                        <?php
     156                                        $active = ! empty( $settings['default'] );
     157                                        $class = "preview-$device";
     158                                        if ( $active ) {
     159                                                $class .= ' active';
     160                                        }
     161                                        $aria_pressed = $active ? 'true' : 'false';
     162                                        ?>
     163                                        <button type="button" class="<?php echo esc_attr( $class ); ?>" aria-pressed="<?php echo esc_attr( $aria_pressed ) ?>" data-device="<?php echo esc_attr( $device ); ?>">
     164                                                <span class="screen-reader-text"><?php echo esc_html( $settings['label'] ); ?></span>
     165                                        </button>
     166                                <?php endforeach; ?>
     167                        </div>
     168                        <?php endif; ?>
    151169                        <button type="button" class="collapse-sidebar button-secondary" aria-expanded="true" aria-label="<?php esc_attr_e( 'Collapse Sidebar' ); ?>">
    152170                                <span class="collapse-sidebar-arrow"></span>
    153171                                <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                // Preview size toggles.
     3610                api.previewedDevice = new api.Value();
     3611                footerActions.find( '.devices button' ).on( 'click', function( event ) {
     3612                        api.previewedDevice.set( $( event.currentTarget ).data( 'device' ) );
     3613                });
     3614
     3615                api.previewedDevice.bind( function( newDevice ) {
     3616                        var overlay = $( '.wp-full-overlay' ), devices = '';
     3617                        footerActions.find( '.devices button' )
     3618                                .removeClass( 'active' )
     3619                                .attr( 'aria-pressed', false );
     3620                        $.each( api.settings.previewableDevices, function( device ) {
     3621                                devices = devices + ' preview-' + device;
     3622                        } );
     3623                        overlay
     3624                                .removeClass( devices )
     3625                                .addClass( 'preview-' + newDevice );
     3626                        footerActions.find( '.devices .preview-' + newDevice )
     3627                                .addClass( 'active' )
     3628                                .attr( 'aria-pressed', true );
     3629                } );
     3630
    36083631                // Bind site title display to the corresponding field.
    36093632                if ( title.length ) {
    36103633                        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         * @return array List of devices with labels and default setting.
     1796         */
     1797        public function get_previewable_devices() {
     1798                $devices = array(
     1799                        'desktop' => array(
     1800                                'label' => __( 'Enter desktop preview mode' ),
     1801                                'default' => true,
     1802                        ),
     1803                        'tablet' => array(
     1804                                'label' => __( 'Enter tablet preview mode' ),
     1805                        ),
     1806                        'mobile' => array(
     1807                                'label' => __( 'Enter mobile preview mode' ),
     1808                        ),
     1809                );
     1810
     1811                /**
     1812                 * Filter the available devices to allow previewing in the Customizer.
     1813                 *
     1814                 * @since 4.5.0
     1815                 *
     1816                 * @see WP_Customize_Manager::get_previewable_devices()
     1817                 *
     1818                 * @param array $devices List of devices with labels and default setting.
     1819                 */
     1820                $devices = apply_filters( 'customize_previewable_devices', $devices );
     1821                return $devices;
     1822        }
     1823
     1824        /**
    17901825         * Register some default controls.
    17911826         *
    17921827         * @since 3.4.0