WordPress.org

Make WordPress Core

Ticket #31195: 31195.4.diff

File 31195.4.diff, 7.3 KB (added by celloexpressions, 4 years ago)

Docs fixes, white hover.

  • 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: #fff;
     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 esc_attr_e( $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

     
    36053605                        event.preventDefault();
    36063606                });
    36073607
     3608                // Preview size toggles.
     3609                api.previewedDevice = new api.Value();
     3610                $( '#customize-footer-actions .devices button' ).on( 'click', function( event ) {
     3611                        api.previewedDevice.set( $( event.currentTarget ).data( 'device' ) );
     3612                });
     3613
     3614                api.previewedDevice.bind( function( newDevice ) {
     3615                        var overlay = $( '.wp-full-overlay' ), devices = '';
     3616                        $( '#customize-footer-actions .devices button' ).removeClass( 'active' )
     3617                                                                        .attr( 'aria-pressed', false );
     3618                        $.each( api.settings.previewableDevices, function( device, settings ) {
     3619                                devices = devices + ' preview-' + device;
     3620                        } );
     3621                        overlay.removeClass( devices )
     3622                               .addClass( 'preview-' + newDevice );
     3623                        $( '#customize-footer-actions .devices' ).find( '.preview-' + newDevice ).addClass( 'active' )
     3624                                                                                                 .attr( 'aria-pressed', true );
     3625                } );
     3626
    36083627                // Bind site title display to the corresponding field.
    36093628                if ( title.length ) {
    36103629                        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                 * Filter the available devices to allow previewing in the Customizer.
     1812                 *
     1813                 * @since 4.5.0
     1814                 *
     1815                 * @see WP_Customize_Manager::get_previewable_devices()
     1816                 *
     1817                 * @param array $devices List of devices with labels and default setting.
     1818                 */
     1819                $devices = apply_filters( 'customize_previewable_devices', $devices );
     1820                return $devices;
     1821        }
     1822
     1823        /**
    17901824         * Register some default controls.
    17911825         *
    17921826         * @since 3.4.0