WordPress.org

Make WordPress Core

Ticket #31195: 31195.2.diff

File 31195.2.diff, 6.0 KB (added by celloexpressions, 3 years ago)

Bring the plugin back to patch format, accessibility improvements.

  • 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        padding: 0;
     1342        box-shadow: none;
     1343        -webkit-transition: color .1s ease-in-out;
     1344        transition: color .1s ease-in-out;
     1345}
     1346
     1347#customize-footer-actions .devices button:focus {
     1348        box-shadow: none;
     1349        outline: none;
     1350}
     1351
     1352#customize-footer-actions .devices button:before {
     1353        display: inline-block;
     1354        -webkit-font-smoothing: antialiased;
     1355        font: normal 20px/30px "dashicons";
     1356        vertical-align: top;
     1357        margin: 3px 1px;
     1358        padding: 4px 8px;
     1359        border-radius: 100%;
     1360        color: #656a6f; /* #82878c; would be better but doesn't meet color contrast guidelines */
     1361}
     1362
     1363#customize-footer-actions .devices button.active:before {
     1364        color: #191e23;
     1365        box-shadow: 0 0 2px rgba(0, 0, 0, .75);
     1366}
     1367
     1368#customize-footer-actions .devices button:hover:before,
     1369#customize-footer-actions .devices button:focus:before {
     1370        color: #191e23;
     1371        box-shadow: 0 0 0 1px #5b9dd9,
     1372                    0 0 2px 1px rgba(30, 140, 190, .8);
     1373}
     1374
     1375.wp-core-ui .wp-full-overlay .collapse-sidebar:hover,
     1376.wp-core-ui .wp-full-overlay .collapse-sidebar:focus {
     1377        color: #191e23;
     1378}
     1379
     1380#customize-footer-actions .devices .preview-desktop:before {
     1381        content: "\f472";
     1382}
     1383
     1384#customize-footer-actions .devices .preview-tablet:before {
     1385        content: "\f471";
     1386}
     1387
     1388#customize-footer-actions .devices .preview-mobile:before {
     1389        content: "\f470";
     1390}
     1391
     1392@media screen and (max-width:1024px) {
     1393        #customize-footer-actions .devices {
     1394                display: none;
     1395        }
     1396}
     1397
     1398.collapsed #customize-footer-actions .devices button:before {
     1399        display: none;
     1400}
     1401
     1402.collapsed #customize-footer-actions .devices .preview-full {
     1403        left: 0;
     1404}
     1405
     1406.preview-mobile #customize-preview {
     1407        margin: auto 0 auto -160px;
     1408        width: 320px;
     1409        height: 480px;
     1410        max-height: 100%;
     1411        max-width: 100%;
     1412        left: 50%;
     1413}
     1414
     1415.preview-tablet #customize-preview {
     1416        margin: auto 0 auto -3in;
     1417        width: 6in;
     1418        height: 9in;
     1419        max-height: 100%;
     1420        max-width: 100%;
     1421        left: 50%;
     1422}
     1423
     1424
    13141425/* Responsive */
    13151426.customize-controls-preview-toggle {
    13161427        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                        <div class="devices">
     152                                <button type="button" class="preview-desktop active" aria-pressed="true" data-device="desktop"><span class="screen-reader-text"><?php _e( 'Enter desktop preview mode' ); ?></span></button>
     153                                <button type="button" class="preview-tablet" aria-pressed="false" data-device="tablet"><span class="screen-reader-text"><?php _e( 'Enter tablet preview mode' ); ?></span></button>
     154                                <button type="button" class="preview-mobile" aria-pressed="false" data-device="mobile"><span class="screen-reader-text"><?php _e( 'Enter mobile preview mode' ); ?></span></button>
     155                        </div>
    151156                        <button type="button" class="collapse-sidebar button-secondary" aria-expanded="true" aria-label="<?php esc_attr_e( 'Collapse Sidebar' ); ?>">
    152157                                <span class="collapse-sidebar-arrow"></span>
    153158                                <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                $( '#customize-footer-actions .devices button' ).on( 'click', function( event ) {
     3607                        var overlay = $( '.wp-full-overlay' ),
     3608                            device = $( event.currentTarget ).data( 'device' );
     3609                        $( '#customize-footer-actions .devices button' ).removeClass( 'active' )
     3610                                                                        .attr( 'aria-pressed', false );
     3611                        overlay.removeClass( 'preview-full preview-desktop preview-tablet preview-mobile' )
     3612                               .toggleClass( 'preview-' + device );
     3613                        $( event.currentTarget ).addClass( 'active' )
     3614                                                .attr( 'aria-pressed', true );
     3615                        api.previewedDevice = device;
     3616                });
     3617
    36053618                // Bind site title display to the corresponding field.
    36063619                if ( title.length ) {
    36073620                        $( '#customize-control-blogname input' ).on( 'input', function() {
  • src/wp-includes/class-wp-customize-manager.php

     
    16941694                        'autofocus' => array(),
    16951695                        'documentTitleTmpl' => $this->get_document_title_template(),
    16961696                );
     1697                $this->add_setting( 'previewedDevice', array( 'default' => 'desktop' ) );
    16971698
    16981699                // Prepare Customize Section objects to pass to JavaScript.
    16991700                foreach ( $this->sections() as $id => $section ) {