diff --git a/wp-admin/css/customize-controls.css b/wp-admin/css/customize-controls.css index 90b6f14134..c760c2e69c 100644 --- a/wp-admin/css/customize-controls.css +++ b/wp-admin/css/customize-controls.css @@ -67,7 +67,8 @@ body { .control-section:hover .customize-section-title, .control-section .customize-section-title:hover, -.control-section.open .customize-section-title { +.control-section.open .customize-section-title, +.customize-section-title:focus { color: #fff; text-shadow: 0 -1px 0 #333; background: #808080; @@ -126,6 +127,11 @@ body { color: #999; } +#customize-info .customize-section-title:focus .preview-notice { + color: #ccc; + text-shadow: 0 -1px 0 #333; +} + #customize-info .theme-name { font-size: 20px; font-weight: 200; @@ -135,6 +141,11 @@ body { text-shadow: 0 1px 0 #fff; } +#customize-info .customize-section-title:focus .theme-name { + color: #fff; + text-shadow: 0 -1px 0 #333; +} + #customize-info .theme-screenshot { width: 258px; border: 1px solid #ccc; @@ -155,16 +166,19 @@ body { margin: 0; } +#customize-footer-actions .button-primary, #customize-header-actions .button-primary { float: right; margin-top: 10px; } +#customize-footer-actions .spinner, #customize-header-actions .spinner { margin-top: 16px; margin-right: 4px; } +.saving #customize-footer-actions .spinner, .saving #customize-header-actions .spinner { display: block; } diff --git a/wp-admin/css/wp-admin.css b/wp-admin/css/wp-admin.css index c56a0fb835..3fe39fbb7e 100644 --- a/wp-admin/css/wp-admin.css +++ b/wp-admin/css/wp-admin.css @@ -5571,8 +5571,7 @@ body.full-overlay-active { height: 100%; } -.wp-full-overlay-sidebar .wp-full-overlay-header, -.wp-full-overlay-sidebar .wp-full-overlay-footer { +.wp-full-overlay-sidebar .wp-full-overlay-header { position: absolute; left: 0; right: 0; @@ -5583,13 +5582,6 @@ body.full-overlay-active { margin: 0; } -.wp-full-overlay-sidebar .wp-full-overlay-header { - top: 0; - border-top: 0; - border-bottom: 1px solid #fff; - box-shadow: inset 0 -1px 0 0px #dfdfdf; -} - .wp-full-overlay-sidebar .wp-full-overlay-footer { bottom: 0; border-bottom: 0; @@ -5638,11 +5630,11 @@ body.full-overlay-active { display: block; width: 15px; height: 15px; - background: transparent url('../images/arrows.png') no-repeat 0 -72px; + background: transparent url('../images/arrows.png') no-repeat -1px -73px; } .wp-full-overlay.collapsed .collapse-sidebar-arrow { - background-position: 0 -108px; + background-position: -1px -109px; } .wp-full-overlay .collapse-sidebar-label { diff --git a/wp-admin/customize.php b/wp-admin/customize.php index 1ac1989196..87b9a324d4 100644 --- a/wp-admin/customize.php +++ b/wp-admin/customize.php @@ -67,25 +67,26 @@ do_action( 'customize_controls_print_scripts' );
+
is_theme_active() ? __( 'Save & Publish' ) : __( 'Save & Activate' ); - submit_button( $save_text, 'primary', 'save', false ); + submit_button( $save_text, 'primary save', 'save', false ); ?>
- + theme()->get_screenshot(); $cannot_expand = ! ( $screenshot || $wp_customize->theme()->get('Description') ); ?> -
+
-
+
' . $wp_customize->theme()->display('Name') . '' ); diff --git a/wp-admin/js/customize-controls.js b/wp-admin/js/customize-controls.js index fc8d8ebac4..a1ef1e58eb 100644 --- a/wp-admin/js/customize-controls.js +++ b/wp-admin/js/customize-controls.js @@ -94,11 +94,21 @@ else statuses.hide(); }; - + + var toggleFreeze = false; + // Support the .dropdown class to open/close complex elements - this.container.on( 'click', '.dropdown', function( event ) { + this.container.on( 'click focus', '.dropdown', function( event ) { event.preventDefault(); - control.container.toggleClass('open'); + + if (!toggleFreeze) + control.container.toggleClass('open'); + + // Don't want to fire focus and click at same time + toggleFreeze = true; + setTimeout(function () { + toggleFreeze = false; + }, 400); }); this.setting.bind( update ); @@ -210,7 +220,11 @@ }); // Bind tab switch events - this.library.children('ul').on( 'click', 'li', function( event ) { + this.library.children('ul').on( 'click keydown', 'li', function( event ) { + + if ( event.type === 'keydown' && 13 !== event.which ) + return; + var id = $(this).data('customizeTab'), tab = control.tabs[ id ]; @@ -225,7 +239,10 @@ }); // Bind events to switch image urls. - this.library.on( 'click', 'a', function( event ) { + this.library.on( 'click keydown', 'a', function( event ) { + if ( event.type === 'keydown' && 13 !== event.which ) // enter + return; + var value = $(this).data('customizeImageValue'); if ( value ) { @@ -814,11 +831,26 @@ }()); // Temporary accordion code. - $('.customize-section-title').click( function( event ) { + var accordionFrozen = false; + $('.customize-section-title').bind('click keydown', function( event ) { + + if ( event.type === 'keydown' && 13 !== event.which ) // enter + return; + var clicked = $( this ).parents( '.customize-section' ); - if ( clicked.hasClass('cannot-expand') ) + if ( clicked.hasClass('cannot-expand') || accordionFrozen ) return; + + // Don't want to fire focus and click at same time + accordionFrozen = true; + setTimeout(function () { + accordionFrozen = false; + }, 400); + + // Scroll up if on #customize-section-title_tagline + if ('customize-section-title_tagline' === clicked.attr('id')) + $('.wp-full-overlay-sidebar-content').scrollTop(0); $( '.customize-section' ).not( clicked ).removeClass( 'open' ); clicked.toggleClass( 'open' ); @@ -829,6 +861,21 @@ $('#save').click( function( event ) { previewer.save(); event.preventDefault(); + }).keydown( function( event ) { + if ( 9 === event.which ) // tab + return; + if ( 13 === event.which ) // enter + previewer.save(); + event.preventDefault(); + }); + + $('.back').keydown( function( event ) { + if ( 9 === event.which ) // tab + return; + var thisHref = $(this).attr('href'); + if ( 13 === event.which ) // enter + window.location = thisHref; + event.preventDefault(); }); $('.collapse-sidebar').click( function( event ) { @@ -948,6 +995,14 @@ }); api.trigger( 'ready' ); + + // Make sure left column gets focus + var topFocus = $('.back'); + topFocus.focus(); + setTimeout(function () { + topFocus.focus(); + }, 200); + }); -})( wp, jQuery ); \ No newline at end of file +})( wp, jQuery ); diff --git a/wp-includes/class-wp-customize-control.php b/wp-includes/class-wp-customize-control.php index a378c485a5..df118a3419 100644 --- a/wp-includes/class-wp-customize-control.php +++ b/wp-includes/class-wp-customize-control.php @@ -521,7 +521,7 @@ class WP_Customize_Image_Control extends WP_Customize_Upload_Control { label ); ?>
-
+
@@ -537,7 +537,7 @@ class WP_Customize_Image_Control extends WP_Customize_Upload_Control {
    tabs as $id => $tab ): ?> -
  • +
    • diff --git a/wp-includes/class-wp-customize-section.php b/wp-includes/class-wp-customize-section.php index 7aac15fe31..fb854110fe 100644 --- a/wp-includes/class-wp-customize-section.php +++ b/wp-includes/class-wp-customize-section.php @@ -80,7 +80,7 @@ class WP_Customize_Section { protected function render() { ?>
  • -

    title ); ?>

    +

    title ); ?>

      controls as $control )