WordPress.org

Make WordPress Core

Ticket #31195: 31195.3.diff

File 31195.3.diff, 6.9 KB (added by celloexpressions, 3 years ago)

Finalized design props folletto, implementation adjustments props westonruter.

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

     
    14901490}
    14911491
    14921492
     1493/* Device/preview size toggles */
     1494
     1495.wp-full-overlay {
     1496        background: #191e23;
     1497}
     1498
     1499#customize-preview.wp-full-overlay-main {
     1500        background-color: #f1f1f1;
     1501}
     1502
     1503.expanded #customize-footer-actions {
     1504        position: fixed;
     1505        bottom: 0;
     1506        left: 0;
     1507        width: 300px;
     1508        height: 45px;
     1509        border-top: 1px solid #ddd;
     1510}
     1511
     1512#customize-footer-actions .devices {
     1513        float: right;
     1514}
     1515
     1516#customize-footer-actions .devices button {
     1517        cursor: pointer;
     1518        background: transparent;
     1519        border: none;
     1520        height: 45px;
     1521        padding: 0 3px;
     1522        margin: 0 0 0 -4px;
     1523        box-shadow: none;
     1524        border-top: 1px solid transparent;
     1525        border-bottom: 4px solid transparent;
     1526        -webkit-transition: all .1s ease-in-out;
     1527        transition: all .1s ease-in-out;
     1528}
     1529
     1530#customize-footer-actions .devices button:focus {
     1531        box-shadow: none;
     1532        outline: none;
     1533}
     1534
     1535#customize-footer-actions .devices button:before {
     1536        display: inline-block;
     1537        -webkit-font-smoothing: antialiased;
     1538        font: normal 20px/30px "dashicons";
     1539        vertical-align: top;
     1540        margin: 3px 0;
     1541        padding: 4px 8px;
     1542        color: #656a6f;
     1543}
     1544
     1545#customize-footer-actions .devices button.active {
     1546        border-bottom-color: #191e23;
     1547}
     1548
     1549#customize-footer-actions .devices button:hover,
     1550#customize-footer-actions .devices button:focus {
     1551        background-color: #ddd;
     1552        border-bottom-color: #0073aa;
     1553}
     1554
     1555#customize-footer-actions .devices button.active:before,
     1556#customize-footer-actions .devices button:hover:before,
     1557#customize-footer-actions .devices button:focus:before {
     1558        color: #191e23;
     1559}
     1560
     1561.wp-core-ui .wp-full-overlay .collapse-sidebar:hover,
     1562.wp-core-ui .wp-full-overlay .collapse-sidebar:focus {
     1563        color: #191e23;
     1564}
     1565
     1566#customize-footer-actions .devices .preview-desktop:before {
     1567        content: "\f472";
     1568}
     1569
     1570#customize-footer-actions .devices .preview-tablet:before {
     1571        content: "\f471";
     1572}
     1573
     1574#customize-footer-actions .devices .preview-mobile:before {
     1575        content: "\f470";
     1576}
     1577
     1578@media screen and (max-width:1024px) {
     1579        #customize-footer-actions .devices {
     1580                display: none;
     1581        }
     1582}
     1583
     1584.collapsed #customize-footer-actions .devices button:before {
     1585        display: none;
     1586}
     1587
     1588.collapsed #customize-footer-actions .devices .preview-full {
     1589        left: 0;
     1590}
     1591
     1592.preview-mobile #customize-preview {
     1593        margin: auto 0 auto -160px;
     1594        width: 320px;
     1595        height: 480px;
     1596        max-height: 100%;
     1597        max-width: 100%;
     1598        left: 50%;
     1599}
     1600
     1601.preview-tablet #customize-preview {
     1602        margin: auto 0 auto -3in;
     1603        width: 6in;
     1604        height: 9in;
     1605        max-height: 100%;
     1606        max-width: 100%;
     1607        left: 50%;
     1608}
     1609
     1610
    14931611/* Responsive */
    14941612.customize-controls-preview-toggle {
    14951613        display: none;
  • 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 if ( $wp_customize->get_previewable_devices() ) : ?>
     152                        <div class="devices">
     153                                <?php foreach ( $wp_customize->get_previewable_devices() as $device => $settings ) : ?>
     154                                        <button type="button" class="preview-<?php echo $device; if ( isset( $settings['default'] ) && $settings['default'] ) { echo ' active" aria-pressed="true"'; } else { echo '" aria-pressed="false"'; } ?> data-device="<?php echo $device; ?>">
     155                                                <span class="screen-reader-text"><?php echo $settings['label']; ?></span>
     156                                        </button>
     157                                <?php endforeach; ?>
     158                        </div>
     159                        <?php endif; ?>
    151160                        <button type="button" class="collapse-sidebar button-secondary" aria-expanded="true" aria-label="<?php esc_attr_e( 'Collapse Sidebar' ); ?>">
    152161                                <span class="collapse-sidebar-arrow"></span>
    153162                                <span class="collapse-sidebar-label"><?php _e( 'Collapse' ); ?></span>
  • src/wp-admin/js/customize-controls.js

     
    36023602                        event.preventDefault();
    36033603                });
    36043604
     3605                // Preview size toggles.
     3606                api.previewedDevice = new api.Value();
     3607                $( '#customize-footer-actions .devices button' ).on( 'click', function( event ) {
     3608                        api.previewedDevice.set( $( event.currentTarget ).data( 'device' ) );
     3609                });
     3610
     3611                api.previewedDevice.bind( function( newDevice ) {
     3612                        var overlay = $( '.wp-full-overlay' ), devices = '';
     3613                        $( '#customize-footer-actions .devices button' ).removeClass( 'active' )
     3614                                                                        .attr( 'aria-pressed', false );
     3615                        $.each( api.settings.previewableDevices, function( device, settings ) {
     3616                                devices = devices + ' preview-' + device;
     3617                        } );
     3618                        overlay.removeClass( devices )
     3619                               .addClass( 'preview-' + newDevice );
     3620                        $( '#customize-footer-actions .devices' ).find( '.preview-' + newDevice ).addClass( 'active' )
     3621                                                                                                 .attr( 'aria-pressed', true );
     3622                } );
     3623
    36053624                // Bind site title display to the corresponding field.
    36063625                if ( title.length ) {
    36073626                        api( 'blogname', function( setting ) {
  • src/wp-includes/class-wp-customize-manager.php

     
    17001700                        ),
    17011701                        'autofocus' => array(),
    17021702                        'documentTitleTmpl' => $this->get_document_title_template(),
     1703                        'previewableDevices' => $this->get_previewable_devices(),
    17031704                );
    17041705
    17051706                // Prepare Customize Section objects to pass to JavaScript.
     
    17771778        }
    17781779
    17791780        /**
     1781         * Get previewable devices.
     1782         *
     1783         * @since 4.5.0
     1784         */
     1785        function get_previewable_devices() {
     1786                $devices = array(
     1787                        'desktop' => array(
     1788                                'label' => __( 'Enter desktop preview mode' ),
     1789                                'default' => true,
     1790                        ),
     1791                        'tablet' => array(
     1792                                'label' => __( 'Enter tablet preview mode' ),
     1793                        ),
     1794                        'mobile' => array(
     1795                                'label' => __( 'Enter mobile preview mode' ),
     1796                        ),
     1797                );
     1798                $devices = apply_filters( 'customize_previewable_devices', $devices );
     1799                return $devices;
     1800        }
     1801
     1802        /**
    17801803         * Register some default controls.
    17811804         *
    17821805         * @since 3.4.0